ウェブサイトのユーザーエクスペリエンスデザイン分析: 色の声に耳を傾ける

序文

色は、ウェブサイトが感情を表現したり、その個性を反映する方法であり、それぞれの色には独自の声があります。視覚的な要素としての色は、定量化や計測が難しく、合理的な観点から分析や説明も難しいものです。私は現在、別の観点からWebページの色を計測する試みを行っています。色の最も基本的な性質、色合わせの形式、色がユーザーに与える潜在的な影響と心理的意味合いから始めて、私たちは色を分析、理解し、色にデザイナーに代わって語らせます。

1. 色に関する基礎知識

色の3つの要素

1. 色相

最も一般的な色のスペクトル「虹」は、「赤、オレンジ、黄色、緑、シアン、青、紫」の順に色が徐々に変化し、色相の両端に暖色と寒色、中央に中間色または中程度の色があります。

2. 明るさ

明度とは、深紅、緋色、ピンクなどの色の明るさと暗さの差です。

3. 彩度

彩度は色の明るさを指し、色純度とも呼ばれます。

2. 色の驚くべき魔法

1. 色には魔法があるので、慎重に選んでください。

一般的にファーストフード店から受ける印象は、席数が多く、非常に効率的で、客は食べたらすぐに帰ってしまい、長く滞在しないというものです。ファーストフード店で友達と会うのが好きな人もいますが、実はファーストフード店は人を待つのに適していません。これは、多くのファーストフード店が主にオレンジ色や赤色で装飾されているためです。この2つの色は人々を幸せにし、興奮させ、食欲を増進させますが、同時に人々に時間が長く感じさせることもあります。このような環境で誰かを待っていると、どんどんイライラしてしまいます。

2 人の人に実験をしてもらいます。1 人はピンクの壁紙と深紅のカーペットが敷かれた赤い部屋に入り、もう 1 人は青い壁紙と青いカーペットが敷かれた青い部屋に入ります。タイマーは与えず、子どもの気持ちに合わせて 1 時間後に部屋から出させてください。その結果、赤い部屋の人々は40〜50分後に出てきたのに対し、青い部屋の人々は70〜80分経っても出てこなかった。赤い部屋は居心地が悪く、時間が特に長く感じられるからだという人もいます。これは確かに理由の一つですが、全てではありません。主な理由は、周囲の色によって人々の時間感覚が乱れてしまうからです。同じ理由で、高血圧の人は赤色を避けるべきです。

別の例を挙げると、非常に人気のあるレクリエーションスポーツであるダイビングでは、酸素ボンベを携帯する必要があります。酸素ボンベは約 40 ～ 50 分間酸素を供給できますが、ほとんどのダイバーは酸素ボンベ内の酸素を使い切った後、水中に潜っていた時間は 20 分程度しか感じません。時間があっという間に過ぎるように感じる理由の一つは、海中の色鮮やかな魚や美しいサンゴがダイバーの注目を集めるからです。さらに重要なのは、海底は海水に囲まれた青い世界だということです。ダイバーの時間感覚を麻痺させ、時間が実際よりも短く感じられるのは、この青色のせいです。 （情報の一部は「色彩心理学について毎日少しずつ学ぼう」から引用しています）

2. 色の音を聞く

上記のストーリーと実験は、色がユーザーの感情に影響を与え、判断にも影響を与えることを証明しています。色は私たちに無意識に影響を与えるため、デザイナーはデザインする際に色をうまく使い、製品の本質や意味合いを正しく伝えるために色を使うことを学ばなければなりません。色彩が正しく伝わることで、ユーザーの心に響き、商品がより深く人々の心に根付くようになります。

黄色: 若さ、楽観主義、そしてオープンマインド。仕上げの仕上げとしてよく使用されます。

赤: 活力、スピード、緊急性。プロモーションや割引などによく使用されます。

青: 信頼、セキュリティ、伝統。企業、銀行、セキュリティ センターなどの業界組織でよく使用されます。

グリーン: 活力、安らぎ、自然さ、無公害、ヘルスケア製品などの業界でよく使用されます。

オレンジ: ポジティブ、進取的、エネルギッシュ。アリババの色もオレンジです。行動を喚起するためによく使用されます。たとえば、オレンジはボタンの色でもあります。

