ホームページ制作の際に必ず登場する「ワイヤーフレーム」。
通常ホームページの制作に携わる現場または立場の方以外はあまり聞いたことがないキーワードではないでしょうか。
ホームページ制作におけるワイヤーフレームとは、制作時にデザインの土台となるもので、いわば設計図のようなものです。単に「ワイヤー」という場合も多いですね。
このページでは、ホームページ制作の基礎ともいえる「ワイヤーフレーム」について説明します。

１）ワイヤーフレームの役割

ワイヤーフレームはホームページを制作する過程で、詳細なデザイン制作の前に情報の配置や簡単なレイアウトを決めるために制作されます。ワイヤーフレームがあることによって、デザイナーやライターなどの制作側のスタッフとクライアント全員が完成のイメージを共有できるようになります。従ってワイヤーフレームは、ホームページ制作のワークフローをスムーズに進める役割を担っています。

また、ポイントはワイヤーフレームとはその名前の通り「線」で作成するもの。ワイヤーフレームの中では詳細な「デザイン」をすることはありません。基本的にワイヤーフレームはグラフィック的な要素は含まない「骨組み」の状態で、ホームページの機能やそれぞれのパーツについて確認するためのものです。

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

次はワイヤーフレーム作成の流れについてです。

２－１）コンセプトや目的の確認

まずはサイト制作時のコンセプトや目的の確認作業です。

どんなイメージのホームページにしたいのか？ターゲティングは？このホームページで達成したい目標は？など様々な理由でデザイン、レイアウト、「何を優先してコンテンツを作成するか」が変わってきます。すでにワイヤーフレームを作成する段階に入っているならこの辺はすでにディレクション済みの場合も多いと思いますが、まだ未確定の情報があるならば、ここではっきりとさせておきましょう。デザインに入ってからの変更は工数が増えることになるので中々困難です。場合によっては金額の話になることもあります。コンセプトやレイアウトの変更が自由に（？）できるのは、ある意味ここが最終のポイントかもしれません。

２－２）情報を整理する

ロゴやバナー、記載する情報やリンクなど配置する情報をリストアップし、ユーザーの目的や導線を考えながらレイアウトを決めていきます。画像や文字の量などもざっくりと決めておく方が良いでしょう。そして実際のデザインの際は、なるべくここでざっくりと決めた画像の数や文字の数はできる限り守ることです。ここの増減はレイアウト崩れの原因となります。

２－３）下書き→清書

まずは手書きで下書きを書きます。

その後、ソフトやツールを使って清書していきます。ワイヤーフレームを作成するときにやってしまいがちなのが、色や画像サイズなどの視覚的なビジュアルまで細かく考えてしまうことです。繰り返しになりますが、あくまでワイヤーフレームの目的は「線」の設計図を作りコンテンツや情報の優先順位、掲載する情報量などを確認して配置を決めることです。操作性や必要な情報へのアクセシビリティ、サイトのメッセージが伝わりやすいかなどを意識して適切な配置を考えます。

３）まとめ

いかがでしたでしょうか？

今回はワイヤーフレームについてでした。ワイヤーフレーム を作成することで、ホームページのデザインを決めるだけではなく作業をスムーズかつ正確に進行させやすくなります。これからのサイト制作はぜひ「ワイヤーフレーム」を活用して下さい。

WEBRUではホームページ制作からWEB広告の運用、チラシやパンフレットのデザイン・印刷まで行っております。熊本・福岡が基本エリアですが、ZOOMなどのオンラインミーティングの活用で全国対応もしておりますので、ホームページの制作やチラシやパンフレットなどの広告物作成、CM制作などご検討の方は是非一度お問い合わせください♪