ワイヤーフレーム
ワイヤーフレームの役割
ワイヤーフレームとは、Webサイトを制作する前に作成する、ページの設計図です。
Webページのどこにロゴやメニューを配置するか、どの順番で文章や画像を見せるかなど、ページ全体の構成を簡単な図で表します。
ワイヤーフレームを使用してサイト制作依頼者とページ構成を決める打ち合わせをしたり、デザイナーにデザイン依頼をだしたり、プログラマーに機能実装可能か確認をします。
ワイヤーフレームを作成することで、完成後のページをイメージしやすくなり、制作途中での大きな修正を減らすことができます。
今後の制作過程の設計図となるものなので、必要な情報が過不足なく掲載されていなければいけません。
ワイヤーフレームで決めること
ワイヤーフレームでは、主に次の内容を決めます。
- ページに掲載する情報
- 情報を表示する順番
- 見出し、文章、画像、ボタンなどの配置
- ヘッダーやフッターの構成
- ページ内で特に目立たせたい情報
- 利用者にしてほしい行動
たとえば、カフェのWebサイトを制作する場合は、次のような内容を配置します。
- ロゴとナビゲーションメニュー
- 店舗の雰囲気が伝わるメイン画像
- カフェの紹介
- おすすめメニュー
- フッター
このように、最初に情報の順番を整理することで、利用者が必要な情報を見つけやすいページを設計できます。
ワイヤーフレームではデザインを作り込まない
ワイヤーフレームを作成する段階では、色、装飾、写真、細かなフォントなどを決める必要はありません。
一般的には、四角形、線、仮の文字などを使って、ページの構成を簡単に表します。
たとえば、画像を配置する場所は四角形で表し、四角形の中に「メイン画像」「商品写真」などと記載します。文章についても、完成した文章をすべて入力するのではなく、「店舗紹介文」「サービスの説明」など、内容が分かる仮の文字を入れることがあります。
ワイヤーフレームの目的は、見た目をきれいに仕上げることではありません。情報が分かりやすく配置されているか、必要な内容がそろっているかを確認することが重要です。
ワイヤーフレームの主な構成要素
ヘッダー
ヘッダーは、ページ上部に表示される領域です。
一般的には、ロゴ、サイト名、ナビゲーションメニュー、お問い合わせボタンなどを配置します。
複数のページで同じヘッダーを使用することで、利用者がどのページを見ているときでも、別のページへ移動しやすくなります。
メインビジュアル
メインビジュアルは、ページを開いたときに最初に目に入る大きな画像や文章の領域です。
サイトの目的や特徴を短時間で伝える役割があります。キャッチコピー、説明文、ボタンなどを配置することもあります。
コンテンツ
コンテンツは、ページの中心となる情報です。
店舗紹介、商品やサービスの説明、写真、料金、利用方法、お客様の声など、サイトの目的に応じた情報を配置します。
内容ごとにセクションを分け、見出しを付けることで、情報を読みやすく整理できます。
ボタン
ボタンは、利用者に次の行動を促すための要素です。
「詳しく見る」「予約する」「お問い合わせ」「商品を購入する」など、ボタンを押した後に何が起こるのかが分かる言葉を使用します。
重要なボタンは、利用者が見つけやすい場所に配置します。
フッター
フッターは、ページの最下部に表示される領域です。
会社名、店舗情報、住所、電話番号、各ページへのリンク、SNSへのリンク、著作権表記などを配置します。
ワイヤーフレームを作成するメリット
情報を整理できる
Webサイトに掲載したい情報をすべて書き出すことで、必要な情報と不要な情報を整理できます。
また、似た内容をまとめたり、情報が不足していないか確認したりすることもできます。
利用者の視点で考えられる
制作する側が掲載したい情報と、利用者が知りたい情報は、必ずしも同じとは限りません。
ワイヤーフレームを作成するときは、「利用者は最初に何を知りたいのか」「どの順番なら理解しやすいか」を考えることが大切です。
制作前に問題を発見できる
いきなりWebページを作成すると、途中で情報の不足や配置の問題に気づき、大きな修正が必要になることがあります。
ワイヤーフレームの段階で確認すれば、比較的簡単に配置や順番を変更できます。
複数人で完成イメージを共有できる
グループでWebサイトを制作する場合、人によって完成イメージが異なることがあります。
ワイヤーフレームを共有することで、どこに何を配置するのかをメンバー全員で確認できます。制作作業の分担もしやすくなります。
ワイヤーフレームを作成する手順
手順1 Webサイトの目的を確認する（ゴール）
最初に、何のためにWebサイトを作成するのかを明確にします。
たとえば、次のような目的があります。
- 店舗の場所や営業時間を知らせる
- 商品やサービスを紹介する
- 予約やお問い合わせを増やす
- 作品や実績を紹介する
- イベントへの参加を呼びかける
目的によって、ページに掲載する情報や目立たせる内容が変わります。
手順2 想定する利用者を考える（ターゲット）
どのような人がWebサイトを見るのかを考えます。
年齢、知識、目的、利用する場面などを想定すると、必要な情報や適切な表現を判断しやすくなります。
たとえば、初めて店舗を訪れる人に向けたサイトであれば、アクセス方法、営業時間、料金、予約方法などを分かりやすく掲載する必要があります。
手順3 掲載する情報を書き出す
Webサイトに必要な情報を、いったんすべて書き出します。
この段階では、表示する順番を細かく考える必要はありません。まずは必要な情報が不足していないかを確認します。
手順4 情報をグループに分ける
書き出した情報を、内容ごとにまとめます。
たとえば、「店舗について」「メニュー」「アクセス」「お問い合わせ」のように分類します。
似た内容をグループにすることで、ページやセクションの構成を考えやすくなります。
手順5 情報の優先順位を決める
すべての情報を同じ大きさで表示すると、何が重要なのか分かりにくくなります。
利用者に最も伝えたい情報や、最初に見てほしい情報を決めます。重要な情報はページの上部に配置したり、大きな領域を使ったりします。
手順6 配置を図にする
決めた情報を、四角形や線を使ってページ上に配置します。
見出し、文章、画像、ボタンなど、それぞれの役割が分かるように記載します。
最初から細かく作り込まず、大まかな配置から考えることがポイントです。
手順7 利用者の流れを確認する（導線）
ページの上から順番に見たとき、内容を自然に理解できるか確認します。
また、利用者が「予約する」「問い合わせる」「詳しいページを見る」など、目的の行動に迷わず進めるかも確認します。
良いワイヤーフレームを作るためのポイント
ページの目的を一つに絞る
1ページの中に多くの目的を入れすぎると、利用者が何をすればよいのか分かりにくくなります。
そのページで最も伝えたいことや、利用者にしてほしい行動を明確にします。
見出しだけでも内容が分かるようにする
利用者は、文章を最初から最後まで丁寧に読むとは限りません。見出しを確認しながら、必要な情報を探すことがあります。
「ご案内」のような曖昧な見出しではなく、「営業時間と定休日」「初めての方へ」など、内容が分かる見出しを付けます。
情報を詰め込みすぎない
情報量が多すぎると、重要な内容が目立たなくなります。
余白を取りながら、内容ごとにセクションを分けます。詳しい説明が必要な場合は、別のページに分ける方法もあります。
共通部分を統一する
複数ページを作成する場合、ヘッダー、ナビゲーション、フッターなどの共通部分は、基本的に同じ配置にします。
ページごとに配置が大きく変わると、利用者が操作に迷いやすくなります。
ページ下部で他ページへ誘導する
ページ下部に他ページへの誘導がない場合、そのままサイトから離脱されてしまう可能性が高くなります。
ページ下部に目的達成ページや関連ページへのリンクやボタンを配置します。
わかりやすいワイヤーフレームの例
- クライアントにページ情報を確認してもらい承認をとることができる
- デザイナーにどこになんの情報があるかきちんと伝えることができる
文章や写真データはどこかのタイミングで確定しなければいけません。ワイヤーフレームのタイミングで確定できると掲載内容のボリュームがわかるので次工程以降の修正を未然に防げます。
※ライターさんの都合や依頼のタイミングによって遅れることもままありますが・・・
わかりづらいワイヤーフレームの例
- 具体性がないためWebサイト制作依頼者から承諾を得ることができない
- 承諾を得ないまま次工程に進むと手戻りの可能性や大幅な変更につながる
- デザイナーが何を表示させるのがわからず質問がたくさん届く
ワイヤーフレームとデザインカンプの違い
ワイヤーフレームとデザインカンプは、どちらもWebサイトを制作する前に使用しますが、目的が異なります。
ワイヤーフレームは、情報の配置やページ構成を確認するための設計図です。色や写真、装飾などは作り込みません。
デザインカンプは、実際に完成するWebページに近い見た目を確認するためのデザイン見本です。色、フォント、画像、余白、ボタンの形などを具体的に表します。
一般的なWeb制作では、ワイヤーフレームを作成した後にデザインカンプを作成し、その後にWebページを構築します。
ただし、制作するサイトの規模や使用するツールによっては、デザインカンプを別に作成せず、ワイヤーフレームをもとに直接Webページを作成することもあります。
その場合も、ワイヤーフレームの段階で情報の順番や配置を十分に検討しておくことが重要です。
