Tairetion Weblab ブログタイトル

デザインに役立つ!ColorHexaで学ぶ、配色パターン

Design / color tool

color_scheme

デザインをする上でかなり重要なのが「配色」です。
微妙な配色の違いで、作品の与える印象や仕上がりに大きく影響します。
それ故にデザインする度に悩み、考え込んでしまいます。

今回はそんな悩みを軽減してくれる無料配色ツールColorHexaを参考に、配色パターンについての記事を書こうと思います。
ColorHexa

もくじ

  • ・ColorHexaとは
  • ・ColorHexa項目1 Color Schemes
  • ・ – 配色パターン1 Complementary Color
  • ・ – 配色パターン2 Split Complementary Color
  • ・ – 配色パターン3 Analogous Color
  • ・ – 配色パターン4 Triadic Color
  • ・ – 配色パターン5 Tetradic Color
  • ・ – 配色パターン6 Monochromatic Color
  • ・ColorHexa項目2 Alternatives
  • ・ColorHexa項目3 Preview
  • ・ColorHexa項目4 Shades and Tints
  • ・ColorHexa項目5 Tones
  • ・ColorHexa項目6 Color Blindness Simulator
  • ・まとめ
  • ColorHexaとは

    特定の色に対する様々な情報を調べる事ができる無料オンラインツールです。
    僕はデザインのメインカラーを決めたら、まずColorHexaで色情報を調べます。
    色センスのない僕にとって、配色に費やす膨大な時間を削減してくれるのでとても助かります。
    ColorHexa

    ColorHexa 項目1 Color Schemes

    Color Schemes
    Color Schemes – カラースキームと読みます。
    検索した色を元に、カラースキームを生成してくれます。

    カラースキームとは

    配色パターン。色彩計画。
    色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。

    要は配色パターンなのですが、「カラースキームってどんなのがあるの?」という方の為に、
    ColorHexaが生成してくれる6つのスキームについて簡単に説明していきます。

    配色パターン1 Complementary Color (コンプリメンタリー)

    コンプメンタリー
    色相環で対局にある色の組み合わせて作るパターンです。
    色相環で対局にある色を「補色」と呼びます。
    補色を隣合わせで使用すると、ハレーションという現象が起きます。
    ハレーションとは、色の境目がギラギラとチラついて見える現象です。

    この画像を見て、わかりますか?
    ハレーション
    とても目が疲れます。
    境界線に白、黒、グレーなどのクッションとなるカラーを入れるなどの対策をとります。

    配色パターン2 Split Complementary Color (スプリットコンプメンタリー)

    スプリットコンプメンタリー
    メインカラー+色相環でメインカラーの対局の色と隣り合う2つのカラー、
    合計3色で作るパターンです。
    コンプリメンタリーと近い配色ですが、補色の関係ではないのでハレーションが起こる心配がありません。

    配色パターン3 Analogous Color (アナロガス)

    アナロガス
    類似した色、近い色。
    色相環で隣り合う色同士を組み合わせて作るパターンです。
    近い色の組み合わせなので、グラデーションが作りやすく調和がとれた配色になります。

    配色パターン4 Triadic Color (トライアド)

    トライアド
    色相環で正三角形に結んだ3つの色の配色。
    スプリットコンプメンタリーと似ていますが、更に大きく変化した配色です。
    強いインパクトを与えますが、調和がとれているのでまとまった配色になります。

    配色パターン5 Tetradic Color (テトラディック)

    テトラディック
    色相環で十字に結んだ4つの配色
    他のカラースキームと違って4色選ぶ事ができるので、賑やかな印象になります。
    コンプリメンタリーと同様、補色関係にあるパターンなので、ハレーションに注意が必要です。

    配色パターン6 Monochromatic Color (モノクロマティック)

    モノクロマティック
    一つカラーを選び、彩度と明度で変化をつけるパターンです。
    一番シンプルなパターンで、統一感を演出できます。

    ColorHexaで学ぶ、配色パターン|もくじへ

    ColorHexa 項目2 Alternatives

    alternatives
    検索した色と同じ印象を与えられる、代わりとして使用できる色です。

    ColorHexa 項目3 Preview

    preview
    検索した色で文字色、背景色、ボーダー色がどのように表示されるのか、プレビューしてくれます。
    それぞれのプロパティのCSSも提示してくれます。

    ColorHexa 項目4 Shades and Tints

    shades_and_tints
    検索した色に対して、
    「徐々に黒を混ぜていったカラー」「徐々に白を混ぜていったカラー」
    をそれぞれ13個提案してくれます。

    ColorHexa 項目5 Tones

    tone
    検索した色に対して徐々にグレーを混ぜていったカラーを13個提示してくれます。

    ColorHexa 項目6 Color Blindness Simulator

    color_blindness_simulator
    検索した色が色覚障害をもつ人にどのように見えるかをシミュレーションしてくれます。

    • Monochromacy – 全色覚異常
    • Dichromacy – 2色型色覚、色盲
    • Trichromacy – 3色型色覚、色弱

    ColorHexaで学ぶ、配色パターン|もくじへ

    まとめ

    今回この記事を書くにあたって、改めて色々と調べました。
    配色の大切さや奥深さを再確認したり、新たに得た知識もあったりと、僕自身とても勉強になりました。
    色については今後も記事を書いていこうと思います。

    知識があればデザインはもっと楽しくなる。

Coments

コメントを残す