ワイヤーフレームとは？Web制作時の注意点とワイヤーフレームの作り方

ワイヤーフレームとは、Web制作において「図面や設計図の役割」をするものです。
サイトを制作するためには、「どんな情報」を「どんなデザイン」や「どんなシステム」で構築するか詰めていく必要があります。
ワイヤーフレームは一番重要な「どんな情報を掲載するか」を決めるために制作します。

具体的には下記のような内容を決めて形にしたものがワイヤーフレームです。

• このページではどんなコンテンツを記載するの？
• ページ内に掲載する情報の優先度はどれが一番高いか？
• 説明が足りないから文章を追加しようか？
• 文章だけだと伝わらないから図を入れた方がいいんじゃないか？
• 関連する他のページへのリンクは必要か？

このページでは、そんなワイヤーフレームについての解説とワイヤーフレームの作り方、またWeb制作時のワイヤーフレームの注意点などを解説します。

ワイヤーフレームとは？

ワイヤーフレームの本来の意味は、3DCGの業界で使われていた「CGになる前の線画で描写したもの」を指していました。
しかし、線画で大枠を決めて詳細な部分を作り込んでいく過程は、Web制作においても同様の手順を踏むために、デザインを入れずに情報だけを設計していくものをワイヤーフレームと呼ぶようになってきました。

ワイヤーフレームの役割

ワイヤーフレームの役割は「情報の精査」と「大枠の配置」を決めるためのものです。
クライアント、制作会社で認識を共有するために作成し、制作する前にページ遷移の流れを確認するために利用することもあります。

Web制作におけるワイヤーフレームの位置付け

ワイヤーフレームはWeb制作における「要件定義」に位置付けされます。

• 要件定義・サイト設計
  ○サイトの仕様策定、ワイヤーフレームの作成
• デザイン制作
  ○ワイヤーフレームを元にデザインの制作進行を行う
• コーディング・実装
  ○確定したデザインを元にHTML、システム組み込みを行う
• テスト
  ○完成したサイトの動作確認を行う
• リリース・運用
  ○サイトの公開、更新作業を行う

上記からもわかるように、ワイヤーフレームの制作は最初の設計に当たるため、最も重要な作業になります。

ワイヤーフレームは誰が作る？

ワイヤーフレームを作る人は、大きく「発注者側」と「受注者（Web制作会社）」の2つに分かれます。
サイトリニューアル・新規Web制作などの場合は、基本的にはWeb制作会社のディレクターやデザイナーが制作することが主ですが、「既存サイトに1ページ追加」などの小規模な案件の場合だと、発注者がワイヤーフレームを制作してWeb制作会社に見積もりを依頼することもあります。

なぜワイヤーフレームが必要なのか？

ワイヤーフレームを作る理由は、無駄な製作コストを出さないためです。ワイヤーフレームを作らないでWeb制作してしまうと、いざ修正が入ったタイミングで「デザインをやり直し」したり、「コーディングをやり直し」することになってしまい、無駄な製作費が発生することが予想されます。

簡単な改修作業で「デザイン修正が入らない」という前提であればワイヤーフレームを作らなくても良いですが、なかなかそのような状況はないので、一般的にはワイヤーフレームが必要になります。

そのほか以下3点が、ワイヤーフレームが必要な理由として挙げられます。

必要な要素の洗い出しのため

サイトを制作するためには、「何を掲載するか」が重要になってきます。そのためには「何が必要か」を落とし込む必要があり、それを見つけるためにワイヤーフレームが活躍します。

ページ内容のアイデア出し、議論のため

サイトに何を掲載するかはとても難しい問題です。様々な部署や、各サービスの担当者などと相談する必要がありますが、Wordファイルなどのテキストだけで議論や確認は難しく、様々なチェック漏れが多発します。

その点、ワイヤーフレームはある程度サイトの体裁を整えているため、実際のサイトの仕上がりをイメージしつつ、足りないものを確認できます。

完成イメージの共有のため

ワイヤーフレームが完成したら決裁者に確認を取る必要がありますが、その場合も同様に、ワイヤーフレームはサイトの体裁を整えているため、チェックが容易です。

ワイヤーフレームと混同しやすい用語とその違い

