【Webデザインで必ず役立つ！】理想的な配色を作る9つの方法！
Webサイトを作る上で重要な要素である「配色」。理想的な配色をデザインする方法を実際のWebサイト・Webデザインを紹介しながら説明していきます。デザインはアートと間違えられやすいですが、配色選びもルールを覚える必要があります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Designmodoのブログ記事を、Designmodoより了解を得て日本語翻訳し掲載した記事になります。
サイトの作成にあたり最も難しいことの一つとは、ブランドやメッセージを印象的にするための配色選びです。
理想の配色選びとは、ただ色を選んでそれらを散りばめれば良いという訳ではありません。意外にも、化学や色彩論に関係しているのです。
今回は、より理想的な配色選びについて、9つの方法をご紹介します。（もちろん、理想的な配色を用いたWebサイトと共にご紹介していきます。）
色相環
子供の頃、学校の授業で見た色相環という図を覚えていますか？
これは、実際に大人の学習者へも用いられているものなのです。
色相環からは、他の色との違いや関係を見ることができ、配色選びの一つの要素となります。色の相対を順序立てて円環にして並べたものです。
色相環は原色・等和色・第三色によって構成されています。
- 原色（赤、黄、青）
- 等和色（緑、赤紫、オレンジ）原色のうち2色を混ぜたもの
- 第三色（紺、青紫、バラ色、赤オレンジ、若草色、黄緑）原色と等和色を混ぜたもの
あなたが色相環からどの色を選びどのようにミックスするかで、配色の良し悪しが決まるのです。
- アナロジー：色相環上で連続した関係の色相の組み合わせ
- コンプリメンタリー：色相環上で正反対に位置する色の組み合わせ
- スプリットコンプリメンタリー：反対色、補色に近い色相の組み合わせ
- ダブルコンプリメンタリー：2組の補色となる色相のペアの組み合わせ。最も難しいと言われる
- モノクロマテイク：単一の色相を用い、明度彩度を変える
- トライアッド：補色関係の組み合わせ
これらの色相環上のパターンは、色を選ぶ上で多く用いられているツールの一つです。（ただ、いつもこれらのルールに従えば良いというわけではありません。
（デザインにルールは絶対ではないのです）
黒、白、灰色
色というのは、明るい色だけで成り立っているわけではありません。最も重要の色とは、私達があまり見ることのない色だという説もあるのです。
その色とはー黒、白、灰色、です。
これらの色は、何かを引き立てるのに最適なカラーです。背景として使用されることはもちろん、目的に合わせて暖かさやクールを与えることができます。
また、印刷面などに関しても他の色と比べると有効性が高いです。
トーン、ティント
色相環の中からいくつかの色を選びそのまま使用する人はあまりおらず、何かしら色を変化させることがほとんどです。まさにそれをティント、トーン、シェードといいます。
- ティント：純色に白を加えたもの
- シェード：純色に黒を加えたもの
- トーン：純色に灰色、または黒と白を加えたもの
これらの方法で色彩を変え、あなたのパレットに変化を与えることができます。
ティント・トーン・シェードのコンビネーションを使い色を作り出すことによって、2,3色を同じ種類でありながらさらに広げることができるのです。
（一つの文章の中で、太字やイタリックなど形式を変えて文字を打つようなものです。）
トレンドカラーの使い方
たくさんのトレンドカラーがあります。それらは程よくうまく使いこなすことが必要です。なぜなら、トレンドカラーは長期的に使うことが難しいからです。
トレンドカラーを使用する場合は、一つに絞ってあなたのパレットに取り入れることをおすすめします。
色を作る際、基本的には長く、何度でも使える色を作るのがいいでしょう。（色は、各ブランドのアイデンティティーであり重要な提供者です。）
”あなた色”に染まった色を作り、そこにインパクトを与えるためのアクセントとしてトレンドカラーを使うのです。
（そうすればトレンドが終わった時に他のアクセントカラーに戻すことができます。）
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
たくさんの色は必要ない
ベストな色とは、目的に合わせて適度に使われることです。あなたのパレットにも、5色以上は必要ありません。たった2,3色と中間色、それさえあれば十分です。
なぜかって？それによって各色の、目的に合わせた良さが発揮できるからです。色は、デザインの中で役割を持ちます。ただ色の種類が多いだけでは、
その役割は失われてしまうのです。理想の配色とは、それぞれの色が意味を持ちユーザーがにとってウェブサイトを使いやすくさせるものです。
（例えば、ほとんどのデザイナーは、サイト内のボタンを同じ色にします。）
テキストに色を使おう
色のコンビネーションを考える際、テキスト部分について考えることも重要です。黒、白、グレーだけでなく、どんな色をテキストに使用するかも考えなければいけません。
テキストの色は、サイトの読みやすさや使いやすさを左右します。テキストの色を決める際に最も気をつけなければならないのは、読みやすさです。
読みやすさを重視して、背景とのコントラストを決める必要があります。
テキストに使われる色は、アクセントにも全体のアクセントにもなります。
コンテンツに合わせた色使い
理想の配色とは、色と色がマッチしているだけでなく、コンテンツと内容がマッチしていることです。何についてのWebサイトなのかを考えてみてください。
内容に合わせた配色選びができているでしょうか？
コンテンツに合わせて配色選びは難しい課題ですが、うまくうけばとても良い物になります。自然や環境に関するWebサイトには多く緑や茶色が使われます。
銀行のウェブサイトには青が使われることが多いです。なぜなら、これらの色は連帯と信用を表すからです。
配色選びは簡単ではありません。何かしっくりこない時は、サイトデザインのイメージを確認してみてください。
サイトにとってどんな色が適切なのかを確認して、そこから初めて見ましょう。
パレットに集中する
あなたが色のコンビネーションを考え作り始めたら、パレット内の色とその使い方が一貫して調和されるようにしましょう。
どの色をどのように使っていくのか、自分の中でのルールを決めると良いでしょう。
始める前に次の質問に答えてみましょう。
- 何色使う予定ですか？
- ティント、トーン、シェードのどれを使いますか？
- テキストに色は使用しますか？
- UI（ユーザーの目に触れる部分）のセットカラーはありますか？
- パレットにないアクセントカラーを使うことはできますか？
結論「理想的な配色選びとは」
Webサイトを良くするも悪くするも、あなたのパレット次第です。見た目も、気持ちも納得のいく色を使っていますか？
簡単なことのように思えますが、とても重要なことです。何かしっくりこないのであれば、他の選択肢を試してみるか、最初から考えなおしてみる、もしくは一色だけ色を変えてみるなど、なにか変化を加えてみましょう。
パレットの中でコントラストとバリエーションを保ちましょう。
あなたの配色選びで、ユーザーにとって最高のWebサイトになるように。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
