Advertisement

web-color-2016-top (1)

 

Facebookのブランドカラーが青色なのは、マーク・ザッカーバーグが色盲だったから、という話を知っているでしょうか。

 

「青は私にとって、もっともリッチな色で、すべての色合いを識別することができる。」とザッカーバーグ氏は述べています。配色を決める作業は、まったく科学的には見えないかもしれませんが、配色に関してたくさんの研究やアイデアが用いられています。

 

商品に対する評価の90%以上は、色によって判断されていると Buffer では紹介されている通り、どんなデザインにおいても、いかに配色をじっくり検討するべきか分かります。特にウェブサイトでは、ユーザーが配色を気に入らなかった場合、あまり長くはサイトに滞在してくれないでしょう。

 

 

ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。コピー&ペーストで利用できる、カラーパレットも一緒に活用してみましょう。

 

 

 

詳細は以下から。

 

 

 

01. 楽しくて専門的。

Palette_1-1060x612

 

Mark Dearmanでは温かみのあるアクセントカラーに、はっきりとしたプロフェッショナルな背景の組み合わせが、鮮やかなカラーパレットで、とても親しみのある配色。それぞれの要素のコントラストを強調することで、すっきりとした印象を与えます。

 

#4abdac
#fc4a1a
#f78733
#dfdce3

Fun and Professional

 

 

02. 名画を参考に。

Palette_2-1060x509

 

配色が決まらないときは、コンテンツで利用している色を参考にしてみましょう。Fabrique がデザインした、ファン・ゴッホ博物館のウェブサイトでは、誰もが知っている世界的な名画、「ひまわり」の配色を参考にした鮮やかなカラーパレットを採用しています。

 

#ffce00
#0375b4
#007849
#262228

Art History Inspired

 

 

03. 控えめな配色を。

Palette_3-1060x513

 

The Martin Agency が作成した、落ち着きのある黄金に、黒いブロック要素とうまくコントラストした、オフホワイト色を採用のウェブサイト。シンプルでミニマル、そしてエレガントなこのカラーパレットは、洗練されたスタイリッシュな雰囲気を演出するときに。

 

#c0b283
#dcd0c0
#f4f4f4
#373737

Muted Tones

 

 

04. モダンでクリーンに。

Palette_4-1060x612

 

オレンジと青色の楽しく、エネルギッシュな色の組み合わせがはっきりとして、モダンな印象の Benedict Leicht 。鮮やかな色使いを検討するときは、上記サンプルのように、部分的にナチュラル系の白や明るい灰色をつかって、色合いを調整することで、全体のバランスをうまく保つことができます。

 

#e37222
#07889b
#66b9bf
#eeaa7b

Modern & Clean


 

 

05. ネオンカラーでくっきりとしたコントラストを。

Palette_5-1060x612

 

印象に残るネオンカラーをアクセントにした背景が、くっきりとしたコントラストを描くカラーパレット。むらさきと青、ピンク色の組み合わせが黒の背景に映え、とても目立つエフェクト。

 

#0e0b16
#a341ca
#4717f6
#e7dfdd

Neon Tones & Sharp

 

 

06. 控えめでミニマルに。

Palette_6-1060x612

 

こちらのサンプルでは、彩度を落としたソフトで、より落ち着いたエレガントな印象を与えます。灰色と一緒に、色相を下げた色合いを組み合わせることで、いつでの時代でも活用できるエフェクト。

 

#96858f
#6d7993
#9099a2
#d5d5d5

Muted & Minimal

 

 

07. 鮮やかで温かさを。

Palette_7-1060x612

 

鮮やかな赤色とインディゴ系の青色の組み合わせのように、暖色と寒色カラーパレットを一緒に利用することで、ユニークなエフェクトを適用することができます。

 

#021c1e
#004445
#2c7873
#6fb98f

Warm & Bold

 

 

08. クリーンに強調しよう。

Palette_8-1060x612

 

ソフトな水色と灰色、白のおかげで、清潔感があり、専門的な印象の配色カラーパレット。同時に、フォーカル・ポイントを強調し、注目をあつめることができます。落ち着いた配色に、パンチのある色を用いて、うまくコントラストを表現しましょう。

 

#caebf2
#a9a9a9
#ff3b3f
#efefef

Clean & Highlighted

 

 

