こんにちはあるです!
今日はサムネイルを作る際にあまりおすすめしない色の組み合わせを紹介します!
あれ?なんか見づらい・・・や
なんかしっくりこない・・・
こんな場合は色味をしっかり直してあげることで解消することもあるのでぜひ参考にしてみてください!
今回は2色で例を作っていきます。少し変えるだけでおしゃれになりますよ!
ドキっとしたあなたはぜひ最後までよんで解決してくださいね!
目次
NGな組み合わせとは?
基本的にNGな組み合わせは「見づらい」です。
あまり良くないなーっていうサムネイルは大体色味が見づらくなっていて重要な文字が読みづらくなっています。
簡単な確認方法としては少し距離を話してみてください!そうすると一眼でわかりますよ!
黄色+白

この組み合わせは「明るい色」と「明るい色」なので視認性が悪くなってしまいます
意外とやりがちでよく見るのがこれですね。
使い方によってはデザインのアクセントになるんですがこの黄色の文字をメインで読ませようとしてしまうと眉間にシワを寄せながら見なければならないくらい見づらいですよね・・・

このように背景の一部として使用してあげるのであればデザインの一部としてなりたっているのでいいと思います!
ではこれの対処法をやっていきましょう!

少しオレンジに寄せてあげる。(少しマゼンタ/ピンクを入れてあげる)
そうすると色味がすこし濃くなって視認性が上がります!


そのほかにはこのように背景を引いて視認性をあげることができます。
このときに同系色を背景に引かないように注意しましょう!
グレー+黒

こんな色味選ばないよ!って思うかもしれないんですが写真を使った際に意外と使用してしまっている人が多いです!

これ、見覚え無いですか?写真が明るいので黒いのを載せるのはいいと思うんですが、その上に載せる色味が黒も文字。
こんな時の解消方は文字を白くするだけです!

全然見やすさが違うと思いませんか?
ここでも文字の色を決める時のポイントですが、明度をふたつにわけて「明るい色」には「暗い色の文字」,「暗い色」には「明るい色の文字」
これさえ押さえておけば完璧です!
オレンジ+赤

この色味に限らず同系色で組み合わせてしまうとどうしても視認性が落ちてしまいます。
その場合は同系色の色味を抜いてあげたり、白抜きにしてあげると一気に視認性が上がります!


緑+赤

この色味は俗に言うハレーションが起きてしまっています。
ハレーションを簡単に言うと目がチカチカしてしまう組み合わせです。
この場合は色味を変えてあげるか明度を変えてあげると見やすくなります!


少し見やすくなりますがハレーションの関係にある色味はできるだけ使わないようにしましょう!
見やすい色味の決め方
先ほどもちらっと話に出ていましたが基本を覚えてしまえばすごく色選びに困らなくなります!

暗い(濃い)色には明るい(薄い)色で

明るい(薄い)色には暗い(濃い)色で
これだけです!!
色に関する記事がほかにも色々ありますので是非是非見てくださいね!
この記事はARU氏の運営していた「ARULOG」より2021年8月に移管された記事です。
この記事を書いた人
ARU
デザイナー歴11年
ブロガーに寄り添うプロデザイナー
Kindleでブロガーデザイン本発売中
フォロワーが伸びるヘッダーをココナラで販売中
twitterでデザインのヒントを発信 @awdesign6
推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
あわせて読みたい
【CanvaPRO】有料プランでもっと快適・便利に【比較】
Canvaをお使いのあなた。写真やイラスト素材を選ぶときに、ほとんどが有料のマークが付いていてイライラ…こんな経験していませんか? 有料のCanva Proにすれば、このイ… Canvaを詳しく知る ➤
おすすめWordpressテーマ
私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。
SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。
あわせて読みたい
SWELLを2年使った感想を本音レビュー【WordPressテーマ】
お洒落なブログを作りたい─あなたはそうお考えではないですか? お洒落にするにはデザインセンスが必須。確かにそういうところもあります。なら、デザインのセンスがな… SWELLを詳しく知る ➤

お気軽にコメントください