ピンク: ロマンチック、女性的。女性向け消費産業、女性向け製品などでよく使用されます。

黒：影響力がある、ファッショナブル、真面目、高級品のマーケティングなどでよく使用されます。

紫: 心を落ち着かせ、穏やかにし、神秘的な色。女性向けの美容製品やアンチエイジング製品のデザインによく使用されます。

色彩を理解することで、ページスタイルの位置づけをより正確に把握し、色彩を使って商品を説明できるようになります。 「脳トレ」や連想ゲームなどを頻繁に行いましょう。

3. 色彩、マーケティング、ブランディング

各業界には類似した製品色の傾向がある

よく知られているブランドのほとんどは、ロゴに似たような色を使用する傾向があります。

3. カラーマッチング

以下では、バナーを例に、カラーマッチングのテクニック、カラーマッチングの組み合わせ、およびマッチングによってもたらされる視覚効果について簡単に分析します。

モノクロマッチング：1つの色相の異なる明るさの組み合わせ。この組み合わせは、明暗の重なり合いの感覚をよく体験できます。

類似色マッチング: 隣接する 2 色または 3 色を類似色と呼びます。下の写真（オレンジ/茶色/黄色）に示すように、この組み合わせは見た目がより美しく、コントラストが低く、より調和がとれています。

補色マッチング: 色相環で互いに反対の色相の 2 つをマッチングします。色は強いコントラストがあり、エネルギー、活力、興奮などの意味を伝えます。補色の場合は、一方の色を多くし、もう一方の色を少なくするのが最適です。下図の通り（紫と黄色）。

分割補色マッチング: 補色と類似色を使用して色の関係を決定することを分割補色と呼びます。この組み合わせは、類似色の低コントラストと補色の力の両方を備えており、調和がとれていて焦点が合った色の関係を形成します。下の図に示すように、赤い文字は特に響きがよく、目立っています。

原色の組み合わせ：明るい色を使った子供向け製品に多く使われています。青と赤の組み合わせ、赤と黄色をメインカラーにしたフリッカーのロゴやマクドナルドのロゴカラーなど、この組み合わせは欧米でも非常に人気があります。

4. 色を正確に見つける方法

前回の分析は、色を通して感情を感じるということについてでした。ここでは、商品をベースに色彩を捉える方法、いわゆるMOOD BOARDについて簡単に説明します。

ムードボードとは、デザインする製品や関連するテーマの色、イメージ、写真、その他の素材を集めたもので、特定の感情的な反応を引き起こし、デザインの方向性や形式の参考として役立ちます。 （詳細はムードボードの操作プロセスに関する新しい考え方 - 小千を参照してください）

1. ネイティブキーワードの選択

まず、製品に対する理解と知識、およびユーザー調査を通じて、エクスペリエンス キーワードが導き出されます。

2. 派生キーワード

得られたキーワードについて、情報を拡張し、ブレインストーミングを通じてキーワードのマインドマップを描き、拡張キーワードを探します。

3. 関連する写真を収集し、抽出してムードボードを生成します。

「ネイティブキーワード」と「派生キーワード」を通じて、オンラインチャネルを通じて大量の対応する素材写真が収集され、定性的なインタビューと組み合わせられました。

4. 派生キーワードの分析 - 次元的解釈

5. ムードボード上で「色彩分析」と「質感分析」を行う

色抽出ツール: http://kuler.adobe.com/#create/fromanimage

要約する

色は感情です。色を読み、その声を聞くことを学ぶと、色に習熟し、人気のトレンドに従って簡単に習得できるようになります。私の洞察のほとんどは、先人たちの共有と要約、そして私自身の見解を組み合わせたものに基づいています。つまり、より多く見て、より多く考え、より多くコピーすることで、デザイナーは色彩感覚のトレーニングの労力を半分にして、2 倍の結果を達成できるようになります。成功する配色は合理性と感性の組み合わせでなければならないので、デザイナーは敏感で感情的な人でなければなりません。余談ですが:)。

元のタイトル: ウェブサイトのユーザー エクスペリエンス デザイン分析: 色の声に耳を傾ける

キーワード: ウェブサイト、ユーザー、体験、色を聞く、音、紹介、色、1、感情、ウェブマスター、ウェブサイトのプロモーション、収益化