DESIGN

五感から生み出すデザイン。『それっぽい』デザインを作れるようになるための考え方

DESIGN 公開日:2018年10月18日 更新日:2019年08月03日

この記事はリニューアル前の記事です。

はじめに

新人デザイナー時代、よく提出したデザインカンプにリテイク指示を出されました。
だけど自分ではこれ以上どう良くしていいか分からず、結局先輩デザイナーに手直ししてもらうこともしばしば…。

個人的な考えですが、デザインに正解はないと思っています。ですが、限りなく正解に近いデザインを作ることは出来る。
ではどうやって、無限にも思える数多くの選択肢の中から、正解に近い答えを導きだすことが出来るのか?
自分自身の新人時代を振り返って、改めて考えてみました。

新人デザイナー時代の悩み

デザイン素人からのフィードバック対応に苦労した


デザイナーじゃない人からのフィードバックなどは、自分の中でどう消化したらいいか分からず、苦労した記憶があります。
ですが、業界やターゲット層にもよりますが、ユーザーの大半がデザインに対して、乱暴に言えば素人です。
一番見てもらう層に伝わらないデザインは、確かに改善の余地がありますよね…。

ですが具体的な修正指示がもらえない。結果、どこをどう直していいか分からず、途方に暮れる。
それを見かねた先輩デザイナーが、巻き取って手直してくれる、という自分の中で悪循環に陥ってしまっていました。

だからこそ、『それっぽい』と感じさせるデザインを作れるようになることが重要になってくるのです。
どれだけ理屈っぽくデザインの説明をしたところで、クライアントを納得させるモノを作らないと、まったく意味がありません。

こんな感じのことを言われました

新人デザイナー時代に代理店の営業さんから言われたことをまとめてみました。

VOICE
  • 企業サイトのデザインを作ってって言ったのに、なんかそれっぽくない
  • んー、なんかしっくりこないんだよなぁ…とりあえずもう一案もらえる?
  • この特集ページさ、もっとお祭り感出せない?パーッとさ!盛り上がってる感じで
  • インパクトがない気がする。どこが?って聞かれたら分かんないんだけどさ

皆さん感じたと思いますが、どれも具体的ではなく、抽象的な意見です。
だからこそ、彼らが無意識に感じ取っている違和感を無視してはいけません。
クライアントや、ターゲットとなるユーザーも同じように違和感を覚える可能性があるからです。

ではその違和感を消すことができれば、『それっぽい』と感じさせることが出来るようになれれば、限りなく正解に近いデザインを作ることが出来るのではないでしょうか。

五感から生み出すデザインの発想法

ではここから、具体的に『それっぽい』デザインを生み出すための考え方を挙げていきます。

まず五感について、改めておさらいします。
以下Wikipediaからの引用です。

五感(ごかん)とは、動物やヒトが外界を感知するための多種類の感覚機能のうち、古来の分類による5種類、すなわち視覚、聴覚、触覚、味覚、嗅覚をさす。この伝統的な分類を前提として、人間の感覚全体を指すために「五感」という表現が用いられる場合もある(「五感を鋭くする」など)。

では具体的にどうデザインに落とし込めていくのでしょうか?

案件「自慢のコーヒーが売りのカフェ」のWebサイトデザイン


今回は架空の依頼、「自慢のコーヒーが売りのカフェ」のWebサイトデザインの依頼を受注したと仮定して考えていきましょう。
五感から生み出す『それっぽい』デザインと題しましたが、デザインの発想法として五感がどう絡んでくるのか?
項目ごとに考えていきましょう。

※事前に競合分析や情報設計などの上流工程は終了済みとします。単純なデザイン作業時に考えることにフォーカスします。
※アイデア出しの時点では正解か不正解かは考えない。とりあえずアイデアを列挙していくことが大切です。
※クライアントから提供された画像、または現地を訪問し、思いつくままに箇条書きにしてみる。

