SHU BLOG

BLOG NEWS ブログ

TITLE

【Webデザイン】配色のパターンに困ったときの参考へ

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は、【Webデザイン】配色のパターンに困ったときの参考へ
につていのご説明です。

こんな方に読んでほしい

  • デザインをしてる際に配色で困ってる方へ
  • 配色について勉強してる方へ
  • 配色に興味がある方へ

ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?

配色パターンについて12色まとめみた

配色パターンについて12色まとめみた

今回は12色の配色パターンをまとめてみました。

01:赤色(情熱・強さ)

Watch brand

情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
目立つ、熱を感じる、興奮させると行った心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    配色パターン
    • #b04940
    • #c27f62
    • #cfa580
  • 02補色色相配色

    配色パターン
    • #D3352C
    • #000000
    • #BDC592
  • 03トリコロール

    配色パターン
    • #FE0C01
    • #FFFFFF
    • #2500FD
  • 04活気

    配色パターン
    • #C84942
    • #D7C527
    • #D88B45
  • 05ダイナミック

    配色パターン
    • #D3352C
    • #000000
    • #FDE803
  • 06革新的

    配色パターン
    • #FE0C01
    • #2500FD
    • #578481

02:橙色(ぬくもり・健康)

ぬくもりあるせいかつ

ぬくもり・健康・陽気・暖かさ・にぎやか・派手 など
身近で親しみを感じさせる日常に馴染みやすい色になります。にぎやかで陽気な気分にさせる、
食の欲促進をうながす、エネルギーと開放感を与えるなどの心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    配色パターン
    • #CB493C
    • #D98060
    • #DFA881
  • 02補色色相配色

    配色パターン
    • #E08626
    • #98B7B9
    • #C6D1CB
  • 03類似色

    配色パターン
    • #D36149
    • #C78E57
    • #7D423C
  • 04にぎやか

    配色パターン
    • #D7482A
    • #B24048
    • #D4C544
  • 05楽しい

    配色パターン
    • #CD6349
    • #E4CC9E
    • #9AB9AA
  • 06活動的

    配色パターン
    • #D8664E
    • #D7482A
    • #1836CA

03:黄色(はつらつ・エネルギー)

シュウ食堂

はつらつ・陽気・活気・希望・愉快・注意 など
光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。人の心を明るくする、
元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    配色パターン
    • #EFE256
    • #E6DA88
    • #EFE8CB
  • 02補色色相配色

    配色パターン
    • #E08626
    • #98B7B9
    • #C6D1CB
  • 03トライアド

    配色パターン
    • #EFE256
    • #1836CA
    • #D03B97
  • 04鮮やか

    配色パターン
    • #EFE256
    • #E88821
    • #D7482A
  • 05はつらつ

    配色パターン
    • #EFE256
    • #1836CA
    • #E35E35
  • 06スポーティ

    配色パターン
    • #EFE256
    • #F5F5F5
    • #1836CA

04:黄緑色(新鮮・生き生き)

SHU 抹茶

新鮮・生き生き・みずみずしい・のどか・自然 など
新しさの象徴、春の新緑を思わせる爽やかで新鮮さを感じさせる色味です。
のどかさや素朴さえお感じさせる親しみやすい色調になります。

配色パターンにつてい

  • 01同一色相配色

    • #BED28D
    • #BECA8C
    • #D8D9BA
  • 02補色色相配色

    • #8AA256
    • #8A5E82
    • #D4C6C6
  • 03トライアド

    • #8DA559
    • #635588
    • #B55D69
  • 04愉快

    • #ADC07E
    • #E9B069
    • #E296A3
  • 05安全

    • #C7C89C
    • #89A455
    • #527B53
  • 06生き生き

    • #8BA247
    • #E5DC7F
    • #98AE8A

05:緑色(自然・新鮮)

どうぶつたちの
すむもり

自然、新鮮、安全、平和、健康、リフレッシュ など
穏やかで許容や安心感を与える色として、自然の象徴色とてし使われています。
身体の疲れを癒やす、疲れた心を休ませる、心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    • #25422C
    • #5B7051
    • #D8D9BA
  • 02補色色相配色

    • #25422C
    • #4D2A28
    • #9D8779
  • 03分裂補色

    • #25422C
    • #4D2A28
    • #9D8779
  • 04活動的

    • #25422C
    • #392540
    • #862B3A
  • 05刺激的

    • #25422C
    • #1E1E8C
    • #983436
  • 06ダイナミック

    • #25422C
    • #EFC511
    • #2A231B

06:青緑色(シャープ・進歩的)

SHU Web制作

シャープ、革新的、進歩的、抑制、躍動的 など
濃淡でガラリと印象を変える、個性的、中立的なイメージの色です。
開放感を感じさせる、心を穏やかにするイメージもあり、清潔感を出す心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    • #425A5C
    • #78817C
    • #BFB8AE
  • 02補色色相配色

    • #47605D
    • #4D2A28
    • #C9AC9C
  • 03類似色

    • #556968
    • #4C5284
    • #608D8A
  • 04躍動的

    • #405858
    • #DAC73A
    • #C33B3D
  • 05派手

    • #CF7B3B
    • #41615C
    • #A43D3E
  • 06進歩的

    • #445D5A
    • #3D3832
    • #BDAFA2

07:青色(クリア・清潔)

みやざきの海

