こんにちは、note担当のオノです！

Web広告代理店として、バナーやLPなど、日々様々なクリエイティブの制作も行うユニークワン。いわゆる自社広報担当のオノも、SNS用のコンテンツやコラムのアイキャッチなど、しばしば制作を行っています。

そこでいつも不安になるのが、配色。

「本当にこの配色で“正しい”んだろうか…」
「この色の組み合わせって、誰もが見やすいものなんだろうか…」

と心配になることもしばしば。

そこで、今回のnoteでは、弊社デザイナーにも協力いただき…
配色チートシートとして、参考になるサイト、便利なツールを一挙に紹介！

現役デザイナーと厳選したものなので、実務に役立つこと間違いなし。しかも、全て無料で使えるものばかり…！

ぜひご覧ください！

・　・　・

配色の基本とは

まずは、ざっくりと配色の基本をまとめます。

①色の種類

ひとくちに色と言っても、その中には様々な区分があります。代表的な区分は下記の通り。

有彩色と無彩色: 色味のある色が有彩色、白や黒などの色味のない色が無彩色。
暖色と寒色: 暖かみを感じる色（赤、黄）と冷たさを感じる色（青、紫）。

どのような種類の色を使うかで、デザインの印象は大幅に変わります。

②トーン

色の明度と彩度によって、ビビッドのような鮮やかなトーンから柔らかいトーンまで幅広く分類できます。

代表的な配色パターンとしては、無彩色を組み合わせたシンプルな配色や、同系色を使った統一感のある配色が挙げられます。

③発色の仕組み

RGBとCMYKという言葉を聞いたことがありませんか？

RGBは、デジタルスクリーン用の配色方法で、赤（Red）、緑（Green）、青（Blue）の光の三原色を組み合わせて色を作ります。

これに対して、CMYKは印刷物用の配色方法で、シアン（Cyan）、マゼンタ（Magenta）、黄（Yellow）、黒（Key）の4色を混ぜ合わせて色を再現します。

デザインデータをプリントアウトした際に、「なんか、画面で見ていた色と違う…」という現象は、この発色の仕組みの違いによって生じます。どちらの色空間を使うのか、最終的なデザインの用途に応じて選択しましょう。

色の基礎知識を学ぶ

ここからは、弊社デザイナーと厳選した、配色について考える際に絶対に見ておきたいサイト・ツールを一挙紹介！ちょっとでも色に迷ったら見返せるよう、ブックマーク必須です。

色と配色について学びたい人がまずは読むべき2つの記事

■デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie

色彩理論の基礎を網羅的＆超わかりやすく解説した良記事。

この記事を読むことで、なんとなくの配色ではなくて、なぜその配色なのか、意図を説明できるようになります。

例えば「この色の組み合わせで本当にいいの？」と迷ったときや、「もっとビシッと決まったデザインにしたい！」と感じたときに、何度も読み返してみるのもオススメです。

■WEBデザイナー必見！デザインにおけるコントラストの話 | SEO対策なら株式会社ペコプラ

背景色と文字色のコントラストが弱すぎるとテキストが読みにくかったり、逆にコントラストが強すぎると目がチカチカしてしまったり。見やすいデザインには色彩のコントラストへの配慮が必要不可欠です。

こちらの記事では、デザインにおけるコントラストの使い方を徹底解説しています。

コントラストを意識するだけで、デザインの見栄えや伝わりやすさがぐっとアップします。たとえば、「このデザイン、なんかぼやけてる…」と感じたときや、「もっと目立たせたい要素がある！」というときにぜひ参考にしてみてください。

眺めるだけでも楽しい！色に詳しくなれるオススメサイト

■WEB色見本 原色大辞典 - HTMLカラーコード

こちらは、色の名前やコードをジャンルごとに簡単にチェックできる便利なサイトです。

色と色名、カラーコードが視覚的にわかるのでとっても便利。特に、コーディングを行う際にはなくてはならないツールですね。

原色、パステルカラー、モノトーンなどの基本的なジャンルから、和色／洋色、銀座線や丸の内線など、東京メトロのキーカラーをまとめたちょっと面白いジャンルなど、わかりやすく区分されているので、目的の色を見つけやすいのも特徴です。

■Color Lisa - Color palette masterpieces of the world’s greatest artists.

こちらは、オノがイチオシするカラーパレットサイト。

