Advertisement

20trendcolor2015-top

 

世界中の複数のデザイナーによって、技術やデザイン力、コンテンツ内容、クリエイティブ度のすぐれたウェブサイトを毎日評価、表彰するAwwwardsというギャラリーサイトをご存じですか。最新のウェブデザイントレンドを確認することができるだけでなく、デザイン制作の際に配色の参考としても最適です。

 

 

グラフィックプログラマーのMatt Deslauriers @mattdeslは、そんなAwwwardsが日替わりで優秀なサイトを選ぶ、Site of the Day(通称SOTD、本日のサイト)のなかで、実際にどのような配色が人気なのかを調査する、実験的なプロジェクトを行いました。

 

color-palettes-matt-2

 

 

調査されたそれぞれのウェブサイトは、主要カラー3色の円グラフをつかい、視覚的にデータ化されており、どのような配色に人気が集まっているのか、ひと目で確認することができます。今回は、取得した色の中から、2015年のデザイントレンドを反映した20種類の配色カラーパレットをまとめてご紹介します。

 

 

読みやすさを検討した、やさしいミニマルな配色が中心で、これからはじめるウェブサイト制作での配色カラーの参考にしてみてはいかがでしょう。なお、HEXコードを記載したカラーパレットも一緒に追加しているので、コピー&ペーストで利用可能となっています。

 

 

 

詳細は以下から。

 

 

 

2015年の受賞サイトから学ぶ!人気トレンドのWeb向け配色カラーパレット20個

 

01. Créations Namale By Phoenix The Creative Studio

Namale---Joyaux-Uniques

 

#c5d5cb
#9fa8a3
#e3e0cf
#fff

by Creations Namale

 

02. LEVEL By Vide Infra

awwwards-color-scheme-sotd2

 

#c0dfd9
#e9ece5
#b3c2bf
#3b3a36

by LEVEL

 

03. Brdr. Krüger By Relax, we are the good guys

brdr-kruger-1

 

#edd9c0
#c9d8c5
#a8b6bf
#7d4627

by Brdr. Krüger

 

04. Dream Team Katarzyna Konkowska By BrightMedia

awwwards-sotd-Dream-Team

 

#c9c9c9
#e3e3e3
#9ad3de
#89bdd3

by Dream Team Katarzyna Konkowska

 

05. L’Avenir, Dental Clinic By Phoenix The Creative Studio

L'Avenir---Dental-Clinic----Our-clinic

 

#6ed3cf
#9068be
#e1e8f0
#e62739

by L’Avenir

 

06. QED Group By madeo

QED-Group-1

 

#dddfd4
#fae596
#3fb0ac
#173e43

by QED Group

 

07. Quay Restaurant by Pollen

quay-restaurant-website

 

#e8edf3
#e6cf8b
#b56969
#22264b

by Quay Restaurant

 

08. Teye By denkwerk

teye-website

 

#feffff
#98dafc
#daad86
#312c32

by Teye

 

09. Weber – BBQ Cultures By UncleGrey & MediaMonks

Weber-BBQ-Cultures-1

 

#1d2120
#5a5c51
#ba9077
#bcd5d1

by Weber – BBQ Cultures

 

10. Tens Sunglasses By Elegant Seagulls

tens-glasses

 

#f0eceb
#729f98
#283018
#aa863a

by Tens Sunglasses

 

11. Helbak Ceramics By Anders Bergh

helbak_frontpage_01

 

#dbe9d8
#c2d4d8
#f2efe8
#b0aac2

by Helbak Ceramics

 

12. Crea Carte By Dataveyes

awwwards-color-scheme-sotd14

 

#6534ff
#62bcfa
#fccdd3
#bbc4ef

by Crea Carte

 

13. Suspended Animations 2015 By Baptiste Briel & Flavinsky

suspended-animations-agency

 

#dbc3d0
#5e0231
#c7a693
#856046

by Suspended Animations 2015

 

14. Pablo The Flamingo By Pascal van der Haar & Nathan Gordon

plablo-the-flamingo

 

#e6af4b
#e05038
#f2cbbc
#334431

by Pablo The Flamingo

 

15. Baku 2015 – Follow the flame By Steven Delcourt

baku2015

 

#300032
#06000a
#c43235
#e6e6e8

by Baku 2015

 

16. Bonhomme By Bonhomme

BONHOMMEPA

 

#16174f
#963019
#f6f1ed
#667467

by Bonhomme

 

17. Well Storied By Tool and Y&R NY

Well-Storied

 

#262216
#49412c
#97743a
#b0a18e

by Well Storied

 

18. Austrian Summer Moments By Loop

austria

 

#30231d
#6a5750
#f6f1ed
#b5a397

by Austrian Summer Moments

 

19. Reebok: Be More Human Experience By Venables Bell & Partners, welikesmall

reebok-be-more-human

 

#ede9ce
#c7ad88
#64706c
#935347

by Reebok: Be More Human Experience

 

20. BRANDTS – Museum For Art & Visual Culture By Stupid Studios

brandts

 

#252839
#677077
#b5b5b7
#f2b632

by BRANDTS

 

 

21. Anton & Irene By Anton & Irene, Oleg Chulakov Studio

antonandirene

 

#bccbde
#c2dde6
#e6e9f0
#431c5d
#e05915
#cdd422

by Anton & Irene

 

 

 

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

さまざまなジャンルのイメージ写真を元に、100種類のカラーパレットを収録しています。こちらもHEXコードされているので、コピー&ペーストでどうぞ。

100color-combo-top

 

 

参照元リンク : Trendy Web Color Palettes and Material Design Color Schemes & Tools – Awwwards