ワイヤーフレームとは？具体的な作り方とおすすめツール

ワイヤーフレームとは、LPやウェブページの基本的な構成を「線」や「枠」でシンプルに表現した設計図のことです。
どの情報を・どこに・どのように配置するのかを視覚的に示すことで、全体的なイメージの把握やコンテンツの過不足などを確認できます。「ワイヤー（wire/線）」と「フレーム（frame/枠）」を組み合わせた言葉からきており、「WF」と略されることもあるので覚えておきましょう。

家づくりの際にまず設計図を作成するのと同じように、Webページの制作でも、基本的には最初にワイヤーフレームを作成します。ワイヤーフレームの目的は、ページ全体の構成や要素の配置を把握することにあるため、この段階ではフォントや色などの細かなデザイン要素は盛り込みません。

ワイヤーフレームは、一般的にWebディレクターやマネージャーなど、プロジェクト設計を担う立場の人が中心となって作成します。

Webページのターゲットや目的といった要件を踏まえ、盛り込むべき要素を検討しながら形にしていきます。ただし、「誰が作るべきか」という明確な決まりはなく、体制やプロジェクト内容によって担当者は変わります。

たとえばWeb制作会社へ委託する場合、発注側が自ら作成することもあれば、ヒアリング内容をもとに制作会社側が作成することもあります。Webデザイナーやエンジニアがワイヤーフレームを担当するケースも珍しくありません。一人で完結させるのではなく、チームメンバー全体を巻き込みながら共同で作る場合もあります。

ワイヤーフレームはあくまでWebページの「骨組み」や「方針」を示すものであり、完成デザインそのものではありません。そのため、必ずしもビジュアルデザインに精通した人が作成しなければならないわけではないのです。

ウェブページ制作でワイヤーフレームが重要視されるのは、次のような役割を担っているためです。

• 全体のレイアウトを設計するため
• 関係者間で情報を共有するため
• たたき台として議論を深めるため

全体のレイアウトを設計するため

ワイヤーフレームは、ページの目的を達成するために「どの要素を」「どこに配置し」「どのように動かすか」を整理・決定する設計図です。

掲載する情報を洗い出し、リンクの位置や数、入力フォームの有無・配置といった仕様を検討する大切な工程となります。ワイヤーフレームを作らずにいきなりページを作り込んでしまうと、「必要なコンテンツが抜けている」「目的とずれた構成になっている」といった問題が起こりやすく、後から大幅な修正が必要になるリスクが高まります。

あらかじめワイヤーフレームで全体のレイアウトを固めておくことで、ムダを抑えながら効率的にウェブページを制作できます。

関係者間で情報を共有するため

ウェブページの制作には、ディレクター・デザイナー・エンジニアに加え、受託制作であればクライアントなど、複数の関係者が関わるのが一般的です。

関わるメンバーが多いほど、共通のたたき台がないと情報共有が難しくなり、認識のズレが生じやすくなります。

たとえば、クライアントの要望をワイヤーフレームに落とし込まず、デザイナーがいきなりデザインを仕上げてしまうと、完成イメージを見せた段階で「要望と違う」と差し戻しになるケースも少なくありません。自社内での制作であっても、ディレクターのイメージと大きく異なれば、やり直しという非効率な対応が発生します。

ワイヤーフレームを共有しておけば、関係者全員の認識をそろえながら制作を進められるため、コミュニケーションコストや手戻りを抑えることができます。

ワイヤーフレームをたたき台として議論するため

ワイヤーフレームは、アイデア出しやブラッシュアップの場面でも有効です。色や装飾を省いたシンプルな状態でレイアウトやコンテンツ構成を決めていくため、大枠だけを先に形にし、メンバー同士で意見を出し合いながら完成形へと近づけていくことができます。

一人の発想だけでなく、複数の視点やアイデアを取り入れて構成を練り上げることで、ユーザーの行動を促しやすく、目的達成につながるページ設計がしやすくなります。

ここからは、具体的なワイヤーフレームの作り方を見ていきましょう。

基本的流れは、次の5つのステップです。

1. LP・Webぺージのコンセプトを明確にする
2. ぺージに掲載する要素を洗い出す
3. 要素ごとの優先度を決める
4. レイアウトを設計する
5. ワイヤーフレームとしてまとめる

順番に解説していきます。

1．LPやウェブぺージのコンセプトを明確にする

まず、作成するページの目的とコンセプトを明確にしましょう。コンセプトによって、掲載すべき内容や構成は大きく変わります。ここがあいまいなままだと、訴求がぼやけたページになりがちです。目的やコンセプトを明確にしておくことで、下記のような作業がしやすくなります。

• 必要な情報・不要な情報の判断
• レイアウトや導線の組み立て
• デザインの方向性のイメージ

2．ページに掲載する要素を決める

コンセプトをもとに、「ページに何を載せるか」を洗い出します。たとえば、コーポレートサイトのトップページであれば、次のような要素が考えられます。

• ロゴ
• 連絡先（電話番号・お問い合わせボタンなど）
• メインビジュアル（イメージ画像）
• キャッチコピー
• グローバルナビ（ページメニュー）

といった要素が考えられます。

ECサイトのランディングページであれば、

