PC・スマホ Youtube

【目立つ文字・背景色】色相環から考える配色・デザイン!組み合わせ例

最近ではパソコンを使用してYoutubeやニコニコ動画、ブログで使用するサムネを作成する人も増えてきたように思います。

サムネでは文字を使用することが多く、文字を目立たせることで見る人の気をひくことが可能となります。

そこで、今回は「目立つ文字」を作成するための配色をメインにまとめておこうと思います。

※今回は背景色の組み合わせ情報です。文字の縁取りの色の組み合わせは紹介していません。

目立つ文字色の基本

まず、目立つ文字を作ろうとして少し調べると「補色」というキーワードが出てくると思います。

補色とは

ある特定の色の正反対の色のことで、互いを最も目立たせることのできる色です。

ある特定の色を見続けた場合(数分間見続けたあと白色を見る)、色の残像が目に残ると思います。

その残像として残る色が正反対の色「補色」なのです。(MacやiPhoneで色反転という機能を使用するときに表示される色も元の色の補色です。)

色相環

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-21-12-26-28

補色をわかりやすく表したもが上の図の色相環で、円の反対側の色が補色です。

 

目立つ文字の色

「背景色」に補色はダメ

補色関係の組み合わせでは目立つことはできるのですが、読みにくくなってしまうものがほとんどです。

例として文字を赤色、背景を水色にしてみます。

目立つ色合い

目立つのですがものすごく読みにくくなってしまいます。

補色関係の色はオススメできません。

