顧客は、提案された機能がどのように動作するかを理解する必要があります。しかし、その機能を単に口頭や文章で説明するだけでは、彼らの想像力にとって非常に難しい場合があります。ウェアウエアフレームは、システム設計のアイデアを顧客と確認するための「見せること、言わないこと」の視覚的マックアップツールとして非常に役立ちます。
ウェアウエアフレームとは何か？
ウェアウエアフレームは、システムの画面のスケッチであり、時としてブループリントや骨格と呼ばれます。顧客にシステム設計のアイデアを提示・説明する目的で作成され、最終的に提案されたアイデアについて合意に至るものです。
ウェアウエアフレームは、提案された機能に関連する「ちょうどよい」情報のみを示します。各ウェアウエアフレームは、画面の構成要素を表す基本的なグラフィック要素、または画面構成要素のプレースホルダーで構成されています。ウェアウエアフレームは画面のレイアウトやコンテンツの配置を示します。最終的な画面がどのように見えるかではなく、画面が何をするのか、ユーザーがシステムとどのようにやり取りして自分のニーズを達成するかに焦点を当てます。
さらに進む前に、youtube.comをもとに作成されたウェアウエアフレームを見てみましょう。
ご覧の通り、ウェアウエアフレームは非常にシンプルで直感的です。誰もが簡単に理解できます。開発チームがユーザーがウェブサイトとどのようにやり取りするかを簡単に説明するのに役立ちます。
ウェアウエアフレームはあくまでブループリントにすぎない
ウェアウエアフレームはユーザーインターフェースの低解像度版にすぎず、実際の画面の表現を目的としているわけではありません。ウェアウエアフレームは、画面の機能性、ユーザーの操作、画面遷移を示すことを目的としており、画面の構成要素がどのように見えるべきか、どのように振る舞うべきかを明示的に指定することなく、最高の使いやすさを実現することを目的としています。
ウェアウエアフレームの例
ここに、ホームページ用のウェブウェアウエアフレームの例を示します：
ここに、Androidアプリ用のウェアウエアフレームの例をいくつか示します：
 |
 |
 |
ここに、iPadアプリ用のiPadウェアウエアフレームの例を示します：
ここに、iPhoneアプリ用のiPhoneウェアウエアフレームの例を示します：
最後に、デスクトップアプリ用のウェアウエアフレームの例を示します：
ウェアウエアフレームを使用する利点
ユーザーインターフェースを明確化する
顧客はスライダー、フリップボックス、ブートストラップなどの技術的な画面設計用語を理解できない場合があります。ウェアウエアフレームは誰もが理解できる基本的なグラフィック要素で構成されており、顧客が機能がどのように動作するか、システムとどのようにやり取りすれば望みを達成できるかを理解するのに役立ちます。
使いやすさの早期検討
現在のすべてのソフトウェアにおいて、ユーザー体験（UX）は重要な検討事項です。要件収集の段階でウェアウエアフレームを使用することで、ユーザー体験の検討をプロジェクトの初期段階に持ち込むことができます。プロトタイプを開発したり、実際の画面設計を描いたりせずに、ユーザーはシステムがどのように動作するかを体験できます。
コスト効率が良い
完全で高精細な画面設計を作成するには時間と専門知識が必要で、結果として大きな費用が発生します。ウェアウエアフレームは、基本的な画面スケッチを作成するための迅速かつ低コストな方法です。また、スケッチの微調整や完全な見直しも簡単で低コストです。
変更に積極的になる
デザインの変更は避けられないものです。完全なシステムのマックアップやプロトタイプを使ってデザインのアイデアを確認すると、すでに多くの作業が完了しており、大幅なリワークを伴うため、追加の時間・労力・費用が発生します。そのような状況では、顧客や開発チームは懸念を表明したり、変更を要請したりしにくくなります。一方、ウェアウエアフレームを作成・修正するにははるかに少ない時間しかかかりません。誰もが変更の要請や実施に積極的になります。
顧客の関与
ウェアウエアフレームは粗く、ゆるいものであるため、顧客がブレインストーミングを行い、意見を述べる余地を与えます。また、ウェアウエアフレームの改善にかかる時間も短いため、顧客はフィードバックを積極的に提供し、最終設計の承認をより受けやすくなります。
ウェアウエアフレームを効果的に使うには？
ウェアウエアフレームの使用は開発チームと顧客の両方に多くの利点をもたらしますが、これは賢く適切に使用する場合に限ります。ウェアウエアフレームの典型的な誤用は、画面設計の代替品として扱うことです。これにより、制作や改善が難しくコストがかかり、ウェアウエアフレームの有用性が低下します。このセクションでは、効果的なウェアウエアフレーム作成のヒントをいくつか紹介します。
- ウェアウエアフレームはシンプルで、必要なだけの情報に留まることが意図されています。シンプルであることで、迅速かつ容易に作成でき、捨てて再作成することにためらう必要がありません。低解像度の表現は、より包括的で伝わりやすいという利点もあります。したがって、描画の美しさを追求したり、配置を整えたり、装飾的なフォントを使用したりするのに時間をかける必要はありません。
- ウェアウエアフレームでは、実際のコンテンツを表示する代わりに、大きなテキスト領域（実際の文脈）をテキストのプレースホルダーで置き換えることができます。これにより、不要なコンテンツ準備に時間を費やすことを避け、読者がテキスト内容に気を取られるのを防ぎます。ただし、テキストの表示が必要な場合は、ダミーテキストを配置することを検討してください。インターネット上で簡単にダミーテキスト生成ツールを見つけることができます。
- アノテーションの使用により、要素（例：「会社ロゴ」）を説明したり、その動作に関連する内容（例：「5秒後に非表示」）を説明することができます。必要に応じて使用してください。ただし、ワイヤーフレームの各要素をすべて文書化しようとしないでください。必要がある場合にのみアノテーションを使用してください。
- ワイヤーフレームは手書きすることもできますが、通常はソフトウェアを使って作成することで、作業の効率化と管理のしやすさが向上します。また、一部のワイヤーフレームソフトウェアは、紙と鉛筆では実現できない機能を提供しています。以下にその3つを紹介します：
- ステート – Visual Paradigmのワイヤーフレームツールは、ステートの概念をサポートしており、既存のワイヤーフレームをもとに子ワイヤーフレームを作成できます。これにより、類似した子ワイヤーフレームの連続した画面フローを作成する際の時間短縮が可能になるだけでなく、関連する子ワイヤーフレームの修正も格段に簡単になります（初期状態のワイヤーフレームで変更を行った場合、その変更はすべての子ステートワイヤーフレームに反映されます）
- ストーリーボード – ストーリーボードは、特定のシナリオの画面フローを提示します。これにより、ワイヤーフレームの管理がしやすくなり、プレゼンテーションも格段に簡単になります。
- ユーザーストーリーによるワイヤーフレームの管理 – ユーザーストーリーは、ユーザーの懸念や要件を記録するためのアジャイルツールです。ユーザーストーリーのシナリオにワイヤーフレームを含めることで、ユーザーがそのユーザーストーリーで述べられている仕事の一部をどのように機能を使用して行うかが明確になります。また、開発者がユーザーストーリーの実装を開始する際には、ワイヤーフレームを確認することでユーザーの期待についてのヒントを得ることができます。
English
Arabic
Chinese (Simplified)
Dutch
French
German
Italian
Japanese
Korean
Portuguese
Russian
Spanish