Webデザイナーが知っておくべきワイヤーフレームとは？必要性や作り方を解説

ワイヤーフレームって何？

ワイヤーフレームとは線(wire)と枠(frame)のことを指し、Webサイトでいう設計図のことを指します。
たくさんの人が関わるような大きなものを作ろうと思えば、まずは設計しないと、それぞれのイメージがバラバラになってしまいます。
当然、その作品は誰にとってもベストなものだとは言えません。
Webサイトも、Webデザイナーだけではなく、コーダー、プログラマー、そして依頼者なとたくさんの人が関わりますし、大きなものですから設計図が必要です。
その設計図がWeb業界ではワイヤーフレームと表現します。

ワイヤーフレームはWebデザイナーが作るべきなの？

ワイヤーフレームはWebデザイナーが絶対に担当する、というわけではありません。
会社によっては、Webディレクターが構成を考え作成するケースが多い傾向にあります。
Webディレクターがワイヤーフレームを作成し、そのデータをもとにWebデザイナーに共有されます。

ですが、Webディレクターが在籍していないような会社の場合は、Webデザイナーがワイヤーフレームからデザイン作成までを一貫して行う場合があります。
どちらかというと、Webデザイナーがワイヤーフレームを作ることで、作業の効率化をはかれる可能性があります。

Webデザインでワイヤーフレームはなぜ必要なの？

Webデザインに限らず、Webサイトを作成する場合、絶対にワイヤーフレームが必要です。
ワイヤーフレームなしで進めてしまうと、意図せぬものができたり、工程が増えたりして手間になるからです。
それ以外にもいくつかの理由があります。

デザインのイメージを作りだすため

Webサイトなどの大きなものを作る場合、ページ数や配置、デザインなどを何もなしで進めていくと、途中で大きな修正が加わり完成までに時間がかかってしまいます。
そこで、ワイヤーフレームを作成しておくことでWebサイトのデザインがしっかり決まるため、作業が進みやすくなります。
当然、ワイヤーフレームを作る時間は必要ですが、手探り状態で開始するよりもスムーズに進められます。

デザインを共有するため

ワイヤーフレームは、決してWebデザイナーだけが把握していればいい、というわけではありません。
クライアントからの依頼であれば、当然ながらクライアント側のイメージがありますし、Webサイトに携わるWebディレクターやWebデザイナー、コーダー、プログラマなど多くの人たちのイメージを一致させなければなりません。
また、当然ながらそれぞれのイメージは絶対に異なるため、勝手に進めてしまうとトラブルのもとになってしまいます。
ワイヤーフレームを作っておくだけで、クライアントはもちろん自社の各担当者に共有できます。
ワイヤーフレームを見ながら打ち合わせを行うことで、修正点もはっきり見えます。

デザインをもとにアイデアだしをするため

ワイヤーフレームは完成すれば、Webディレクターやコーダー、プログラマなどに共有をします。
その際に、ワイヤーフレームの内容についてミーティングを行い、デザインに問題はないのか、クライアントの意見はしっかり反映されているのか、などの細かい部分をチェックします。
もしこの時点で問題があれば修正点を共有し、各自で対応します。
ワイヤーフレームに問題なければ本格的な作業に入っていきます。

Webデザイナー必見！ワイヤーフレームの作りかた

もし、Webデザイナーがワイヤーフレームを作る担当になった場合、どのような手順で進めていくべきでしょうか。

各担当者とミーティングをする

Webサイトを作成する場合、クライアントや営業担当と打ち合わせを行います。
クライアントがどんなWebサイトにしたいのか、何が必要なのかを聞きだし、社内に持ち帰ります。
クライアントとの打ち合わせは、営業担当かWebディレクターが対応します。

構成を決める

営業担当やWebディレクターから聞きだした内容をもとに、Webサイトの構成を考えます。
Webサイトは、完全オリジナルなのかテンプレート型なのかで大きく変わりますが、どれくらいのページ数が必要なのか、何のカテゴリが必要なのかの大まかな構成を考えます。

Webサイトのデザインを決める

ワイヤーフレームを作成する場合は、トップ画面を中心に、全体のデザインを決めていきます。
とくにメインビジュアルのデザインはかなり重要です。
なぜなら、メインビジュアルはWebサイトに訪問した全ての人が見る場所だからです。
限られた場所で、いかにアピールしたいことを伝えられるのかが、Webデザイナーのセンスにかかっています。

ワイヤーフレームを作成する

おおまかなデザインや構成が決まれば、ワイヤーフレームを作成していきます。
会社にもよりますが、ワイヤーフレームはデザインや文章作成まで行い、ほぼ公開に近いところまで対応する場合があります。
文章作成は基本的にWebディレクターやWebライターが行いますが、場合によってはWebデザイナーが対応する可能性もあります。

共有する

ワイヤーフレームが完成すれば、Webサイトの作成に関わったWebディレクターやコーダー、プログラマと打ち合わせを行います。
打ち合わせの内容は、ワイヤーフレームの内容に問題がないのか、クライアントの意思や希望はしっかり反映されているのかなどを細かくチェックする時間です。
もし内容に問題があれば迅速に修正を行い、問題がなければ本工程へ進みます。

Webデザインを作成する

ワイヤーフレームに問題なければ、本格的にWebデザインを進めていきます。
すでにワイヤーフレームができあがっている場合、スピード感を持って進められるため非常に楽です。
Webデザイナーは、この時点でワイヤーフレームがあるありがたさを感じられます。

Webデザイナーがワイヤーフレームを作成する場合のポイント

ワイヤーフレームは、見栄えがよければいいというわけではありません。
理想的なWebサイトを完成させるためには、いくつかのポイントがあります。

クライアントの要望をしっかり反映する

いくらデザインが素晴らしいWebサイトが完成しても、クライアントの意見を無視してはトラブルのもとになります。
もちろん、Webデザイナーから見てクライアントの意見はしっかり反映しつつ、見やすさを重視してあげるとベストです。

競合サイトを分析して良いところを参考にする

ワイヤーフレームを完璧に作りあげるためには、競合サイトをたくさんみて分析することが重要です。
なぜなら、競合サイトには答えがたくさん隠されているからです。
競合サイトを全部盗むのはダメですが、良いなと思ったところは参考にしてオリジナリティをだすようにしましょう。

スマートフォンで見られることを考えて作る

今はどのWebサイトも、スマートフォンで閲覧されます。
しかし、多くのワイヤーフレームやデザインはパソコンで作成するため、見えかたが大きく異なります。
ですから、スマートフォンで見られるということを意識してワイヤーフレームを作りましょう。

まとめ

Webデザイナーが直接ワイヤーフレームを作成するのかどうかは、会社によります。
ですが、どちらにせよできたワイヤーフレームはWebデザイナーにも共有されるため、全く無関係な話ではありません。
ワイヤーフレームの意味や作りかた、考えかたを理解しておけば、より理想的なデザインが作れるのではないでしょうか。