1. 視覚
感じたこと
  • お店はお洒落なインテリアが多い(木目調のテーブルなど)
  • 床はタイル調
  • 茶色のコーヒー豆、湯気がたっている淹れたてのコーヒー
  • 店内の照明は温かいオレンジの柔らかな光
  • 観葉植物の緑が目に優しい
それをデザインに変換すると

  • ベースカラーは茶色、サブカラーは淡いオレンジ、アクセントカラーに緑を使用してみる
  • 背景に木目のテクスチャを使用してみる
  • 観葉植物のイラストをヘッダーに置いてみる
  • キービジュアルにお店の外観を使用してみる
  • フッターの背景にタイルのpatternを使用してみる
  • コーヒーの紹介部分は、背景を暗くし、コーヒーの湯気が目立つようにしてみる
2. 聴覚
感じたこと
  • 店内にはゆったりとした海外のJAZZの音楽が流れていた
  • とても静か、他のお客さんの会話も気にならない
  • 袋に隙間なく並ぶコーヒー豆から「ぎゅうぎゅう」という音を感じる(ぎゅうぎゅう詰めから)
それをデザインに変換すると

  • あまり賑やかしの要素を入れず、シンプルに構成してみる(うるさくしない)
  • アクセントに手書きの英語フォントを使用してみる(海外、英語圏の要素)
3. 触覚
感じたこと
  • コーヒー豆は小さく、丸い、少しざらついている
  • 淹れたてコーヒーの器は、触ってみたら熱かった
それをデザインに変換すると

  • buttonなどの要素に角丸を使用し、丸みを出す
  • コンテンツの背景などにグランジ感をだしてみる
  • サイト全体のトーンが冷たい印象にならないように、寒色の使用は避けてみる
4. 味覚
感じたこと
  • コーヒーは苦く、ビターな味だった
  • デザートとして出しているケーキは、逆に甘かった
それをデザインに変換すると

  • サイトの世界観はポップではなく、落ち着いたイメージ
  • 甘み(ポップ)、苦味(ビター)どちらかに寄りすぎず、バランスをとる
  • ページ全体のトーン&マナーを守る
5. 嗅覚
感じたこと
  • 異国からやってきたコーヒー豆の香りは、とても香ばしく、華やかに感じる
  • 観葉植物の緑の香りは、太陽を浴び、そよ風になびく、とても爽やかなイメージ
それをデザインに変換すると

  • 香ばしい→茶色
  • 緑の香り→緑色
  • コンテンツごとに区切りを入れず、全体の風通しをよくしてみる
  • サイトに重力が存在していると仮定し、ふわっとした浮力を感じさせるあしらいを入れてみる(パララックス)

結構無理やり結びつけてる感ありますね…。すみません。色々適当で申し訳ないですが、だいたいこのような感じではないでしょうか。
実際に書き出してみると、一つの対象でも五感というフィルターを通してみると、たくさん感じ取れることがありますね。これを大切にしましょう。

実際にデザインに落とし込む際には、書き出したイメージからふさわしいモノを取捨選択し、書き出した項目から逸脱しないように自分の中でルールを作って制作すれば、今までの自分よりも、『それっぽい』デザインを作れるようになっているはずです。

Webサイトは平面です。画面の奥にしか存在せず、その存在は視覚でしか知覚することが出来ません。
なので我々デザイナーも視覚という一つの感覚に頼りがちですが、一つの感覚だけに頼るより、複数の感覚を絡めての発想の方がより印象に残るデザインに仕上げることが出来ます。

余談ですが、とあるデザイナーさんはドラマのWebサイトデザインの依頼が来た時に、ドラマの主題歌を聞きながら、作業するそうです。
五感の要素からデザインのインスピレーションが生まれる良い例だと思います。

今回のイメージに近い参考サイト

