ワイヤーフレームとは、Webページのレイアウトを定める設計図のことです。

ワイヤーフレームは、サイトの制作過程において、詳細なデザイン制作に入る前の、情報の配置を決めるために作られるデザインの土台となるものです。ワイヤーフレームは視覚的で分かりやすいため、これがあることによって、制作者だけでなく、クライアントも同じようにイメージを持つことができます。

ワイヤーフレームを作る過程で大切なことは「何を」「どこに」「どのように」配置するか考えることです。

ユーザーの目線に立って、「使いやすさ」や「分かりやすさ」を意識し、枠組みを組み立てていく必要があります。

完成イメージを早い段階で確立することで、情報の抜け漏れや、機能の整合性を確認できます。

ワイヤーフレーム制作の流れ

情報を整理する

まず、Webサイトに掲載したい情報を洗い出します。思いつく限りピックアップしましょう。

次に、ピックアップした情報をグルーピングします。似た情報をグループ分けしておくことによって、レイアウトを決めやすくなります。

最後に、グループごとの優先順位を決めます。ランキングが高いものはワイヤーフレームでも目立つように配置をします。逆にランキングが低いものは本当に掲載すべき情報か、再度検討しましょう。

情報をレイアウトする

情報が整理できたら、量や内容、ターゲットに応じて、適切なレイアウトを決めていきます。「マルチカラム」、「フルスクリーン」や「タイル型」など、いろいろな種類のレイアウトがありますが、ユーザーの目的や導線を意識して、最適なレイアウトを決定しましょう。

PC用やスマホ用など、さまざまなデバイスに合ったレイアウトについても考えておきます。

清書する

レイアウトができあがったら、ツールを使ってワイヤーフレームの制作の制作を行います。

ワイヤーフレームは情報を整理することが目的なので、デザインに凝りすぎず、重要なページを優先しながら、他のページへの導線もしっかり意識するようにして、完成形のワイヤーフレームを制作しましょう。

まとめ

ワイヤーフレームはwebサイト制作に必要な、最初の設計図です。シンプルでありながら、機能や操作性を考慮したワイヤーフレームを組むことで、制作の前段階から完成イメージが掴みやすくなります。

まずは要求が満たされているかの確認し、ユーザーの目的や目標達成に最適な構成を決めましょう。

ワイヤーフレームを上手に組んでおけば、制作過程でのクライアントと制作会社間のトラブルが減ったり、チーム内のやり取りがスムーズになります。

良いWeb制作を行うためにも、ワイヤーフレーム制作はしっかり行いましょう。