ホーム > コラム > ホームページ制作時に必要となる「ワイヤーフレーム」とは?

コラム

ホームページ制作時に必要となる「ワイヤーフレーム」とは?

ホームページ制作時に必要となる「ワイヤーフレーム」とは?

「ワイヤーフレーム」という言葉をご存じですか?ワイヤーフレームは、ホームページを制作する際の設計図といえるものです。したがって、内製するにせよ、外注するにせよ、ホームページの制作担当や窓口になれば必ず知っておくべき事柄です。
しかし、ワイヤーフレームの考え方や作り方は、人によってさまざまです。そのため、独自のスタイルで作成したワイヤーフレームによって、クライアントや現場が混乱することもあります。
ここでは、ホームページ制作時に失敗しない、ワイヤーフレームの作り方を見ていきましょう。

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

→ コラム一覧に戻る

  • ホームページ、SEOについてコンサルタントに相談する 03-5210-2565
  • 東京・大阪・名古屋エリアへご訪問します
  • SEOに強いホームページ作成
  • 女性向けホームページ制作
  • SEO対策
  • 制作実績
  • ウェブステージについて Web戦略の専門家が多数在籍。最高の制作チームでサポートします。
ベストベンチャー100
業種別プラン

多彩な業種別プランを
ご用意しています

他にも様々な業種に対応しています

建築業系/不動産業/製造業/士業・コンサルティング/医療法人・福祉/美容・ファッション業/情報通信業/BtoC小売業/運輸業/フード産業/サービス業/リクルート系/教育/金融保険業/鉱業/農林水産業/財団、団体/その他