下記は個人的に素晴らしいと感じたカフェのWebサイトです。
ぜひ自分の五感と照らし合わせて、参考にしてみてください。

参考サイト

五感はそれぞれリンクしている

例えば嗅覚(コーヒーの香ばしい匂い)から視覚(淹れたての湯気がたっているコーヒー)を連想したり、視覚(袋に所狭しと詰められたコーヒー豆)から聴覚(狭苦しい、ぎゅうぎゅうというオノマトペ)を感じたり、五感はそれぞれとリンクしています。
この五感同士をうまく繋ぎ合わせることで、ユーザーへと伝わる印象をコントロールすることが出来ます。

五感に潜む落とし穴

今回のテーマは「自慢のコーヒーが売りのカフェ」のWebサイトデザインでした。
では他のテーマだとどうなるでしょうか?

テーマによっては例えば色のイメージなども異なってきます。
同じ赤でも、果物ならりんご、病院なら血といったように視覚から連想するものは、違ってきます。
だからこそ、ミスマッチを避けるために、五感をフルに活用し対象をよく観察する必要があるわけです。

理由もなく安易にデザインをしてしまうからこそ、違和感がうまれ、リテイクに繋がるわけです。

今回のまとめ

デザイナーには観察力が必要不可欠


対象を細かく観察し、五感に分類して自分が感じたことをリストアップしていくことで、これから作るデザインの輪郭が段々と見えてきませんか?
Webサイトにも個性・性格があります。つまり、人間に例えると似合う服装(あしらい)があるのです。
観察力によって、ユーザーが既に持ち合わせているイメージの剥離を防ぎ、なんとなくの違和感をなくすことができます。

観察力を磨くためにも意識的に外出して、様々をモノを実際に見て、触れて、五感を通して感じてみましょう。
デザインに活かせるヒントが、日常の中に潜んでいることに気づくことが出来るでしょう。
経験年数を積んだデザイナーが素晴らしいデザインを生み出すのは、彼らの努力の賜物とも言えるでしょうが、新人デザイナーと比べて単純に長く様々なことを経験しているからでもあります。

デザインセンスがないと落ち込む前に

デザインセンスを身につけることは、果たして出来るのでしょうか?

今、デザインの引き出しが少なく、センスがないのではと感じて不安になっている新人デザイナーの方もいるかと思います。
ですが安心してください。あなたも経験を積むことで、豊かなデザインが出来るようになります。

ですが、日々をただ漠然と過ごすのか、意識して五感を活用し日々アンテナをはって過ごすのかでは、同じ経験年数でも上達のスピードは変わってきます。

五感によって、日々センスは磨くことができる。

AIの進化や便利なデザインサービスが登場しても風化しない大切なこと

コンピューターが進歩しても、広義な意味でのデザイナーの役割は失われない。
「なんとなく居心地が良い」「それっぽいデザイン」「理由は分からないが、不思議と落ち着く」など。
なんとなく感じる気配、その時々の時代の空気感・トレンドを再現する力は我々人間だけにしかない能力だと感じています。
(明確ではない、抽象的な、ふわっとしたものを表現する力)

デザインは自由なもの

最後に『それっぽい』デザインから卒業してみましょう。
ここまで熱く『それっぽい』デザインについて語ってきましたが、今後のステップアップとして、『それっぽい』デザインから脱却することも視野に入れておきましょう。

あえて『それっぽい』デザインを悪く捉えてみると、

  • それっぽいが、没個性
  • それっぽいが、他サイトに埋もれてしまう
  • それっぽいが、他サイトに比べてあまり目立たない
  • 安定はしているが、ユニークさはない

基本的なベースの発想法としては有用ですが、上記のようなことも、無きにしも非ずです。
極論、セオリーをガン無視していても、素敵だと感じるデザインはこの世にたくさん存在します。
フレームワークやら、デザインの四原則やら、型にはめるような理論はたくさんありますが、デザインは本来、もっと自由なものなのです。