言ってみればデザインは、すべてが選択の連続です。色、形、線、フォント、テキスト、グラフィックなど、何を選択するかが、自分が届けようとしているメッセージに大きな影響を与えます。
「デザインのスキルを磨くべきだと思いますが、もともとセンスがないのです」と話す人は大勢います。ですがデザインのスキルを磨く時、創造性はもちろん重要ですが、それと同じくらい、心理学とユーザーの行動を学ぶことが重要です。
「デザインの心理学」を学ぶということは、デザインのノウハウが載った戦術書を手に入れることではありません。
この原則を学ぶことにより、直感的で意図的なデザインを作成する際に役立たせることができます。
この記事では、ウェブデザインに役立つ心理学の原則を説明します。参考にしてみてください。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
デザインの方法を変える８つの心理学の法則
１）メンタルモデル
コンピューター科学者やUXデザイナーは、メンタルモデルについて頻繁に考えたり話したりします。これは、なにか新しいものをデザインするとき、つまりウェブサイトのレイアウトや新しいアプリをデザインするとき、ユーザーが何を直感的と感じるのか見つけ出し、それに基づいてデザインする必要があるからです。
メンタルモデリングとは、人が現実世界で何をどう理解するのかというプロセスを、仮想空間で作られたモデルの体験および再現を通し明らかに示すことを指します。つまり、オーディエンスの直感プロセスを明らかにします。
コンピューターのファイルやフォルダーについて思い描いてみてください。ハードファイルの整理も、学校で教わった整理整頓の方法と同じではないでしょうか。そうすることにより、外観は違っても、ユーザーにとって理解しやすくなっているのです。
デザイナーにとっては、メンタルモデリングが何なのかを理解すること、そしてその重大性を理解することは、デザインする際にユーザーエクスペリエンスを考えるということに繋がります。
デザインの最中に「直感的チェック」を実行してください。ページ上の視覚要素は右から左、上から下に移動しますか？ メッセージは明確でわかりやすいですか？ またはメッセージは意図的に隠してありますか？
ページを見た時に直感的にどのように感じるかを友人や同僚に見てもらい、メンタルモデルが効果を発揮しているかどうかを確認することも素晴らしい方法です。
２）フォン・レストルフ（アイソレーション）効果
フォン・レストルフ効果は非常にシンプルです。たくさんの物がある中で、ひとつだけ変わったものがあると印象に残りやすいという考えです。
デザインの中で、なにか特定の1点にオーディエンスの注意を惹きたいときがあると思います。そしてその1点の周りに他の要素が多数存在している場合もあります。そのような時はその1点に、色、フォント、サイズなど、他と違ったものを使用します。
この例はイギリスのキャリアおよび仕事検索ツールであるTarget Jobsが使用した画像です。求人市場で大勢の求職者がいる中、一人だけ目を引く求職者がいる様子を表現しています。
一つだけ全く違った要素（赤い靴）の周辺に一連の類似した要素が並んでいることで、フォン・レストルフ効果により、ビューアから見て違ったアイディアがどれだけ目立つかということを表しています。
画像クレジット：Target Jobs
今ご紹介した例はかなり直接的ですが、フォン・レストルフ効果をページに活用することで、ユーザーの目をページの特定の場所に集めることもできます。
例えばCTA（Call-To-Action）を作成するときに、フォン・レストルフ効果を活用してページにコントラストを作り、下記のページのようにユーザーの目をCTAに集めることもできます。
３）ゲシュタルト原則
ゲシュタルト心理学は、デザイン内に複数の要素が存在するとき、要素同士の働き合いの中で、各要素がどのように認識されるかということを求めます。ゲシュタルト原則、またはゲシュタルトの法則では、複数のデザイン要素がどのようにひとつのグループとして見られるかということに注目します。
- 近接：複数の物体が近い位置に置かれている場合、それらの物体は別々の固体としてではなく、ひとつのまとまりとして認識されるという概念です。例えばUnileverのロゴの「U」には様々な形が含まれていますが、見た人の目にはそれがひとつのまとまりとして「Ｕ」と認識されます。
画像クレジット：Unilever
- 類似：類似した複数の物体は、ひとつの物体として、または同じグループ内の一部分として認識されます。NBCのロゴに含まれる円錐形はすべて似た形をしているため、ひとつのグループとして認識されます。
画像クレジット：NBC
- 閉合：閉合は、実際には完全に閉合していない複数の物体がひとつの物体として認識されることを言います。Girl Scoutのロゴでは、緑の物体と白い空白を連続させて配置することで連続したシルエットがあるように見えますが、実際に閉合しているのはその一部分だけです。
画像クレジット：Girl Scouts
- 連続性：見た人の目が物体の一部分から別の部分に自然に移動するような形状を言います。連続性には曲線が使用されていることが多く、線に沿って自然に目が移動します。オリンピックのロゴはそれぞれの円が繋がっておりまとまった物体として映るため、見た人は連続していると認識します。
画像クレジット：Olympics
- 図と地：人がある物体を物体として認識した時、人は物体（図）を周辺面（地）から分離させて見ます。Steve Jobs氏のトリビュートロゴを見た時、リンゴに注目するかSteve Jobs氏のシルエットに注目するかで、白い部分が図または地のいずれかに見えます。
画像クレジット：Jonathan Mak Long (via The Next Web)
４）本能的反応
ウェブサイト、絵、その他の何か視覚的なもので、見た瞬間に直感的に心が奪われ、しかもその理由を説明できなかったことはありませんか？おそらくそれは単純に直感だけで反応してしまう、本能的反応が働いたと言えます。
本能的反応を導き出すようにデザインするということは、本来、前向きで美しい印象を創り出すということです。ですからそれはある意味、人が見て心地良いと感じるものはどういうものなのかを知ることだとも言い換えることができます。
Airbnbは本能的なデザインを使用することで、旅先で体験する美しいものやエキゾチックな景観などをオーディエンスが感じられるようにしています。Airbnbを通じて借りられる場所に、美しいビーチの景観や華やかな宿泊場所はそう多くはありません。
Airbnbはそのようなデザインを使用することで、世界を旅することで得られる興奮や可能性をオーディエンスに見せているのです。
本能的なデザインをすることは、オーディエンスの関心を得られるような美しい写真や色彩豊かな画像を使用する、という単純なことなのです。
５）色彩心理学
さまざまな色と感情や考えを結びつけて考えることがあると思います。デザイナーたちは、どの色をどういったムードに結び付けられるのか、さまざまな研究を重ねてきました。
どの色をどのようなムードに結び付けられるのかということの詳細については、色彩心理学について詳しく説明している「グレートインフォグラフィック」をご参照ください。要約は以下に記載します。
青：確実性、落着き、正直、信頼性が高い、強さ、面倒見が良い
青を使用する企業は多く、青は信頼できる誠実な会社をイメージさせます。例えばFacebookが使用している青のスキームは、ユーザーに対しFacebookは安心で強いソーシャルネットワークであるとアピールしています。それによりユーザーは、さまざまな個人情報をシェアし表示させているにも関わらず、プライバシーが守られており安心だという気持ちになります。
赤：エネルギー、愛、興奮、行動、大胆、情熱的
赤を利用している最も代表的な企業の一つは、Coca-Colaです。ブランディングに赤を使用し、商品としていかにエキサイティングでエネルギーに溢れているかという点をアピールしています。
オレンジ：幸せ、社交的、友好的、身近
オレンジ色は、HubSpot（ハブスポット）のお気に入りの色です。それもそのはずオレンジ色は、ハブスポットがいかに喜んでカスタマーのマーケティング向上をサポートしているかを、オーディエンスに示している色なのです。
黄色：論理的、楽観的、前向き、自信がある、陽気
忙しいときに友人に自動返信をしてくれるサービスを行うアプリ、Bzzyは黄色のスキームを使用し、楽しさの中に光るその革新的なスタイルを示しています。
紫：想像力が高い、クリエイティブ、ノスタルジック
Kaleidoscopeが使用している紫色のスキームは、異なるバージョンのファイルをひとつにまとめる際にファイルの対比を素早く簡単にしてくれるアプリの、高い創造性と有益性を表現しています。
緑：成長、オーガニック、自然、思いやり、新鮮、地球
自然や新鮮さとのつながりを強調することが重要なWhole Foodsのような企業が、緑色のスキームに使用することは当然です。緑色はWhole Foodsが必死でブランディングしようとしている自然やオーガニックなイメージを良く表してくれています。
黒：洗練、贅沢、魅惑的、正式、権力
贅沢な旅行をしたいと思いませんか？高級車のレンタルと運転サービスを行う212 Supercarsは、光沢のある黒と白のデザインを採用し、贅沢で特別感のあるブランディングを展開しています。
多色：マルチチャンネル、前向き、陽気、大胆、無限
マルチチャンネルで遊び心溢れる企業の代表例であるGoogleは、カラフルなスキームを使用して、そのイメージを効果的に示しています。
６）形状心理学
色と同様に、人はさまざまな形状を特定の感情や特性と結びつけて考えます。
色彩心理学ほど有名ではありませんが、形状心理学では、人が特定の形と特性をどのように結び付けるのかという研究を進めています。
円、卵形、楕円：コミュニティ、友情、愛情、関係性、統一性、女性性を連想させる前向きなメッセージ。
AT&Tの丸いロゴは、ブランドの広汎性を表現しています。無線ネットワークの会社にとってはぴったりです。また、特定の形状を使用することで、認識可能なパターンをオーディエンスに植え付けることもできます。
画像クレジット：AT&T
四角と三角：安定性とバランス、強さ、専門性、効率、力、男性性。
MicrosoftとDeltaはどちらもロゴに、三角や四角を使用しています。それにより、ロゴを目にしたときに安定性や効率の良さがイメージされ、ブランドに対する前向きな感情が生まれます。
画像クレジット：Microsoft
画像クレジット：Delta
垂直線：男性性、強さ、攻撃性。
SoundCloudのロゴである雲の形は、夢見ることや創造性などにつながる感情を表しますが、雲に含まれた垂直の線はそこに攻撃的なイメージを付け足しています。これは全体的な雲の形と垂直線を組み合わせることでSoundCloudのツールとしての創造性と強さの両立性を表しています。
画像クレジット：SoundCloud
水平線：コミュニティ、静寂、落着き
コミュニティと平和を築くことに関し、Human Rights Campaignは素晴らしい公民権団体のひとつです。そしてロゴに使用している水平線と長方形は、平等性と静けさを非常に良く表しています。
画像クレジット：Human Rights Campaign
７）二重符号化説
私たちの脳は、テキスト情報の6万倍の速度で視覚情報を処理する、という統計をおそらく聞いたことがあるのではないでしょうか。二重符号化説とは、視覚情報と言葉の情報のどちらも単独でアイデアを表現できる中、両方を同時に使用した場合に脳がより速くアイデアを思い出すことができる、という考えです。
言い換えれば、情報を思い出す際に視覚的および言葉としての情報の両方があればより有利であるということです。
デザインを行うときは、可能な限りアイデアを描き、同時にそのアイデアを完全にわかるようにするために言葉のメッセージを書き足します。
下記の例は、視覚および言葉を使用した、原色、二次色、三次色を表すグラフィックです。コンセプトを完全に理解するためには、視覚情報と文字（言葉）情報の両方を組み合わせる必要があります。二重符号化説は、読者が概念を本当に理解できるように補助します。
８）費用対効果分析
人はなにかを決定する際は常に、意識的または無意識的に費用対効果分析を行っています。この分析は単純に、実際の行動を起こす前にその行動にかかる費用とそこから得られる利益を測る、というものです。
費用が利益を大幅に上回れば、行動は起こしません。
デザイナーとしての仕事は、デザインしたものが費用を上回る利益を生み出すようにすることです。これはつまり、作成するコンテンツの目標を達成させつつも、コンテンツを可能な限りシンプルにすることを意味します。
ランディングページのフォーム送信について考えてみてください。テンプレートや非常に質の高いダウンロードコンテンツといった、Top of the Funnel（ファネルの最上層）コンテンツをオファーとして用意しているとします。
ユーザーにコンテンツを得るためにフォームを埋めてもらうことを考えているとしたら、コンバージョンプロセスをデザインする際には必ず、オーディエンスが行う費用対効果分析を意識しながらコンバージョンプロセスをデザインする必要があります。別の言い方をすれば、欲張れば失敗するということです。
デザインにどのように心理学を活用しますか？コメント欄に意見やアイデアをぜひシェアしてください。
編集メモ：この記事は、2016年6月に投稿した内容に加筆・訂正したものです。Bethany Cartwrightによる元の記事はこちらからご覧いただけます。