補色関係の文字・背景が気になる方はこちらのページから確認してみましょう。(http://www.wave440.com/php/iro.php

 

 

目立つ組み合わせ

補色がダメならば、文字を目立たせるための文字・背景色はどのように決めれば良いのでしょうか。

結論から言うと、文字・背景共に「彩度を低く・コントラストを高く」すれば見やすい目立つ文字を作ることができます。(とにかく目立たせたいのなら彩度を高くするのもあり)

文字サンプル
 
彩度低い(おすすめ) サンプル(990000) サンプル(000099) サンプル(999900) サンプル(009900)
彩度中間 サンプル(cc0000) サンプル(0000cc) サンプル(cccc00) サンプル(00cc00)
彩度高い サンプル(ff0000) サンプル(0000ff) サンプル(ffff00) サンプル(00ff00)
彩度低い サンプル(990000) サンプル(000099) サンプル(999900) サンプル(009900)
彩度中間 サンプル(cc0000) サンプル(0000cc) サンプル(cccc00) サンプル(00cc00)
彩度高い(おすすめ) サンプル(ff0000) サンプル(0000ff) サンプル(ffff00) サンプル(00ff00)

白色の背景の場合は、文字を彩度の高いものにすると目がチカチカして見にくくなってしまいますが、黒色の背景にするとみやすく目立たせることが可能です。

特に、「黒と赤」「黒と黄」の組み合わせは相性が良いです。

 

背景
 
彩度低い(おすすめ) サンプル(990000) サンプル(000099) サンプル(999900) サンプル(009900)
彩度中間 サンプル(cc0000) サンプル(0000cc) サンプル(cccc00) サンプル(00cc00)
彩度高い サンプル(ff0000) サンプル(0000ff) サンプル(ffff00) サンプル(00ff00)
彩度低い サンプル(990000) サンプル(000099) サンプル(999900) サンプル(009900)
彩度中間 サンプル(cc0000) サンプル(0000cc) サンプル(cccc00) サンプル(00cc00)
彩度高い(おすすめ) サンプル(ff0000) サンプル(0000ff) サンプル(ffff00) サンプル(00ff00)

以上のサンプルから、おすすめの目立つ背景・文字は「白色+彩度の低い色」もしくは「黒色+彩度の高い色」です。

 

おすすめ配色例まとめ

赤+黒」「赤+白」「赤+黄」「黄+黒」「黒+白」「黒+オレンジ

多くの色を使ってしまうとまとまりのない見た目となってしまうので、シンプルなもので十分だと思います。

 

目立つ文字テクニック

文字の途中で文字色、背景色を入れ替える

目立つ文字

文字の大きさを変える

など、色の他にも文字を目立たせるテクニックはあります。

今回の記事がサムネの文字のデザイン作りの参考になればと思います。

以上「【目立つ文字・背景色】色相環から考える配色・デザイン!組み合わせ例」でした。

関連記事:【Mac】Keynoteでのサムネの作り方まとめ

おすすめスマホアプリ ゲーム 勉強

2019/11/20

【頭を使うゲームアプリ】頭脳戦略・頭を使うゲームジャンル別紹介!

ゲームなんかしてると馬鹿になる! と、20年前の少年少女たちは、そんな感じで親に怒られた経験のある人も多いとは思いますが、今やゲームは頭脳を鍛えるものとして定着してきました。 ゲームをすると頭が悪くなるのではなく、頭がよくなるほどにゲームは脳を使うのです。 では、一体どんなゲームがどのように頭を使うのでしょうか。 今回は、そんな頭脳とゲームについて考えていきましょう。 (点数グラフ「レーダーチャート」の点数は個人的な意見ですが、「面白さ・評価点」は執筆時のApp Storeのアプリ評価点です) ストラテジ ...

続きを読む

PC・スマホ おすすめスマホアプリ ゲーム

2019/2/20

簡単ストレス解消法!精神的な疲れも吹き飛ぶおすすめスマホアプリまとめ

ストレスは万病のもと。 そうはいっても、ストレスのない生活というのはなかなか難しいものです。 ストレスは何をしても必ずありますから、完全にストレスを溜めないというのは不可能に近いのではないでしょうか。 それならば、いつでもどこでも遊ぶことのできるスマホゲームで、ストレスの解消をしてみましょう。 今回の記事では、ストレス解消アプリをタイプ別に、「現実逃避系」「のめり込み系」「現実世界でも役立つ系」「萌え系」の4タイプに分けて紹介していきます。 どれもインストール無料で遊べるものなので気になるものがあったら試 ...

続きを読む

PC・スマホ おすすめスマホアプリ ゲーム

2019/2/2

瞬時に神ゲーとわかるスクエニ・任天堂の最強スマホアプリまとめ!

皆さんは神ゲーと言われるゲームをプレイしたことはあるでしょうか? 神ゲーを見つけることは難しく、もしかすると一度も神ゲーに出会ったことがないという人も多いかもしれません。 そこで今回は、日本を代表するゲーム会社「任天堂」と「スクエアエニックス」のおすすめ神アプリを紹介していきます。 どれも神ゲー、しかも無料なので全てプレイをおすすめします。 任天堂・スクエニのおすすめの神アプリ STAR OCEAN -anamnesis- STAR OCEAN -anamnesis- 開発元:SQUARE ENIX IN ...

続きを読む

PC・スマホ おすすめスマホアプリ ゲーム

2019/8/17

おすすめ暇つぶし最強アプリゲームまとめ!漫画・脳トレ・エンジョイ

いまや暇つぶしの王道といえば、スマホアプリゲーム。 それこそ若者から高齢者に至るまで、駅やバス停などの「待つ場所」ではみなさん一心不乱にスマホをつついていますよね、もちろん僕もそうなのですが。 というわけで今回は、そんな暇つぶしに最適なスマホアプリをご紹介。 暇な時間が1日1時間あるとして、50年あればほぼ2年間にも匹敵する時間になるのですから、暇な時間を有益に使うのって結構大切なんですよね。 この記事でわかること ポイント 暇つぶしに最適な漫画アプリ 能力もアップする暇つぶしアプリ とにかく楽しみたい人 ...

続きを読む

PC・スマホ おすすめスマホアプリ

2019/1/9

【ツムツムなど】スマホアプリゲームで使えるおすすめタッチペン紹介

スマホやiPadなどのタブレットでタッチペンを使いたくなることはないでしょうか。 先日まで、僕は「道具に頼らず、いつでもプレイできるように指でしかプレイしない!(ツムツムなどのスマホゲームアプリ)」と変なこだわりを持っていたのですが、急に気が変わってものすごく欲しくなりました。 理由は、指でプレイしていると手汗をかいた時に反応しなくなるからです。 僕は特に手汗をかきやすく、長時間プレイするゲームや緊張感のあるゲームは本当に操作できなくなるほどです。 (手汗による反応の悪さは2年ほど我慢していましたが、つい ...

続きを読む

関連記事


-PC・スマホ, Youtube

Copyright© カレンちゃんねる Life is a game , 2021 All Rights Reserved.