ホームページ作成をする際に、必ず登場するワイヤーフレームについて、その作り方を含め説明しています。
ワイヤーフレームは、ホームページを制作する際の設計図となるものです。
具体的には、Webページ上に「何を」「どこに」「どんな感じで」配置するかといった情報を図面にしたものになります。
ワイヤーフレームは通常Webディレクターが作成し、クライアント(または発注者)がどのようなサイトを作りたいのかを、きちんと反映させていきます。ワイヤーフレームを正しく作れれば、ホームページ制作時のトラブルを極力防げますし、デザイナーとの連携もしやすくなります。
それでは、正しいワイヤーフレームを作るには、どうしたら良いのでしょうか? まずは、ホームページに盛り込みたい要素を、きちんと洗い出すことです。
「ロゴ」「会社名」「住所」「電話番号」「メールアドレス」「商品名」「商品リスト」「商品スペック」「お問い合わせ」など、思いつく限り入れたい要素を書き出しましょう。
その上で、まとめられるものをグループ分けしていきます。例えば「会社名」「住所」「電話番号」は1つのグループになるでしょう。
最後は、まとめたグループごとに優先順位を決めます。優先順位が高ければ、ページ内で目立つように(または大きく)扱うべきですし、そうでないものは目立ちにくい場所でもいいでしょう。この段階で不必要と思えば、掲載しないという選択肢もあります。余計な情報が増えるほど、伝えたい情報がぼやけるからです。
なお、トップページ以外のワイヤーフレームを作るのであれば、「サイトマップ」「ページ遷移図」なども必要になります。
準備ができたら、ワイヤーフレームを書きましょう。有料・無料を問わず、ワイヤーフレームを作成するためのツールはさまざまありますが、まずは手書きで十分です。
最初にすべきことはレイアウトの決定です。レイアウトは、サイトの目的や構造、ボリュームなどで変化しますが、奇抜なものは必要ありません。同業他社のサイトなどを参考にしながら、見慣れたレイアウトを心掛けてください。奇抜なレイアウトは、目立つという意味では良いかもしれませんが、どこに何があるのか、わかりにくいサイトになってしまうかもしれません。あくまで、ユーザーフレンドリーな視点で作るようにしましょう。
レイアウトを決めたら、「ヘッダー」「グローバルナビゲーション」「サイドナビゲーション」「コンテンツエリア」「フッター」などに、優先順位に合わせてグループ(要素)を振り分けます。
ユーザーがホームページを見るときの視点は、ディスプレイ上で「Z」または「F」の文字のように動きますので、それを意識することで重要なグループ(要素)の配置場所も決まっていくでしょう。
また、ページが最初に表示された状態、つまり「ファーストビュー」についても考慮しましょう。ユーザーがページを訪れて画面を開いたあと、「自分にとって有用なサイトかどうか」を4~5秒で判断するともいわれています。したがって、スクロールしないと見られない場所に、大事な情報を置くことは適切ではありません。
ほかにも、ワイヤーフレーム作成時のポイントはいくつかありますが、概略としては上記内容を意識してください。
ワイヤーフレームはホームページの設計図ですが、あくまでページの大まかなレイアウトです。勘違いされやすいのですが、色の指定やメイン画像のラフイラストなども入った「デザインラフ」のようなものをワイヤーフレームだと思っている人も少なからずいるのです。「ワイヤー(線)」と「フレーム(骨組み)」なのですから、基本的に余計な情報は一切入らないほうが誤解を生みません。
例えば「色」です。何気なくワイヤーフレームに書きこんだ「色」が、クライアントサイドでイメージづいてしまい、デザイナーからの提案に違和感を覚えてしまうケースがあります。
しかし、必ずしも指定がないほうがいいかというと、絶対ではありません。経験値の低いデザイナーに依頼するのであれば、ある程度イメージを補足したほうがいい場合もあります。つまり、ワイヤーフレームの定石はありそうでないのが現実であり、ベテランWebディレクターも、日夜最善の方法を模索しているのです。
ホームページ制作は、専用のソフトを使ったり、ちょっと勉強したりすれば、簡単に作れるかもしれません。しかし、きちんと設計するためには、専門知識や経験が重要になってきます。趣味のホームページを作るのではなく、企業サイトとして成功するホームページを作るのであれば、専門業者に依頼するのが最善の方法となるでしょう。