クリア、清潔、シャープ、落ち着き、静寂、悲しみ など
清潔感があり爽やかな色味です。人の心を落ち着かせ、
集中力を高めるなどの心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    • #0A0988
    • #4E4572
    • #B19BA7
  • 02補色色相配色

    • #030373
    • #562423
    • #CEA997
  • 03類似色

    • #496968
    • #475182
    • #494B64
  • 04スピーディ

    • #0A0988
    • #DCD0C2
    • #DDC200
  • 05活動的

    • #030373
    • #DA7A2D
    • #D33D3E
  • 06強烈

    • #0D0A75
    • #CAAE29
    • #493B32

08:紺色(繊細・知識)

SHU旅館

繊細、知的、落ち着き、誠実、堅実 など
藍を染めた、紫を感じるほど濃くした色です。気持ちを落ち着かせる、
洞察力を高める。手中力をあげるといった心理効果も持っています。

配色パターンにつてい

  • 01同一色相配色

    • #1D3154
    • #4E4572
    • #B19BA7
  • 02補色色相配色

    • #21234C
    • #7D4826
    • #CEA997
  • 03類似色

    • #383138
    • #3D4045
    • #6B6372
  • 04理知的

    • #1D3154
    • #DCD0C2
    • #757494
  • 05凛々しい

    • #1D3154
    • #B5A79C
    • #284A4B
  • 06気高い

    • #1D3154
    • #835B75
    • #8B8E87

09:桃色(可愛い・優しい)

TOKYO CUTE SHU

可愛い、安らぎ、優しい、幸福、女性的 など
優しい、甘い、キュート、華やか、女性的、などの印象を持つ色です。
可愛らしくみせたり、緊張を和らげる心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    • #EE6474
    • #EB7A80
    • #ECB8AB
  • 02補色色相配色

    • #E15767
    • #5F803B
    • #A8A97F
  • 03ドライアド

    • #DE6B70
    • #C09E45
    • #4472C8
  • 04嬉しい

    • #F06777
    • #D6A9AC
    • #D83A31
  • 05楽しい

    • #ABA60E
    • #D5515E
    • #3E4674
  • 06セクシー

    • #DD5360
    • #463930
    • #947282

10:茶色(落ち着き、大地)

SHU CAFE

ぬくもり、大地、安心、安定、堅実、頑固 など
日常の中に馴染みやすい色、安定感や安心感をだす、緊張を緩和する、
大地や自然を表す色になります。ぬくもりも感じさせる心理効果を持っています。

配色パターンにつてい

  • 01同一色相配色

    • #7D5B40
    • #A08069
    • #CCBCAC
  • 02補色色相配色

    • #805B48
    • #475F81
    • #A59FA9
  • 03類似色

    • #7F553F
    • #306D5E
    • #3B3B61
  • 04堅実

    • #7D543E
    • #AF9981
    • #2E636B
  • 05素朴

    • #594137
    • #7B5542
    • #234A6B
  • 06大地

    • #975439
    • #9D7D44
    • #876043

11:黒色(高級感、気品)

TrueSelf

高級感、気品、力強さ、クール、シンプル など
黒はシンプルですが他の色を引き立てる効果も持っている配色です。
重さを感じさせる高級感を感じさせる、などの心理効果を持っています。

配色パターンにつてい

  • 01明度の変化

    • #000000
    • #666666
    • #B2B2B2
  • 02類似色

    • #000000
    • #776960
    • #958B81
  • 03類似色2

    • #000000
    • #6E5153
    • #917571
  • 04モダン

    • #000000
    • #A2B3C7
    • #017575
  • 05クール

    • #000000
    • #50433D
    • #FF3612
  • 06メカニック

    • #000000
    • #606771
    • #C5C0BC

12:白色(シャープ・進歩的)

SHU ROOM

清楚、シンプル、寒さ、クリーン、無個性 など
一番に明るい色になります。どんな色とも馴染みやすい色になります。
清楚、清純な印象を与える、広さを感じさせるなどの心理効果を持っています。

配色パターンにつてい

  • 01明度の変化

    • #FFFFFF
    • #CCBEB5
    • #C6B2A9
  • 02類似色

    • #FFFFFF
    • #F4D0BA
    • #FAC7C4
  • 03類似色2

    • #FFFFFF
    • #F4DBBD
    • #D7D7BF
  • 04ロマンティク

    • #E0AEA7
    • #FFFFFF
    • #ABB89A
  • 05寒さ

    • #6080E5
    • #FFFFFF
    • #B9BCCB
  • 06スポーティ

    • #FF473D
    • #FFFFFF
    • #283DEE

前回の記事、「【見出し】「線」だけでデザインをしてみる!25パターンご用意」
こちらも参考に読んでみてください。

関連記事

【見出し】「線」だけでデザインをしてみる!25パターンご用意

今回は「【見出し】「線」だけでデザインをしてみる」について書きました。
線だけでのデザインパターンを25種類ご用意いたしました。
普段、同じようなデザインで困ってる方はぜひ!一度ご覧ください。

まとめ

今回はこれで以上です。

配色を学ぶことで、デザインがさらに良く見えます。
配色は才能ではなく努力で身につけられます!

私もデザインを初めて1年と少しです。最初の頃は、配色を考えずにデザインをしていました。
現在は、配色の勉強を初めて少しずつデザインが良くなってきたかとおもいます。

今後も配色の勉強を継続していきます。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top