09. 温かみのある色合いを。

Palette_9-1060x612

 

上記サンプルでは、クリーンでミニマルな印象を演出するだけでなく、温かみのある印象もうまく表現しています。背景にナチュラル系の淡い茶色を利用し、画像に使われている色合いと書体がうまくはまっています。

 

d7c3c7
#565656
#76323f
#c09f80

Warm Tones

 

 

10. シャープでモダンに。

Palette_10-1060x542

 

ウェブサイトのブランディングに効果的な方法として、上記サンプルのように1色のフォーカル・カラーのみを利用するテクニックです。みどり系のターコイズ色をベースに、他の3色がうまく補色となり、フレッシュでモダン、そしてシンプルな印象を演出しています。

 

#3cc47c
#1e392a
#e9c893
#828081

Sharp & Modern

 

 

11. 暖色 vs. 寒色

Palette_11-1060x612

 

暖色と寒色を組み合わせることで、とてもパンチのあるカラーパレットを表現できます。メタリックな灰色に対して、オレンジと黄色がコントラストとなった、ダイナミックなエフェクト例。

 

#18121e
#233237
#984b43
#eac67a

Cool vs. Warm

 

 

12. かわいいパステルカラー。

Palette_12-1060x612

 

パステルカラーは、子供部屋に利用するだけではありません。上記ウェブサイトでは、清潔感の淡いパステル系のピンクと青、オレンジ色の組み合わせが、楽しい雰囲気をうまく表現しています。パステル系のカラーパレットを利用するときは、十分に余白スペースを確保することで、デザイン要素をすっきり軽い印象に仕上げることができます。

 

#bfd8d2
#fedcd2
#df744a
#dcb239

Pretty Pastels

 

 

13. パンチのある鮮やかさ。

Palette_13-1060x612

 

プロジェクトにパステル配色が合わず、鮮やかなカラーパレットを探しているときは、上記ウェブサイトを参考にどうぞ。たくさんの色を一度に利用していますが、温かみがあり統一感のあるカラーパレットによって、論理的にまとめられています。

 

#e24e42
#e9b000
#eb6e80
#008f95

Bold & Punchy

 

 

14. 色彩トーンを利用しよう。

Palette_14-1060x512

 

ミニマルなデザインで奥行き感を表現したいときは、色彩トーンを活用してみましょう。むらさき色を中心とした配色に、少しだけ色合いの異なる薄ピンク色を合わせることで、エレガントでクリーンな印象に。

 

#94618e
#49274a
#f4decb
#f8eee7

Tints & Tones

 

 

15. 色を重ねてみよう。

Palette_15-1060x612

 

上記サンプルでは、鮮やかで楽しげな配色ですが、同時に洗練されたエフェクトとなっています。利用して配色が、ナチュラルな灰色の背景のコントラストとなり、よりプロフェッショナルで目立ちます。

 

#4484ce
#d9d9d9
#f9cf00
#f19f4d

Splash of Color

 

 

16. エレガントで洗練性を。

Palette_16-1060x612

 

白黒の組み合わせが、もっとも洗練されていると考えがちですが、上記サンプルでは、深い青色と黄金いろん組み合わせが、とてもスタイリッシュな見た目を実現しています。歴史的な名画を参考にすることで、長く使える美しい配色カラーパレットを作成できるでしょう。

 

#0b3c5d
#328cc1
#d9b310
#1d2731

Elegant & Sophisticated

 

 

17. 夏をテーマに。

Palette_17-1060x611

 

夏といえば、赤やオレンジなどを連想しやすいですが、上記サンプルではさんご色に青、ベージュ色を使った、夏の海を連想される配色を利用しています。シンプルでミニマルな印象と同時に、夏が待ち遠しくなるカラーパレット。

 

#286da8
#cd5360
#b37d4e
#438496

Summer Inspired

 

 

18. モダンで、プロフェッショナル。

Palette_18-1060x535

 

信頼のある専門性を表現できると同時に、退屈で時代遅れでもない配色を探しているときは、上記サンプルを参考にしてみましょう。控えめな灰色を中心とした配色に、鮮やかな黄色を組み合わせせることで、くっきりとしたモダンな印象を演出できます。

 

#c5c1c0
#0a1612
#1a2930
#f7ce3e

Professional & Modern

 

 

