COLOR

Google Material Color Toolの活用法

みなさんはGoogleのマテリアルデザイン用カラーパレットを利用していますか?
以前の投稿でも触れましたが、なかなか便利で使い勝手が良いのです。主なポイントは以下の2点です。

  1. 色の組み合わせにおけるアクセシビリティーのチェックが簡単
  2. 選んだ色の『Lightトーン』『Darkトーン』を提案してくれる

➊のアクセシビリティーのチェックでは文字の可読性が予め判断できるところが便利ですね。

➋の部分では、トーンのバリエーションを提案してくれます。

このようになかなか便利なのですが、パレットから選んだ色を、実際にどのようにデザインに落とし込めば良いのか悩んでしまう…という声を聞きました。選んだ色を自分のデザインの『どの部分に』『どんな割合で』使えば良いのか分からず、活用仕切れていないというものです。

もちろん下図のようなプレビュー画面もあるのですが、シンプルなので少し物足りない気も…

そこで、今回は共通のテンプレートを使って、パレットから選んだ色を『塗り絵のように』当てはめるという作業をしてみました。

手順としては、メインの色を1色選び、それに合わせるサブカラーを何色か組み合わせるというものです。イメージ写真はメインカラーから想起されるテーマに合ったものを選んでいます。
ここで使用している色は全てGoogle Color Toolの『MATERIAL PALETTE』から選んでいます。

選んだ10色相は、よく使われる『赤、青、緑、黄、オレンジ、ピンク、紫、茶、白・グレイ、黒』です。

共通テンプレートは、『A4横のプレゼン資料』と『レスポンシブのWebサイト PC/SP表示』を想定しています。
アバウトなイメージですが、何となく全体の色の使用割合の参考になれば良いなという程度のシロモノです(笑)。

また、今回はパレットの主に500の列の色を起点に作成したので、どれもビビッドなトーンになっています。今後は別のトーン(淡いトーンなど)でも作成して、サンプルを増やしていく予定です。

黄 - Yellow –

黄色の印象は『明るい』『派手な』『大胆な』など。色から連想されるイメージには夏(季節)や酸味(味覚)などもあります。

#ffeb3b
#ffb300
#cddc39
#4caf50
#eceff1
オレンジ - Orange –

オレンジの印象は『元気な』『陽気な・楽しい』『暖かい』など。カジュアルでスポーティーなイメージもあります。

#ff9800
#fdd835
#0d47a1
#ffcc80
#eeeeee
#424242
青 - Blue –

青の印象は『クールな』『誠実な』『知的な』など。人工的で整然としたイメージもあります。

#0d47a1
#039be5
#d32f2f
#81d4fa
#eceff1
赤 - Red –

赤の印象は『熱い・暑い』『力強い』『華やか』など。温度(熱さ・温かさ)や味覚(辛み)を連想させる色でもあり、飲食系にもよく使われます。

#c62828
#5d4037
#ffc107
#a1887f
#f5f5f5
緑 - Green –

緑の印象は『安全な』『フレッシュな』『平和な』など。自然や植物を連想させる色なので、エコや健康などのテーマにもよく使われます。

#4caf50
#8bc34a
#cddc39
#2e7d32
#a1887f
#efebe9
紫 - Purple –

紫の印象は『上品な』『ミステリアスな』『大人っぽい』など。古風で装飾的なイメージもあります。

#6a1b9a
#ab47bc
#ea80fc
#d1c4e9
#ede7f6
ピンク - Pink –

ピンクの印象は『可愛い』『優しい』『初々しい』など。幼さや若々しさを連想させる色でもあり、甘さ(味覚)の表現にもよく使われます。

#f48fb1
#ec407a
#fce4ec
#fbe9e7
#efebe9
茶色 - Brown –

茶色の印象は『クラシカルな』『円熟した』『重厚な』など。色から連想されるイメージには木やレンガ(材質)やコーヒー、チョコレートと言った食品などもあります。

#4e342e
#a1887f
880e4fc
#d7ccc8
#212121
白・グレイ - White・Gray –

白の印象は『清潔な』『純真な』、グレイは『都会的な』『シックな』など。白と明るめのグレーとの組み合わせはモダンでニュートラルなイメージに合います。

#eeeeee
#bdbdbd
#ffee58
#d7ccc8
757575
黒 - Black –

黒の印象は『厳粛な』『フォーマルな』『モダンな』など。『重い』『固い』などの質感などを表す際にもよく使われます。

#000000
#424242
#9e9e9e
#ffd54f
#fbc02d

今回はGoogleのカラーパレットにある色『のみ』を使用するという縛りを作った上に、主にビビッドな色をメインカラーに据えたので、トーンが偏った印象ですね。今後は同じ色相でもライトトーンやダークトーンなどのバリエーションを増やす予定です。例えば色相:青のバリエーションはこんな感じです。↓

PDFファイルのダウンロードは こちら から

Psychology of Color色彩心理前のページ

色の連想次のページColor Association

ピックアップ記事

  1. Google Material Color Toolの活用法
  2. 明度差による色のコントラスト -配色テクニック活用法-
  3. 色の調子【トーン】を利用した色選び
  4. 色の連想
  5. 色の対比が生む視覚効果

