Webデザイナーがワイヤーフレームをこれほどまで必要とする本当の理由

Webデザイナーがワイヤーフレームをこれほどまで必要とする本当の理由

クラウドソーシングではWebディレクターが不在の制作案件がよくあります。クライアントとWebデザイナーが直接やり取りして、サイトデザインを形にしていきます。そういった時に一番困ることがワイヤーフレームがないことです。

ワイヤーフレームって?

ワイヤーフレームとは、別名モックアップとも呼ばれる線と文字だけで描かれた、Webサイトデザインの図のよなもの。どの要素が、どれくらいの大きさで、どこにあるかを示してあります。

ワイヤーフレームって必要?

超必要です。Webデザイナーの立場から言わせてもらえば、これがあると無いとでは作業量が雲泥の差になります。クライアント側にとってはたかが線と文字だけで描かれた、適当な落書きのようにも思えますが、Webデザイナーにとってはデザインをする上で最も重要な素材ともいえます。

私自身、クラウドソーシングでワイヤーフレームがないコンペは、極力提案を避けるようにしています。なぜなら、発注側の意図やイメージが明確に伝わっていないところで、自分の想像だけでデザインするということは、極めて不毛な時間だと感じるからです。

それほど、クリエイターの心を左右する重要な素材なんです。

ワイヤーフレームがないと起きるトラブル

ワイヤーフレームがないと起きてしまう、一番避けたいトラブルが修正です。「ラフデザインをでもいいから、とりあえず見せて!それを元に形にしていこう!」のような要望をするクライアントがごく稀にいますが、Webデザイナーが一番苦手とするタイプです。

そもそも、デザインとして提出した時点でWebデザイナーの中では9割完成しています。それを「サイドナビの横幅をもう少し広げて」といわれた時点で、9割完成していたものが7割からやり直しってことも。そしたら次は「ここに画像を差し込んで」といった要望が。

次から次へと、あーしたい、こーしたいが出てくると、もう地雷案件だなってなるわけです。そうすると一気にモチベーションは下がり、それがデザインのクオリティにも影響が…。プロとしてモチベーションがどうのとかは言ってられませんが、そう感じているWebデザイナーもいるってことを知ってもらいたいです。

ワイヤーフレームを作る上で記載して欲しいポイント

Webデザイナーが見るワイヤーフレームのポイントをご紹介します。

各要素の配置と意味

よほど特殊なサイトでない限り、Webサイトデザインは一定の要素で構成されています。ロゴとグローバルナビゲーションが含まれたヘッダーがあって、TOPページのメインビジュアル(TOP画像)があって、いくつかの要素が含まれたメインコンテンツがあって、サイドナビがあって、フッターがあります。

  • ロゴは左寄せなのか?それとも中心なのか?
  • グローバルナビゲーションの見せ方はどうしたいのか?
  • グローバルナビゲーションはどういった項目か?
  • メインビジュアルのキャッチコピーは有り?
  • メインビジュアルのキャッチコピーの文字数は?
  • メインコンテンツはどういった要素を度の配置で?
  • 表示するテキストの文字数は?
  • サイドナビに表示するバナーのサイズや数は?

テキストは正確に

ワイヤーフレームに記載されている文字には十分に注意して下さい。というのも、Webデザイナーがデザインしている時は、様々な葛藤があります。基本的にデザイナーは希望に沿った物を作る職業。自分の思い通りに作るアーティストとは違い、依頼内容を忠実に守りながら作るオペレータに近い存在です。

明らかにグローバルナビゲーションに入れるべきでない項目が入っていても、その通りデザインします。いえ、一回悩んだ結果そうします。「意図があってグローバルナビゲーションにいれたのかも」「もしかしたら何も考えずに雰囲気で入れた?」そんな事を考えてます。

もし分からない場合は、グローバルナビゲーションには無理に当てこまず、制作ページ一覧を別途記載して下さい。その中からWebデザイナーが的確な項目を選択しデザインに反映します。

挿入する画像のイメージを記述

ワイヤーフレームなので、わざわざ画像探して当て込む必要はありません。ここに、これくらいのサイズで、こんな風な画像を表示したいという感じの指示があれば、Webデザイナーはフリー素材や有料画像のカンプデータをデザインに反映します。

逆に画像を指定してしまうと、デザインの個性が出にくくなったりし、デザイナーの本領が発揮できない場合もあります。

テキストはコピペ出来るように

これは完全なわがままですが、出来ればワイヤーフレーム内のテキストはコピペ出来るようにしてもらいたい。Photoshop上でテキストを打つのが結構面倒なのと、ショートカットを頻繁に使うので、いちいち日本語変換すると時間がかかるんです。

たまにPDFやエクセルではなく画像データでワイヤーフレームが送られてきて、その都度テキストエディタに一度打ち込んでからデザインしていますが、結構時間がかかります。

まとめ

「そこまでこっちがやるの?」と感じるかもしれませんが、この時点でWebデザイナーはクライアントのイメージしている完成図は全く把握できていません。

コストを抑えるためにあえてWebディレクターをはさまないで行う場合もありますが、そういった時は結局どちらかがWebディレクターの役割をやる必要があります。大抵の場合はWebデザイナーがヒアリング等をして、可能な限りカバーしようと努力しますが、全て丸投げでは困るといった所が正直な気持ち。

せめてどういったサイト希望するのかを伝えてさえくれれば、完成イメージの理解に費やす労力をデザインに注ぐことが出来ます。その為にもワイヤーフレームが重要であって、一番完成イメージを共有できるツールでもあります。

無料で使えるワイヤーフレーム作成におすすめなツール

Cacoo(カクー)

Cacoo(カクー)

moqups(モックアップス)

moqups(モックアップス)

Prototyper(プロトタイパー)

Prototyper(プロトタイパー)

いいね!のお慈悲を…

この記事が良かったらシェアをお願いしゃっす!

記事の感想はこちら