ワイヤーフレームを作成する際に気をつけたい注意点

記事公開日:2018.02.19

最終更新日:2018.02.20

699 PV

サイトのデザイン・制作を始める前に重要なのが、ワイヤーフレームをしっかり作り込むことです。今回はワイヤーフレームを作成する際の注意点を書きます。

ワイヤーフレームとは

ワイヤーフレームというのはWebサイト構築の設計図です。サイトに必要なコンテンツを入れたり、配置をすることによって、大まかなサイトの完成図が出来上がります。

 

また、ワイヤーフレームを作成することによって、「足りないコンテンツを足す」などのトラブルを防ぐことができます。後でコンテンツを足すと、全体的にデザインが崩れたり、意外と修正が大変なので、作成して損はないでしょう。

作成時の注意点

ワイヤーフレームを作成するまでにはいろいろな注意点があります。

注意点1. サイトの導線を考える

ワイヤーフレームを作成する際、重要なのがページの導線です。ユーザーにとって見やすいコンテンツの配置になっているか、ユーザーがページ内で迷子にならないかがワイヤーフレーム作成時に決まります。

 

「でも、導線ってどうやって考えるかわからない」という方もいらっしゃるかと思います。わからない場合は、同じようなジャンルのサイトを見てください。

 

検索で上位に表示されているサイトは導線を考慮したコンテンツの配置になっているはずです。何社も比べてみて導線を考えてみてください。

注意点2. デザインする時と同様にコンテンツを入れ込む

ワイヤーフレームだからといって、コンテンツを端折ってはいけません。前述にもあったように、後々コンテンツを追加するトラブルに繋がってしまうので、サイトに入れたいコンテンツは、ワイヤーフレームを作成する段階でしっかり入れ込みましょう。

 

また、各コンテンツのサイズ感をワイヤーフレームの段階で表現することも重要です。例えば、メインビジュアルを画面いっぱいにして設置するのと、幅900pxくらいで設置するのとでは印象がかなり変わります。

注意点3. 色などデザイン要素は入れない

個人的な意見になってしまうのですが、ワイヤーフレームに色やデザイン要素はいらないです。ワイヤーフレームはサイトの設計図ですので、どこにどんなコンテンツが入るという情報だけで十分だと思います。

 

デザイン要素を入れてしまったワイヤーフレームをお客様に渡した際に、お客様の方で「こういうサイトになっていくのか」と固定概念が生まれてしまい、お客様の希望が聞き出しにくくなってしまう可能性がありますので、できればワイヤーフレームにデザイン要素は入れない方がいいかと思います。

注意点4. トップページと下層ページの2パターンを用意する

どこのサイトも大体トップページと、下層ページのレイアウトや入っているコンテンツは違うものです。したがって、ワイヤーフレームをお客様に提出する際、トップページと下層ページの2パターンを用意するといいでしょう。

 

ただ、気をつけなければいけないのが、トップページと下層ページのレイアウトを大幅に変更すると、ユーザーにとって見づらいサイトになってしまいますので、ロゴの位置やグローバルナビゲーションの位置、フッターの位置は揃えてください。

注意点5. レスポンシブWebデザインも用意

スマホが普及し、ほとんどの人がWEBページをスマホで閲覧するようになりましたので、もちろんレスポンシブWebデザイン用のワイヤーフレームも用意しなければなりません。PCサイトと比べると画面幅が全く違うので、レイアウトもガラッと変更するところがでてきます。

ワイヤーフレーム作成ツール

2年前までは、Illustratorを使用しワイヤーフレームを作成しましたが、設計図を作成するだけなので、ExcelやGoogle スプレッドシートなどのサービスを活用するのもいいかと思います。個人的に使いやすそうだなと思ったツールを紹介します。

cacoo

cacooは、ワイヤーフレームだけでなく、フローチャートやサイトマップも作成可能なツールです(有料)。グループ内で共有できたり、変更履歴を見ることができたり、機能がたくさんあります。無料トライアルもしているので、一度使ってみようかなと思っています。

Googleスプレッドシート

ワイヤーフレームは、IllustratorとかPhotoshopとかで作成するものだと思っていましたが、確かにワイヤーフレームならGoogle スプレッドシートでいいなと思いました。リアルタイムで変更するのが見られますし、Googleのアカウントを持っている人であれば誰とでも共有できます。何より無料で使える。

 

また、Windows使用者とMac使用者の間で起こる、「Excelがまともに見れない問題」も解決できます。ExcelをMacのツールで開くことはできますが、開いた際どこかしら崩れているので、Google スプレッドシートで送っていただけると本当に嬉しいです。

まとめ

今回の記事では、ワイヤーフレームを作成する際の注意点を書きましたが、要はユーザーが見やすく使いやすい位置に、必要なコンテンツを入れ込んだ設計図を作成できればいいかと思います。ワイヤーフレーム作成は大事な作業ですので、端折らずに丁寧に作りましょう。

このエントリーをはてなブックマークに追加

筆者

Y.Urushizaki

1日を100%全力で生きるをモットーに毎日すごしています。幸せだなと思う瞬間は仕事終わりに「今日も頑張った」と思いながら駐車場まで歩く時と、近所の野良猫と遊んでいる時です。最近自覚したことは周囲も驚くほどの雨女だったことで、過去に行ったテーマパーク(ディズニー・ユニバ・富士急・ナガスパ)はほとんど雨の思い出がしかありません。たまにテーマパークで晴れると自分より強い晴れ男・晴れ女が存在する事実に少しテンションがあがります。

筆者が最近執筆した記事