ホームページ制作、と聞いて何が浮かぶでしょうか。
サービス案内のページにざっくりと制作過程を掲載していますが、設計段階についてをもう少し詳しくご紹介します。
ワイヤーは「線」、フレームは「枠」という意味です。その言葉どおり、ワイヤーフレームとは webサイトの完成イメージを簡単な線と枠で表現する「設計図」のことになります。クライアントの目的やコンセプトなどに基づいて作成する基礎的な枠組みのようなものですね。
Webサイトを制作する過程は、家を建てる工程に近いものがあります。
まずどれだけの広さになるのか？どんな間取りになるのか？を視覚的にわかりやすくしたものがワイヤーフレームです。
ページ構成だけの下図のようなものはコンテンツマッ
プ・サイトマップとも呼ばれます。
1. webサイトのコンセプト、テーマ、目的などについて確認する
どんなサイトを作ろうとしているのか。コンセプトや目的などによって、掲載する情報やデザインなどすべてが変わってきます。来訪者の目的やサイト上で一番伝えたいことなどが明確でない場合は、一緒に確認していきます。
また、分業をする場合はこ
のすり合わせを丁寧に行います。
2. 配置する情報をリストアップして整理する
「会社名、ロゴ、業務内容、バナー」など、配置する情報をすべて洗い出し、優先順位の高い情報と低い情報に分けてリストアップします。
画像や文字の量についてもこの時点でざっくり決める場合もあります。
何故かというと、文字量や画像の縦横比などが想定の範囲を大きく超えてしまうと、レイアウトの崩れにつながり、想定外に大規模な修正が発生する可能性があるためです。
3. レイアウトを決定する
情報の量や内容、ターゲットに応じて、適切なレイアウトを決めます。この段階では手書きのラフな下書きでかまいません。 エリアを横に分割するマルチカラム、画面の端から端まで表示されるフルスクリーンやタイルをしきつめたようなデザインなど、定番のものか
ら個性的なものまで多くのレイアウトがあります。
その中からユーザーの目的や導線を意識して最適なレイアウトを決定していきます。
この段階で、PC用とスマホ用の両方のレイアウトについても分けて決めておきます。
4. 情報の配置を下書きする
レイアウトが決まったら、分割された枠の中に各情報を配置していきます。情報を整理したときにリストアップした優先順位の高い情報は、より効果的で最適な場所への配置を考えます。
5. ワイヤーフレームを仕上げる
ワイヤーフレーム作成ツールなどで、きれいな設計図として完成させる場合もあります。 PowerPointやAdobeillustratorなど、作成者が使い慣れているもので作ることが多いです。
いかがだったでしょうか。
ワイヤーフレームは、この後も情報整理等基礎情報としてずっと使うくらい大事なものです。