Webデザイナーがブランドサイトをデザインするとき、求められる項目は多岐にわたります。目的や状況に応じて変化しますが、大きく分けて「ブランドイメージの的確な表現」、「競合との差別化」、「コンバージョンの達成」、「ユーザビリティ」などがあります。
品質の高いブランドサイトを制作するためには、これらの項目全てに応えなくてはなりません。しかし、経験の少ないデザイナーはほとんどの場合、これらの項目を全て一緒に考えてしまうため、そのサイトで何を達成したかったのか、分からなくなってしまいます。
全ての項目に的確に応えるためには、これらを一つ一つ整理し、順を追って制作していく必要があります。ここでは、その中で、まず最初に取りかからなくてはならない「ブランドイメージの的確な表現」について紹介します。
ブランドイメージを表現する際に達成しなければならない3つの要素
ブランドイメージを的確に表現するためには、表面的に優れたデザインを行うだけではありません。ただ魅力的な装飾を加えるだけではなく、ブランドのもつ価値を正しく理解し、ターゲットに伝えなければなりません。
それに加え、そのブランドの価値が本当にターゲットに求められているのかどうかも重要です。ターゲットが求めるイメージ像から極端に離れてしまえば、ターゲットは必ず違和感を感じて離脱してしまいます。
ターゲットに興味を持ってもらい、正確にブランドイメージを伝えるためには、ブランドのコンセプトとターゲットのイメージを結びつける必要があります。
また、表現するイメージが、競合する他のブランドと同じようにならないように注意しましょう。イメージが十分に差別化できなければ、ブランドのもつ製品やサービスの品質が、他社製品と同じように捉えられてしまい、パーソナリティが正しく伝わらなくなってしまいます。
これらのことを最初に意識し、正しい手順で制作することで、的確にブランドイメージが表現できるようになります。では、実際にどのように制作に落とし込んでいけば良いのでしょうか。
STEP1. 「ブランドがターゲットに提供できる価値」と「ターゲットがブランドに求める価値」をキーワードにまとめる
まず最初に、デザインに取りかかる前にデザインのリサーチに必要なキーワードをまとめます。キーワードをまとめる際、2つの視点が必要です。
まず1つは、「ブランドがターゲットに提供できる価値は何か」です。例えば、ケラスターゼというヘアエステティックブランドでは「美しい髪と心身ともにリラックスできる至福の時間」というものがブランドコンセプトです。そして、ターゲットに「プロフェッショナル」「高品質」「リラクゼーション」「テクノロジー」などを提供できます。これらを一度キーワードとしてまとめます。
2つ目は、「ターゲットがブランドに求める価値は何か」です。ターゲットは美しい髪になりたいと思い、「高品質な製品」、「リラクゼーションの体験」、「プロフェッショナルなサービス」などを求めてやってきます。それをキーワードにまとめます。
これら2つの視点から、お互いにマッチするキーワードを抜き出し、それをデザインリサーチに使います。ここで重要なことは、ターゲットが求めていないキーワードはターゲットに響かないということです。ケラスターゼでは「テクノロジー」がターゲットに提供できますが、ターゲットには「テクノロジー」のような専門的な情報はほとんど理解してもらえません。こういったミスマッチが積みかさなってしまうと、ターゲットは求めているイメージとの違いを感じ、離脱してしまいます。
このように、最初にキーワードを整理することで、ブランドの伝えたい内容を、的確にターゲットに届けられるようになります。
STEP2. キーワードに合うデザイン・ビジュアルをリサーチする
キーワードが決まれば、それに合うイメージ・スクリーンショットを集めます。私がよくアイコンやUIで参考にするのはdribbbleです。キーワードのテイストやイメージを検索する場合だとPinterest。webサイトではS5-StyleやWeb Design Servedなどをよく参考にさせて頂いてます。
また、EmberなどでリサーチしたイメージやwebサイトのURLを保存し、蓄積できるようにしておきましょう。そうすることで、新しいプロジェクトをこなせばこなすほど、参照できるイメージが多くなり、表現の幅が広がっていきます。
リサーチする際のポイントとしては、タイポグラフィ・見出し・説明ビジュアル・特殊演出など、各エレメントがどのようにブランドイメージを際立たせているかを意識して集めます。どのようなタイポグラフィで見出しを組めば、目的とするブランドイメージを表現できるか、どのような色や形を使えば、どのようなイメージが生まるのか、それを意識して集めます。
STEP3. リサーチ結果をまとめる
リサーチしたイメージが集まったら、今度はそれをまとめます。まず、集めたビジュアルをSTEP1でまとめたキーワードごとにまとめ、最初に設定した表現するべきキーワードからブレないようにします。まとめ方は、イメージボードを作成し、視覚的に確認できるようにしましょう。そうすれば、他のプロジェクトメンバーに説明するときに、コミュニケーションがとりやすくなるので便利です。また、時間がないときでも、参考サイトのリンクをテキストエディタにをまとめたり、参考イメージをフォルダにまとめておくだけでも十分効果的です。
STEP 4. リサーチ結果をデザインに落とし込む
リサーチがまとまったらあとはデザインにおこすだけです。「メインビジュアル」「フォント」「カラー」「見出し」「レイアウト」「ボタン」「線」など、各エレメントを一つ一つキーワードに沿ってデザインしていきます。
□高品質で自信のあるイメージを表現するために、製品ビジュアルを堂々と大きくレイアウト。
□プロフェッショナル感を表現するために、配色を落ち着きのあるモノトーンに。
□リラクゼーション感を表現するために、各要素の余白を十分にとり、淡く優しい配色に。
□女性らしさを演出するために、和文書体を明朝体に。
□ラグジュアリー感を演出するために、ボタンやUI、背景をデコレーション。
STEP5. ルール化する
最後に、ブランドサイトのページ全体で、ブランドイメージがぶれないようにルール化します。
ブランドサイトにはほとんどの場合、階層下ページがあります。また、サイトが公開した後は、そのブランドサイトのデザインをベースに、キャンペーンページの制作やサイト内コンテンツを更新する運用業務も発生します。もし、階層下ページや更新のタイミングで、ブランドイメージが変わってしまえば、ターゲットは混乱し、サイト内の情報をスムーズに閲覧してもらえなくなります。
また、大きなプロジェクトでは、複数のデザイナーやアシスタントが制作に関わってきます。その場合でも、プロジェクトメンバー全員でルールを共有化することが重要です。各デザイナー間で表現が違ってしまえば、ブランドイメージがぶれてしまい、品質の低下に繋がってしまいます。
ページ全体の表現のぶれを抑えるために、一度ブランドイメージが固まったタイミングでガイドラインを作成しましょう。そうすることで、他のプロジェクトメンバーにもイメージを共有しやすくなるので、階層下ページの制作や、公開後の更新もコントロールしやすくなります。時間がない場合は、STEP1でまとめたキーワード、STEP3でまとめたリサーチ結果を共有するだけでも十分効果的です。
ブランドサイトの世界観の演出は非常に重要です。制作したブランドのイメージが適切でなければ、せっかく作りこんだビジュアルもターゲットに届かず、ブランドの伝えたいイメージも内容も伝えることはできません。上記のように、デザインに入る前にしっかりとブランドの価値とターゲットの要望を明確にすることで、効果のあるハイクオリティなブランドイメージが制作できるのではないでしょうか。