プロのWebデザインの現場では、デザインのベースとなるワイヤーフレームが使われています。基本的に、ワイヤーフレームはWebディレクターが作成するものです。
クラウドソーシングなどではWebディレクターが不在の制作案件がよくあり、そういった場合ではWebデザイナーがワイヤーフレームを作成し、クライアントにデザインイメージを伝えるために用いられることも多いでしょう。
ワイヤーフレームって？
ワイヤーフレームとは、別名「モックアップ」とも呼ばれており、線と文字だけで描かれた「Webデザインの下書き」のよなもの。どの要素が、どれくらいの大きさで、どこにあるかを簡潔に示したものです。
ワイヤーフレームを元に完成イメージをすり合わせ、Webデザイナーはデザインを作り上げていくのです。
ワイヤーフレーム作成という一手間がありますが、ワイヤーフレームがあるとないとでは全体での制作スピートは雲泥の差。本気でWebデザインするならワイヤーフレームは絶対に必要です。
ワイヤーフレーム作成におすすめな無料で使えるツール
次に、ワイヤーフレームを作成する際に便利なツールをご紹介します。どれも無料で使えて、シンプル直感的に操作できますよ。
Canva（キャンバ）
Cacoo（カクー）
https://cacoo.com/ja/
moqups（モックアップス）
https://moqups.com/
JUSTINMIND（ジャスティンマインド）
ワイヤーフレームって必要？
超必要です。Webデザイナーの立場から言わせてもらえば、これがあると無いとでは作業量が雲泥の差になります。
クライアント側にとってはたかが線と文字だけで描かれた、適当な落書きのようにも思えますが、Webデザイナーにとってはデザインをする上で最も重要な素材ともいえます。
私自身、クラウドソーシングでワイヤーフレームがないコンペは、極力提案を避けるようにしています。
なぜなら、発注側の意図やイメージが明確に伝わっていないところで、自分の想像だけでデザインするということは、極めて不毛な時間だと感じるからです。
それほどワイヤーフレームの有無は、クリエイターの心を左右する重要な素材なんです。
ワイヤーフレームがないと起きるトラブル
ワイヤーフレームがないと起きてしまう、一番避けたいトラブルが修正です。
「ラフデザインをでもいいから、とりあえず見せて！それを元に形にしていこう！」のような要望をするクライアントがごく稀にいますが、Webデザイナーが一番苦手とするタイプです。
そもそも、デザインとして提出した時点でWebデザイナーの中では9割完成しています。それを「サイドナビの横幅をもう少し広げて」といわれた時点で、9割完成していたものが7割からやり直しってことも。
そしたら次は「ここに画像を差し込んで」といった要望が。
次から次へと、あーしたい、こーしたいが出てくると、もう地雷案件だなってなるわけです。そうすると一気にモチベーションは下がり、それがデザインのクオリティにも影響が…。
プロとしてモチベーションがどうのとかは言ってられませんが、そう感じているWebデザイナーもいるってことを知ってもらいたいです。
Webデザイナーがワイヤーフレームに求めるもの
では、Webデザイナーはワイヤーフレームのどういった所を見ているのかご紹介します。
各要素の配置と意味
よほど特殊なサイトでない限り、Webサイトデザインは一定の要素で構成されています。
ロゴとグローバルナビゲーションが含まれたヘッダーが存在し、トップページのメインビジュアル（トップ画像）があって、いくつかの要素が含まれたメインコンテンツが並び、サイドナビやフッターがあります。
Webデザイナーは、これら各要素の具体的なイメージを知りたいわけです。
- ロゴは左寄せなのか？それとも中心なのか？
- グローバルナビゲーションの見せ方はどうしたいのか？
- グローバルナビゲーションはどういった項目が並ぶか？
- メインビジュアルのキャッチコピーは有り？
- メインビジュアルのキャッチコピーの文字数は？
- メインコンテンツはどういった要素を度の配置で？
- 表示するテキストの文字数は？
- サイドナビに表示するバナーのサイズや数は？
口頭で説明されるよりも、簡単でいいので図に描いて欲しい。その図こそがワイヤーフレームなんです。
テキストや情報は正確に
ワイヤーフレームに記載されている文字（テキスト）には十分に注意して下さい。というのも、Webデザイナーがデザインしている時は、様々な葛藤があります。
基本的に、デザイナーはクライアントの希望に沿った物を作る職人。自分の思い通りに作るアーティストとは違い、依頼内容を忠実に守りながらデザインしています。
しかし、ディレクターほどクライアントに寄り添っていないため、自らの考えで情報を変更することは難しいのです。
挿入する画像のイメージを記述
ワイヤーフレームなので、わざわざ画像探して当て込む必要はありません。
「ここに、これくらいのサイズで、こんな風な画像を表示したい」という感じの指示があれば、Webデザイナーはフリー素材や有料画像を探してデザインに反映します。
逆に画像を指定してしまうと、デザインがしづらくなったり、デザイナーの本領が発揮できない場合もあります。ビジュアルはデザイナーを信じてください。
テキストはコピペ出来るように
これは完全なワガママですが、出来ればワイヤーフレーム内のテキストはコピペ出来るようにしてもらいたいものです。
Photoshopでテキストを打つことが面倒なのと、ショートカットを頻繁に使うので、いちいち日本語変換しなければいけません。確認はしますが、文字間違いのリスクも考えられます。
たまに、PDFやエクセルではなく画像データでワイヤーフレームが送られてくる場合もあります。その都度、テキストエディタに一度文字を打ち込んでからデザインしていますが、これが結構な時間を要します。
どうせワイヤーフレーム作成で文字入力するのであれば、そのままテキストデータとしてコピーできると工数削減にもつながりますよ。
面倒くさがらずワイヤーフレームは作ろう
「そこまでこっちがやるの？」と感じるかもしれませんが、口頭説明や文章では、Webデザイナーはクライアントのイメージしている完成図を全く把握できません。
コストを抑えるために、あえてWebディレクターをはさまないで制作する場合もありますが、そういった時は、結局クライアントかWebデザイナーのどちらかがWebディレクターの仕事を行うことになります。
大抵の場合はWebデザイナーがヒアリング等をして、可能な限りカバーしようと努力しますが、全て丸投げでは困るといった所が正直な気持ち。
せめてどういったサイト希望するのかを伝えてさえくれれば、完成イメージの理解に費やす労力をデザインに注ぐことが出来ます。
その為にもワイヤーフレームが重要であって、一番完成イメージを共有できるツールでもあります。
記事のコメント