デザインのディテールへのこだわりが必要な理由

もしあなたがデザイナーで、何らかのプロジェクトのデザインを任された時、何を基準にしてデザインを詰めればいいか不安になったことはないでしょうか。または、あなたがディレクターやプロデューサー側の立場で、デザイナーからあがってくるデザインの善し悪しを判断しなければならなくなった時、何を基準にして判断すればいいのか、基準が曖昧だったりした経験はないでしょうか。

デザインの善し悪しを判断する上で、判断材料となる項目は非常に多く複雑ではありますが、根本的に欠かせないものの一つが「デザインのディテール」です。どんなに素晴らしいストラテジーや目標を立てられたとしても、それが最終的に伝わるべき「イメージ」を持ち、正しい品質として「カタチ」となって表れてこなければ、誰にも伝わることはありません。

デザインのディテールとは何なのか、なぜディテールにこだわらなければならないのか。このブログ記事を通じて、デザイナー自身が自分のデザインに自信と確信を持って取り組めるようになれたり、デザイナーではない方々がデザインについて少しでも理解を深めていけるよう最初のきっかけになれたら幸いです。

デザインのディテールは「そのものらしさ」を表す

reason-why-detail-of-design-is-important-1

例えば、ブランディングやキャンペーンなどのプロジェクトでユーザーに何らかの体験をしてもらう必要があるとします。体験に入ってもらうためにはまず、キャンペーンのイメージを視覚的に伝える必要があります。キャンペーンがどういう性格で、どういう内容を持ち、どういうことができるのか、それらをイメージとして伝えられなければなりません。もし、イメージを正しく作れることができなければ、そのキャンペーンが何であるか、何が言いたいのかがユーザーに届かず、体験に入ってもらう前にユーザーのニーズとマッチすることができず、興味から外れてしまいます。最悪の場合、想定するイメージと全く違う誤解を受けたままプロジェクトが終了してしまうなんてことにもなりかねません。では、正しくイメージを作るためには何に注意すればいいのでしょうか。

ブランドやキャンペーンなどのイメージを生み出すものは、視覚的なデザインエレメントである「形状」「テクスチャ」「余白」などの一つひとつのディテールから生まれます。しかし、ただ単純に〇〇っぽいデザインエレメントを並べればいいというわけではありません。エレメント一つひとつのクオリティやエレメント同士の全体のバランスが一体となって一つのイメージを生み出しているのです。何か一つでも余計な要素があれば全体のイメージが大きく変わってしまう要因になります。最終的に自分たちのデザインが求めるイメージを表現できているか注意しましょう。

デザインのディテールは「品質」を表す

デザインのディテールは性格を表せるだけではありません。ブランドやキャンペーンの品質までも正確に表現することができます。よく陥りやすいことは、高品質な商品のプロモーションなのに、デザインのディテールが荒く作られてしまったり、求められる水準にまでディテールが研ぎすまされておらず、せっかくの高品質な商品が安いイメージで受け取られてしまうことです。そうなれば商品だけでなくブランド自体にも悪影響を及ぼしかねません。品質を正確に表現するためにも、デザインのディテールに注意しましょう。

そして、品質を表す要素は大きく2つあります。

1つ目の要素は、デザインエレメントそのものの精度を上げる方法です。世の中の著名なプロダクトは、必ず職人が手間をかけて一つひとつの素材から丁寧に作られていたり、有名なデザイナーが細部にこだわって設計されていたりします。それと同じように、デザインエレメントも素材一つひとつの精度を高めて作っていく必要があります。テキストのカーニングは正確か、オブジェクトのテクスチャの具合は不自然ではないか、ドロップシャドウの気持ちが良いと感じる分量はどのくらいか、必要なもの以外の余計なモノが入っていないか、など一つひとつを研磨していくことで全体の品質をコントロールすることができます。

reason-why-detail-of-design-is-important-2
ラグジュアリーブランド ティファニーのフォトグラフは非常にコントラストが高く、細部までハッキリとしたクリアなビジュアルで構成されています。製品の細部まで精密に映し出すことで、製品品質への信頼とティファニーブランドの美しさを表しています。
reason-why-detail-of-design-is-important-3
全く逆の例です。こちらはファストファッションブランドGUのロゴ。GUのファストファッションの性質や安価な品質を正しく表現しています。ただディテールを詰めてデザインの品質を上げればいいのではなく、どの段階で止めるか、その判断もブランドのパーソナリティを正しく表現するにはとても大切です。グラフィックデザインはあくまで視覚的情報伝達なので、このように嘘偽りなくブランドのイメージは正しく作られるべきです。

