以前の記事でワイヤーフレームを作成する目的は、情報設計と世界観の設計の大きく2つあると紹介しました。
今回は、特に情報設計におけるワイヤーフレーム作成の目的やプロセスについて、詳細にご説明します。
目次 [開く]
情報設計フェーズにおけるワイヤーフレームの目的
情報設計のフェーズにおけるワイヤーフレームの目的は、各ページのコンテンツ・機能などの情報要素と、伝え方の優先順位が、サイトやアプリケーションで達成したい目的や利用状況から適切かどうか、最終的な判断をおこなうことです。
これまでページ単位のコンテンツ・機能についてテキストをベースに検討してきたものが、目に見える形になることで、実際に使いやすいかどうかの判断をすることができます。
これにより大きく以下２つのメリットがあります。
- スタイリングに入る前に、そのページで何ができてどのように機能するか把握できるため、制作の手戻りを減らせる
- 画面間の移動や状態の遷移を確認することができ、意図したユーザー体験が実現できるかの検証を行うことができる
ワイヤーフレームで定義する内容
前述のワイヤーフレームを作成する目的やメリットを実現するために、ワイヤーフレームでは画面単位でコンテンツ・機能等の情報要素、ナビゲーション（サイト導線）、論理構造（各情報要素の優先順位）が定義されます。
その際、タイポグラフィや色彩計画、詳細なレイアウトなどグラフィックデザインは行わず、グレースケールで定義します。これは、情報設計フェーズでのワイヤーフレームが、スタイリング上の判断を行うのではなく、あくまで情報設計上の判断をするために作成されるものだからです。
詳細なレイアウトは行わないとはいっても、画面の分割（エリア定義）やエリア・オブジェクトの画面内の占有率については、最低限決めなければいけません。これは前工程で収集・分析したユーザーニーズやビジネスニーズをもとに決定します。
例えば、ファッション系のECサイトにおいて商品をじっくり見たいというユーザーニーズがあれば、商品詳細画面において商品画像の画面占有率を大きくします。
占有率の大きさについて、厳密にどのくらいの大きさにするか等、最終的にワイヤーフレームをどの忠実度で再現するかは、プロジェクトの状況やフェーズによって使い分けます。事前にプロジェクトメンバーと議論し、ワイヤーフレームをどの忠実度にするか決定しておくと作成はスムーズに進むでしょう。
プロセス
作成のプロセスについて具体的に見ていきましょう。プロセス全体は大きく３つの工程からなります。
1.ページタイプの決定
2.画面内の情報要素の優先順位の決定
3.画面レイアウト
1.ページタイプの決定
前の工程で作成した、オブジェクトモデルやサイトマップをインプットにして進めていきます。
オブジェクトモデルやサイトマップについての詳細は以下をご参照ください。
前工程では、各画面（やビュー）とその画面に含まれる情報要素が定義されています。ワイヤーフレーム作成の最初のステップとして、画面毎に以下のページタイプを決定します。
ページタイプは、画面の目的に合わせてパターン化されている一般的なレイアウトの型です。広く利用されている一般的な型をベースに設計することで、使い勝手を最低限担保できるようにします。
- ポータル型：遷移の入り口に使われます。遷移するためのリンクが複数並びます
- リスト型：一覧で情報を選択・確認させたい場合に使われます
- コンテンツ型（個別の情報詳細）：情報の詳細を表示させたい場合に使われます
- 機能型（フォームや検索）ページ：何かしらのアクションをさせたい場合に使われます
これらのページタイプは、対象の画面におけるユーザーニーズ、ビジネスニーズを踏まえて決定します。
例えば、先ほど例に出したファッション系のECサイトにおける商品一覧画面において、商品画像を一覧上で見ながら比較したいというユーザーニーズがあるとすれば、リスト型ページを採用します。
この時、画面単体で考えるのではなく、ユーザーの操作の一連の流れから最適になるように考えることがポイントです。数量限定商品などがあり一覧上から即座に購入したいというニーズが想定される場合は、リスト型ページでも購入のアクションが必要になること（リスト型と機能型のハイブリット）もあるでしょう。
実現したい理想のユーザー体験から、最適なページタイプを検討します。
2.画面内の情報要素の優先順位の決定
ページタイプが決まったら、画面に含める情報要素（オブジェクト、コンテンツ、機能）の優先順位を、ユーザーニーズ・ビジネスニーズ、実現したい体験から決定します。
例えば、ファッション系ECサイトの商品詳細画面であれば、商品名・商品画像・商品カテゴリ・価格・タグ・商品レビュー・購入ボタン・お気に入りボタン等の要素を、対象ページの目的から考えて、ユーザーにとって重要な順に決めていきます。
優先順位をつける際、ホワイトボードやホワイトボードツール等で、すべての情報要素を付箋で洗い出しておき、並び替えながら優先順位を決めると考えやすいです。
3.画面レイアウト
決定したページタイプと情報要素の優先順位をもとに、ページに情報要素を配置していきます。
ページには大きく、グローバルエリア、ローカルエリア、コンテンツエリアがあります。各エリアの占有率、配置、エリア内での情報要素の配置・占有率について、以下のレイアウトのルールに沿って定義します。
- 表示順序：一番上にあるものが重要に見えます。また視線の自然な動きの順も優先度を決定します
- 密度：要素が詰まり密度が高い状態は注意をひきます
- 色：コントラストの強い配色は注意をひきます
- 位置とサイズ：画面の中央にある、大きいものほど重要に見えます
- リズム：リストやグリッドなどの繰り返し要素、余白を用いてオブジェクトを際立たせると注意をひきます
表示順序に関して視線誘導の詳細な定義は以下記事をご参照ください。
機能の表現についてもページタイプ同様に一般的な型を利用することで、ユーザーの使い勝手を最低限担保するようにします。以下に代表的なものを挙げますが、詳細は以下の記事をご参照ください。
- コマンドメニュー
- プッシュボタン
- アイコンボタン
- ラジオボタン
- ドロップダウンメニュー
- チェックボックス
- テキストボックス
- リストボックス/グリッドテーブル
- スライダー
- タブ
- ラベル
おわりに
このようにワイヤーフレームは目的に応じて最適な形式やプロセスが異なります。
適切に使い分けて、より品質の高い設計に繋げましょう。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
