ホームページ制作、ランディングページ制作の制作実績多数！
WEBマーケティングのことなら株式会社ロックビルにお任せください。

サイトを新規でリリースしたい、リニュアールをしたいとお考えのWEB担当者の方に向けて、配色が決まらない、制作会社に配色イメージが伝わらないと悩んでおられる方もいらっしゃるかと思います。

今回は参考になる配色見本サイトをまとめさせていただきました。

ベースとなるカラーを設定したい

原色大辞典

※原色大辞典から引用

「色見本」「配色」「色を探す」「ランキング」などの幅広いジャンルにカテゴリー分けがされているために、
例えば「冬」というキーワードでイメージがわかない時には「配色を探す」のカテゴリーで検索をかければ
イメージぴったりのカラーを参考にできます。

配色の見本帳｜キーカラーで選ぶ配色パターン

※配色の見本帳から引用

選んだ色を中心としたカラーの法則から多彩な配色を提案をしてくれるなど、色に関する細かい情報が確認できます。
たくさんの数の色の組み合わせを提案してくれるので、配色に悩んだ時は役に立ってくれるサイトです。

様々な色をさ検索したい

NIPPON COLORS

※ NIPPON COLORSから引用

日本伝統のカラーをWebページ上で表現される色を指定するための制御コードで表記してきれています。
和風の表したい時は大変便利なサイトです。

グラデーションを検索したい

0 to 255

※0 to 255から引用

選択した色の鮮やかさを確かめることができます。「選択した色のカラーのグラデーションを薄くしたい・濃くしたい」
というシーンで役に立ってくれます。

イメージで検索したい

色色 [:iroiro]

※色色 [:iroiro]から引用

言葉のキーワードで色を検索してくれるサイトです。
例えば「クリスマス」「冬」などのキーワードを検索にかけるとイメージにあった色を教えてくれます。
検索方法は「左下の検索フォーム」にキーワードを検索をするとすぐにイメージにあった色を提案してくれます。
色のキーワードが決まっていれば是非使っていただきたいサイトです。

配色パターンを考えたい

※ウェブ配色ツール Ver3.0から引用

Webサイトの色のとりあわせの参考に大変使い勝手がよいサイトです。
また、スマートフォンやタブレット対応をしていています。
サイトの右側にあるハンバーガー型のメニューをPCではクリック、スマートフォンでは指先でタップすると色がグラデーションになっている画面が表示されて、そこから気に入った色を選択すると、選択した色にマッチした色を仮装のサイトページで自動で表示してくれます。
見出しやグローバルナビゲーションもセットで反映されるので、完成したイメージを把握するのにとても便利です。

他のサイトの配色パターンを参考にしたい

Web Color Data

※Web Color Dataから引用

検索フォームにURLを打ち込むと「検索フォームに打ち込んだサイトの配色と色のとりあわせが相似したサイト」を表示してくれます。
例えば競合他社や業界内の大手企業がとんなカラーを使っているのかを把握したい時には、大変便利なサイトです。

まとめ

今回は参考になる配色見本サイトについてまとめてみました。

それぞれの目的にあった、配色サイトを選択して配色を決めたり、制作会社との円滑なコミニュケーションを測っていただければ幸いです。