ワイヤーフレームとは｜制作会社から届いたときの見方
ホームページの制作を頼んで打ち合わせが終わると、しばらくして制作会社から灰色の箱と線だけの図が届くことがあります。「ワイヤーフレームです。ご確認ください」と言われても、何を確かめればよいのか分からない、という担当者は少なくありません。
ワイヤーフレームは、ページに何をどの順番で置くかを決めるためのページの設計図です。この記事では、ワイヤーフレームとは何か、サイトマップやデザインカンプとの違い、届いたときに確かめる項目、見るときにしなくてよいこと、戻すときの伝え方をまとめます。ここで中身と順番を固めておくと、後のデザインの段階で大きな手戻りが起きにくくなります。
ワイヤーフレームとは
ワイヤーフレームは、1枚のページの中に、見出し・文章・写真・ボタン・問い合わせの欄などをどの順番で、どのくらいの大きさで置くかを、線と箱で示した図です。家を建てるときの間取り図に近いものと考えると分かりやすいでしょう。
ワイヤーフレームに描かれているものと、まだ決まっていないものは次のとおりです。
| 描かれているもの | まだ決まっていないもの |
|---|---|
| 置く要素（見出し、文章、写真、ボタン、表など） | 色 |
| 要素の順番と、おおよその大きさ | 写真そのもの（灰色の箱で示される） |
| 見出しの言葉の案、文章の分量の目安 | 書体と文字の細かな大きさ |
| ボタンの置き場とリンク先 | 飾りやイラスト |
| スマートフォンでの並び順（作る場合） | 動きの演出 |
文章の欄には、仮の文字（ダミーテキスト）が入っていることがよくあります。これは分量の目安を示すためのもので、文の中身を読む必要はありません。
サイトマップ・ワイヤーフレーム・デザインカンプの違い
ホームページの「設計図」と呼ばれるものには、段階ごとにいくつか種類があります。
| 名前 | 何を示すか | 届く時期の目安 |
|---|---|---|
| サイトマップ | サイト全体のページの一覧と、ページどうしのつながり（階層） | 打ち合わせの後、最初に |
| ワイヤーフレーム | 1枚のページの中の、要素の順番と配置 | サイトマップが決まった後 |
| デザインカンプ | 色・写真・書体を入れた、完成に近い見た目の見本 | ワイヤーフレームと原稿が決まった後 |
| プロトタイプ（試作） | 画面を押して、動きやページの移り変わりを確かめる試作 | 制作会社や案件によって作る |
サイトマップが「家全体に何部屋あるか」、ワイヤーフレームが「1部屋の間取り」、デザインカンプが「内装を入れた完成予想図」と考えると、それぞれの役割が分かりやすくなります。制作全体の中でこれらがいつ届くかは、ホームページ制作を頼むときの流れで説明しています。
届いたときに確かめる10の項目
ワイヤーフレームは、見た目ではなく中身と順番を確かめるものです。次の10項目を順に見ていきます。
- このページの目的：ページを見た人に、最後に何をしてほしいか（問い合わせ、資料請求、来店の予約など）。その行動の入口がページの中にあるか
- 情報の順番：読み手の疑問の順に並んでいるか。たとえばサービスのページなら「何をしてくれるのか」「誰に向いているか」「料金」「流れ」「問い合わせ」のように
- 情報の抜け：料金、対応の地域、期間、会社の情報など、読み手が判断に使う情報が抜けていないか
- 見出しの言葉：見出しだけを拾い読みしても、ページの中身が分かるか。見出しの階層（大見出しの下に中見出し）が順になっているか
- 問い合わせの入口：ボタンや電話番号が、読み終えた場所と、ページの上の方の両方で見つかるか
- スマートフォンでの並び：横に並んでいた要素が縦に並び替わったとき、順番に無理がないか。パソコンで載せている情報がスマートフォンで省かれていないか
- 原稿の量と枠の大きさ：手元にある、またはこれから書く原稿が、その枠に収まるか。枠が大きすぎて、書くことが無くならないか
- 写真の枠：どの場所に、どんな写真が要るか。用意できる写真で埋まるか
- 更新する場所：お知らせや事例など、公開後に社内で更新する前提の場所がどこか
- フォームの項目と、個人情報の扱いの表示：問い合わせの欄に何を聞くか。個人情報の利用目的を示す場所があるか
4の見出しについては、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」でも、見出しのレベルを適切に設定することが挙げられ、情報設計の段階から段階的に確かめることが勧められています。6のスマートフォンについては、Google 検索セントラルのモバイル ファースト インデックスの説明で、モバイルのサイトにパソコンのサイトと同じ内容を含めること、モバイルでも明確で意味のある見出しを使うことが勧められています。
10の個人情報については、個人情報保護法で、本人から書面（ウェブのフォームのような電磁的な記録を含む）で直接個人情報を受け取るときは、あらかじめ利用目的をはっきり示すことになっています（個人情報保護委員会「個人情報保護法の基本」）。フォームの項目の決め方は問い合わせフォームの項目の決め方にまとめています。
見るときにしなくてよいこと
ワイヤーフレームの確認で時間を使いすぎないために、次のことはこの段階ではしなくてかまいません。
- 色や雰囲気の好みを言う：灰色の箱は、色を決めるためのものではない
- 仮の文字を読む・直す：ダミーテキストは分量の目安。中身は原稿の段階で決める
- 写真の箱に入る写真を気にする：どんな写真が要るかだけを確かめる
- 細かな位置のずれを指摘する：数ミリの位置は、デザインの段階で整えられる
逆に、ここで「この情報は要らない」「この順番では分かりにくい」と言っておかないと、デザインの段階で配置を組み直すことになり、修正の回数を使ってしまいます。後の段階になるほど、一つの変更が影響する範囲が広がります。
戻すときの伝え方
ワイヤーフレームに意見を返すときは、次の形にすると制作会社に伝わりやすくなります。
- 場所を番号や見出しで指す：「上から3つ目の箱」「『料金』の見出しの下」
- 理由を添える：「料金を見てから流れを読む人が多いので、料金を先にしたい」
- 社内の意見をまとめて1回で返す：決める人の意見も入れてから返す
- 足したい情報は、原稿の案も添える：何をどのくらい書くかが分かると、枠の大きさを決めやすい
伝え方の例はデザイン案への修正の伝え方で、よい例と困る例に分けて紹介しています。
自社で簡単な設計図を作っておく
制作会社に頼む前に、自社で手書きの簡単な設計図を作っておくと、打ち合わせが早く進みます。
- 作りたいページの名前を書き出す（トップ、サービス、会社概要、問い合わせなど）
- ページごとに、紙に縦長の枠を描く（スマートフォンの画面のつもりで）
- 上から順に、載せたい情報を箱で並べ、箱の中に「料金表」「代表の写真」のように書く
- いちばん下に、読み終えた人にしてほしいこと（問い合わせなど）を書く
上手に描く必要はありません。この紙があるだけで、「何を、どの順番で伝えたいか」が制作会社に伝わります。提案を依頼する段階で書く項目はホームページ制作の提案依頼書（RFP）の書き方に、原稿の準備はホームページの原稿の書き方とテンプレートにまとめています。
まとめ
- ワイヤーフレームは、ページに何をどの順番で置くかを示す設計図。色や写真はまだ決まっていない
- サイトマップはサイト全体、ワイヤーフレームは1ページの配置、デザインカンプは完成に近い見た目
- 確かめるのは見た目ではなく、目的・順番・抜け・見出し・問い合わせの入口・スマートフォンでの並び
- 中身と順番の変更は、この段階で言っておくほど手戻りが少ない
- 意見は場所を指し、理由を添えて、社内でまとめて1回で返す
Lapisデザインラボのウェブページの制作の進め方と期間は、サービスと料金にまとめています。
よくある質問
ワイヤーフレームとデザインカンプの違いは何ですか。
ワイヤーフレームは、ページに何をどの順番で置くかを線と箱で示した設計図で、色や写真、書体はまだ決まっていません。デザインカンプは、色・写真・書体を入れて、完成に近い見た目を示した見本です。ワイヤーフレームで中身と順番を決め、デザインカンプで見た目を決める、という順で進むのが一般的です。
ワイヤーフレームが届いたら、どこを見ればよいですか。
見た目ではなく中身を見ます。ページを見た人に最後に何をしてほしいか、そのために必要な情報が読み手の疑問の順に並んでいるか、載せるべき情報が抜けていないか、問い合わせのボタンや電話番号が見つけやすい位置にあるか、スマートフォンでの並び順に無理がないかを確かめます。
ワイヤーフレームの段階で、色やデザインの希望を伝えてもよいですか。
希望があればメモとして伝えておくのはかまいませんが、ワイヤーフレームの灰色の箱や仮の文字は、見た目を決めるためのものではありません。この段階の確認は中身と順番に集中し、色や雰囲気の判断はデザインカンプの段階で行うほうが、話が混ざらず早く進みます。