お客様と共に創り、育て、稼ぐホームページ制作
WithStyle(ウィズスタイル)

Webデザインで配色に迷った際に参考になる、配色カラーツールや配色抽出サイトまとめ

2015年10月15日
nonaka
CSS
にほんブログ村 デザインブログ Webデザインへ
Webデザインで配色に迷った際に参考になる、配色カラーツールや配色抽出サイトまとめ

配色に迷った際に参考になる、配色カラーツールや配色抽出サイトまとめ-Webデザイン-

今回は、Webデザインで配色に迷った際に役に立つ、配色カラーツールやカラーピッカーサイトをまとめました。普段使っている、配色の参考になるサイトやツールをまとめています。

BrandColors-ブランドカラーズ-

FireShot Capture 98 - BrandColors I Official color codes for the world's _ - http___brandcolors.net_
http://brandcolors.net/
GoogleやAmazon、facebookなど有名どころの会社のブランドロゴの配色をまとめたサイトです。一覧なので、バーっと眺めて参考にしたり似たような組み合わせで配色考えたりするのに向いています。ASEやCSSなんかの形式でダウンロードすることも出来ます。

Pictaculous-

FireShot Capture 100 - Pictaculous - A Color Palette Generator (court_ - http___www.pictaculous.com_
http://www.pictaculous.com/
こちらは、サイトで使うイメージ画像・写真が先に決まっているときにおすすめです。その写真にメインめに使われている色のカラーパレットを作ってくれます。ここからサイトの配色を考えると、発想が膨らむような気がします。好きな写真を入れて、その配色でまんまサイトを作っても面白いですね。

WEB SITE COLOR PICKER

FireShot Capture 101 - Web Site Color Picker I Webサイトで使われている_色_を抽出、分析しま_ - http___pick.v-colors.com_
http://pick.v-colors.com/
このサイトは、好きなWebサイトのURLを入れるだけで、メインの色を使っている順に並べて表示してくれます。結構便利です。カラーピッカーになっていて、オリジナルのカラーパレットも作れます。何より配色の参考になります。

Stylify Me

FireShot Capture 102 - Stylify Me - Online Style Guide Generator_ - http___stylifyme.com_
http://stylifyme.com/
ここも、好きなサイトのURLを入れると、使われている配色を表示してくれます。このStylify Meのいいところは、フォントもわかる所。全体的に好きなデザインのサイトを入れて、ふむふむと参考にしてみましょう。デザインの幅も広がります。PDFでの出力も出来ます。

ColorPick Eyedropper

キャプチャ
ColorPick Eyedropper
これはGoogleアドオンのカラーピッカーです。参考サイトの「この色好き!」をピックアップ。Webサイトのまとめサイトを見ながらこれを使えば、あなたも配色マスターです。

Color-Sample.com

FireShot Capture 106 - 緑色 - color-sample.com - http___www.color-sample.com_green_
http://www.color-sample.com/
カラーごとにWebサイトを見るためのサイトです。
色を選ぶと、その配色候補、近似色、などなど、かなり詳しく見ることが出来ます。色についての情報は、一番まとまっている印象です。

こんな感じで、かなり詳しく見られます。
FireShot Capture 107 - Rosso Impero (ロッソ・インペーロ) の色見本 I イ_ - http___www.color-sample.com_colors_3648_

ランディングページ集めました

FireShot Capture 103 - ランディングページ集めました。_ 赤・レッドランディングページ一覧 - http___lp-web.com_red_
http://lp-web.com/
ランディングページだけを集めた面白いサイトです。ランディングページは目に入りやすいように配色をかなり研究していたり大胆な配色が多いので、意外と参考になります。色別でみられるので面白い。ここでWebサイトを見つけて、先程のカラーピッカーサイトや、アドオンなんかで配色を調べるという流れがベストかと思われます。

WebDesingClip

FireShot Capture 105 - Main_Color _ Black I Web De_ - http___www.webdesignclip.com_main_color_black_
http://www.webdesignclip.com/
このまとめサイトも、Webサイトを色別で探すことが出来ます。いい感じにすっきりとした日本のサイトがメイン。右上のハンバーガーを選択すると、メインカラー別、カテゴリ別などで選べます。日本のサイトがほとんどなので、非常にリアルに参考にしています。

見出し

以上、配色に迷った際に参考になる、配色カラーツールや配色抽出サイトまとめをお送りしました。どうしても配色の方向性って無難になったり、だいたい決まった感じになりがちなので、幅を広げる上でもお勧めです。休日の時間が吹っ飛びます。

にほんブログ村 デザインブログ Webデザインへ
トップページへのバナー
この記事を書いた人
nonaka

福岡県出身、沖縄育ち。デザイン担当をやっています。