いわずと知れた名画「モナリザ」をもじったサイト名からもわかるように、有名絵画のカラーから構成されたパレットを掲載するというコンセプトのサイトです。それだけではなく、作品名をクリックすると、それぞれのパレットの元になっている名画も見られます。

色彩について学べる上に、美術ファンは時間を忘れて見入ってしまうこと間違いなし！

色彩設計に便利なサイト

ノーアイディアでOK！配色難民に捧ぐジェネレーター2選

トンマナやコントラストのバランスを踏まえ、無限の組み合わせから適切な配色を見出すのは至難の業。

素敵な配色がわからない！という方は、複数の色の組み合わせを瞬時に提示してくれる「カラージェネレータ」の使用がオススメです。

■Coolors - The super fast color palettes generator!

こちらは、相性のいい5色の組み合わせをランダムに提示してくれる配色ジェネレーターです。

スペースキーを押すたびに、異なる組み合わせを提示してくれるのが特徴。回数制限などはなく、心ゆくまで好みの配色を検討できます。

また、さらにうれしいのがキーカラーの設定ができること。たとえば、ブランドロゴのカラーを使用しなければいけないというときに、指定する色にマッチする配色を無限に試せます。

■ColorMagic | AIであなたがイメージした配色をかんたんに

文章、画像、動画など、様々なジャンルで活用されている、AI。

そんなAIを用いて配色してくれるのが、こちらのサイトです。色のイメージや雰囲気をテキストで入力すると、その指示に沿った4色の組み合わせを提示してくれます。

「晴れた日曜日」など、直接色を指定しなくても配色を生成できるので、バナーやプログのアイキャッチに、特定の雰囲気やシチュエーションを付与したいときに特に重宝するでしょう。

人気の配色って？間違いのないカラーリングを見つけられるライブラリサイト3選

手っ取り早くいい感じの配色を知りたい！という方にオススメなのが、様々な色の組み合わせを閲覧できる配色ライブラリ。

ここでは、特にオススメの3つをご紹介します。

■カラーパレットジェネレーター | Adobe Color CC

多数のデザインソフトを展開する、言わずと知れたAdobeが提供する配色ツール。

こちらは配色ジェネレータとしても非常に優秀。ですが、Adobeアカウントを持っていれば、自分の作成した配色パレットをクラウドに登録したり、ほかのAdobeユーザーが登録した配色パレットの閲覧もできるのです。

また、各業界の最新カラートレンドも見られるので、ライブラリとしても活用の価値ありですよ！

■Color Hunt - Color Palettes for Designers and Artists

「人気の配色を知りたい！」というときに、もっとも使えるのがこちらのサイト。

この「Color Hunt」の特徴は、気に入ったパレットを「♡（いいね）」して保存できることと、いいねの多い順に並び変えられること。そのほかにもキーワード順や新着順に並べ替えられるので、まるでECサイトでショッピングを楽しむような操作感が特徴です。

■Happy Hues - Curated colors in context.

こちらは、Webサイト制作時に重宝するライブラリ。

プロのWebデザイナーがさまざまな配色実例を掲載し、それをそのままコピーできるというサイトです。オノ的には、UIがめちゃくちゃカワイイのもポイント。

シンプルな2カラム構成で、左カラムのボタンをクリックすると、右側のカラムに配色プレビューが表示されます。ページ下部では使用カラーのコードをコピーできるのはもちろん、「Hue」（色相）、「Tint」（濃淡）、「Shade」（影）、「Tone」（明暗）などの色彩の基礎用語や、色が感情に与える影響の解説が載っているという遊び心も。

かゆいところに手が届く配色ツール

「この色を使いたい！」に応えるオススメカラーピッカー2選

カラーピッカーとは、カラーコードを調べるためのツール。

たとえば、「このWebサイトのこのボタンの色を使いたい！」「このロゴで使用されているカラーが知りたい」などのときに使用します。

■👍 Color Picker online | HEX Color Picker | HTML Color Picker

ブラウザに画像をアップロードするだけで、サクッと使えるカラーピッカーです。

パレットの生成や、カラーコードのコピー機能、ピクセル単位での色の取得など、まさにかゆいところに手が届く機能性。ブックマークしておけば、随時役に立つこと間違いなしです。

■ColorZilla

