初心者もできるよ！読まれる見出し画像をつくる”秘伝のワザ”

「画像はどうやってつくるの？」

最近そう聞いていただけることが多く、めちゃくちゃ嬉しいです。私はプロのデザイナーさんの仕事を真横で見てきて、どんな風に画像に文字を入れると読みやすいか、けっこう真剣に考えてきました。

私はイラストレーター・フォトショップなど、専門的なソフトはまったく使えず、使えるのは「パワーポイント」のみ！

それでもnoteの見出しに入れる画像や、バナー広告、YouTubeのサムネイル画像はつくれちゃいます。でもそこにはちょっとしたルールがあります。

今回はコピーライターの私なりに考える「初心者でもつくれる読みやすい画像のコツ」をご紹介したいと思います！この記事の続編としてぜひ、おたのしみください。

●note見出し画像に文字を入れるメリット

人の脳はなぜか文字を見つけ出すようにできているらしく、画像の中でも特に文字に目がいきます。

そのため見出し画像に文字が入っていると、文章の中身がわかりやすくなります。写真やイラストで伝えられる情報も大きいのですが、具体的で明確なのは文字だからかも？noteのホーム画面や、SNSで、見出し画像に文字が入っていると読んでもらいやすくなります。

●読みやすい画像のレイアウト

目線の流れをつくる

読みやすい画像、読みやすい広告、みんな目線の流れが設計されています。ネットの見出し画像・サムネイル画像の場合は、横書きにすることが多く、左ぞろえか中央ぞろえにテキストを合わせると読みやすくなります。

左ぞろえの場合

左上からはじまり、無意識に３行が目に入るようになっています。

中央ぞろえの場合

こちらも同様で左上からはじまり、写真をはさみながらも、なんとなく文の流れが２行目に入ってきます。読みやすさの点でいうと、見出しの文字は３行程度におさめることがおすすめです。

重要な文字は「左」に

左ぞろえ、中央ぞろえ、いずれもいちばん最初に目が入るのが左側です。そのため、左側に重要な文字を置くようにします。
この見出しの場合は、「描けない人」に向けたもの、そして「イラスト」について書いてある文章だと一目瞭然にしたかったため、その２つのワードを左側に入れました。

noteのテキストで表示されるタイトルと、画像に入れるタイトルは、必ずしも同じ文字が入っていなくても私はいいと思っています。あくまで画像に入れるタイトルは、テキストタイトルの要約だと私はとらえています。

読みにくい改行の例

こんな感じで、ソフトの改行そのまんまで入れると読みづらくなります。「イラスト」なのに直感的に「ラスト」と読めてしまったりするし、「れる」って何？と読者に一瞬、混乱させてしまうことに。
ひとつの単語は改行で分解させないことがおすすめです。

位置をそろえる

左ぞろえの場合は、左側の位置がちゃんとそろうことで、目線が下にスムーズに移動しやすくなります。中央ぞろえの場合は、文字通り中央でそろえます。

等間隔にそろえる

上と下、右と左、それぞれの空いたスペースを等間隔にすると、画像に安定感が出ます。上の画像では、黄色と黄色、ピンクとピンク、それぞれが等間隔になっています。

●文字を目立たせるポイント

重要な文字だけ大きく

なるべく見出しに入れる文字は少ないほうが読みやすくなります。でも長くなる場合、上記のように重要な文字だけ大きくするのもひとつの手です。

こんな感じで、すべての文字を同じ大きさにした場合よりも、目に入って脳が理解するまでのスピードが速くなります。

色を変える

大きくするだけでなく、色を変えてみると、さらに目立つようになります。どんなにこのサムネイルが小さく表示されても「わかりやすい文章」について書いた記事であることが、一目瞭然になります。

点、もしくはアンダーライン

さらに目立たせたい場合は、この「圧倒的」の部分みたいに、上に点を入れるやり方も私はよくやります。

あとは重要な文字にアンダーラインをひいたり。

ただ点もアンダーラインも、それをする文字が多すぎるとくどい印象になるため、全体のバランスを見ながら調節します。

●写真の上に文字をいれるポイント

空白の部分は文字を入れやすい

写真に文字を入れる場合、いちばん簡単なのは、上記のように文字を置いても読みやすい余白がある写真を選ぶことです。でもなかなかそんな写真ばかりじゃない！そんなとき、私がよくやるのが下記の２つの方法です。

余白がない写真は「ざぶとん」をしく

写真に文字を入れる余白がないとき、このタイトルの下にある白い背景のようなもの（通称：ざぶとん）をしくと、一気に読みやすくなります。上の場合は、この白いざぶとんを少し透過させて抜け感を出しました（笑）

吹き出しは「フキダシデザイン」でダウンロードした素材を使っています。このサイト私は超愛用していて、画像作りにはとてもおすすめです。

ふきだし素材専門サイト「フキダシデザイン」 – フキダシ素材が1000以上集まるサイト

シャドウで文字がくっきりする

じつは上記の文字には、読みやすくするためにシャドウを入れています。こんな感じのシャドウです。パワポでもできます。

文字にシャドウを入れることで、普通に文字を入れた下記の場合より、文字がくっきりと浮き上がって読みやすくなります。

シャドウあり

シャドウなし（とくに児・役・つが読みづらい）

多いことを伝えたい時は写真をコラージュ

写真で「多くあること」を伝えたい場合、こんな感じで写真をコラージュする方法もありです。画像全体からなんとなく、にぎやかな感じが伝わります。ここに文字を入れたい場合、先ほどの「ざぶとん」や「ふきだし」を重ねると読みやすくなります。

ーーー

今日は読みやすい画像を作るコツをご紹介してみました！
私もまだまだ試行錯誤しているので、また新たにわかったことがあれば書いてみたいと思います。

それではすてきな水曜日を。あと半分！

小森谷 友美

noteで書ききれない話はTwitterで

画像の作り方、こちらも参考になるかも？