2つ目の要素は、デザインエレメントの組み方です。素材が完璧に仕上がっているなら、あとはそれらエレメント同士のバランスです。情報を詰め込み過ぎてはいないか、閑散としすぎてはいないか、グリッドのルールは統一されているのか、逆にルールがガチガチになりすぎて抑揚やリズムが失われてつまらない印象になっていないか。そういったことに注意しながら組み合わせていくことで、全体に決して単純ではない深みのある佇まいを醸しだせたり、余白を多めにとることで高級感を演出したりすることができます。そうしてデザインする対象の品質を表すことができます。

reason-why-detail-of-design-is-important-4
無印良品の雑誌広告のレイアウトデザイン。余白やグリッドガイドラインをうまく使い、無印良品の「省資源」「低価格」「シンプル」「匿名性」「自然志向」などのアイデンティティやヴィジョン、品質へのこだわりがレイアウトの配置だけで伝わってきます。

デザインのディテールは「優位性」を与える

デザインのディテールはイメージや品質を表しますが、その他に様々な影響を与えます。その一つが優位性です。現代社会のように、非常に似通った機能や性能を持ったプロダクトやサービスが溢れる時代において、デザインのディテールは他の競合する対象よりも強くその存在感を示し、人々に印象づけることができます。機能や性能はもはや、現代社会では差別化には繋がりにくい状況になってきています。そういった市場で生き残っていくためにも、競合するモノ達よりも、より特別で新鮮な体験を提供していく必要があります。デザインのディティールは特別な体験を生み出し、差別化や優位性を与えることができます。

reason-why-detail-of-design-is-important-5
グラフィックデザイナー大高 猛氏によりデザインされた日清食品 カップヌードルのロゴ、パッケージ。同じカップ麺ブランドの製品に比べて圧倒的に差別化され、世の中に認知されています。また、コンビニやスーパーで並べられた時にも、他の製品より格段に早く見つけることができます。

デザインのディテールは「強度」を与える

デザインのディテールの精度を高めることは、そのままデザインの強度を持つことにも繋がります。強度とは、ここでは2つの意味を指します。1つ目は、時代に左右されない、どれだけ時間が経っても対象の印象や鮮度がすり減らない、造形的な美的感覚を持ち合わせていることと、2つ目は、一つの目的・媒体のためだけに作られたデザインだとしても、Webやアプリケーション、紙やツールなど多用途に展開されてもすり減らない、印象や品質が変わらないことを指します。デザインに強度を持たせるために一つよい見方があります。それは、デザインが一つの造形物としての美しさ、品格を兼ね備えているかどうかを見極めることです。優れた美しさと品格を兼ね備えた造形物はたとえ時代や媒体が変わっても、素材そのものの品質として恒久的に衰えることはありません。歴史に名を残すグラフィックデザインやファインアートなどは、その高い水準の品格や強烈なイメージにおいて、今なお色褪せることはなく、新鮮さすら感じさせます。そして、逆にディテールへの配慮がないモノが、永くこの社会や人々の心に残ることはありません。ディテールへの配慮が、対象を社会に永く留まらせ、世の中に広げていく最良の手段となります。

reason-why-detail-of-design-is-important-6
日本のグラフィックデザインの父、亀倉 雄策氏によるグッドデザインのロゴ。1957年に制作され、約60年経った今でも一切古さを感じさせない、鮮度を持った造形です。そして多様な媒体に使用されてもシンボル自体の存在が薄れない、優れた造形物としての力強さも併せ持っています。

reason-why-detail-of-design-is-important-7
1986年に松永 真氏によりデザインされ、今も愛され続けている箱ティッシュScottie。国際コンペのパッケージのみのデザインから始まったが、パッケージを越え販促ツール、ロゴタイプ、さらにはブランドのCIへと発展され、その造形的な品格は今なお愛され続けています。

このようにデザインのディテールはイメージ、品質のみならず、優位性、強度など様々な効果を与えてくれます。 あなたが本当にクライアントやブランドのことを大切に思い、成果を出すために社会にしっかり対象を根付かせていきたいと思うのなら、最終的に形として表れてくるデザインのディテールについて理解を深め、それをカタチとして実現できるようにしましょう。