こちらはGoogleクロームの拡張機能のカラーピッカー。

ブラウザで閲覧しているWebサイトのカラーなどを確認することが可能です。Photoshopに似た操作感なので、Adobeユーザーに特におすすめ。

「アクセシビリティ」に配慮するためのおすすめツール2選

―そもそも「アクセシビリティ」とは？

Webアクセシビリティとは、誰もがウェブサイトを利用しやすくする設計方針のこと。

異なるタイプの視覚を持つユーザーが、それぞれの視覚的特性に影響されることなく、公平に情報にアクセスできるようにするための指針です。特に障害を持つ人々や高齢者のために情報アクセスの障壁を減らすことを目的として基準が定められています。

アクセシビリティを考慮した配色を行う上でおさえておきたいのは、下記の3点。

この節では、誰が見てもわかりやすい配色になっているか、アクセシビリティをチェックするためのツールを紹介します！

―アクセシビリティチェックツール3選

■Color Safe - accessible web color combinations

Webアクセシビリティに関する世界的な基準「WCAG」に配慮したカラーパレットを作成できるツール。こちらを活用することで、どんな方にも読みやすい、最適な背景とオブジェクトのコントラストで配色が可能になります。

■EightShapes Contrast Grid

Contrast Gridは、背景色とテキストなどの前面の組み合わせが、WCAGにあるコントラストについての最低基準を満たしているかをチェックできるツール。使用したい色を入力すれば、色のグリッドとしてデザインの参考にすることも可能です。

■色のシミュレータ

「色のシミュレータ」は、様々な色彩感覚をもつ人の色の見え方を体験するためのシミュレーションツール。スマホアプリとして気軽に使用できるので、ぜひ実機確認の際などにご活用ください！

デザイナーに聞いた！Web関連制作の際に絶対おさえておきたい配色の5つのポイント

①黒と赤を安易に使わない

ここでは黒＝K100％、赤＝R100％を意味します。

黒と赤は強いインパクトを持つ色ですが、そのまま使うととっても垢抜けない印象に。また、ダサいデザインになってしまうだけではなく、視認性が低くなり、読みにくさを招く懸念があります。

ほんの少し彩度を下げる、他の色にトーンを揃えるだけでも印象がグッと変わります。

②背景色との同化を避ける

Web制作関連のデザインで最も重要なのは、「視認性」。

多くの場合Webユーザーは、気散じ的になんとなく画面を眺めている状態なので、パッと見で内容が伝わるデザインにすることがとっても重要です。

テキストや重要な要素が背景色と同化してしまうと、視覚的なメリハリが失われます。読みやすさを確保するために、コントラストをしっかりとつけることが大切です。

③ベースカラーとアクセントカラーの使用比率を厳守（4.5:1 のコントラスト）

ベースカラーとアクセントカラーの比率は、デザインのバランスに直結します。

4.5:1のコントラスト比を守ることで、視認性とデザイン性のバランスが取れた、見やすいデザインに落とし込むことが可能です。

④トーンは統一すべし

色のトーンがバラバラだと、デザイン全体がチグハグに見えることがあります。また、異なるトーンのカラーを使うことで、どの情報が重要なのかわかりづらく、伝わりづらいデザインになってしまうことも。

統一感を出すためには、トーンを揃えた配色を心がけ、全体の調和を意識しましょう。

⑤デバイスに配慮したカラー選択を意識

デバイスによって色の見え方が異なるため、カラー選択には配慮が必要。

スマートフォンやPCなど、どんなデバイスでも成果が取れるクリエイティブを作りたいですよね？

色の再現性や見やすさに環境ごとの影響がないかを踏まえて配色するのが重要になります。さらに、かならず実機確認も行うようにしましょう！

まとめ

今回は、配色チートシートとして、Web制作における「色」のお役立ちサイト・ツールをまとめました！

確かに「配色」は難しいです。しかし、色についてのちょっとした基礎知識や、気を付けるべきポイントをおさえておくだけでも、あなたのデザインはグッとよくなるはず。

配色に迷った際には、ぜひこの記事を何度も見返してみてくださいね。

また、ユニークワンではクリエイティブ制作のご相談も承っています。Web広告やオウンドメディア運用のデザイン制作にお悩みの際は、ぜひお気軽にご相談ください！

※お問い合わせはこちら

※採用サイトはこちら