ども。グラフィックデザイナーの「さん太(@PonkotsuSanta)」です。
タメになる情報を無料で公開してくれている素晴らしいブログがたくさんあり、いつも学ばせていただいています。
ただ……一つ残念に思うことが。
すごく内容の良いブログなのに、画像の「見せ方」が惜しいなぁ…と感じることがしばしばあります。
特にブログ記事の「看板」ともいえるアイキャッチ画像。
何となく画像を選んで、タイトル文字を乗せただけにしていませんか？
実は、いつもの画像に「ひと手間」加えるだけで、劇的に見栄えを良くすることができるんです。
※アイキャッチ画像とは、ブログ記事の左側などに出ている画像です。
そう思っている方も、SNSのカバー写真や、プレゼン資料などでも使えるテクニックなので、覚えていて損はありません。
・少しの手間でプロっぽい画像を作りたい
・参加者の目を引くようなプレゼン資料を作りたい
・読みたくなるようなブログのアイキャッチ画像を自作したい
3つの「メリハリ」で注目度アップ
人の目を引きつけて「注目」してもらうためには、簡単にいうと「メリハリ」を利かせる必要があります。
ビジネス書を読んでいると、大事なところは太字になっていたり、マーカーが引いてあったりしますよね？
それと同じで、目立たせたい部分には「メリハリ」をつけてやります。
明るさのメリハリ
明るい背景や画像に、明るい文字を置いてしまうと、背景と文字がなじんでしまって見づらくなってしまいます。
例えば下記の場合、ショッピングに関する記事なので「女性向けを意識してパステルカラーを使おう！」と考えたとします。
すると優しい印象にはなるものの、文字色のメリハリがなくなり、文章が目に入ってきません。
右の「After」では、文字色を暗くしてやることで、しっかり文字が見やすくなりました。
色のメリハリ
次に注意したいのが「色の使い方」です。
黒やグレーなどのモノトーンは使いやすく、他の色に合わせやすいメリットがあります。
クールな印象を与える一方で、「無機質で近寄りがたい」イメージを与えるので、使いどころには注意します。
下記の例では、「明るさのメリハリ」はきいていますが、全体的にホラーな画像になっています（汗）。
そのため、特に「黒」の使い方には注意してください。
背景に真っ黒やネイビーなど「暗色」を多用すると、全体的に暗く沈んで印象を見る人に与えてしまい、コンテンツ自体にネガティブなイメージをもたれる可能性もあります。
逆に色数をむやみに増やすと、色と色がケンカして見づらくなります。
先と同じ画像で色数を変えたものがこちら。クリックしたくない毒々しさを放っていますね…。
そのため、モノトーン＋モノトーン以外の1色を「差し色」として使うパターンが効果的です。
特にモノトーンを基調にしたデザインはシンプルで洗練されているイメージを出せる反面、「単調でつまらない」絵面になってしまいます。
そこに差し色を加えることで、単調さをやわらげ視聴者の「目を引く」効果を狙えます。
今回の例だと、写真の女性に「赤」と「青」の色があるので、「赤色」を差し色として使うことにしました。
また、赤が引き立つように、背景はわずかに青系のグラデーションをかけています。
スマホやパソコンの画面で見る「赤色」は、鮮やかすぎて目に優しくない強い印象を与えるので、鮮やかさを少し落としてやると落ち着いた印象にまとまります。
文字や画像サイズのメリハリ
3つ目は、文字や画像の「大きさ」です。
下記、左側の例は「よく見かける」タイプの画像ですが、タイトルが少し長いので、要点がすぐ目に入ってきません。
スマホの画面は小さいので、スマホでブログやWebサイトを見る方にとって、小さい文字の羅列は読みにくいです。
この場合は、要点である「7つの戦略」を強調するとメリハリがきいて目を引く画像になります。
また左の例は、人物写真が大きいので、どうしてもそちらに注意が向いてしまいます。
人は無意識に「人物の顔に注目する」習性があるためです。
そこで、文字をメインで読んでほしい場合は、人物の写真を小さくしてバランスを取ります。
見せたいポイントを強調するコツ
人が短い時間で処理できる情報には限界があります。
そのため「あれもこれも」と情報を詰め込んでしまうと、見づらい画像になってしまいます。
上手に情報を「引き算」して、見せたいポイントが引き立つように工夫しましょう。
キーワードを絞り込む
人が一瞬で認識できる文字数は、個人差がありますが大体10文字くらいと言われています。
そのため、画像に入れる文字は「キーワード」を中心にできるだけ短くします。
タイトルやネーミング。キャッチコピーの付け方についてはこちらの記事が参考になります。
下記も、記事タイトルそのままではなくてキーワードを絞り込んで強調したもの。
これだけ文字数を削っても、意味は十分伝わります。
背景画像に文字を埋もれさせない
写真に文字を重ねるとき、そのまま文字を乗せただけでは読みづらくなります。
そんな時は、背景に半透明な四角形などを置いてやると、背景を残したまま文字が見やすくなります。
文字(フォント)や写真選びのコツ
アイキャッチ画像の印象を大きく左右するのが「文字」と写真（またはイラスト）です。
今は無料のフォント画像素材のサイトが充実していて「何を基準に選んだらいいかわからない」という方も多いと思います。
膨大な素材の中から、効果的なものを手早く選び出す、ちょっとしたコツをご紹介します。
フォントの選び方
フォントの種類はたくさんありすぎてどれを使っていいか迷いますが、大きく分けるとたった2つ。
「明朝体」と「ゴシック体」です。
昔、学校の美術の授業でも出てきた言葉ですね。
明朝体は、繊細さ、優美さ、品の良さ、伝統的、女性的なイメージを与えます。
ゴシック体を使うと野暮ったくなる場面も、スマートな印象にしてくれます。
一方で、明朝体はどうしても弱さや儚さを感じさせてしまいます。
逆にインパクトのあるデザインにしたい場合は、ゴシック体を使います。
ゴシック体は、強さ、自信のある様子、ポップさ、モダン的、男性的なイメージを与えます。
また、同じフォントでも、文字自体の太さを変えらることで与える印象が変わってきます。
太い文字 → インパクト、自信の強さを感じさせる
下の画像は、文字の太さを変えただけですが、受ける印象はまったく違うものになります。
写真(イラスト)の選び方
次に写真やイラストの選び方です。
「アイキャッチ」というからには、なるべく目を引く画像を選びたいもの。
その時の判断基準として、「見なれない」画像や「ちょっとおもしろい」画像を選ぶのがポイント。
人はどうしても、見なれないもの、違和感を感じるものに注目してしまいます。
下の例は、左の画像でも悪くはないのですが、シュールで面白い写真を見つけたので、こちらをベースにしました。
また、無機質な「モノ」の写真よりは、「動物や人物」が写っている写真の方が注目を集めやすくなります。
①視線をこちらを向けた人物
②横を向いた人物
③後ろを向いた人物
④視線をこちらを向けた動物
⑤横や後ろを向いた動物
⑥静物(物撮り写真)
⑦風景
⑧色だけの画像（ベタ色やグラデーション）
また、シリアスなテーマは、そのまま現実感のある写真を使うとイメージが暗くなりすぎます。
そんな時は、コミカルなイラストや動物の写真と組み合わせて、悲壮感をやわらげるのも手です。
私がブログ用によく使う無料素材サイトが「pixabay」。
無料サイトでありがちな「撮りっぱなし」の写真ではなく、使いやすくトリミングしたり加工されたクオリティの高い写真素材が揃っています。
海外発のサービスながら、日本語で画像検索できるのも助かります。
無料で使えるグラフィック作成ツールは「Canva」がおすすめ
デザイナーが主に使うグラフィック制作ツールはAdobe社のIllustratorとPhotoshopですが、どちらも高額。
ブログのアイキャッチ画像を作るだけであれば、無料でできるデザインツール「Canva」がおすすめです。
Canvaで作ったブログのアイキャッチの作例
「Canva」はプロ用ツールほど凝ったグラフィックは作れませんが、上記レベルの画像であればほんの数分で作れてしまいます。
【まとめ】少しの手間で目を引く「魅せる」画像は作れる
以上、「目を引く」アイキャッチ画像を作るテクニックについて、実例を混じえつつ紹介しました。
アイキャッチ画像はプロに外注すると何千円もかかってしまうので、自分で少しでも良いものが作れると助かりますよね。
今回のコツを実践するだけで、今までのアイキャッチ画像が見違えるものになると思います。
ブログを見ていると、何となく写真を選んで文字を置いているな、というアイキャッチがたくさんあります。
つまり「少しの手間」をかけるだけで、その他大勢から抜きん出て「目を引く」画像になるのです。