デザイン

【クリック率が上がる!】文字が読みやすいアイキャッチの作り方

ブログのアイキャッチを作成していると
こんな悩みが出てきませんか。

文字と背景のバランスが悪い
文字が背景に負けていて、読みづらい
理由はわからないけど、文字がダサく見える

アイキャッチって、慣れないと作成するのに時間がかかりますよね。
ブログの内容にあった写真素材が見つからなかったり、
素材が見つかっても、文字を入れたら、イメージと違ったり。
日々、試行錯誤の連続です。

アイキャッチには…
【読者の関心を高め、ブログをより魅力的に見せる】役割があります。
読者の目に最初に目に入るのは、アイキャッチになるので、
いわば「ブログの顔」と言っても過言ではありません。

「顔」ということは、アイキャッチさんを自分に置き換えると、ここに気合が入っていないってことは、スッピンで外出しているようなもんってことですよね。怖い。この世の終わりかも。

そこで本記事は、私が試行錯誤をした結果、
文字が見えやすくなる方法を見つけたので、それらを紹介していきます。

ちなみに、今回は、私が写真を使用してアイキャッチを作っているため、
背景に写真を使った際に、文字が読みやすくなる方法を説明しています。

最後まで読んでいただければ、もう明日から文字の装飾の悩むことなく、
サクサクとアイキャッチを作れるようになるはすです。

ぜひ、最後まで目をとおしていただけると、うれしいです。

【クリック率が上がる!】文字が読みやすいアイキャッチの作り方

まず大前提として、「このブログ読みたい」と思ってもらえるには
アイキャッチに書いてある文字が瞬時に読みとれないないといけないですよね。

そのためには、まず“読みやすい”と感じられる文字を演出する必要があります。

読みやすさ=コントラストが強い

アイキャッチに文字を入れた際に“読みづらい”と感じる原因はコントラストにあります。
コントラストの定義は次のとおりです。

コントラストとは、明るい部分と暗い部分の「明暗の差」

具体的に、どういうことか見てましょう。

こちらの画像を見て、皆さんはどう感じましたか。
背景が色も文字も明るいですよね。コントラストがほぼないので、
文字が背景と同化していて“読みづらい”と感じたのではないでしょうか。

特に「読」のところは、雲が多いところなので、白×白で読みづらいですよね。

しかし、「そう言われても、この背景が使いたいんだよ~!」と
どうしても譲れない時もありますよね。

大丈夫です、この背景を使ったまま、読みやすいアイキャッチ作れます!

次に背景を活かしながら、上手にコントラストを出して、
読みやすいアイキャッチを作成する方法を2つご紹介します。

世界観を活かしたコントラストの演出

先ほど説明をしたところ、【読みやすさ=コントラストが高い】とお伝えしましたが、
では、具体的にそれをどうデザインに落とし込むといいのか。

単純に考えると、文字の色を黒にすればいいことになります。

しかし、これを見て、皆さんはどう感じますか?
読みやすいけど…

昼間の空の淡い色に黒い文字って違和感

って思いませんか。

淡い水色の空の背景に真っ黒の文字っていうのは、
なかなか言語化が難しいですが、しっくりこないです。
自然界で、青空の中に、こんな真っ黒なものが浮かぶことがないからでしょうか…

もちろん、背景が写真ではない場合は、コントラストをつけるためには、
単純に反対色や補色を使うという手法で大丈夫です。

しかし、写真を使う場合は、それだけでは違和感は拭えませんでした。

座布団を入れる

この違和感、どうしたら解消されるだろうか…
私が、色々と心が折れそうになりながら、色々と試したところ、
文字の背景だけに塗りを入れると、読みやすいことがわかりました。

そして、この塗りを入れることを
専門用語では「座布団を入れる」と言うそうです。おもしろい。

この手法を使うと、文字が白いままでも違和感はないですよね。

ちなみに「座布団」は、これまた真っ黒だと違和感が出てしまうので、
不透明度を低め(こちらの画像は13%)に設定してください。
※不透明度は100%だと真っ黒、低くすると、透明度が強くなります

影をつける

そして、実はもっとオシャレな手法も発見しました!
それは【影をつける】ことです。

この影があるだけで、文字が浮かび上がってきているように見えますよね。
コントラストが出るよう、背景と文字の間に薄っすらと色を足すだけなのに
こんなに違うとは、私もビックリしました。

番外編:NG例

ちなみに文字を縁取るのは、なぜかダサい結果になりました。

ダサい原因はわかりませんが、やっぱり黒いで縁取ったからでしょうか…
恐らく、背景が無地の白だったら、違和感は全くないと思います。

やはり、いくらコントラストがあった方がいいとは言え、
写真を使う場合は、背景とあまりにも違う色を使うと、しっくりにこないのかもしれません。

まとめ

いかがだったでしょうか。

読みやすさは、コントラストを高くすることで、演出できます。
これを覚えておいて、いただければ、今回は背景に写真を使った例をご紹介しましたが、背景が無地の場合でも、もちろん応用は可能です。

そして、写真を背景に使いたいときには…

写真背景に文字を入れる時のポイント

文字の背景だけに塗り(座布団)を入れる
文字に影を入れる

という手法を取り入れていただくと、一気に垢ぬけた印象を作ることができます。

みなさんも実際に色々な写真背景を使って、その効果を確認してみてくださいね。

LINE開設しました!

 

期間限定でYouTubeで視聴者を増やす16のテクニックまとめた記事をプレゼントしています。

この機会に、ぜひご登録ください!