19. 黒と鮮やかな色で強調しよう。

Palette_19-1060x565

 

よりコンテンポラリーなデザインを実現したいときは、モノクロ配色にポップで、鮮やかな色使いを重ねてみましょう。強いコントラスを表現することができ、同時に楽しげな印象も演出しています。

 

#000000
#ec576b
#4ec5c1
#e5e338

Black & Vibrant

 

 

20. 清潔感のあるグラデーションを。

Palette_20-1060x612

 

清潔感のある配色パレットを探しているときは、上記サンプルサイトのように、グラデーションカラーを利用してみましょう。青色とターコイズ色がうまく混ざることで、落ち着いてスッキリとしたデザインを演出しています。

 

#77c9d4
#57bc90
#015249
#a5a5af

Gradients & Fresh Blue

 

 

21. 元気がよく、スタイリッシュに。

Palette_21-1060x612

 

上記サンプルでは、明るくモダンで、イキイキとしたフレンドリーな配色を採用しています。オレンジや黄色などの鮮やかで暖色系の色使いに、余白スペースをたっぷり確保し、ナチュラル系の青色を合わせることで、見事にデザインをまとめています。

 

#6b7a8f
#f7882f
#f7c331
#dcc7aa

Cheerful & Sleek

 

 

22. 高級でモダンに。

Palette_22-1060x612

 

上記サンプルは、高級感があり、洗練された印象をあたえる配色を採用しています。

 

#0f1626
#ab987a
#ff533d
#f5f5f5

Luxurious & Modern

 

 

23. ユニークに目立とう。

Palette_23-1060x471

 

上記サンプルでは、鮮やかな配色の代わりに、ナチュラル系カラーでまとめています。ユニークで楽しげな雰囲気のなかに、うまくプロフェッショナル性も加えた配色パレット。

 

#cf6766
#30415d
#031424
#8eaebd

Unique & Striking

 

 

24. 予期しない色の組み合わせを。

Palette_24-1060x612

 

あまり一緒に使われることのない、むらさきとみどり色の組み合わせが特長のサイトデザイン。高級感のあるむらさき色が、鮮やかなライム色とくっきりとした白色のコントラストになり、ユニークで印象に残るデザインに。

 

#6e3667
#88d317
#1a0315
#535353

Modern & Crisp

 

 

25. レトロデザイン。

Palette_25-1060x550

 

温かみがあり、高級感のあるビンテージ系のカラーパレットを採用したサンプル例。独特なキャラクター性に加え、活発でモダンな印象のレトロな配色。白色の代わりに、黄色を活用することで、このエフェクトをうまく表現することができます。

 

#fedc3d
#000000
#01abaa
#fea680

Retro Inspired

 

 

26. アンティークでスッキリと。

Palette_26-1060x612

 

エレガントなアース色で統一したシンプルな配色の組み合わせにより、洗練されたイメージと同時に、アンティークな雰囲気を演出しています。

 

#b56357
#b4dbc0
#eae3ea
#a7b3a5

Antique & Clean

 

 

27. 活発に目立とう。

Palette_27-1060x528

 

上記サンプルでは、彩度の高い色を重ねたデザインテクニック。各デザイン要素と背景の白色とのバランスをうまくとることで、デザインをより目立たせることができています。

 

#f81b84
#f5ce28
#43c0f6
#f2eee2

Striking & Energetic

 

 

28. イキイキとした新鮮さ。

Palette_28-1060x611

 

上記サンプルは、鮮やかな配色をどのように、専門的なデザインに採用するのか、実践的に表現しています。余白スペースとのバランスを考慮することで、洗練された印象を崩すことなく、鮮やかなカラーパレットをうまく活用することができます。

 

#4cdef5
#a4d555
#ff5992
#841983

Fresh & lively

 

 

29. すっきりで、くっきりと。

Palette_29-1060x486

 

幅広く活用することができる、クリーンでフレッシュな、柔軟性のある配色カラーパレット。異なる色合いの水色を組み合わせることで、デザインが退屈にならず、ミニマルな印象に仕上げています。

 

#99d3df
#88bbd6
#cdcdcd
#e9e9e9

Clean & Crisp

 

 

30. ごちゃごちゃしてないカラフルさ。

Palette_30-1060x612

 