最後に、デザインのディテールに成り得る要素についてまとめてみました。これら一つひとつの項目も非常に専門知識や感性を必要とするものですが、経験値を詰まなければ何事も再現することはできません。これらのディテールを理解し突き詰めるのはもちろん、それらの最適な組み合わせのバリエーションなども目的に合わせて理解し、判断できるようにしておきましょう。

  • 形状
  • テクスチャー
  • タイポグラフィ
  • 写真
  • 映像
  • グラフィック
  • イラストレーション
  • レイアウト、グリッド、余白
  • モーション

勉強方法としては、それぞれの歴史や歴史の中の著名人の作品や解説を見て勉強するか、現在におけるそれぞれの最先端の人間の動向をチェックするなどがディテールへの理解に繋がります。

5STEPでブランドイメージを的確に表現できるデザイン方法

Webデザイナーがブランドサイトをデザインするとき、求められる項目は多岐にわたります。目的や状況に応じて変化しますが、大きく分けて「ブランドイメージの的確な表現」、「競合との差別化」、「コンバージョンの達成」、「ユーザビリティ」などがあります。

品質の高いブランドサイトを制作するためには、これらの項目全てに応えなくてはなりません。しかし、経験の少ないデザイナーはほとんどの場合、これらの項目を全て一緒に考えてしまうため、そのサイトで何を達成したかったのか、分からなくなってしまいます。

全ての項目に的確に応えるためには、これらを一つ一つ整理し、順を追って制作していく必要があります。ここでは、その中で、まず最初に取りかからなくてはならない「ブランドイメージの的確な表現」について紹介します。

ブランドイメージを表現する際に達成しなければならない3つの要素

5-steps-design-brand-image-1

ブランドイメージを的確に表現するためには、表面的に優れたデザインを行うだけではありません。ただ魅力的な装飾を加えるだけではなく、ブランドのもつ価値を正しく理解し、ターゲットに伝えなければなりません。

それに加え、そのブランドの価値が本当にターゲットに求められているのかどうかも重要です。ターゲットが求めるイメージ像から極端に離れてしまえば、ターゲットは必ず違和感を感じて離脱してしまいます。

ターゲットに興味を持ってもらい、正確にブランドイメージを伝えるためには、ブランドのコンセプトとターゲットのイメージを結びつける必要があります。

また、表現するイメージが、競合する他のブランドと同じようにならないように注意しましょう。イメージが十分に差別化できなければ、ブランドのもつ製品やサービスの品質が、他社製品と同じように捉えられてしまい、パーソナリティが正しく伝わらなくなってしまいます。

これらのことを最初に意識し、正しい手順で制作することで、的確にブランドイメージが表現できるようになります。では、実際にどのように制作に落とし込んでいけば良いのでしょうか。

STEP1. 「ブランドがターゲットに提供できる価値」と「ターゲットがブランドに求める価値」をキーワードにまとめる

5-steps-design-brand-image-2

まず最初に、デザインに取りかかる前にデザインのリサーチに必要なキーワードをまとめます。キーワードをまとめる際、2つの視点が必要です。

まず1つは、「ブランドがターゲットに提供できる価値は何か」です。例えば、ケラスターゼというヘアエステティックブランドでは「美しい髪と心身ともにリラックスできる至福の時間」というものがブランドコンセプトです。そして、ターゲットに「プロフェッショナル」「高品質」「リラクゼーション」「テクノロジー」などを提供できます。これらを一度キーワードとしてまとめます。

2つ目は、「ターゲットがブランドに求める価値は何か」です。ターゲットは美しい髪になりたいと思い、「高品質な製品」、「リラクゼーションの体験」、「プロフェッショナルなサービス」などを求めてやってきます。それをキーワードにまとめます。

これら2つの視点から、お互いにマッチするキーワードを抜き出し、それをデザインリサーチに使います。ここで重要なことは、ターゲットが求めていないキーワードはターゲットに響かないということです。ケラスターゼでは「テクノロジー」がターゲットに提供できますが、ターゲットには「テクノロジー」のような専門的な情報はほとんど理解してもらえません。こういったミスマッチが積みかさなってしまうと、ターゲットは求めているイメージとの違いを感じ、離脱してしまいます。

