menu

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

ディレクター心得

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

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

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

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

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

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. バズの傾向・経路をひと目で確認できる、SNS効果測定ツール4選

    「これは!」という、とっておきの情報が思いのほか拡散されなかったりする一方で、何気ないコンテンツ紹介…

  2. あらためて整理しておきたい、ワイヤーフレームを作成するメリットと…

    キャッチコピーや画像、リンクボタン、SNSボタンなど、さまざまな要素が取り入れられるWebサイト。W…

  3. 画像のタイプ・特徴にあわせて使い分けたいgjf、jpg、png

    Webサイト制作で画像を取り扱ううえで意外のおろそかになりがちなのが、画像の保存形式です。プロのフォ…

  4. 読まれるコンテンツに欠かせない、分かりやすい文章の3つのポイント…

    良質なコンテンツを配信することによってユーザーの行動を喚起するコンテンツマーケティングが主流となった…

  5. SNSの拡散(バズ)を視覚化。今すぐ役立てたい効果測定ツール3選…

    オウンドメディアとならんで、Webマーケティングの重要な要素の1つがSNSの活用です。「SNSを使っ…

  6. ツールを使って効率的に配色。カラーパレットのWebサービス4選

    ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる…

  7. 外注やデザイナーに頼らずサクッとロゴを制作。ロゴジェネレーター3…

    LineやInstagramといったSNSの台頭にともない、コミュニケーションツールとしてあっという…

  8. Webサイトの完成度を高める、バナー&各種パーツのギャラリーサイ…

    広告やランディングページでユーザーの興味・関心を引き立てるバナーはもちろん、アイコンやタブをはじめと…

PICKUP

PAGE TOP