• 商品の詳細情報
• 価格・プラン
• 購入ボタンや購入ページへのリンク
• キャンペーン情報
• 実績・お客様の声　など

が必要になるでしょう。

この段階では、「とにかく思いつくものをすべて書き出す」くらいで構いません。あとから整理・取捨選択すればよいので、最初に出し惜しみしないほうが、重要な要素の漏れを防ぎやすくなります。

3．要素の優先度を決める

掲載する要素が一通りそろったら、それぞれの「優先度」を決めていきます。

一般的に、Webページは「上にあるものほど見られやすく、下に行くほど見られにくい」という傾向にあります。そのため、特に伝えたい情報やコンバージョンに直結する要素は、なるべくページ上部に配置することが重要です。優先度を決める際には、

• 企業側が打ち出したいポイント
• ユーザーが知りたい情報、不安に思っている点
• 最終的なゴール（問い合わせ、資料請求、購入など）までの自然なストーリー

を両方の視点から整理し、「どの順番で見せるとユーザーが迷わずゴールまで進めるか」を考えるようにしましょう。

4．レイアウトを決める

要素の優先度が決まったら、それをページ上でどう配置するか、レイアウトを設計します。代表的なレイアウト例としては、次のようなものがあります。

• フルスクリーン：ファーストビューを中心に画面いっぱいに要素を配置するタイプ
• シングルカラム：1列で縦方向にコンテンツを積み上げていく構成
• マルチカラム：2列以上に分けて、テキストと画像などを並列で見せる構成
• グリッド：タイル状のマス目に沿って、複数の要素を均等に配置する構成

どのレイアウトが適切かは、ページの役割や掲載する情報量・想定するデバイス（PC・スマホ、両方）によっても異なります。

レイアウトがある程度固まったら、要素の優先度に合わせて「どの位置に何を置くか」をラフに配置していきます。最初の段階では、紙に手書きでざっくり枠と矢印程度のラフで問題ありません。

また、ユーザーは、ページをZの形で上から下に視線移動するといわれています。視線の流れを意識しながら、「見てほしい情報が自然と目に入るか」「次に読むべき場所が直感的に分かるか」を意識して配置することが大切です。

また、ページがあまり縦長になりすぎるとユーザーは離脱しやすくなります。情報量が多いと感じたら、下層ページに分けたり、タブで情報を整理するといった構成も検討しましょう。

5．ワイヤーフレームを作る

レイアウトの方向性が決まったら、ツールを使ってワイヤーフレームとして清書します。

手書きのままでも作業自体は進められますが、社内メンバーやクライアントと共有する場合は、ツールで整えたワイヤーフレームにしておくほうが、データの修正や差し替えがしやすく便利です。同じようなページを作成する場合も、効率よく作業できるでしょう。

ワイヤーフレームが完成したら、それをもとに本格的に作成をスタートしていきます。

また、ワイヤーフレームの完成後はすぐに本制作に取り掛かるのではなく、少し時間をおいて、客観的に見直したりメンバーの意見を聞く時間を設けることをおすすめします。

この段階で違和感や抜け漏れを潰しておくことで、デザイン・コーディング以降の出戻りを大きく減らすことができます。

競合サイトや参考サイトをしっかり分析する

どのようなレイアウトやコンテンツの配置にするかは、競合サイトや参考サイトの分析から多くのヒントが得られます。特にワイヤーフレーム作成に不慣れな場合は、どのようなレイアウトが最適か判断しづらいため、他社事例を参考にすることが有効です。ワイヤーフレーム作成ツールの中には、あらかじめテンプレートが用意されているものも多く、それらを活用するのもよいでしょう。

作り込みすぎない

ワイヤーフレームはあくまで「骨組み」であり、デザインはその後の工程で詰めていくものです。

最初の段階から細かく作り込み、デザイン要素まで指定してしまうと、デザイン制作時に自由が利かずに表現の幅を狭めてしまいます。上司やクライアントに説明するにしても、デザインまで含んでしまうと「色のイメージが違う」など本来のワイヤーフレームの意図とは違う部分で修正指示が出る恐れもあるでしょう。

また、ワイヤーフレームの段階では、後から手軽に修正・変更できる状態にしておくことが重要です。基本的には、線と枠を用いたモノクロのシンプルな構成で十分であり、多くの時間をかける必要はありません。

スマホ版とPC版を分けて作成する

閲覧するデバイスに最適な設計であることも重要です。近年はスマートフォンからサイトを閲覧するユーザーが増えており、スマホとPCでは画面サイズや縦横比が大きく異なります。PC画面だけを想定して設計してしまうと、スマホで表示されたときにレイアウトが崩れて見づらくなり、離脱される恐れがあります。

少なくとも主要なページはスマホ版とPC版に分けて、それぞれに応じたワイヤーフレームを作成することをおすすめします。

Webサイトを作るうえで骨組みとなるワイヤーフレームは、Webページの出来栄えを大きく左右する重要なものです。ワイヤーフレームを作っておくことで無駄な修正作業を防ぎやすく、効率の良いページ作成ができます。また、適切なツールを使うことで、チーム間での共有や修正がスムーズに進むため、より良いサイト制作につながります。

ワイヤーフレームを作る際には、今回ご紹介した作成時のポイントやおすすめのツールをぜひ参考にされてみてください。