ワイヤーフレームとは？ホームページ設計で失敗しないための考え方

「サイト作成の手順」シリーズの4日目では、ホームページ全体の「サイトマップ」を作りました。必要なページを洗い出し、グルーピングし、優先順位をつける――ここまでで、サイトの骨組みはできあがっています。

5日目の今回は、その骨組みの上に「各ページの中身」を組み立てていく作業、ワイヤーフレームについて解説します。

ワイヤーフレームとは何か・なぜ必要か
ワイヤーフレームで決めること
「デザイン(見た目)」との違い
自分で作る場合のポイント・注意点
プロに依頼する場合とのメリット比較
次回予告

ワイヤーフレームとは何か・なぜ必要か

ワイヤーフレームとは、ページの中に「何を」「どの順番で」「どのくらいの大きさで」配置するかを、線と枠だけで表した設計図のことです。文字の色やフォント、写真の中身にはまだこだわらず、白黒の四角と線でレイアウトの骨格だけを決めていきます。

なぜこの工程が必要かというと、いきなり見た目のデザインから作り始めると、次のような失敗が起きやすいからです。

目立たせたい情報が埋もれてしまう
ページごとに情報の並び順がバラバラになる
途中で「やっぱりここに写真を入れたい」となり、レイアウトを作り直す羽目になる

ワイヤーフレームで先に「情報の設計図」を固めておくことで、こうした手戻りを減らせます。

ワイヤーフレームで決めること

ワイヤーフレームの段階で決めるのは、主に次の3つです。

要素の優先順位：そのページで一番伝えたいことは何か。訪れた人の視線が最初にどこへ向かうべきかを決めます
レイアウト：見出し・文章・画像・ボタンなどを、上から下へどの順番で並べるか
導線：次に読んでほしいページや、問い合わせ・購入といった行動につながるボタンをどこに置くか

例えばトップページなら、「サイトの概要」→「主なサービス・コンテンツ」→「新着記事」→「お問い合わせへの導線」といった順番を、この段階で決めてしまいます。

「デザイン(見た目)」との違い

ワイヤーフレームとデザインは、混同されがちですが役割が違います。

段階	決めること
ワイヤーフレーム	何を・どの順番で・どのくらいの大きさで配置するか
デザイン	配色・フォント・写真・装飾など、見た目の仕上げ

色やフォントを先に決めてしまうと、「せっかく選んだデザインだから」という理由で、本来変えるべきレイアウトを変えづらくなることがあります。骨組み(ワイヤーフレーム)と仕上げ(デザイン)を分けて考えることで、それぞれの工程に集中できます。

自分で作る場合のポイント・注意点

ワイヤーフレームは、専用のツールを使わなくても、紙に手描きするだけでも十分に効果があります。もう少しきちんと形にしたい場合は、Figmaのような無料のデザインツールもよく使われています(このブログのポートフォリオサイトでも、制作の際に使うツールとしてFigmaをおすすめしています)。

自分で作る際に、特に意識したいのが「見やすさ」と「構成の分かりやすさ」です。

このブログ(里と町制作室)自体を作るときも、この点を一番気にしました。ワイヤーフレームツールを使って図を描いたわけではありませんが、「テーマやカテゴリーがまとまっていないと、何を発信したいサイトなのか読み手に伝わらなくなる」という点を強く意識し、カテゴリー構成やメニューの並びを何度か見直しています。

ここで注意したいのが、自分だけで作っていると、分かりにくさに気づきにくいということです。作っている本人は内容を全部知っているので、「これで伝わるはず」と思い込みやすくなります。実際にこのブログを作る過程でも、第三者の視点で確認・修正するプロセスを挟んだことで、初めて気づけた分かりにくさがありました。

自分で作る場合は、次のような工夫が有効です。