「ワイヤーフレーム」って何だろう？デザインカンプに必要不可欠

WEBデザインを作る上でとても大事なのは、しっかりと準備をしておくことです。
「こういうものを作ろう」とイメージしていても、いざphotoshopを開くと全く手が動かない・・・ということはよくあります。
それは、WEBデザインの設計図がないから。
どんなベテランでも、設計図なしに完璧なWEBデザインは作れません。
今回は、谷宜樹がWEBデザインの設計図「ワイヤーフレーム」について解説していきましょう。

■「ワイヤーフレーム」って何？

家を新築する時やマンションの部屋を探す時、必ずと言っていいほど目にするのが間取り図ですよね。
どこに部屋があって、どこにトイレやお風呂があるのか、それぞれどのくらいの大きさなのか知ることができるのが間取り図です。
WEBデザインにおいても、まずどこに何をレイアウトするのかを明確にしておきます。
ホームページであれば、ロゴやトップ画像、メニューバーの位置などをあらかじめ決めておきましょう。
このページ内の間取りを表すのが、「ワイヤーフレーム」です。
そしてこれを見ながらWEBデザインに起こしていくので、設計図としての役割もあります。

■なぜワイヤーフレームが必要なの？

ワイヤーフレームを作らずに、クライアントからの指示をメモしたものだけを見ながらWEBデザインをするとどうなるでしょうか。
一般的なプロのデザイナーではあり得ないことですが、独学で学び副業でWEBデザインを請け負っている人のなかには、そういう人がいるかもしれません。
しかし、ワイヤーフレームを作っておかないと、プロでもWEBデザインは難しいものになるでしょう。
ワイヤーフレームは、ページのデザインを作っていく上で忘れてはいけない情報を整理し、十分なアイディアを集めるために必要不可欠なものです。
ワイヤーフレームがない場合、クライアントからの指示を忘れてしまったり、指示やアイディアを全て取り入れたために、ちぐはぐな印象になってしまったりすることがあります。
また、チームでWEBデザインする時に意見がまとまらないこともあるでしょう。
設計図の段階でしっかり情報を整理し、クライアントやチームメンバーの意見をまとめておくことで、スムーズにデザインカンプへ進めます。

■何をワイヤーフレームに記入するの？

ページに入力するテキストや画像を、どこに配置するのか分かるようにするのがワイヤーフレームです。
位置や大きさが分かれば、内容は「ロゴ」「本文」「トップ画像」などのメモ書きで良いでしょう。
ワイヤーフレームの段階では修正が多くなるので、谷宜樹はphotoshopを使って作成することをおすすめします。
ツールを使うのに慣れていない人は、もちろん手書きでも良いですよ！

今回は、ワイヤーフレームを作ることの意味について谷宜樹が解説しました。
次回からは、具体的にどのようにしてワイヤーフレームを作成していけば良いかお話ししていきますね。