Web制作ではワイヤーフレームと混同しやすい用語が多数あります。
ここでは、そんな似て非なるものを紹介します。

デザインカンプ

デザインカンプとは、「ワイヤーフレーム以上でデザインが5割以上できているもの」を指します。
すでにワイヤーフレームが確定し、デザイン制作を進めて、ほぼ完成に近づいたもののまだ完全に出来上がっていない（後で写真を差し替える等）状態のものです。

プロトタイプ

プロトタイプとは「動くワイヤーフレームのようなもの」を指します。
実際の操作イメージを掴む必要がある場合、デザインなどを入れずに動作の事前チェックをするために作成するものです。

ディレクトリマップ

ディレクトリマップとは「サイト上の全てのページを一覧化しているリスト」を指します。
サイトを制作する上では、「お知らせ」などの全てのページを網羅するリストを作成して、足りないページがないか、不必要なページがないかなどを確認するために使うものです。

サイトマップ

サイトマップはディレクトリマップとも混同することが多いですが、基本的には「HTMLサイトマップ」と「XMLサイトマップ」があります。
HTMLサイトマップは閲覧するユーザーに対して、「サイト上にこのようなページがあります」と明示する目次のようなページです。
XMLサイトマップは、GoogleやYahoo!などに伝えるためのページリストを記載したデータファイルです。ユーザーが見ることは基本的にはありません。

ディレクトリマップのことを指してサイトマップと呼ぶ方もいますが、厳密には違います。

ワイヤーフレームの作り方

ワイヤーフレームを作る際に、一番重要なことは情報の整理です。
ここでは情報整理の方法と、ワイヤーフレームの制作方法をお伝えします。

1.ページに必要な情報を整理する

情報の整理がワイヤーフレームの制作で一番重要なポイントになります。
「サイトに何を掲載するのか？」を決めるためには、「情報のピックアップ」「情報のグルーピング」「情報のランキング（優先度付け）」を行い、必要なもの、不要なものの洗い出しをします。それぞれ解説します。

必要な情報のピックアップ

最初に行うことは、「情報のピックアップ」です。
「掲載する情報がこれしかない」ということは少なく、おそらく「たくさん情報があるけど、どれをサイトに掲載しようか？」ということが多いかと思います。
最初は上限を設けずに、ページに記載しても良いと思うものをたくさんピックアップしてください。

情報のグルーピング

次に行うことは「情報のグルーピング」です。ピックアップした情報をグループごとに分けて整理します。

情報が多いグループは必要性と優先度が高く、逆に少ないグループや、グルーピングできなかった情報は不要なことが多いため、この段階で掲載の優先度が低くなります。

情報のランキング（優先度付け）

その次に行うことは、「グルーピングした情報のランキング（優先度付け）」です。

どれも重要だと思ってピックアップされた情報だと思いますが、サイトは上から順番に読むしかありません。「何を最初に表示すべき」か「AとBだとどちらがユーザーは求めているか」などを、議論しながら情報のランキングを決めていきましょう。

2.情報のレイアウト

情報のグルーピングができたら、次は実際にワイヤーフレームを形にしていく作業です。

ヘッダー

ヘッダーとはサイトの上部に設置するパーツのことで、主にサービス名や会社名の表示、ユーザーが目的のページへ遷移するためのナビゲーションを設置します。

遷移するページが多いようであれば、グローバルナビゲーションはドロップダウンメニューにするなど、多少工夫が必要になります。また、CTA（Call To Action）に当たるお問い合わせフォームや、電話番号を表示することもあります。

フッター

ユーザーがページ下部までスクロールした時に、サイトを回遊するためのナビゲーションを設置するパーツのことです。

基本的にはヘッダーと同様のコンテンツを入れることが多いですが、上部のエリアが限られているヘッダーに対し、フッターは下部にあるためエリアを広げてもあまり影響がありません。そのため、ヘッダーよりも詳細な情報を表示することが多々あります。

サイドメニュー

サイドメニューはコンテンツエリアのサイドに掲載するメニューのことです。
ヘッダーやフッターでナビゲーションが完結していれば不要ですが、サイトの規模が大きくなると「同じカテゴリ内でさらにメニューが必要」となることが多く、その場合に利用されます。近年はレスポンシブサイトの影響で減少しつつあります。

