ホームページ制作を依頼すると、デザインの前に制作会社からワイヤーフレームが提出されます。画像の枠や仮の原稿が並んだ資料なので、どこを見て何を判断すればよいのか分からない方も多いのではないでしょうか。ワイヤーフレームはページの構成を決める資料で、ここで確認した内容がデザインやコーディングの土台になります。
この記事では、ワイヤーフレームの見方と、ホームページ制作時に確認するポイントを解説します。当社のホームページ制作におけるワイヤーフレームの作成から承認までの進め方も紹介しますので、制作会社からワイヤーフレームが提出されたときの参考にしてください。
ワイヤーフレームとは
ワイヤーフレームとは、ホームページの各ページに何をどこに配置するかを示した設計図です。見出しや文章、画像、ボタンなどの位置を枠と線で表し、色や写真は入れずにページの骨組みだけを描きます。ホームページ制作では、どのようなページを作るかが決まった後、デザインに入る前に作成するのが一般的です。
ホームページ制作の途中では、ワイヤーフレームのほかにサイトマップやデザインカンプも提出されます。
サイトマップは、サイト全体にどのようなページがあり、どのページの下にどのページが入るかを示した資料です。ワイヤーフレームは、サイトマップで決めたページの1つずつについて、情報の並び方を示します。デザインカンプは、ワイヤーフレームをもとに色や写真、文字の書体まで入れて、完成したときの見た目を再現した資料です。
サイトマップで決めたページの中身をワイヤーフレームで形にし、その内容をデザインカンプで仕上げていく流れになるため、ワイヤーフレームはホームページの構成と見た目をつなぐ役割を持っています。
ホームページ制作でワイヤーフレームを確認する理由
ワイヤーフレームはホームページ制作会社が作成する資料ですが、ホームページ制作を依頼する側にとっても確認しておく価値があります。ここでは、ワイヤーフレームの段階で確認しておく理由を紹介します。
手戻りを減らせる
ワイヤーフレームの段階であれば、構成を変えたいときも枠の位置や仮の原稿を入れ替えるだけで対応できます。ところが、デザインに入った後に情報の順番を変えたり、新しい要素を加えたりすると、ページのデザインを作り直す必要が出てきます。テストサイトの段階まで進んでいれば、デザインに加えてコーディングもやり直しになります。
手戻りが大きくなるほど、公開までのスケジュールは遅れ、内容によっては追加の費用がかかることもあります。ホームページ制作では、後の工程に進むほど構成の変更が難しくなるので、ワイヤーフレームで構成を固めておくことが手戻りを減らす一番の方法です。
色や写真に左右されずに構成だけを判断できる
デザインカンプのように色や写真が入った資料を見ると、どうしても色の好みや写真の印象に目が向きます。その結果、情報の順番や量が適切かという構成の確認が後回しになりがちです。
ワイヤーフレームは色や写真を入れずに、ページに載せる情報と配置だけを描いた資料です。見た目の好みに気を取られることがないので、ページの中で何をどの順番で伝えるかという構成だけに集中して判断できます。デザインの良し悪しは次の工程で確認できるので、ワイヤーフレームの段階では構成の判断に絞ることが大切です。
自社の情報が正しく伝わるかは依頼者にしか判断できない
制作会社はヒアリングや競合調査をもとにワイヤーフレームを作成しますが、依頼する企業の事業を誰よりも詳しく知っているのは依頼者です。サービス名や商品の特徴が正しく書かれているか、自社の強みが伝わる内容になっているかは、制作会社だけでは判断しきれません。
たとえば、今後力を入れていきたいサービスや、近いうちに取り扱いをやめる予定の商品など、社内でしか分からない事情は制作会社には見えません。業界でよく使われる言い回しが取引先にどう受け取られるかは、事業を続けてきた依頼者でなければ判断できません。
ワイヤーフレームの段階で依頼者が自社の目線で確認すれば、こうした事情を構成が固まる前に反映できます。
ワイヤーフレームの見方
ワイヤーフレームは、枠や線、仮の文字などの簡単な表現でページの内容を表しています。描かれているものが何を意味しているかを知っておくと、ワイヤーフレームを受け取ったときに迷わず読み進められます。なお、ワイヤーフレームの色や線の太さは区別のために付けているもので、デザインの指定ではありません。
画像の枠は写真やイラストが入る場所を表している
ワイヤーフレームでは、写真やイラストを入れる場所を、バツ印の入った四角や「画像」と書かれた枠で表すのが一般的です。枠の位置はページのどこに画像が入るかを、枠の大きさは画像がどのくらいの大きさで表示されるかを示しています。
枠の中や横に「外観写真」「スタッフの集合写真」のような注記がある場合は、そこにどのような写真を入れる想定かが書かれています。注記がない枠は、入れる画像がまだ決まっていないか、制作会社が素材を用意する想定の場所です。画像の枠を見るときは、場所と大きさに加えて、どのような画像が入る予定なのかを読み取ることが大切です。
仮の原稿は文章の量と内容の目安を表している
ワイヤーフレームに入っている文章は、公開するときの文章ではなく仮の原稿です。仮の原稿は、その場所にどのくらいの量の文章が入るのか、どのような内容を書く場所なのかの目安を表しています。
仮の原稿には、ヒアリングの内容をもとに実際の内容に近い文章を入れる場合と、意味のないダミーの文字を入れる場合があります。実際の内容に近い文章であれば、量に加えて、その場所で何を伝えるのかまで読み取れます。ダミーの文字の場合は、文章の量だけを示しているので、見出しからその場所に書く内容を確認します。
どちらの場合も、言い回しや細かい表現は原稿を作る段階で整えるので、ワイヤーフレームでは量と内容の方向性を読み取ります。
ボタンやリンクは移動先のページを表している
ワイヤーフレームに描かれたボタンやリンクは、ユーザーがそこを押したときにどのページへ移動するかを表しています。ボタンの中には「お問い合わせ」「サービス一覧を見る」のような文言が入っていて、移動先のページ名が注記で書かれていることもあります。
ボタンやリンクは、ページ同士のつながりを示す部分です。ワイヤーフレームを読むときは、どのボタンやリンクからどのページへ移動するのかを1つずつ追っていくと、ユーザーがホームページの中をどのように動けるのかが分かります。
ワイヤーフレームで確認するポイント
ワイヤーフレームの見方が分かったら、次は内容が自社のホームページとして適切かを判断します。ここでは、ホームページ制作でワイヤーフレームを受け取ったときに確認するポイントを紹介します。
伝えたい情報の順番が正しいか
ホームページのページは、多くのユーザーが上から順番に読み進めます。そのため、ワイヤーフレームでは、ページの上から下まで読み進めるうちにユーザーが納得できる順番で情報が並んでいるかを確認します。
最初に表示される部分では、何の会社なのか、どのようなサービスを提供しているのかが伝わる必要があります。ここで分からなければ、ユーザーは下まで読まずに離れてしまいます。
その下は、自社の強み、強みの根拠になる実績、サービスの内容、依頼の流れと続き、最後に問い合わせ窓口にたどり着く並びが基本です。強みを伝えた後に実績で裏付けるなど、前の情報を次の情報が支える順番になっていれば、ユーザーは納得しながら読み進められます。
反対に、強みだけが並んで根拠が離れた場所にあったり、サービスの内容より先に依頼の流れが来ていたりすると、読み進めても納得につながりません。
載せる情報に抜けや誤りがないか
ワイヤーフレームは、ヒアリングの内容をもとに制作会社が作成するので、聞き取りの段階で漏れた情報や、聞き違いによる誤りが入ることがあります。ワイヤーフレームの段階で、載せる情報に抜けや誤りがないかを確認します。
抜けを確認するときは、会社案内やパンフレット、営業で使っている資料と見比べると分かりやすくなります。サービスの種類や対応エリア、営業時間、資格や許認可など、取引先によく聞かれる情報が入っているかを1つずつ確かめます。
誤りについては、社名や商品名の表記、創業年や実績の件数などの数字を中心に確認します。仮の原稿であっても、事実が違っているとそのまま原稿作成に進んでしまうので、見つけた抜けや誤りは、ワイヤーフレーム全体を確認した後にまとめて制作会社に伝えます。
問い合わせまでの導線が分かりやすいか
ユーザーが1ページだけを読んで問い合わせを決めることは少なく、サービスや事例など、いくつかのページを読み比べてから問い合わせます。ワイヤーフレームのボタンやリンクを追いながら、ユーザーがページを読み進めた先で問い合わせ窓口までたどり着けるかを確認します。
まず、ヘッダーやページの最後など、どのページにも共通して表示される場所に問い合わせ窓口へのリンクがあるかを確認します。
そのうえで大切なのが、各ページから次に読んでほしいページへのリンクです。たとえば、サービスのページを読んだユーザーを事例のページへ、事例のページを読んだユーザーを料金や依頼の流れのページへとつないでいけば、ユーザーは必要な情報を順に読みながら問い合わせを決められます。
ワイヤーフレームでは、各ページからどのページへのリンクが置かれていて、その先のページから問い合わせ窓口へ進める流れになっているかを見ていきます。
電話とメールフォームのどちらで受け付けたいのか、資料請求や見積もり依頼など窓口が複数あるのかによって、電話番号を目立たせるのか、メールフォームへのボタンを置くのか、資料請求と見積もり依頼でボタンを分けるのかが変わります。自社が受けたい問い合わせの形に合った導線になっているかを確認します。
原稿や写真を自社で用意できる量か
ワイヤーフレームに入っている仮の原稿や画像の枠は、実際の原稿や写真に差し替える必要があります。原稿はワイヤーフレームの段階で用意しておくのが理想なので、ワイヤーフレームを受け取ったら、その量を自社で用意できるかを確認します。
画像の枠の数だけ写真が必要になるので、社内の写真やスタッフの写真、施工事例の写真などが手元にそろっているかを確かめます。原稿については、仮の原稿の量の文章を社内で書けるか、書く担当者と時間を確保できるかを考えます。原稿が用意できないままデザインに進むと、後から入れた原稿の量がデザインに合わず、レイアウトを作り直すことになります。
自社で用意するのが難しい場合は、撮影や原稿作成を制作会社に依頼するか、量を減らした構成に変えるかを、ワイヤーフレームの段階で相談しておきます。
当社のホームページ制作におけるワイヤーフレームの作成から承認までの進め方
当社のホームページ制作では、ワイヤーフレームを作らずにデザインへ進むことはありません。ここでは、当社がワイヤーフレームを作成してから承認をいただくまでの進め方を紹介します。
仮の原稿を入れたワイヤーフレームをPowerPointで提出する
当社では、ヒアリングの内容をもとに、仮の原稿を入れたワイヤーフレームを作成します。枠だけのワイヤーフレームでは、その場所に何を書くのかが伝わりにくいので、実際の内容に近い文章を入れて、ページで伝える内容までイメージできる形にしています。
ワイヤーフレームはPowerPointのファイルで提出します。ファイルのまま社内のほかの方にも共有できるので、担当者だけでなく関係する方に確認していただけます。
構成の理由を説明してから確認してもらう
ワイヤーフレームを提出するときは、なぜこの順番で情報を並べたのか、なぜこのページにこの内容を入れたのかを説明してから確認していただきます。ワイヤーフレームを渡すだけでは、制作会社がどのような考えで構成を決めたのかが伝わらず、見た目の印象だけで判断されてしまうことがあります。
構成の理由が分かれば、依頼者は自社の考えと合っているかを判断しやすくなります。説明を聞いたうえで違和感がある部分は、どこをどう変えたいのかを具体的に伝えていただけるので、修正の話し合いもスムーズに進みます。
トップページのワイヤーフレームを承認してから下層ページに進む
最初にトップページのワイヤーフレームを作成し、承認をいただいてから下層ページのワイヤーフレームに進みます。トップページの形が決まると、トップページからどのページへリンクするのかがはっきりするので、下層ページ同士のつながりや問い合わせまでの導線を設計しやすくなります。
トップページと下層ページを同時に進めると、トップページの構成を変えたときに下層ページまで作り直しになることがあります。トップページから順に固めていくことで、サイト全体の構成を無駄なく決められます。
修正回数に制限を設けずに調整する
ワイヤーフレームの修正回数に基本的に制限を設けていません。ワイヤーフレームはサイト全体の土台になる資料なので、依頼者が納得できるまで調整してからデザインに進みます。
ただし、修正が続いて公開の予定に影響が出る場合は、その時点でお伝えします。また、ユーザーにとって分かりにくくなるなど、ホームページの成果に悪い影響が出そうな修正の指示をいただいたときは、その理由をお伝えしたうえで、どちらの形にするかを選んでいただきます。
まとめ
ワイヤーフレームは、デザインに入る前にホームページの構成を決める資料です。見方を知ったうえで、自社の情報が正しく、納得できる順番で伝わるかを依頼者が確認しておけば、手戻りの少ないホームページ制作につながります。
当社では、仮の原稿を入れたワイヤーフレームで構成の理由をご説明し、御社が納得できるまで調整してからデザインに進みます。ホームページ制作を検討されている方は、お気軽にご相談ください。ヒアリングで御社の強みや伝えたいことを伺い、成果につながる構成をご提案します。
