ブログを書いているみなさんー！
記事を書き終わって、更新する前。
ブログのアイキャッチ画像のことでこんな悩みはありませんか？
- アイキャッチ画像の効率いい作り方がわからない
- 同じようなデザインになってしまう
- 一覧で見たときに色やテイストがバラバラ
- ぶっちゃけアイキャッチ画像って必要なの？
アイキャッチ画像とは、ブログ記事のトップに設定される画像のこと。
その名の通り「目を惹きつけて」あなたのブログへ誘導してくれる大切な役割があります。
この記事では、当ブログでアイキャッチ画像を作るときに心がけている「統一感のあるアイキャッチ画像を作る方法」をお伝えしていきます。
- 手間をかけないアイキャッチ画像の作り方が知りたい
- デザインに毎回悩みたくない
- 見る人を飽きさせたくない
- また訪問したくなるようなきれいなブログにしたい
- 自分のブログらしさを出せるアイキャッチ画像にしたい
この記事では、無料で使用できるデザインツール「Canva」を使ってアイキャッチの作り方を説明していきます。
オンラインやアプリで手軽に利用できるのでオススメです。
まだ使用したことのない方は、ぜひ登録して使ってみてくださいね。
アイキャッチ画像にお悩みの方はこちらもどうぞ！
Contents
アイキャッチ画像の作り方を工夫すれば、SEO効果も！？
ブログで一番大切なのは、もちろん書かれている内容です。
ですが、どんなに有益な記事を書いても読まれなければ意味がありません。
そこで役に立ってくれるのがアイキャッチ画像です！
優れたアイキャッチ画像にはこんな効果が期待できます。
- SNSや画像検索からの流入が増える
- 直帰率が下がる
- 滞在時間の増加
SNSや検索からの流入が増える
twitterでは、URLを投稿すると自動的にアイキャッチ画像が表示されます。
たくさんのツイートの中で埋もれないためにも、ぱっと目につくアイキャッチ画像がかなり重要です。
例えば、twitterではアイキャッチ画像のあるなしでこんなに印象が違います。
シンカリオンが好きすぎて、今まで作ったあみぐるみやキューピーなどで作ったキャラクターをまとめてみました！
よかったらご覧ください♡#シンカリオン #みんなでシンカリオン見ようぜ「シンカリオン」のキャラクターをハンドメイドで作ってみた – マリエノート
https://t.co/Oh23QJwpGH— 大川マリエ🍀居心地いいブログ作ります✨ (@marie_okawa) May 24, 2019
シンカリオンが好きすぎて、今まで作ったあみぐるみやキューピーなどで作ったキャラクターをまとめてみました！
よかったらご覧ください♡#シンカリオン #みんなでシンカリオン見ようぜ「シンカリオン」のキャラクターをハンドメイドで作ってみた – マリエノート
https://t.co/Oh23QJwpGH— 大川マリエ🍀居心地いいブログ作ります✨ (@marie_okawa) May 24, 2019
ちなみにtwitterで表示される画像（twitterカード）には、「小さめ」と「大きめ」の２パターンがあります。
目にとまりやすい「大きめ」のスタイルがおすすめです。
各ワードプレステーマのマニュアル等で設定を確認してみてください。
JINの場合はこちら
OGP設定（SNSに関する設定）について
（JIN マニュアル)
また、検索で調べものをしていて、なかなか思った情報が見当たらないとき。
画像検索から、目的に合うサイトを見つけた経験はありませんか？
画像検索からアイキャッチ画像を見て「自分の知りたい情報があるかも」とブログを訪れてくれる人がいるかもしれません。
直帰率が下がる・滞在時間が増える
検索からブログを開いた人が、最初に見る画面はこんな感じ。
検索からブログにたどりついたとき、読者が一番最初に目にするもの。
それがアイキャッチ画像です。
画像を見て「自分の知りたい情報が得られそうだ」と思えばこのまま読み進めてもらえます。
一方、そうでない場合は離脱につながってしまいます。
必ず伝えたい内容に合ったアイキャッチ画像を用意しましょう。
そして、目的の記事を読んだあとも、関連記事や人気記事を読んでくれる可能性があります。
アイキャッチ画像とSEO効果についてもっと知りたい方は、こちらのブログもおすすめです。
それでは次から、アイキャッチ画像の作り方を説明していきます！
統一感のあるアイキャッチ画像の作り方
時間をかけずに統一感のあるアイキャッチ画像を作るには、「自分の中でルールを決めておく」ということが大切です。
ルールを決めておくべきものはこの３つ。
- フォント
- 色
- テンプレート
順に説明していきたいと思います。
１．ブログに合ったフォントを決めよう
アイキャッチ画像に適したフォントは、サムネイル等で縮小されたときにも見やすい、やや太めのフォントです。
自分のブログの雰囲気に合ったフォントを決めておきましょう。
私はこの３種類を決めておいて定番にしています。
- メインタイトル用フォント（大きめの文字）
- サブタイトル用フォント（小さめの文字）
- 英数字用フォント
無料で使用できますよ
例えば、このブログで使用しているフォントはこんな感じです。
- Rounded M+ Heavy （メインタイトル用フォント）
- Rounded M+ Black（サブタイトル用フォント）
- Chonburi（英数字用フォント）
Canvaで使える、アイキャッチ画像にオススメのフォントも紹介しておきます！
ブログのジャンルやテイストによって参考にしてみてくださいね。
女性らしい柔らかさと優しさのある丸ゴシック系。
ママブログや女性むけブログにおすすめです。
- Rounded Mシリーズ
- にくまる
- 源柔ゴシック
- コーポレート・ロゴ丸 など
美容系ブログなどにオススメの都会的な洗練されたイメージのフォント。
ちょっと線が細いので、色や配置に工夫してみてくださいね。
- 源暎ラテミン
- ロゴたいぷゴシック
- しねきゃぷしょん
- あおぞら明朝 など
元気でポップなフォントは親しみやすい雰囲気づくりにピッタリ。
特徴的なフォントが続くと疲れるので、サブタイトルには読みやすいフォントを組み合わせて。
- けいふぉんと
- じゆうちょうフォント
- ニコモジ など
かっちりとした雰囲気を出してくれるゴシック系。
太いゴシックは力強いイメージ。シンプルにするなら細めのゴシックも◎
- Saurce Han Sans JPシリーズ
- Noto Sans シリーズ
- コーポレート・ロゴ
- M+シリーズ
アイキャッチ画像にオススメしたくないフォントもあります。
エクセルやパワーポイントなどを使用して作っている方はご注意！
- 創英角ポップ体
親しみやすいフォントですが、一気に公民館のイベント感が出ます。
そして謎のレインボーと謎の影は本当に避けて。全力で逃げて。
- MSゴシック など
何の変哲もない、一時期前のWindows標準のゴシック体。
長い文章を読むには良いですが、デザインには不向きなフォントです。
２．よく使う色を決めて「ブランドキット」に設定しよう
フォントの次に決めてほしいのが、「よく使う色」です。
アイキャッチに取り入れる色を決めておくことで
- デザインの違うアイキャッチ画像どうしでも色味の統一感が出る
- ブログに合うアイキャッチ画像が作りやすくなる
などのメリットがあります。
よく使う色として、決めておくと便利なのがこちらの色です。
- 文字色
- メインカラー（ブログでよく使う色）
- アクセントカラー（ブログでアクセントとして使う色）
- 背景色
アイキャッチ画像に使う文字の色は、淡い背景に対して読みやすい
黒・ダークグレー・紺色・こげ茶などがオススメ。
黒は重たい印象を与えるので、真っ黒よりは少しグレーがかっているほうがマイルドな印象になります。
ブログで使っている色をアイキャッチ画像にも取り入れると、ブログ全体がまとまります。
ブログでどんな色を使っているかは、WordPressの管理画面から確認しましょう。
JINの場合は外観→カスタマイズ→カラー設定から確認できます。
WordPressの管理画面難しければブログとおそろいの色で。
アイキャッチ画像で使いたい色が決まったら、Canvaの「ブランドキット」という機能を使うと便利です。
（Web版Canvaから使用できる機能です）
「ブランドキット」は、ロゴ・フォント・カラーパレットなどが保存できる有料機能ですが、３色までなら無料で使用できます。
このようにブランドカラー３色を設定しておきます。
そうすると、作業画面のカラーパレットに常にこの３色が表示されます。
ブランドカラーがすぐに取り出せるので便利！
デザインの違うアイキャッチ画像でも、共通の色を使用することで統一感が出やすくなりますよ。
ブログに合う色が見つかったら
「ブランドキット」使ってみてね！
３．よく使うテンプレートを決めよう
記事の内容に合わせて、毎回テンプレートを探すのは大変ですよね。
そんなときは、よく使うテンプレートを決めてしまいましょう。
実は、このブログで使用しているテンプレートはたった５種ほど。
配置を変えたりするアレンジだけで使いまわしています。
- ①丸い半透明にタイトルを乗せる
→丸の位置や角度を変えてアレンジ - ②長方形の半透明にタイトルを入れる
→長方形の位置や色を変えてアレンジ - ③画面を区切ってタイトルを入れる
→区切る位置を変えてアレンジ
- ④写真の余白に文字を入れる
→写真と文字の位置を変えてアレンジ - ⑤プレゼンテーションテンプレートを使う
→数種のパターンから、用途に合わせてアレンジ
毎回違うテンプレートを使用している方や、毎回同じテンプレートを使用している方もいると思いますが、「数種類のテンプレートを使いまわす」ことには、こんなメリットがあります。
- 毎回新しいテンプレートを選ぶ手間と時間が省ける
- 毎回全く同じではないので飽きにくい
- 雰囲気の似たテンプレートを繰り返すことで
ブログのテイストや統一感が出てくる
でも、いきなり使い勝手のいいテンプレートを選ぶのは難しそう…？
そんなときは、Canvaの「プレゼンテーション用テンプレート」を使うのがオススメです！（上の表の⑤のパターン）
次は、プレゼンテーション用テンプレートを使ったアイキャッチ画像の作り方を具体的に説明していきます。
アイキャッチ画像の作り方を実際に説明します
プレゼンテーション用テンプレートは、その名のとおりプレゼン資料などを作るためのテンプレートです。
テーマに沿ってコーディネートされたデザインがセットになっているので、初心者でも簡単に統一感を出すことができます。
自分のブログに合ったテンプレートを見つけて、アイキャッチ画像にアレンジしてみましょう。
プレゼンテーション用テンプレートでアイキャッチ画像を作ろう
Canvaのホーム画面から、右上の「カスタムサイズ」を選択します。
自分のブログに合うアイキャッチ画像のサイズを指定。
「新しいデザインを作成」ボタンを押します。
JINの場合は横760px：縦428pxが最適です。
アイキャッチ画像の大きさはどれくらいが最適？
（JIN マニュアル）
デザイン作成画面でテンプレートを選択し、「プレゼンテーション」と検索します。
マウスを置くと「1/10」とか「1/25」のように、ページ数が表示されるのが、プレゼンテーションテンプレートの特徴。
クリックすると一覧を見ることができます。
今回はこんなテンプレートを選んでみました。
アイキャッチ画像に適したテンプレートを選ぶときのポイントはこちら。
- 写真が大きく表示できるもの
- なるべくシンプルなもの
- バリエーション豊富なもの
（全体写真用・複数写真用など）
写真の差し替え、色の変更も可能。
有料のテンプレートも、Canvaマークのついた画像を差し替えれば無料で使用できます。
写真を入れ替えて、タイトルを入れたところです。
もともとプレゼンテーション用のテンプレートなので、アイキャッチ画像に適した文字の大きさに変更します。
（※どんなパターンのテンプレートでもいけるよ！という例で、今回は２種のアイキャッチ画像を同時に作っています）
ここで、最初に決めたフォントと、ブランドキットに登録した色に変更しました。
これでブログに合うテイストのアイキャッチ画像の完成です。
ダウンロードは、右上の下矢印のアイコンからできます。
ファイルの種類は「PNG」がオススメ。
「すべてのページ」を選択するとzipファイルでまとめてダウンロード。
指定したページを１枚だけダウンロードすることもできます。
アイキャッチ画像の作り方で覚えておくと便利
新しくアイキャッチ画像を作るときに時短にするには、「コピー」して作ること！
ホーム画面から、前回作ったアイキャッチ画像の作成画面を開き、
「ページをコピー」または「新しいページを追加」で、ページを増やします。
最近作ったアイキャッチ画像からコピペできるので、
「あれ、前回何のフォント使ったっけ…」
「文字の大きさ、どれくらいだっけ…」
と、ならなくてすみます！
別のテンプレートを使うときも
コピーから作ると便利です。
アイキャッチ画像の作り方が難しい！というときは
統一感あるアイキャッチ画像の作り方、いかがでしたか？
twitterでも、アイキャッチ画像の話題やCanvaの使い方についてツイートしています。
大川マリエ（@marie_okawa )
「やっぱり自分では作るのは難しい」
「自分のブログに合ったアイキャッチ画像がわからないという方」へ！
アイキャッチ画像にまつわるサービスを、ご用意しています。
- ［ターゲットに届く］アイキャッチ画像製作
- ［読みたくなる］有料ノート用アイキャッチ画像製作
- ［あなたのブログ専用］オリジナルアイキャッチテンプレート
- ［こうすれば良くなる］アイキャッチ＆ブログデザインアドバイス
- ［丸ごとおまかせ！］ブログトータルコーディネート など
サンプルや料金などくわしくはこちらのページをご覧ください。
お問合せ・ご質問等も受け付けております！
