COLOR

Google Material Color Toolが便利!配色が苦手な人のお役立ちツール

カラーパレットから選ぶだけ

配色の参考サイトやツールは多々あれど、以外と使い勝手が良くないと感じることはありませんか?
素敵な色見本を見つけても、それを実際にデザインにどう反映させたら良いのか分からない。
文字や背景、図など、たくさんの要素にそれぞれどの色を配すればいいのか悩んでしまう…
色をピックアップしただけのシンプルな色見本を、上手に活かすことは難しいものですよね。

そんなときはGoogleのMaterial Color Toolが便利です。
選んだ色をどのようにデザインに反映させるのか、Webサイトやスマホアプリの配色例として提示してくれますし、さらにテキストとのコントラストを検証して可読性(アクセシビリティ)をチェックしてくれます。
使い方は簡単。

1. 一次色(Primary)を決める

右側のマテリアルパレットからメインの色を選びます。
(色をカスタマイズしたい場合は「カスタム」を選んで直接編集します)
選んだ色の明度や彩度を変えたトーン違いの2色(ライト & ダーク)を提案してくれます。

2. 二次色(Secondary)を決める

メインカラーに合わせる色を選びます。

二次色が反映され、2色をデザインに反映した状態を6パターン確認することができます。

3. テキストの色を変える

デフォルトでは、テキストは選んだ色に合わせて白または黒になりますが、もちろんそれ以外の色を選ぶこともできます。

4. アクセシビリティのチェック

選んだ色とテキストの組み合わせをチェックし、アクセシビリティ(可読性など)に問題がないか、自動で判定してくれます。

↓ 『アクセシビリティ』に切り替えると表示される

「NOT LEGIBLE」と判定されたら、背景色と文字色のコントラストが不足していて読みづらいということ。アラートが表示されない色に変更しましょう。

このように簡単にアクセシビリティーチェックも行うことが出来る『Google Material Color Tool』。
便利なのでオススメです。

↓アクセシビリティやコントラストについての記事はこちらから

↓Google Material Color Toolを使ったカラーテンプレートはこちらから

Photoshopの非破壊編集前のページ

心理学を取り入れて効果的なLPを作ろう|ランディングページ制作の基本次のページランディングページ制作のポイント

ピックアップ記事

  1. Google Material Color Toolの活用法
  2. 色の調子【トーン】を利用した色選び
  3. 無料で使えるデザインツール・Canvaの活用法
  4. 色の対比が生む視覚効果
  5. 心理学を取り入れて効果的なLPを作ろう|ランディングページ制作の基本

関連記事

  1. COLOR LITERACY

    COLOR

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

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

  2. COLOR

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

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

  3. Psychology of Color

    COLOR

    色彩心理

    ビジネスに使える? 押さえておきたい色彩心理の基本「色彩心理」と聞…

  4. COLOR

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

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

  5. COLOR

    書籍『失敗しないカラーリング』が出版されました!

    私も企画や制作に参加させていただいた色の本が発売されました!著者は『東…

  6. Color Methodologies

    COLOR

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

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

コメント

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

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

最近の記事

  1. Color Association
  2. Color Methodologies
  3. ランディングページ制作のポイント
  1. COLOR LITERACY

    COLOR

    カラー・リテラシーを高めよう
  2. Color Association

    COLOR

    色の連想
  3. tone

    COLOR

    色の調子【トーン】を利用した色選び
  4. ランディングページ制作のポイント

    OTHER

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

    COLOR

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

バンドワゴン効果

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

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

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

同調効果

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

ピグマリオン効果

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

ウィンザー効果

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

ハロー効果

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

希少性の原理

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

アンカリング効果

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

カクテルパーティー効果

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

ストーリーテリング

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

エピソード記憶

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

損失回避性

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

バイヤーズリモース

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

親近効果

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

リフレーミング

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

想起集合

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

準拠集団

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