みなさんはWebサイトを作るとき、どのようなデザインにしたいと考えますか？
流行りのフラットデザインを取り入れよう。ビデオ動画を背景に利用してユニークなデザインにしよう。
知的で、信頼感のある青をメインカラーにしようという、概念的で大まかな考えの方もいるのかもしれません。
しかし、このような表層的な考えのみでデザインしたWebサイトが良いデザインなのかというと、
決してそうであるとは言えません。
見た目として綺麗なものであっても骨組みが無い、言わばペーパークラフトのようなサイトでは、
風が吹けばすぐに倒れてしまいます。
それでは、どのようにすれば良いデザインに近づくことができるのでしょうか。
今回はサイトの骨格部分にあたるワイヤーフレームの観点から、サイトのデザインについて考えていきましょう。
サイトの骨格となるワイヤーフレーム
グラフィック要素（デザイン）を入れる前に、サイトの骨組みとなる
ワイヤーフレームの作成をする必要があります。
ワイヤーフレームとはウェブページの大まかなコンテンツやレイアウトを示した画面構成図のことです。
ワイヤーフレームを作成することにより、レイアウトの確認、メニュー構成の確認、サイト全体の
バランスなどを確認することができます。
そもそもなぜ、ワイヤーフレームを作るの？
そもそもなぜ、ワイヤーフレームの作成を行う必要があるのでしょうか。
ユーザーは自分の抱えている課題を解決するべく、サイトに訪れます。
しかし、課題を解決する情報が見当たらない、または、サイトが使いにくいといった場合、
課題を解決するコンテンツが存在するにも関わらず、ユーザーはサイトを離脱してしまう可能性があるのです。
こうなってしまっては、せっかくのデザインも、何の役にも立たないですよね。
ワイヤーフレームを作成することで、何を（要素）、どのように（配置）という機能面の確認と、
「どういったページを作るのか」という情報整理、仕様を明確化する必要があるのです。
ワイヤーフレームを作るときのポイント
サイトの機能、要素が決まればいよいよワイヤーフレームの作成です。
今回はワイヤーフレームを作成する際に意識をしたいことのいくつかを紹介したいと思います。
まず、コンテンツの優先度をつけましょう。
コンテンツの優先順位が決定したら、ユーザーがページをどう見るかを考えて、
コンテンツを配置しましょう。「大きいものから 小さいもの」、「上にあるもの 下にあるのも」、
「左にあるもの 右にあるもの」へと移動する人の目線を意識した導線設計をすると良いでしょう。
また、Webサイトを見る人の目線は「Z」や、「F」の文字を描くと言われています。
流し読みをしてすぐにページを離脱してしまうユーザーなどに、
「ちょっと待った！」を掛ける有益な情報を、目線上に配置しましょう。
まとめ
今回はワイヤーフレームの要点をとりまとめた、概要的な内容にまとめさせて頂きましたが、
いかがだったでしょうか。
基本的にユーザーは、自分が抱える問題を解決するべくサイトを訪れます。
そのため、Webサイトはユーザーの問題を解決するべく、何を、どうやって伝えるかを考える必要があるのです。
デザインされたサイトを作るために、グラフィックデザインとともに、デザインの骨組みとなる
ワイヤーフレームを作成する必要があるのです。