デザインに色を使い過ぎると、ごちゃごちゃになりがちですが、上記サンプルでは見事に表現されています。ほんの少しだけ彩度をおとし、余白スペースをたっぷり確保することで、やり過ぎにならずカラフルに仕上げます。

 

#fa7c92
#6ec4db
#fff7c0
#66ab8c

Colorful w.o Clashing

 

 

31. クールな落ち着きを。

Palette_31-1060x612

 

夏を雰囲気を表現するときに参考にしたい配色カラーパレット。ビーチでリラックスしているような雰囲気を感じる、落ち着いたユニークな色使い。

 

#6bbaa7
#fba100
#6c648b
#b6a19e

Cool and Calm

 

 

32. 控えめでモダンに。

Palette_32-1060x489

 

ソフトなカラーパレットでまとめられた配色。異なる色合いも、トーンを合わせることでよりナチュラルで、効果的に仕上げます。ユニークなオリジナル性に加え、モダンで落ち着いた印象が欲しいときに。

 

#a9b7c0
#c7d8c6
#efd9c1
#cccbc6

Modern & Muted

 

 

33. フレッシュなアース色。

Palette_33-1060x612

 

野菜から選択された配色が、オーガニックな印象を演出しています。たっぷりな余白スペースを一緒に利用することで、うまくエフェクトを引き立てることができます。

 

#945d60
#626e60
#af473c
#3c3c3c

Earthy & Fresh

 

 

34. 鮮やかで精力的に。

Palette_34-1060x536

 

楽しさやエネルギー、興奮状態を表現するときは、上記サンプルを参考にしてみましょう。パンチのあるい色使いはもちろん、若々しさも表現しています。

 

#fe65b7
#e9c904
#8fc33a
#62edd6

High Saturation & Energy

 

 

35. 暖色カラーをアクセントに。

Palette_35-1060x536

 

より複雑なデザインに合うカラーパレットを探しているときは、上記サンプルを参考にしてみましょう。5色のみを利用することで、複雑さをうまく表現しています。楽しげな雰囲気を表現したいときに◎な、柔軟性のある配色。

 

#7cdbd5
#f53240
#f9be02
#02c8a7

Warm & Wonderful

 

 

36. ビンテージエフェクト。

Palette_36-1060x536

 

時代遅れにならない、ビンテージエフェクトが必要なときは、黄金色に緑と茶色、オフホワイトを組み合わた、上記サンプルを参考にどうぞ。

 

#cda34f
#e9e7da
#636b46
#373f27

Vintage Charm

 

 

37. 宝石のような美しさ。

Palette_37-1060x612

 

淡いグラデーションカラーは、シンプルでエレガントな見た目だけで、注目を集めまる配色です。一緒にポップなピンク色を合わせることで、デザインを新鮮で、美しく保ちます。

 

#67aeca
#675682
#5f0f4e
#e52a6f

Cool Jewel Tones

 

 

38. 嵐のような色合いを。

Palette_38-1060x612

 

ダーク系のスタイリッシュな配色を探しているときは、上記サンプルのような、深いむらさき色とピンク色を利用することで、洗練されたデザインを実現します。

 

#494e6b
#98878f
#985e6d
#192231

Stormy Hues

 

 

39. 大学生風でクリーンに。

Palette_39-1060x480

 

ユニークなピンク色を、シンプルな配色に加えることで、清潔感のあるくっきりとしたデザインを実現します。

 

#4d6e9c
#99ced4
#eeb6b7
#6e7376

Clean & Collegiate

 

 

40. シンプルで、フレッシュに。

Palette_40-1060x486

 

ルールに囚われない、めずらしい色の組み合わせですが、とても自然にまとまっている配色カラーパレット。

 

#414141
#ccdfcb
#ff6a5c
#056571

Simple & Fresh

 

 

41. トロピカルな雰囲気を。

Palette_41-1060x533

 

上記サンプルサイトでは、南国をイメージする色使いが美しい、配色を利用しています。元気があって、活発な雰囲気がコンセプトのときにどうぞ。

 

#1fb58f
#eab126
#f24c4e
#1b7b34

Tropical Tones

 

 

42. 鮮やかな色をアクセントに。

Palette_42-1060x612

 

控えめで落ち着いた配色を利用するときに、デザインを退屈に見せないようにするには、鮮やかな色をアクセントにしてみると良いでしょう。

 

