クオートワークスさんでWebデザイン勉強中のkinomiです。

現在クオートワークスさんのブログOGP画像を制作させていただいている最中(コンセプトから詰まっている＆休暇をいただいており大変作業が滞っている状況😟)です。

その過程で、配色についての知識がほとんどないことが代表のムラマツさんにばれてしまったので、デザインについて分かりやすく解説しているYoutubeチャンネル「MUUUUU.TV(ムーテレ)」の【現場で戦えるWebデザイン配色テク。本当に使えるものだけ紹介します。】で配色について学びました。

解説の内容を記録して自分にインプットしていきたいと思います。

暗記レベルの基礎知識

1.これだけは暗記の基礎知識

◻︎色相（色自体の種類）・彩度（絵の具の量）・明度（環境の明るさ）を理解する

◻︎色相環で補色や隣り合わせの色で配色を考える

◻︎HSBカラーを使う
→色相・彩度・明度を数値で管理できる。
RGBカラーやCMYKカラーは感覚で調整しづらい。

◻︎ベースカラー70%・サブカラー（メインカラー）25%・アクセントカラー5%

2.単色で与える効果はポジティブとネガティブ両方ある。

◻︎覚えておくと説明に使いやすい。
赤色の例)ポジティブ効果→情熱・愛情
ネガティブ効果→危険・争い

◻︎単色の効果は汎用的に使えるわけではない。（詳細は後述）

応用の知識

3.色は二色以上で初めて狙った雰囲気が作れる

◻︎一色目はクライアントの指定等既に決まっていることが多く、与えたい印象を作るのは2色目以降。

4.二色目の選び方は様々な配色理論を試して選ぶ

ムラマツさんがでよく使う配色理論
（正式名称覚えるより、使い方と用途を理解するのがダイジ🤲🏻）

ドミナントトーン配色

💡メリット：トーンを揃えられる

・彩度（S）と明度（B）を固定し、色相（H）を調整する配色。
・既にメインカラーが決まっており、他のコンポーネントの色を決める際に使用する。


フォカマイユ配色

💡メリット：複雑さや深みを出せる

・隣の色相を使い同系色でまとめる配色。
・デザインが簡素なときに、メインカラーに合わせて同系色でまとめる。


スプリットコンプリメンタリー

💡メリット：味気なさをなくせる。汎用性が高い。
・補色を２つに分ける
→対面の補色だけだと味気ない。
→意味を持たせた複数のコンポーネントを配色で使い分けるときに汎用性が高い。

5.グレーと黒を極める

◻︎ベースカラーは白だけでなくグレーの汎用性が高い。

◻︎グレーの明度は最高でも97。それ以上はモニターで見えない場合がある。

◻︎グレーの色合いを数値で感じるくらい感覚を鍛えると色のコントロールが繊細にできる（…？！🙄）

◻︎黒やグレーをサブカラーの色相に合わせると統一感が出る。（#000000が使われていない理由の１つはこのため）
例)サブカラーが青なら青寄りのグレーにする

6.写真の色もベースカラーに寄せる

◻︎ベースカラーのトーンにに合わせると少しだけ色相を赤くしたり青くする。
例)食べ物系→赤色
ビジネス系→青色

◻︎写真が浮いて見えるときはトーンが合っていないことが原因かも。

◻︎トーンを判別するコツは写真の白い部分の色相を見る。

7.たまにアクセシビリティチェッカーを使う

◻︎見づらい・見やすい等の色の問題が起きたらアクセシビリティチェッカーを使う
→ベスト（下記のサイトでいうとAAAは)なかなか難しいのでベター（下記のサイトでいうと AA）くらいで◎。

◻︎ターゲットを加味してコントラストを調整する。
→全部コントラスト最大でバキバキはダサくなる。

8.一番目立つ色は赤ではなく動くところ

◻︎動くところはどの色よりも目立つ。

◻︎暖色の目立つ色を闇雲に使わず、本当に目立たせたい所にとっておく。
→「赤が1番目立つ」のではない。
赤もたくさん使えば目立たなくなる。

◻︎クライアントから「目立たせたいから赤にして！」と言われた動くところが目立つと説明できるようにしておく。

9.発表される流行色の使い所

◻︎短期的に利用されるスポット商品で使われる。
→来年古くなる色ということ。

◻︎Webサイトはブランドカラーを狙ったイメージに寄せる。
→Webサイトは3〜5年運用するため、来年古くなる色は使わない。

初学者が配色を決める時のポイント

◻︎メインが決まっていてサブカラーやベースカラーを決める時には、狙いたい印象になっているサイトからそのままパクる（ムラマツさんの願い）
→全部パクるのではなく配色のみ

最後に

今までデザインするとき、がっつりRGBカラー使っていました🥹
現在作っているOGP画像をムラマツさんに観ていただいたときにコントラストの悪さをご指摘頂き今回の動画で学んだわけですが、今後のデザインのしやすさがぐっと上がったのではないかと思います。

配色だけでなく、情報設計とレイアウトのメリハリがないこともご指摘頂き、そちらも合わせて勉強中です。
がんばります！またね〜

kinomi