ワイヤーフレーム

ワイヤーフレームとデザイン案の違いは？

ワイヤーフレームは「何をどこに置くか」を決める段階で、デザイン案は「どう見せるか」を決める段階です。ワイヤーフレームにはグレーの箱と文字の枠しかなく、デザイン案には色・写真・フォントが入ります。

2つの段階を分けるのは、直すコストが違うからです。箱の順番を変えるのは数分で済みますが、デザイン案ができた後に順番を変えると、写真の大きさや余白まで合わせ直す必要があります。

オーナー様がワイヤーフレームを見て、色がなく物足りないと感じるのは普通のことです。この段階では箱の順番と大きさだけを見て、雰囲気の話はデザイン案の段階に回すと、意見がずっとすっきりまとまります。

ワイヤーフレームの段階を別に設けない制作会社もあります。その場合は最初のデザイン案がワイヤーフレームの役割も兼ねることになるので、最初のデザイン案を受け取ったら色よりも順番から確認するのがおすすめです。

ワイヤーフレームには何が入りますか？

ワイヤーフレームには、ページ一覧、各ページのエリアの順番、ボタンの位置、ページ同士のつながりが入ります。絵の上手さは必要ありません。四角い箱に「メイン写真」「料金表」のように名前を書くだけで十分です。

複数の画面にまたがる予約や注文の流れは、画面の間に矢印を描いておくと分かりやすくなります。このように画面と流れを一緒に描いた図を「ワイヤーフロー」と呼ぶこともあります。

文字の枠には、実際に入る文章の長さをおおよそ合わせておくのがおすすめです。1行分の枠に5行の紹介文が入ると、デザイン案で配置がまた崩れてしまうからです。

ワイヤーフレームは、スクロールする1ページ構成のランディングホームページでも役に立ちます。1ページでも、上から下へ進む順番がそのままお客様の動く道筋になるからです。

• ページ一覧：ホーム・紹介・メニュー・アクセスのように、どんなページが何ページあるか
• エリアの順番：1つのページの中で、上から下へ何が出てくるか
• 行動ボタン：電話・予約・お問い合わせのボタンがどこに何回出てくるか
• 移動経路：ボタンを押すとどの画面に移るか
• スマホでの配置：パソコンで横に並んだ枠が、スマホではどの順番で縦に積まれるか

ワイヤーフレームを自分で描くには？

紙1枚とペンがあれば、30分以内にたたき台を作れます。順番が決まっていれば、制作者との最初の相談がずっと短く済みます。

きれいに描く必要はありません。制作者は絵の上手さより「何が先に出てくるか」と「何が必ず必要か」を読み取ります。パソコンが使いやすければプレゼン資料のソフトに四角い箱を並べてもよく、紙に描いたものを写真に撮るだけでも十分です。

1. 01お客様から電話やメッセージでいちばんよく聞かれる質問を5つ書き出します。
2. 02その答えを載せるページの一覧を作ります。小さなお店は1ページで十分なことも多いです。
3. 03スマホ画面サイズの縦長の四角を描き、質問の答えを重要な順に上から箱で埋めていきます。
4. 04お客様が最後にとる行動（予約・電話・道案内）を決めて、ボタンの箱を描きます。
5. 05気に入った他のお店のホームページをキャプチャし、「この部分の順番が良い」とメモして添えます。
6. 06描いた図を写真に撮って制作者に送り、抜けている情報がないか一緒に確認します。

業種によって最初の画面の順番はどう変わる？

最初の画面の順番は、業種よりも「お客様が訪れていちばん先に知りたいこと」によって決まります。同じ美容室でも、予約客が多いお店と通りがかりのお客様が多いお店とでは順番が違います。

以下の例はあくまで出発点です。実際には、お店でいちばんよく受ける質問を基準に入れ替えて使えば大丈夫です。

順番を決めにくければ、お店にかかってくる電話を1週間だけメモしてみてください。「何時までやっていますか？」がいちばん多ければ営業時間を、「駐車できますか？」が多ければ駐車場の案内を、最初の画面の近くに上げれば大丈夫です。

• 美容室：代表的なスタイル写真→スタイリスト紹介→施術別料金→予約ボタン→場所・駐車場
• 工房：代表作品の写真→クラスの種類と日程→受講料→申し込みボタン→受講者の口コミ
• 飲食店：看板メニューの写真→営業時間・定休日→メニュー表→団体予約のお問い合わせ→地図
• ピラティス・ヨガ：レッスンの雰囲気の写真→レッスンの種類→時間割→体験申し込み→インストラクター紹介

スマホ画面のワイヤーフレームは別に確認すべき？

はい、スマホ画面の順番は別に確認するのがおすすめです。パソコンで左右に並んだ枠はスマホでは上下に積まれるため、どの枠が先に出るかによってお客様が見る順番がまったく変わります。

Googleは、検索のインデックスを作るときに主にモバイル版のページを基準にすると案内しています。そのため、スマホ画面で重要な内容が抜けたり隠れたりしないよう、最初から一緒に設計しておくと安心です。

スマホのワイヤーフレームでは、親指で押しやすい場所に予約・電話ボタンがあるか、スクロールを長く続けないと料金が出てこないということがないかを確認すれば大丈夫です。

スマホのワイヤーフレームでは、スクロールしなくても見える最初の画面の範囲も確認してみてください。その中に店名と何をしているお店なのかが一緒に入っていないと、お客様はすぐに離れてしまいます。

ワイヤーフレームの段階でよくある失敗は？

いちばん多い失敗は、ワイヤーフレームを適当に済ませて、デザイン案で順番を変え直すことです。そうすると修正回数とスケジュールが一緒に増えてしまいます。

もう1つは、載せたい内容を全部最初の画面に詰め込むことです。最初の画面はお客様が「ここで合っているか」を判断する場所なので、情報を3〜4つに絞るほうがかえってよく読まれます。

反対に、ページを細かく分けすぎるのもよくある失敗です。小さなお店は情報が複数のページに散らばるとお客様がメニューを行き来するうちに離れやすいため、1ページにまとめて上部にジャンプ用のボタンを置くほうが良い場合が多いです。

ワイヤーフレームの段階で制作会社に何を聞けばいい？

契約前や最初の打ち合わせで以下の4つを聞いておくと、修正回数とスケジュールが明確になります。

• ワイヤーフレームの段階が別にあるのか、それともすぐにデザイン案に進むのか
• ワイヤーフレーム段階の修正が全体の修正回数に含まれるのか
• スマホ画面の配置も一緒に見せてもらえるのか
• ワイヤーフレームの確定後に順番を変えるとどう扱われるのか