画面設計 (ワイヤーフレーム): 画面構成を作る

ワイヤーフレームとは

ワイヤーは「線」、フレームは「枠」という意味です。その言葉どおり、ワイヤーフレームとは webサイトの完成イメージを簡単な線と枠で表現する「設計図」のこと。

ビジュアル的な詳細を決める前に作成するので、ワイヤーフレームの作成段階では大きな仕様変更も可能です。
シンプルなページの中にテキストや画像などの要素を効果的に配置し、目的を達成するための構成を視覚的に表現しています。

基本的にワイヤーフレームにはグラフィック要素は含まず、家でたとえると「骨組み」のような状態です。webサイト上のパーツの配置や機能について確認し、全体的なイメージと方向性を把握できます。

ビジュアルを作るのではなく「設計図」を作る

ワイヤーフレームを作成するときにやってしまいがちなのが、色や画像サイズなどの視覚的なビジュアルまで細かく考えてしまうこと。
ワイヤーフレームは見た目を作り込む前の下書き的な位置付けです。視覚的なわかりやすさをキープしながら、シンプルな「設計図」を作るよう心がけましょう。

重要なのは、コンテンツや情報の優先順位、掲載する情報量などを確認し、配置を決めることです。操作性はスムーズか、必要な情報を取得しやすいか、サイトのメッセージが伝わりやすいかなどを意識して、適切な配置を考えましょう。

ワイヤーフレームを作成するときの注意点

機能・動作が目的からズレていないか常に意識しよう

ワイヤーフレーム作成でなにより重要なのは、ユーザー視点での機能性・操作性がきちんと考えられていることです。
サイトの目的やゴールが、ユーザーの求めるものからズレていないでしょうか。ユーザーは適切に誘導されているでしょうか。コンテンツの配置が変わると導線も変わり、サイトの目的を達成できなくなるかもしれません。

ワイヤーフレームの作成中は機能や動作の目的を常に意識し、どうしてそのレイアウト、配置にするのか、理由を明確にしておきしましょう。

ユーザー視点を常に意識して、目的に沿ったワイヤーフレームを作ろう

ワイヤーフレームはwebサイト制作に必要な、最初の設計図です。シンプルでありながら、機能や操作性を考え、ユーザーの目的や目標達成に最適な配置を決定しなければなりません。

webサイト制作前にしっかりとワイヤーフレームを作りこむことで、デザインやコーディングなどの工程で修正を減らすことができ、スムーズに制作を進めることができます。

ワイヤーフレームを作成する際に注意する点は、以下のとおりです。

• ビジュアルは排除して、シンプルな「設計図」を作ることを心がける
• マインドマップやサイトマップを使って効果的な情報整理をし、アイデアをしぼりだす
• ユーザーの目的を常に意識して作成を進める(トラブルを防ぐ)

設計の段階からしっかりとしたワイヤーフレームを作り、ユーザーが使いやすくわかりやすい webサイトを完成させましょう。

マインドマップやサイトマップを使おう

説得力のあるワイヤーフレームを作るために、情報の整理の段階でマインドマップやサイトマップを使うことをおすすめします。

頭の中で考えたことを図に書き出すことでアイデアや情報を整理する方法のことです。

マインドマップを使うことで膨大な情報がカテゴライズされ、多くのアイデアが生まれやすくなります。

サイトマップは、サイト全体のページ構成がわかる「目次」のような案内ページのことです。ユーザーが目的のページを探すときにも使われます。

サイトマップでサイト全体の構成を把握してから、各ページに配置する情報や機能を考えましょう。さらに、競合他社のサイトマップをチェックして自社と比較してみると、情報の配置、構成などについて参考になり、より効果的なワイヤーフレーム作成につながります。

ワイヤーフレーム作成フロー

ワイヤーフレームを効率よく作るための手順を詳しく見てみましょう。

1. webサイトのコンセプト、テーマ、目的などについて確認する

どんなサイトを作ろうとしているのか。コンセプトや目的などによって、掲載する情報やデザインなどすべてが変わってきます。

3. レイアウトを決定する

情報の量や内容、ターゲットに応じて、適切なレイアウトを決めます。この段階では手書きのラフな下書きでかまいません。
マルチカラム、フルスクリーンやタイル型など、定番のものから個性的なものまで多くのレイアウトがありますが、ユーザーの目的や導線を意識して最適なレイアウトを決定しましょう。この段階で、PC用とスマホ用の両方のレイアウトについても分けて決めておきます。

4. 情報の配置を下書きする

レイアウトが決まったら、分割された枠の中に各情報を配置していきます。情報を整理したときにリストアップした優先順位の高い情報は、より効果的で最適な場所への配置を考えます。

5. ワイヤーフレームを仕上げる

ワイヤーフレーム作成ツールなどで、きれいな設計図として完成させます。