【実例付き】ワイヤーフレームとは何か？Webサイト制作における役割と重要性を解説
ワイヤーフレームとは、Webページのレイアウトやコンテンツの配置を見える化した設計図のことです。制作会社によっては「構成案」「ラフ」とも呼ばれます。お客さまにはあまり馴染みのない言葉かもしれませんが、ワイヤーフレームの作成はWebサイト制作の現場では欠かせない工程のひとつです。本記事では、ワイヤーフレームとは何か・なぜ必要か・誰が作るのかを、実例とあわせて解説します。
この記事のポイント
- ワイヤーフレームとは、Webページのレイアウト・コンテンツ配置を見える化した設計図
- デザインより先に作ることで、ユーザーにとってわかりやすい情報構造を設計できる
- 基本的に制作会社が作成する。クライアントが用意する場合はExcel・PowerPointでも可
- ワイヤーフレームの質が、完成するWebサイトの質を左右する
この記事が向く人・向かない人
向く人
- ワイヤーフレームという言葉を聞いたことはあるが、どんなものかよく知らない方
- Web制作を依頼したことがあり、制作プロセスを理解しておきたい方
- 相見積もり時にワイヤーフレームを自分で用意すべきか迷っている方
向かない人
- ワイヤーフレームの具体的な作成方法・ツールの使い方を知りたいエンジニア・デザイナー
目次
ワイヤーフレームとは何か？
ワイヤーフレームとは、Webページのレイアウトやコンテンツの配置を見える化したものです。英語で「ワイヤー（針金・金属線）」「フレーム（枠）」を意味し、枠線だけで構成された骨格図というイメージが近いです。
以下は、あるサイトのトップページのワイヤーフレームの例です。
色やフォント、写真などのビジュアル要素はなく、「どこに何を配置するか」という情報構造だけを示しています。
なぜデザインの前にワイヤーフレームを作るのか？
ユーザーにとってわかりやすい情報構造を、デザインの制約なく設計するためです。デザインを先行させてしまうと「このコンテンツは入れたいが、かっこ悪くなるからやめよう」「スペースがないから省こう」という判断が生まれやすくなります。
ワイヤーフレームの段階では、ビジュアルの制約を受けずに「ユーザーが必要とする情報が正しく配置されているか」「見たいページ・知りたい情報が見つけやすいか」を純粋に検討できます。
デザインは本来、伝えたいことがより伝わるようにするための演出です。その演出を活かすためにも、まず骨格をしっかり設計することが重要です。設計図なしで家を建てるようなものだと言えば、その重要性がイメージしやすいかもしれません。
ワイヤーフレームにはどんな役割があるのか？
サイトのわかりやすさ・操作性の設計
ヒアリングした内容・ご要望・収集した情報を整理し、「どのように構成するとわかりやすいか」を検討して見える化します。この工程があることで、完成したサイトの情報構造が整い、ユーザーが目的の情報にたどり着きやすくなります。
制作チームとクライアントの認識共有
社内の制作チームとの共通認識を作るだけでなく、クライアントとの間でも「こういうページにしたい」という基準を持つための重要な資料です。言葉や文章だけのやりとりでは認識のずれが生じやすく、それが手戻りの原因になります。ワイヤーフレームを介することで、制作が進むにつれてのすれ違いを防ぎます。
ワイヤーフレームは誰が作るのか？
基本的には制作会社のディレクターやデザイナーが作成します。アットノエルでは以下の流れで進めます。
- 初期設計（プランナーが作成）：ヒアリング・取材をもとに、プランナーが全ページのワイヤーフレームをまず作成します。打ち合わせ中にリアルタイムで作成・修正することもあります
- 本設計（チーム全員で見直し）：デザイナー・エンジニア・ディレクターが第三者目線で設計を見直し、より精度の高いものに仕上げます
相見積もりの際などにお客さまがワイヤーフレームを用意してくださる場合は、Excel・PowerPoint・手書きのスケッチなど、どんな形式でも構いません。ツールや形式よりも「どんなページにしたいか」の意図が伝わることが重要です。
ワイヤーフレームとデザインを比較するとどう変わるのか？
先ほどのワイヤーフレームをもとに実際に制作したデザインと比較してみましょう。
骨格だけだったワイヤーフレームが、色・写真・フォントが加わることでサイトとしての表情を持ちます。逆に言えば、ワイヤーフレームの段階で情報構造がしっかり設計されていなければ、どれだけビジュアルを磨いても「わかりにくいサイト」になってしまいます。
よくある質問
Q. ワイヤーフレームはクライアントが用意しないといけませんか？
A. 基本的には不要です。制作会社がヒアリングをもとに作成します。ただし、相見積もりの際に複数社へ共通の条件で見積もりを依頼したい場合は、用意しておくと比較しやすくなります。詳しくは「ホームページ制作の打ち合わせに必要な資料」をご覧ください。
Q. ワイヤーフレームはどのツールで作りますか？
A. アットノエルではAdobe XDやFigmaを主に使用しています。お客さまがご用意いただく場合はExcel・PowerPoint・手書きなど、どんな形式でも構いません。
Q. ワイヤーフレームの確認・修正に関わることはできますか？
A. はい。ワイヤーフレームはお客さまに確認いただいたうえで進めます。打ち合わせの場でご意見をいただきながら修正することも多く、リモートミーティングでもリアルタイムで修正対応します。
Q. ワイヤーフレームなしで進める制作会社もありますか？
A. あります。制作会社や案件によっては、デザインと設計を並行して進めたり、ワイヤーフレームをクライアントに見せない場合もあります。ただし、設計工程を省くとサイトの情報構造が曖昧になりやすく、完成後に「使いにくい」「わかりにくい」という問題が起きやすくなります。
まとめ
ワイヤーフレームは、Webサイト制作において完成の質を左右する重要な設計工程です。デザインより先に作ることで、ユーザーにとってわかりやすい情報構造を作り込むことができます。
- ワイヤーフレームとはWebページの設計図。レイアウト・コンテンツ配置を見える化したもの
- デザインより先に作ることで、ユーザー目線の情報構造を設計できる
- 基本的に制作会社が作成する。用意する場合はどんな形式でも可
- 設計の質が、完成するWebサイトの質を直接左右する
制作の流れ全体については「アットノエルのホームページ制作の流れ」もあわせてご覧ください。
私たちが御社のWeb事業部として伴走します。
わたしたち、アットノエルは、まるで社内の事業部のように気軽に相談できるウェブ制作会社。愛知県名古屋市を拠点に日本全国対応しています。
「あなたの会社のWeb事業部」として、Webサイトのポテンシャルを最大限に発揮できるよう、制作・リニューアルから、保守・運用のサポートまで、全力で支援いたします。
なにかと気軽に相談できるパートナーが欲しい方、会社の事業展開に合わせWeb活用に取り組みたい方、ぜひアットノエルへご相談ください。
2006年よりWebサイト制作・運用に携わる。2012年名古屋市にて株式会社アットノエルを創業。
建築・医療・製造業・士業・商社・小売業等、中小企業から上場企業まであらゆる業種のWeb活用を支援し、主にWebサイトの企画や運用サポート、お客さまの相談役を担っています。
「最適化」と「情報整理」が得意です。
»著者プロフィール
お問い合わせ CONTACT
数あるWebサイト制作会社からアットノエルを見つけてくれた方へ。
Webサイト制作会社・パートナーを変える必要はもうありません。
「もっと早く出逢いたかった」そうおっしゃっていただけるのがわたしたちの誇り。
「御社のWeb事業部」として、企画から制作、改善、運用まで、総合的にサポートいたします。
日本全国対応しておりますので、遠方の方もお気軽にご相談ください。