関連記事

  1. COLOR

    色のアクセシビリティーについて学べる動画

    色のアクセシビリティーについて学べる動画クリエイティブの最新情報が得…

  2. Color Association

    COLOR

    色の連想

    赤は情熱? 共有されている色のイメージ私たちは日常的に色から多くの情…

  3. COLOR

    カラー・リテラシークイズ ➀「明度の高い色はどっち?」

    明度を比較してみよう視認性や可読性の高い配色にするためには…

  4. Color Methodologies

    COLOR

    基本を抑えたロジカルな色選び

    様々な配色技法誰もが使える色彩調和のメソッドを探求して、昔から芸術…

  5. COLOR LITERACY

    COLOR

    カラー・リテラシーを高めよう

    色を利用して情報を分かりやすく「センスが無い」では済まされない?ロ…

  6. tone

    COLOR

    色の調子【トーン】を利用した色選び

    かわいい、楽しい、大人っぽい…色でイメージを表現するには?色でイメ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ランディングページ制作のポイント
  1. ランディングページ制作のポイント

    OTHER

    心理学を取り入れて効果的なLPを作ろう|ランディングページ制作の基本
  2. Color Association

    COLOR

    色の連想
  3. CONTRAST

    COLOR

    明度差による色のコントラスト -配色テクニック活用法-
  4. COLOR

    Google Material Color Toolの活用法
  5. contrast

    COLOR

    色の対比が生む視覚効果
PAGE TOP

バンドワゴン効果

多数に人気のあるもの、支持されているものに惹かれて、それらの製品や事象への人々の支持がさらに高まる現象。行列がさらに人を呼ぶなど。
※『バンドワゴン』とはパレード楽団のこと

フォールス・コンセンサス

多くの人が自分と同じ意見を持ち、同じような行動をするだろうと考え、自分を多数派だと思い込むこと。
(さらには周囲と同じ行動を取れば安心するという心理)
※False Consensus:偽の合意

同調効果

周囲と同じ行動をしていると安心し、逆に自分が正しいと思っても他人が異なる行動をしている場合には不安になるといった集団心理のこと。

ピグマリオン効果

他者の期待値が本人の成長・成績結果に影響を与える心理効果。
アメリカの教育心理学者・ローゼンタールの実験では、教師が期待をかけた生徒とそうではない生徒の間では成績の伸びに違いが見られた。
※『ピグマリオン』はギリシャ神話の自作の乙女像に恋をした登場人物から。

ウィンザー効果

口コミやレビューなど、第三者から間接的に情報が伝わることによって、より信憑性や信頼感が増す心理効果。
直接本人から伝えられる評価に対しては利害関係を疑ってしまうため、無関係の第三者の意見の信憑性が増して感じられる。

ハロー効果

ある対象を評価するときに、目立ちやすい特徴に引きずられて他の特徴についての評価が歪められる現象のこと。後光効果とも呼ばれる、心理学における認知バイアスの1つ。

希少性の原理

需要に対して供給が少ない時、手に入る機会が限定される場合など、同じ内容のものであっても価値を高く評価してしまう認知バイアスのこと。

アンカリング効果

交渉の際、先行して提示される何らかの数値によって後の数値の判断が歪められる認知バイアスの一種。
例えば「この商品は1万円より高いと思うか?」と尋ねることによって、回答はアンカーである1万円に近い数値になる傾向のこと。

カクテルパーティー効果

多人数が談笑している会合など周辺の雑音レベルが高い場合でも、自分が話している相手の声はきちんと聞き取れる現象から、
自分に関係のある情報には注意が向けられる効果のこと。

ストーリーテリング

伝えたい内容を、それに関連した体験談やエピソードなどを引用しながら伝えるすることで、相手に強く印象付ける手法のこと。
物語として記憶されるので印象に残りやすい。

エピソード記憶

特定の日時や場所と関連した個人的経験(イベント)に関する記憶

損失回避性

損失を、利益よりも大きく評価する心理効果のこと。
新たに得られる利益からくる満足より、同額の損失がもたらす苦痛の方が大きいと感じる現象。

バイヤーズリモース

買い物をした直後に感じる不安や後悔の感情。
商品の品質に関係なく発生するため、こうした不安を解消することで返品や解約のリスクを下げ、リピートに繋がることが期待される。

親近効果

最後に提示された情報の再生率が良いこと。「新近性効果」とも言う。
接客業における「お見送り」など、最後の情報で印象が決定されやすい。

リフレーミング

事実に対して与えている意味づけを変え、異なる見方でとらえ直すこと。
例えば不動産物件の「徒歩15分」という表現に対して、「駅から遠過ぎて資産価値が無い」「歩けば健康に良い距離」など、同じ情報でも人によって受け取り方が違う現象。

想起集合

マーケティングにおける想起集合
例えば消費者に対して、ある分野のブランド名や企業名を想起させる「○○と言えば?」といった質問をした際に想起された一群(通常3~5個程度)を想起集合、もしくは喚起集合と呼ぶ。

準拠集団

個人の価値観、信念、態度、行動などに強い影響を与える集団。
何かを決めるときに判断の基準となることがある。