menu

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

ディレクター心得

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

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

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

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

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

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

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

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

  2. プレゼンや打ち合わせに活用したい、無料モックアップ作成ツール3選…

    ワイヤーフレームと同様に情報共有やプレゼンテーションの精度を高めてくれるのがモックアップです。クライ…

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

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

  4. キービジュアルはイメージより具体性。ファーストビューの効果的な改…

    多くの場合、Webサイトのファーストビューは、「メインコピー」、「キービジュアル」、「サブ要素」、「…

  5. 無料&レスポンシブ対応済みのWordPressテンプレート3選

    Webディレクターの業務のなかでも意外と頭を悩ませることが多いのがレスポンシブ対応ではないでしょうか…

  6. ランディングページの成功事例その2「TECH:CAMP」

    ベテランのWebディレクターでも頭を悩ませることの多いランディングページ制作。用途・目的に沿ったペー…

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

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

  8. Webコンテンツの印象を大きく変えるタイポグラフィの4原則

    フォントを効果的に使うにはタイポグラフィ(書体の配置や構成といった表現)も大切です。デザインやレイア…

PICKUP

PAGE TOP