＜関連記事＞

ページごとのコンテンツ

こちらがメインになる情報を入れるエリアです。整理した情報を、優先度の高い順番に並べてみてください。

また、下層ページや関連リンクなどの設置は忘れてしまうことが多いので、実際にページを遷移するイメージで、足りない要素がないか確認しながら作業を進めましょう。

3.清書する方法

情報のレイアウトが完了したら、いよいよ清書です。ここでは、実際にワイヤーフレームを制作するツールをご紹介します。
どのツールが正解というものはありませんし、有料ツールもあるので、ご自身の環境に合わせてどのツールが自分に合っているか確認してみてください。

Excel、PowerPoint

ビジネスシーンではお馴染みのMicrosoft Office製品です。
元々は表計算ソフト、プレゼンテーションソフトですが、ワイヤーフレームを制作することも可能です。

数ページのワイヤーフレームを作る場合にはおすすめです。

手書き

ノートやコピー用紙に手書きをしてスキャンする方法もあります。
ご自身の中で最初はイメージが固まらないと思うので、最初は何枚も手書きで簡単に作ってしまうのも良いかと思います。

こちらも数ページであれば良いですが、最終的にはテキストを起こす必要が出てくるため、最初だけ手書きでイメージを膨らませて、方向性が決まったらExcelやPowerPointなどに起こす方が良いかと思います。

XD、Figma

ワイヤーフレームを作るための専用ツールもあります。
AdobeXDや、Figmaなどは一度ツールの使い方を覚えると、とても便利なツールです。

ワイヤーフレームをよく作る場合であれば、ツールの使い方を勉強すると制作がとても早くできるのでおすすめです。

そのほかのワイヤーフレーム作成ツールを知りたい方は、以下の記事をご覧ください。

＜関連記事＞

ワイヤーフレームを作る上での注意点

ワイヤーフレームを制作する目的はイメージを共通させる設計図を作ることです。
ここではそんなワイヤーフレームを作る上での注意点を記載します。

デザイナー、コーダーと認識を一致させる

制作会社に依頼する場合はデザイナー、コーダーに指示するためにも利用されます。
わかりやすくワイヤーフレームを制作したつもりでも、初めて見るデザイナー、コーダーには理解しきれないポイントもあるで、認識のズレが起こりづらいワイヤーフレームを意識しましょう。

コンテンツ、機能、動作が目的からズレていないか常に意識

ワイヤーフレームを作っていると、「一見それっぽいサイト」が出来上がってくるような錯覚があります。
本来の目的は「ユーザーに見てもらうため」にあるので、「ユーザーが欲しい情報がわかりやすく掲載されているかな？」という目線を持ちながら常に制作するようにしましょう。

デザインしない

ワイヤーフレームを作る時は形にする関係上、どうしても「綺麗に作ろう」という意識が働きます。「こっちのレイアウトの方がカッコいいかな？」と作業を進めているとなかなか完成しません。要素だけが揃っていれば多少崩れていても問題ありませんので、完成を優先させましょう。

また、配色も厳禁です。白と黒だけで制作することで配色を考える隙をなくしているので、色は付けないようにして制作しましょう。

テキストは具体的な内容を入れる

ワイヤーフレームを作っている段階では、確定した原稿がない場合が多いです。
「サンプルテキストです」などの文言を入れたくなりますが、サンプルの原稿が多いとイメージが付きづらくなるため、ある程度具体的な文言を入れるようにしましょう。

スマホ版を常に意識して複雑なレイアウトにしない

昨今のWebサイトは、レスポンシブサイトがほとんどです。
パソコンでワイヤーフレームを作ることが多いと思いますので、スマートフォンのことを忘れてしまうことがあります。複雑なレイアウトにしてしまうとスマートフォンの時にレイアウトできないことがあるため、複雑なレイアウトはしないようにしましょう。

まとめ

ワイヤーフレームをしっかり作っておくことで、社内で共通のイメージを持つことができるようになります。

また、設計図が事前に出来上がっていることにより、トラブルを未然に防ぐこともできますので、しっかりしたワイヤーフレームを作っていきましょう。