Webサイトやランディングページを作るときに、デザインの前に作る「ワイヤーフレーム」。ページのどこに何を置くかを決める設計図で、ここで内容をそろえておくかどうかが、あとからの修正の量を大きく左右します。
この記事では、デザイン制作をしている株式会社Ryuki Designの編集部が、ワイヤーフレームの役割、デザインカンプとの違い、作る前の準備、よく使われるレイアウトの型、作るときのポイント、お客さまに見せるときの注意点を紹介します。
目次
ワイヤーフレームとは
ワイヤーフレームとは、Webページのどこに、どんな情報を置くかを、線と箱と文字で表した設計図のことです。デザインを作る前に作り、見出し、文章、写真、ボタン、問い合わせフォームなどの配置と順番を決めます。
デザイナーはワイヤーフレームをもとにデザインを作るので、ワイヤーフレームはページの方向性を決める大切な土台になります。
ラフ・デザインカンプとの違い
ワイヤーフレームが「設計図」だとすると、デザインカンプは「完成見本」です。ワイヤーフレームでは色や装飾は考えず、情報の配置と順番だけに集中します。デザインカンプでは、実際の写真や文章を入れ、色や装飾までつけて、完成に近い見た目にします。
その中間で、見た目のイメージをおおまかに表した下書きを「ラフ」と呼ぶことがあります。見た目まで作りこんでからのやり直しは手間が大きいので、ワイヤーフレームの段階で内容を確かめておくことが大切です。ラフについては「ラフデザインとは」で紹介しています。
ワイヤーフレームの3つの役割
ワイヤーフレームには、次の3つの役割があります。
お客さまと情報の設計を確かめる
公開の直前になって「情報を増やしたい」「機能を変えたい」となると、時間も費用も余分にかかります。ワイヤーフレームの段階で、必要な情報が入っているか、情報の順番に問題はないか、必要な機能がそろっているかを、お客さまと確かめておきます。
デザイナーへの指示書になる
ワイヤーフレームは、デザイナーが何をデザインすればよいかを伝える指示書にもなります。ページの目的、ターゲット、目指す雰囲気を表す言葉、参考サイト、必ず入れたい要素などを書き添えておくと、デザイナーが迷わずに作れます。
コーディングする人への指示書になる
検索機能や問い合わせフォームなどの機能、ボタンを押したときの移動先などを書いておくと、ページを組み立てるエンジニアやコーダーへの指示書にもなります。
ワイヤーフレームを作る前の準備
ワイヤーフレームを作り始める前に、次の3つを整理しておきましょう。
サイト全体のコンセプトを理解する
どんなサイトを作りたいのかによって、のせる情報やその優先順位が変わります。ひとつのページを作るときも、サイト全体の中でそのページがどんな役割なのかを理解しておくことが大切です。
リニューアルの場合は、今のサイトの課題、競合のサイト、ターゲットの人物像、検索での見え方などを先に調べておきましょう。
サイトマップでページの構成を見える化する
サイトマップとは、サイトにどんなページがあり、どうつながっているかを表した図です。たとえば「トップページ」の下に「会社情報」「サービス」「採用情報」があり、「会社情報」の下に「会社概要」「沿革」がある、といった形です。
ページどうしの関係が分かると、それぞれのページに入れる情報と入れなくてよい情報を判断しやすくなります。
ワイヤーフレームを作るページをしぼる
すべてのページのワイヤーフレームを作るのが理想ですが、作業量が多くなります。多くの人が最初に訪れるトップページは必須ですが、同じ構成のページ（サービスごとのページや店舗ごとのページなど）は、1ページ分を作ってほかに当てはめれば十分です。構成をそろえることで、サイト全体の統一感も出ます。
よく使われるレイアウトの型
ワイヤーフレームを作るときは、まずページ全体のレイアウトの型を決めます。代表的なのは次の3つです。
1カラムレイアウト
すべての内容を1列に並べるレイアウトです。横幅を大きく使えるので内容を強調でき、上から順番に読ませる流れを作りやすいのが特長です。スマホの表示にも合わせやすく、ランディングページでよく使われます。一方で、写真や動画が少ないと単調に見えやすい面があります。
2カラム（マルチカラム）レイアウト
メインの内容の横に、メニューや関連情報の列を並べるレイアウトです。多くの情報をのせられ、整理もしやすいので、ブログやメディアのサイトでよく使われます。スマホでは1列に組みかえる必要があります。
グリッド型レイアウト
カードのような四角いまとまりを、タイル状に並べるレイアウトです。写真を多く見せたいサイトや、商品や事例を一覧で見せたいときに向いています。並べる情報の大きさがそろっていないと、整理された印象になりにくい点に注意しましょう。
ワイヤーフレームを作るときのポイント
よいワイヤーフレームを作るために、次の5つを意識しましょう。
要素ごとに理由と根拠をつける
「なぜこの情報を入れるのか」「なぜこの位置に置くのか」を言葉にしておきます。理由がはっきりしていると、話し合いが好みの言い合いになりにくく、公開後に効果を確かめて改善するときにも役立ちます。
事前にリサーチと分析をする
理由と根拠をはっきりさせるには、事前のリサーチが欠かせません。今のサイトがある場合は、アクセス解析や、ページのどこがよく見られているかを色で表すヒートマップなどを使うと、改善すべきところが見つけやすくなります。
見た目ではなく、情報の設計に集中する
ワイヤーフレームの段階で色や装飾まで考えると、時間がかかるうえ、話し合いが見た目の好みに引っぱられます。ここでは、情報の配置と順番を決めることに集中しましょう。
シンプルに作って、直しやすくする
ワイヤーフレームが一度で決まることはほとんどありません。線と箱と文字だけのシンプルな形にして、何度でも直しやすくしておきましょう。
固まったら、実際の文章と写真を入れる
最初から本番の文章を入れると、直すたびに手間がかかります。構成が固まった段階で、実際の文章や写真を入れましょう。完成イメージとのずれを小さくでき、デザイナーも作りやすくなります。
ワイヤーフレームからデザインにするとき
ワイヤーフレームができたら、いよいよデザインに進みます。情報の優先順位は変えずに、次のような工夫で見せ方を整えます。
面積を変える
たとえば、目を引かせたいメインの写真を、ワイヤーフレームのときより大きくします。
配置を変える
写真の上に文字を重ねる、上下に並べていた写真と文章を左右に並べるなど、細かい配置を整えます。
見せ方を変える
同じ情報でも、見せ方を変えると分かりやすくなることがあります。たとえば月に2〜3回しかないイベントの日程は、カレンダーで見せるより、日付を一覧にしたほうがすっきりします。
お客さまにワイヤーフレームを見せるときの注意点
ワイヤーフレームは、デザインの専門家ではない方が見ても分かるように見せることが大切です。
何を確かめてほしいのかを伝える
「必要な情報が入っているか」「情報の順番に問題はないか」「必要な機能がそろっているか」など、見てほしいポイントを先に伝えましょう。何も伝えずに見せると、色や見た目の感想ばかりが集まってしまいます。
文章はこの段階で固めておく
弊社に届く修正依頼でいちばん多いのは、テキストの変更です。見出しや説明文、ボタンの文言などは、できるだけワイヤーフレームの段階で確かめて固めておくと、デザインに入ってからの修正を減らせます。
意見と決めたことを記録に残す
ワイヤーフレームは、決めたことを残しておく記録にもなります。意見がメールやチャットに散らばらないように、ワイヤーフレームの上に直接書きこんでまとめておきましょう。デザインに直接書きこめる無料のツール「mitekaku」なら、画像にした資料やWebページの上に意見を書きこんで、URLで共有できます。
まとめ
ワイヤーフレームは、Webページのどこに何を置くかを決める設計図です。見た目を作りこむ前に、お客さまやデザイナー、エンジニアと内容をそろえておくことで、あとからの大きな作り直しを防げます。
デザインの前の情報の整理については「デザインの情報整理のやり方」も参考にしてください。
ポイント
■ワイヤーフレームの役割
・お客さまと情報の設計を確かめる
・デザイナーへの指示書になる
・コーディングする人への指示書になる
■作る前の準備
・サイト全体のコンセプトを理解する
・サイトマップでページの構成を見える化する
・作るページをしぼる
■作るときのポイント
・要素ごとに理由と根拠をつける
・事前にリサーチと分析をする
・情報の設計に集中する
・シンプルに作って直しやすく
・固まったら実際の文章と写真を入れる
