ワイヤーフレームとは？簡単に作れる方法を解説

web制作に携わっている方なら「ワイヤーフレーム」という言葉をよく耳にすることでしょう。そんなワイヤーフレームですが、どのようなもので、どうやって作れば良いのでしょうか。
ここでは、ワイヤーフレームとは何か、どんな目的があるのか、誰でも簡単に作る方法やコツを解説します。

web制作初心者の方はぜひ参考にしてみてください。

ワイヤーフレームとは

ワイヤーフレームとは、webサイトの構成やコンテンツの配置を、どのように設計するかを示す設計図のことです。
webサイト制作においては欠かせない要素の１つです。

ワイヤーフレームはよく家の間取り図に例えられます。
家を建てるとき「どこをリビングにして、どこをキッチンにして、配置はこうで…」と考えますよね。
webサイトも同じように、全体の構成からページ内の細かい配置をワイヤーフレームとして設計図を作成するのです。

ワイヤーフレームの目的

前述したとおり、ワイヤーフレームは家の間取りのようなものです。
なので、ワイヤーフレームの目的は、どのような設計にするか明確化するために作成します。

特に複数人でサイト制作を行う場合には、ワイヤーフレームが必要不可欠です。
お互いがワイヤーフレームという共通認識をもつことで、制作物の認識のずれを生じさせない役割を持ちます。
1人で制作する場合にも「ここには何を配置するんだったっけ…」と悩まないためにも必要です。

ワイヤーフレームと混同しやすいもの

ワイヤーフレームと混同しやすいものとして、サイトマップ、デザインカンプ、ディレクトリマップが挙げられます。それぞれの違いについて見ていきましょう。

サイトマップ

サイトマップは、ユーザー向けにサイトにどのような情報を掲載しているか一覧でわかるように示したページです。ワイヤーフレームはそもそもサイトを作る前の段階のものなので、サイトマップとは異なります。

また、サイトマップはユーザー向きですが、sitemap.xmlはクローラー（サイト内を巡回するロボット）向けのもので、こちらもワイヤーフレームとは異なりますので混同しないようにしましょう。

デザインカンプ

デザインカンプとは、webページの見本を示した図のことです。細かいデザインまで決めた見本図になり、ワイヤーフレームはあくまで構成図になるのでデザインカンプとは異なります。

デザインカンプはクライアントに「このようなイメージで出来上がりますよ」と示すのに用いられます。

ディレクトリマップ

ディレクトリマップとは、webサイトの構成を一覧形式でまとめたものになります。「このページの下の階層にはこのページ、その下には…」と階層構造を示すのに用いられます。
サイトの構造を示すのに適していますが、どのコンテンツをどのように配置するかなどは見えないためワイヤーフレームとは異なります。

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

そんなワイヤーフレームですが、慣れていないと難しく感じてしまうことでしょう。ここからは初心者の方でも簡単にワイヤーフレームを作成できるように、作り方を手順に沿って解説していきます。

ワイヤーフレームを作成するには、パワーポイントやExcelなどの一般的なツールから専門的なツールまで存在します。詳細については記事の後半で解説します。

ワイヤーフレームを作成するときの注意点

ワイヤーフレームを作成する前に、いくつか注意点があるので抑えておきましょう。
具体的には下記の4つがあります。

情報の洗い出しは徹底的に行う

最初の「情報の洗い出し」ですが、サイトの構成が決まったのにもかかわらず「あとから追加すべき情報が出てきた…」ということもしばしばあります。

とくに「目的、ターゲット、サービスの強み」は事前にしっかり決めておかないと後に仕様変更などが発生してしまう恐れがあります。
場合によってはワイヤーフレームを大きく変更する必要が出てきます。

そうならないためにも、最初に行う情報の整理は徹底的に行うようにしましょう。

PCとスマホは別で作成する

「PCとスマホは別で作成する」ですが、PCとスマホの大きな違いは画面サイズです。画面サイズに応じて表示できるページデザインが異なってきます。ありがちなことは「PCのみ考えていて、スマホで表現するのが難しくなってしまった…」という失敗です。初めからスマホを想定してワイヤーフレームを作成することで回避することができます。

デザインはそこまで凝らない

「デザインはそこまで凝らない」というのは、ワイヤーフレームはあくまで設計図に過ぎないからです。ワイヤーフレームの目的が設計の明確化である以上、それ以上凝るのはまた別の作業です。

複数人で行う場合は情報共有をしっかり行う

「複数人で行う場合は情報共有をしっかり行う」は当然のことではありますが、1つのサイトを制作している以上、注意する必要があるでしょう。複数で制作して、構成が大幅に異なってしまっては、修正も後々大変になってきます。
しっかりとコミュニケーションを取って進めていきましょう。

以上がワイヤーフレームを作成するときの注意点です。

ではここからは実際の作成手順をみていきましょう。

１．情報を整理

まずは、サイトに掲載する情報を洗い出すことから始めましょう。複数人で行う場合は、意見を出し合ってなるべく多くの情報を出すことが重要です。

情報を洗い出したら、ページ単位で掲載する情報を分けていきましょう。サイトのグローバルナビゲーションにどの情報を掲載するかを考えるようにしましょう。グローバルナビゲーションはサイトの階層構造の中でも上位に位置ずくものなので、そこから枝葉を広げるように掘り下げていきます。
どの情報を下層ページとして位置づけるかまで決まったら、次のステップに進みましょう。
　　

２．レイアウト作成

前項では情報整理を行い、これで主にサイトマップが完成しました。次は実際に各ページにはどのようなコンテンツを配置するのかを決めていきます。ページごとに掲載する情報が分かれるため、当然コンテンツも異なります。

デザインの詳細までこだわる必要はないので、どこにどのコンテンツを置くかを決めるようにします。その時にユーザーの動線も意識して配置していくようにしましょう。
これを全てのページに行います。全てのページといっても、同じレイアウトのページも出てきます。ワイヤーフレームの作成を省けるところは省き、コンテンツが異なってデザインも大きく異なるページはワイヤーフレームを作成するようにしましょう。

ツールで清書

情報を整理し、ページのレイアウトも固まったら、あとはツールで清書する作業になります。ツールを用いずとも、手書きで仕上げることもできますが、ツールを使った方が修正も楽です。
どのようなツールがあるかは次項で解説します。

ワイヤーフレームを作るためのツール

ワイヤーフレームを作るためのツールはいくつかありますが、主なツールとしては以下の6つが挙げられます。

このように様々なツールがありますが、強いて言えば普段から使い慣れているもので作成するのがオススメです。

まとめ

ワイヤーフレームについて目的や実際の作り方などを解説しました。ワイヤーフレームはサイト制作を行う上で非常に重要です。これからweb制作に携わる方はその重要性を理解して、これからの制作に活かしてください。

また「どうすればいいのか分からない」「自分で作成するのは難しい」など、Webサイト制作でお悩みの方はお気軽にご相談ください。