このように、最初にキーワードを整理することで、ブランドの伝えたい内容を、的確にターゲットに届けられるようになります。

STEP2. キーワードに合うデザイン・ビジュアルをリサーチする

5-steps-design-brand-image-3

キーワードが決まれば、それに合うイメージ・スクリーンショットを集めます。私がよくアイコンやUIで参考にするのはdribbbleです。キーワードのテイストやイメージを検索する場合だとPinterest。webサイトではS5-StyleWeb Design Servedなどをよく参考にさせて頂いてます。

また、EmberなどでリサーチしたイメージやwebサイトのURLを保存し、蓄積できるようにしておきましょう。そうすることで、新しいプロジェクトをこなせばこなすほど、参照できるイメージが多くなり、表現の幅が広がっていきます。

リサーチする際のポイントとしては、タイポグラフィ・見出し・説明ビジュアル・特殊演出など、各エレメントがどのようにブランドイメージを際立たせているかを意識して集めます。どのようなタイポグラフィで見出しを組めば、目的とするブランドイメージを表現できるか、どのような色や形を使えば、どのようなイメージが生まるのか、それを意識して集めます。

STEP3. リサーチ結果をまとめる

5-steps-design-brand-image-4

リサーチしたイメージが集まったら、今度はそれをまとめます。まず、集めたビジュアルをSTEP1でまとめたキーワードごとにまとめ、最初に設定した表現するべきキーワードからブレないようにします。まとめ方は、イメージボードを作成し、視覚的に確認できるようにしましょう。そうすれば、他のプロジェクトメンバーに説明するときに、コミュニケーションがとりやすくなるので便利です。また、時間がないときでも、参考サイトのリンクをテキストエディタにをまとめたり、参考イメージをフォルダにまとめておくだけでも十分効果的です。

STEP 4. リサーチ結果をデザインに落とし込む

5-steps-design-brand-image-5

リサーチがまとまったらあとはデザインにおこすだけです。「メインビジュアル」「フォント」「カラー」「見出し」「レイアウト」「ボタン」「線」など、各エレメントを一つ一つキーワードに沿ってデザインしていきます。

□高品質で自信のあるイメージを表現するために、製品ビジュアルを堂々と大きくレイアウト。
□プロフェッショナル感を表現するために、配色を落ち着きのあるモノトーンに。
□リラクゼーション感を表現するために、各要素の余白を十分にとり、淡く優しい配色に。
□女性らしさを演出するために、和文書体を明朝体に。
□ラグジュアリー感を演出するために、ボタンやUI、背景をデコレーション。

STEP5. ルール化する

5-steps-design-brand-image-6

最後に、ブランドサイトのページ全体で、ブランドイメージがぶれないようにルール化します。

ブランドサイトにはほとんどの場合、階層下ページがあります。また、サイトが公開した後は、そのブランドサイトのデザインをベースに、キャンペーンページの制作やサイト内コンテンツを更新する運用業務も発生します。もし、階層下ページや更新のタイミングで、ブランドイメージが変わってしまえば、ターゲットは混乱し、サイト内の情報をスムーズに閲覧してもらえなくなります。

また、大きなプロジェクトでは、複数のデザイナーやアシスタントが制作に関わってきます。その場合でも、プロジェクトメンバー全員でルールを共有化することが重要です。各デザイナー間で表現が違ってしまえば、ブランドイメージがぶれてしまい、品質の低下に繋がってしまいます。

ページ全体の表現のぶれを抑えるために、一度ブランドイメージが固まったタイミングでガイドラインを作成しましょう。そうすることで、他のプロジェクトメンバーにもイメージを共有しやすくなるので、階層下ページの制作や、公開後の更新もコントロールしやすくなります。時間がない場合は、STEP1でまとめたキーワード、STEP3でまとめたリサーチ結果を共有するだけでも十分効果的です。

ブランドサイトの世界観の演出は非常に重要です。制作したブランドのイメージが適切でなければ、せっかく作りこんだビジュアルもターゲットに届かず、ブランドの伝えたいイメージも内容も伝えることはできません。上記のように、デザインに入る前にしっかりとブランドの価値とターゲットの要望を明確にすることで、効果のあるハイクオリティなブランドイメージが制作できるのではないでしょうか。