menu

もうデザイナーの「勘」には頼らない!イメージを視覚化する3つの工夫

ディレクター心得

Webデザイナーへのディレクションでは、イメージを言葉で伝えるだけでなく、視覚化してひと目で理解できるようにするのもポイントです。

スケジュールが押していたり、他のプロジェクトが同時進行していたりすると、デザイナーへの指示もつい雑になってしまいがちですが、最初の依頼に時間をかけ、丁寧かつ綿密に行うことによって認識のズレや行き違いを防ぎ、制作もスムーズに進行します。

・メインカラーは可能な限り1色に
指定する色の種類が多くなりすぎると、それぞれの役割・目的があいまいになり、デザイナーの理解を妨げる要因になります。Webページのメインカラーは、クライアントのコーポレートカラーや既存のWebサイトとの相性を考え、できれば1種類に絞りたいものです。

メインカラーが決まったら、それを目立たせるための補色(サブカラー)とあわせて予約・購入ボタンなど強調したい要素の色を決めていきます。一般的にサブカラーはメインカラーと同色の濃い色が使われ、サブカラーが原色なら、ボタンなど強調したい要素は中間色が使われることが多くなります。

・リファレンスサイト(参考サイト)は必須
デザイナーへの発注にはワイヤーフレームや自社の依頼フォーマットを使うことが多くなります。その際必ず加えておきたいのが、カラーやフォントの見本となるリファレンスサイト(参考サイト) のURLです。

フォントのサンプルや色見本を提示する際も、それらが実際に使われているWebサイトをあわせて見せることによって、イメージがより明確なります。とりわけ見出しやファーストビューのデザイン、行間、アイコンのテイストなどは受け取り方によっても大きく変わるため、必ず参考サイトを明記しましょう。

・伝わりにくいテイストは、チャートマップ×参考サイトで解決
カラーやフォントとあわせてデザイナーへのディレクションで必要になるのが、「ポップで可愛いイメージ」、「誠実な感じに」といったテイストの指示です。クライアントが微妙な言い回しを使ってきたり、自分でもイメージを具体的に表す言葉が見つからなかったりして苦労することも少なくありません。

テイストをより分かりやすく伝えるためにはチャートを用いるのも1つの方法です。例えば、縦軸に「SOFT→HARD」、横軸に「WARM→COOL」というチャートを作成して、その上に複数の参考サイトを配置。それらと並べて制作するページのデザインを示すと、相対的にテイストが伝わりやすくなります。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

ユーザー行動に隠されたストーリーを顕在化させるユーザビリティテスト

指名ニーズを持つユーザーのためのランディングページ

関連記事

  1. 意外と簡単?Webフォントの利用方法とメリット&デメリット

    CSSを用いたWebサイトが一般的になり、多くのWebデザイナーに注目されているWebフォント。Go…

  2. 業務効率を上げるWebディレクター向けテキストエディタ4選

    Webサイトの記事の確認・作成に限らず、デザイナーをはじめとした制作スタッフとの情報共有や、備忘録・…

  3. 不正アクセスや脆弱性・バックアップ対策も。セキュリティ対策プラグ…

    デザインの自由度が高く、プラグインによって豊富な機能を拡張できるWordPressは世界中のWebサ…

  4. 一筋縄では行かないLPOの成功の法則とは?LPの「ストーリー化」…

    Webディレクターが携わることの多い業務の1つがランディングページの最適化(LPO)です。いくら広告…

  5. ジャンル・目的に合わせて幅広く利用可能。高品質なWebフォントサ…

    OSやデバイスを問わず制作サイドの意図通りのフォントを表示することができ、レスポンシブ対応にも相性の…

  6. スマートフォンを意識したWebライティングのコツ

    ソーシャルメディアと相性が良いスマートフォンでは、質の高い記事がFacebookやTwitterで拡…

  7. Webデザインの初稿チェックで押さえておきたいポイント

    Webページの制作・修正のやりとりのなかでもとりわけ重要なのが、デザイナーから最初に提出されてきた初…

  8. サブ要素&導線に盛り込むべき情報は?ファーストビューの効果的な改…

    Webサイトの「顔」ともいえるファーストビュー。「メインコピー」と「キービジュアル」に加えて、「サブ…

PICKUP

PAGE TOP