ブログアイキャッチの綺麗な作り方とコツ【Canvaでもできる】
2022.03.31WEB制作
SEO対策の一環としてブログやコラムの作成をしていくことと思います。その際に必要となるのがブログ一覧や記事のトップページに表示されるアイキャッチ画像と言われるもの。アイキャッチ画像を作り込むことで訪れたユーザーのクリック意欲を高められる狙いがありますし、サイトとしても華やかになっていきます。今回は誰でも簡単に綺麗にアイキャッチ画像を作る方法を紹介したいと思います。
アイキャッチ画像を作るツールを紹介
PowerPoint
アイキャッチ画像の比率に合わせてスライドのサイズを設定すれば問題なく作れます。画像や文字の切り貼りがしやすく、図形の透過なども行えるので比較的綺麗に作成が可能です。挿入画像の編集がほとんどできないのが難点ですが。
イラストレーター,フォトショップ
有料ソフトなので、アイキャッチ画像を作るためだけに利用するのはおすすめはしません。自由度が非常に高くスキル次第でハイクオリティなアイキャッチ画像が作成可能。ただ、労力的に効率化とはちょっと離れてます。
Canva
無料版と有料版に分かれていますが、無料版でも十分すぎる作業が行えます。スマホアプリとWEBページと連動しており、移動しながらスマホで作るなんてこともできます。無料で使える画像、イラスト、図形の種類が豊富なのでアイキャッチ画像作成はこれで賄える事がほとんとです。TwitterやInstagramの投稿用画像を作成する際にも役立ちます。ピクセルサイズを自由に指定できるため、どんな比率の素材も作成する事ができます。
参考：canvaのサイトへ遷移（別サイトへ移動します）
アイキャッチ画像を綺麗に作るコツ
フォントはGoogle Fonts中心に
Canvaでは様々なフォントを選ぶ事ができるため、見慣れないフォントなどデザイン性を感じてついつい選んでしまいがち。特に「けいふぉんと」、「じゆうちょうフォント」、「せのびゴシック」、「おつとめフォント」などは人気があるようです。ですが、それらのフォント使い続けるほどダサく見えがちなので要注意です。
フォントはWEBサイト上でよく使われるGoogle Fontsを中心に選ぶのが無難です。というのもホームページ上のテキスト文字はゴシック調がほとんどで、無料WEBフォントでいうとGoogle Fontsの「Noto Sans」やM+に近いからです。アイキャッチ画像もフォントデザインを統一させることで浮かないようにする事ができます。
背景素材は透過や明るさで調整する
背景に使う画像などはそのまま使うと文字が見づらい傾向にあります。Canvaの機能で「透過」や「画像編集の明るさ調整」というものがあるので、画像自体を薄くしたり、明るさを落として暗めにするといったことをすると文字が映えるようになります。文字自体に影をつけるエフェクトを付与したり文字色を変えるというのもおすすめです。
テキストは多く盛り込まない
ついついアイキャッチ画像を作っていると、記事のタイトルに合わせてテキストを盛り込みがち。残念ですが、アイキャッチ画像は視覚的要素が強いので中の文章を読んでくれるユーザーはほとんどいません。それどころか、文字が多すぎると何の記事なのかを瞬間的に理解する事ができません。
タイトルは短くし、「何が書いてるあるの？」「そんな内容が書いてあるの？」と思わせるくらいが丁度良く、結果的に収まりのあるアイキャッチ画像にする事ができます。
数字は入れないように気をつける
おすすめ○選！といった記事を作った場合、数字を強調させたい気持ちは分かります。ですが、数字をアイキャッチ画像に入れると、紹介コンテンツの増減に合わせてアイキャッチ画像を変更する手間が発生します。
作り直すのも面倒ですが、SNS系のデベロッパーツールでキャッシュをクリアするなどの作業も合わせるとちょっと効率が良いとは言えません。普遍的な数値以外は入れないようにするのがベストです。
上記のページは7種のサイトを紹介しているページですが、今後追加更新する可能性を踏まえて7選とは入れていません。ちょっと素材を散りばめ過ぎているので若干うるさい印象はありますが。
余白をうまく活用する
アイキャッチ画像を作る際に伝えたいキャッチコピーを意識しぎてバランスを見失っていませんか？ブログ機能を使うほとんどの人がワードプレスを使ったサイトで管理されていると思います。画像の余白などを意識しないと記事一覧などアイキャッチ画像が表示される際に文字が見切れてしまう、読みづらいなどの障害が起きます。
アイキャッチ画像に添えるテキストは左右上下から少し離れた中央に寄せるように作成するようにし、一行ごとの余白も取ることでバランス良く見やすいものにすることができます。