#e14658
#22252c
#3f3250
#c0b3a0

Bold Feather Colors

 

 

43. アンティークな色使い。

Palette_43-1060x612

 

上記サンプルでは、美しいアンティーク調の色使いによって、エレガントで洗練された雰囲気を演出しています。歴史的な絵画をコンセプトに配色を決めることで、スタイリッシュな見た目を実現します。

 

#155765
#57652a
#ab9353
#4d2c3d

Antique Tones

 

 

44. 大胆なネオンカラー。

Palette_44-1060x535

 

上記サンプルは、ウェブサイトにおけるネオンカラーのお手本となる使い方と言えるでしょう。白色の背景デザインとのバランスを、うまく調整することで、やり過ぎにならないように工夫されています。

 

#d48cf8
#0e8044
#b5e582
#08302f

Neon & Bold

 

 

45. シンプルで、大胆に。

Palette_45-1060x535

 

鮮やかなベースカラーに、くつろぎ感を表現したいときの参考サンプル例。みどりと青色のシンプルなトーンですが、スタイリッシュな見た目を実現しています。トロピカルで楽しく、フレッシュな雰囲気のカラーパレット。

 

#f7ef6a
#93c178
#465c8b
#dfdce3

Simple but Old

 

 

46. スタリッシュな企業向け配色。

Palette_46-1060x612

 

少しだけ鮮やかな配色に、仕事などより専門性を表現したいときは、上記サンプル例を参考にしてみましょう。紺色とオフホワイト色が美しく組み合わされた、洗練された雰囲気のカラーパレット。

 

#f7f5e6
#333a56
#52658f
#e8e8e8

Corporate & Sleek

 

 

47. モダンでミニマルに。

Palette_47-1060x612

 

上記サンプルでは、単色カラーパレットを採用することで、シンプルでミニマルな印象に仕上げ、オレンジ色のデザイン要素に、うまく注目を集めています。重要な部分を強調できる、シンプルだけど効果的なテクニック。

 

#c06014
#eddbcd
#000000
#cdcdcd

Modern & Minimal

 

 

48. 楽しく活発に。

Palette_48-1060x536

 

色はデザインに個性を加えます。上記サイトでは楽しげな配色が、サイトのブランディングをより自然に、うまく表現しています。

 

#a7d2cb
#f2d388
#c98474
#874c62

Fun & Cheerful

 

 

49. リラックスした晴天気分で。

Palette_49-1060x612

 

温かみがあって、フレンドリーな配色を探しているときは、上記サンプルはいかがでしょう。黄色と黄金色のあたたかい配色に、紺色を組み合わせることで、落ち着いた平和な雰囲気を演出します。

 

#cae4db
#dcae1d
#00303f
#7a9d96

Sunny & Calm

 

 

50. ポップアートのように。

Palette_50-1060x612

 

若いユーザーをターゲットにしているときは、明るく鮮やかで、目立った色使いを活用してみましょう。ポップなネオンピンクに、黄色と青色を組み合わせた、ミニマルなデザインながら、サイトの個性をばっちり表現しています。

 

#d7dd35
#575da9
#e42d9f
#02558b

Pop Art

 

 

さいごに。

 

色の使い方ひとつで、デザインをかっこよくも、台無しにもしてしまうことから、特にウェブサイト制作では、配色カラーパレットの選択を慎重に行いましょう。まず、どのような感情やアイデアを表現したいか確認し、どの色の組み合わせがもっともマッチするか、じっくり検討してみましょう。では、デザインを楽しんで!

 

 

これまでに当サイトで紹介した、この他のカラーパレットも参考にしてみてはいかがでしょう。コピー&ペーストで配色を利用できる、カラーパレットを用意しています。

 

参考  配色完全ガイド!カテゴリー別見本100個とカラーパレットの使い方まとめ

参考  単色カラー配色をマスターする!鉄板デザインテクニック9個まとめ(参考パレット25個収録)

参考  プロの魅力的な色使い!参考にしたい配色カラーパレット20個まとめ

参考  デザイナーが知っておきたい、配色の基本原則10個まとめ

 

 

参照元リンク : Website Color Schemes: The Palettes of 50 Visually Impactful Websites to Inspire You – Canva Design School