webサイト制作にたずさわる人ならば、「ワイヤーフレーム」という言葉を聞いたことがあるのではないでしょうか。webサイト制作におけるワイヤーフレームとは制作時にデザインの土台となるもので、プロジェクトの早い段階で用意するものです。
この記事では、ワイヤーフレームの概要や作り方などについて初心者向けにわかりやすくご説明します。
目次
ワイヤーフレームについて
ここではwebサイト制作におけるワイヤーフレームの概要と役割、間違えやすい用語についてご紹介します。
ワイヤーフレームとは
ワイヤーは「線」、フレームは「枠」という意味です。その言葉どおり、ワイヤーフレームとは webサイトの完成イメージを簡単な線と枠で表現する「設計図」のことになります。クライアントの目的やコンセプトなどに基づいて作成する基礎的なユーザーインターフェースです。
ビジュアル的な詳細を決める前に作成するので、ワイヤーフレームの作成段階では大きな仕様変更も可能です。
シンプルなページの中にテキストや画像などの要素を効果的に配置し、目的を達成するための構成を視覚的に表現しています。
基本的にワイヤーフレームにはグラフィック要素は含まず、家でたとえると「骨組み」のような状態です。webサイト上のパーツの配置や機能について確認し、全体的なイメージと方向性を把握できます。
ワイヤーフレームの役割とは
ワイヤーフレームは、サイト上の情報の配置を決めるものです。
Where: どこに（画面の上下部、左右部などの位置を決める）
What: なにを置いて（ロゴ、メニュー、コンテンツなどを決める）
How: どのように動作させるか（リンクや出力などの仕様を決める）
これら3つを決定し、簡単な構成案をクライアントやチームに対して視覚的に示すために作成します。
また、ワイヤーフレームには制作前に操作性や機能について確認できる、チーム内の情報共有ツールとしての役割もあります。チームやクライアントとのコミュニケーションツールでもあり、視覚的な仕様書としても使うことができるのです。
間違えやすい言葉とその違い
ワイヤーフレームと似た言葉に「デザインカンプ」、「モックアップ」、「プロトタイプ」があります。webサイト制作の現場ではどのように使い分けたらいいのでしょうか。それぞれの言葉の違いについてご説明します。
「デザインカンプ」
デザインカンプは ”Desing Comprehensive Layout” を略した言葉で、webサイトの細かい部分まで確認するためのデザイン案、完成イメージのことです。ワイヤーフレームではわからないデザイン上の問題点を見つけることができるなど、重要なツールです。
通常、複数のデザインカンプをクライアントに提示して、イメージに最も近いデザインを選んでもらいます。選ばれたデザインの詳細について確認し、クライアントの承諾を得られてからサイトの制作を開始します。
「モックアップ」
モックアップはwebサイト制作の用語として、「デザインカンプ」と同じ意味で使われます。英語の辞書によると、 “mock-up” とは「実物が完成していない段階でデザインや操作性を確認できる、実物大の模型」のこと。模型という意味から派生して、webサイト制作の現場では、完成イメージを表す言葉として使われています。
「プロトタイプ」
プロトタイプは動作確認のための「試作品」ですが、その意味する範囲は広く、その時々の文脈によって、どのようなものを指すのかという確認が必要かもしれません。主に制作物の操作性や機能について確認するために使います。
プロトタイプを使えば、webサイトの制作段階でページ遷移などの動作を実際に確認し、操作して気付いた問題点を洗い出せます。また、デザインの意図を動的に示すことができ、クライアントへの提案の際によりわかりやすい説明が可能になります。
動作が目的を達成できるかを確認するためのツールなので、多くの場合実際のデータは使用しません。
ワイヤーフレームの作り方と作成のコツ
ここではワイヤーフレーム作成のフローと、作成の際の考え方やコツについてご説明します。
ワイヤーフレーム作成フロー
ワイヤーフレームを効率よく作るための手順を詳しく見てみましょう。
1. webサイトのコンセプト、テーマ、目的などについて確認する
どんなサイトを作ろうとしているのか。コンセプトや目的などによって、掲載する情報やデザインなどすべてが変わってきます。ユーザーの目的やサイト上で伝えたいことなどが明確でない場合は、速やかにクライアントに確認しましょう。
2. 配置する情報をリストアップして整理する
「会社名、ロゴ、業務内容、バナー」など、配置する情報をすべて洗い出し、優先順位の高い情報と低い情報に分けてリストアップします。
画像や文字の量についてもこの時点でざっくり決めておくのが望ましいです。文字量や画像の縦横比などが想定の範囲を著しく超えると、レイアウトの崩れにつながり、大規模な修正が発生する可能性もあります。
3. レイアウトを決定する
情報の量や内容、ターゲットに応じて、適切なレイアウトを決めます。この段階では手書きのラフな下書きでかまいません。
マルチカラム、フルスクリーンやタイル型など、定番のものから個性的なものまで多くのレイアウトがありますが、ユーザーの目的や導線を意識して最適なレイアウトを決定しましょう。この段階で、PC用とスマホ用の両方のレイアウトについても分けて決めておきます。
4. 情報の配置を下書きする
レイアウトが決まったら、分割された枠の中に各情報を配置していきます。情報を整理したときにリストアップした優先順位の高い情報は、より効果的で最適な場所への配置を考えます。
5. ワイヤーフレームを仕上げる
ワイヤーフレーム作成ツールなどで、きれいな設計図として完成させます。
ビジュアルを作るのではなく「設計図」を作る
ワイヤーフレームを作成するときにやってしまいがちなのが、色や画像サイズなどの視覚的なビジュアルまで細かく考えてしまうこと。
ワイヤーフレームは見た目を作り込む前の下書き的な位置付けです。視覚的なわかりやすさをキープしながら、シンプルな「設計図」を作るよう心がけましょう。
重要なのは、コンテンツや情報の優先順位、掲載する情報量などを確認し、配置を決めることです。操作性はスムーズか、必要な情報を取得しやすいか、サイトのメッセージが伝わりやすいかなどを意識して、適切な配置を考えましょう。
マインドマップやサイトマップを使おう
より説得力のあるワイヤーフレームを作るために、情報の整理の段階でマインドマップやサイトマップを使うことをおすすめします。
マインドマップとは、頭の中で考えたことを図に書き出すことでアイデアや情報を整理する方法のことです。ワイヤーフレーム担当者だけでなく、チームでマインドマップを使うことで膨大な情報がカテゴライズされ、多くのアイデアが生まれやすくなります。
サイトマップは、サイト全体のページ構成がわかる「目次」のような案内ページのことです。ユーザーが目的のページを探すときにも使われます。
サイトマップでサイト全体の構成を把握してから、各ページに配置する情報や機能を考えましょう。さらに、競合他社のサイトマップをチェックして自社と比較してみると、情報の配置、構成などについて参考になり、より効果的なワイヤーフレーム作成につながります。
ワイヤーフレームを作成するときの注意点
ワイヤーフレームの作り方をふまえて、作成時に特にどんな点に注意したらいいか考えてみましょう。
デザイナーやコーディング担当と認識を一致させよう
ワイヤーフレームを作成するときは、デザイナーと打ち合わせをしたり、コーディング担当に機能の確認しておきましょう。その内容をワイヤーフレーム内に書き留めてチームに共有し、さらなるアイデア出しの材料にすることもできます。
共有したワイヤーフレームをもとにチーム全体の共通レギュレーションを作成しておくと、レイアウトだけでなく文書でもイメージを統一することができます。ワイヤーフレーム作成の段階でチームの認識を一致させ、後々の工程でのトラブルや大規模修正の防止に役立てましょう。
機能・動作が目的からズレていないか常に意識しよう
ワイヤーフレーム作成でなにより重要なのは、ユーザー視点での機能性・操作性がきちんと考えられていることです。
サイトの目的やゴールが、ユーザーの求めるものからズレていないでしょうか。ユーザーは適切に誘導されているでしょうか。コンテンツの配置が変わると導線も変わり、サイトの目的を達成できなくなるかもしれません。
ワイヤーフレームの作成中は機能や動作の目的を常に意識し、どうしてそのレイアウト、配置にするのか、理由を明確にしておきしましょう。
ユーザー視点を常に意識して、目的に沿ったワイヤーフレームを作ろう
ワイヤーフレームはwebサイト制作に必要な、最初の設計図です。シンプルでありながら、機能や操作性を考え、ユーザーの目的や目標達成に最適な配置を決定しなければなりません。
webサイト制作前にしっかりとワイヤーフレームを作りこむことで、デザインやコーディングなどの工程で修正を減らすことができ、スムーズに制作を進めることができます。
ワイヤーフレームを作成する際に注意する点は、以下のとおりです。
- ビジュアルは排除して、シンプルな「設計図」を作ることを心がける
- マインドマップやサイトマップを使って効果的な情報整理をし、アイデアをしぼりだす
- チームの認識を一致させて、後の工程でのトラブルを防ぐ
- ユーザーの目的を常に意識して作成を進める
プロジェクトチーム全体で連携をとりながら、設計の段階からしっかりとしたワイヤーフレームを作り、ユーザーが使いやすくわかりやすい webサイトを完成させましょう。
