【おしゃれなのに時短】ブログのアイキャッチ画像の作り方5ステップ【初心者こそこだわりたい理由】

ブログのデザイン
ブログの記事を書くだけで大変なのにアイキャッチまで時間をかけたくない…。
簡単だけどおしゃれに見えるアイキャッチの作り方を知りたい。
そういった方に向けてブログのアイキャッチ画像の作り方を解説します。

「時短&おしゃれに見える」を同時に叶える方法は単純です。

  • テンプレートを統一する
  • 配色を統一する
  • 高品質なフリー画像を使う

この3つを守るだけでブログのトップページが整っておしゃれに見えます。

私はこれまで100記事以上ブログを更新してきましたが、毎回アイキャッチ画像を考えるのがとても大変でした。

しかし毎回同じテンプレートを使うようになってから時短になったのと、ブログのトップページが美しくなりました。

<アイキャッチ改善前>
 

 
<アイキャッチ改善後>
 

 
特にブログ初心者の方はおしゃれなアイキャッチにこだわると、読者の滞在時間を上げることができます。

ブログ初心者の方にもわかるよう図を使って解説しますのでぜひご覧ください。

ブログアイキャッチの作り方

さっそくブログのアイキャッチ画像の作り方を説明します。

  1. CANVAを利用
  2. サイズを指定
  3. テンプレートを選ぶ
  4. アレンジする
  5. ダウンロードと圧縮
ひとつずつ手順を追って解説します。

手順①CANVAを利用


 

アイキャッチ制作にピッタリなデザイン編集ツール「CANVA」を利用します。

  • 直観的に操作できる
  • おしゃれなテンプレートが豊富
  • ブラウザ上で操作可能

こういった理由からデザインやブログ初心者の方でも使いやすいです。

正直言ってアイキャッチを一から自分で作るのはあまりおすすめしません。
時間がかかるのとデザインがダサくなりがちです。

「CANVA」はグーグルアカウントがあれば簡単にログインして作ったデザインも保存できます。

手順②サイズを指定

CANVAにログインして最初に画像サイズを指定します。
 

 

 

 

グーグルに推奨されてるサイズ「1200×630」が好ましいです。

ただWordPressのテンプレートによって推奨サイズが異なります。
個人の判断におまかせですが、なるべく横1000ピクセル以上が粗くならずおすすめです。

手順③テンプレートを選ぶ

サイズを指定するとデザイン編集画面が開きます。

次にテンプレートを選びます。
 

 

テンプレートを選ぶ際のポイントは、ブログのテーマ(内容)に合った雰囲気のデザインです。
ブログのテーマとデザインの雰囲気が合ってると、読者にファンになってもらいやすいですよね。

  • 子育てブログなのでほっこり系デザイン
  • 英語ブログなので海外雑誌のようなデザイン
  • ミニマリストブログなのでシンプルなデザイン

ミニマリストをテーマにしたブログなのに、カラフルで派手なアイキャッチだとちぐはぐな印象を与えちゃいます。
 

 

あなたのブログのテーマにはどんなテイストのデザインが合っているか、時間をかけて考えてみましょう。

手順④アレンジする

テンプレートが決まったら細かい部分をあなたのブログ用にアレンジします。

  • レイアウト
  • カラー
  • イラスト素材
  • 画像
  • テキスト
などです。

今回はこのテンプレートを例にアレンジしていきます。
(アレンジ前のテンプレート)
 

 

レイアウト

 

 
簡単でいいのでレイアウトを調節します。

いらない素材を削除したり、要素を移動させます。

後から微調整できるのでなんとなくの配置を決めておきましょう。

 

 
上半分のイラスト素材を多めに削除してスッキリさせました。

カラー

 

 
続いては色の変更です。
全体的な色はブログのテーマカラーに合わせます。

アイキャッチ作成のたびに色を変えるより、テーマカラーに合わせる方がブログに統一感がでてキレイです。

しかも毎回色に悩む必要もなくなります。

もしブログのテーマカラーがまだ決まっていない人はこれを機に決めてしまいましょう。
ブログの配色の決め方はこちらの記事にて詳しく解説しています。

【簡単】ブログ配色の決め方|色を統一するだけでおしゃれなブログに変身します

 

 
ゆるっとした雰囲気のやさしい配色にしました。
色を変えると全体が大きく変わりますね。

イラスト素材

 

 

イラスト素材もあなたの記事内容に合ったものに変えます。

ブログ関係の記事を書くならパソコンのイラスト素材を使うなどです。

様々なテイストのイラストがあるので、あなたのブログの雰囲気にあった素材を選びましょう。
(素材は色が変更できるものも多いです)
 

 

画像

 

 

画像が添付されてる場合、記事内容に沿った写真に変えます。

画像もできる限りブログのテーマカラーを意識するのをおすすめします。

1枚1枚はキレイな写真でもトップページに一覧で並んだとき、色が揃ってないとバラバラな印象になります。
 

 

ブログの外観には全くこだわってない、という人であれば構わないのですが、トップページが整ってると読者への印象もだいぶ変わります。
 

 
ちなみにCANVA内の画像は多くのものが無料で使えます。
今回はCANVA以外のクオリティの高いフリー画像サイトも紹介しますね。

<unsplash>

(引用:https://unsplash.com)

海外のセンスのいい写真が揃ってるサイトです。
お気に入りのカメラマンを見つけて毎回その人の画像を使えば、アイキャッチに統一感がでますよ。

テキスト

 

 
テキスト部分を変更します。

記事内容を簡潔に伝えるための重要な部分です。
記事のキーワードを入れる、呼びかけてインパクトを狙う、など様々です。

何通りか試してクリック率の良さそうな文章を見つけるのもいいかもしれません。

そして文章と同じくらい大事なのがフォントの種類です。
ブログの雰囲気に合った形を選びます。
 

 

読めればなんでもいいと無意識に思いがちですが、フォントの形はデザイン全体に影響します。

フォントの選び方については文字配置のレイアウト記事でも解説しています。

伝わる文字の配置とは?レイアウト6つのコツをわかりやすく解説します

 

 
今回は全体の雰囲気に合うようキレイ目なフォントに変更してみました。

微調整

ほぼ完成に近いですが最後に細かい部分を調節します。

空白スペースに装飾を加える、テキストを目立たせるなどです。

 

 
上半分がさみしかったので吹き出しをつけ、タイトルに下線を入れて目立たせました。

手順⑤ダウンロードと圧縮

 

 
テンプレートが完成したらダウンロードします。

WordPressの容量の負担を考えて、JPGがおすすめです。

ご自身のパソコンに保存されたJPGファイルを圧縮させてからWordPressにアップロードさせます。
画像圧縮サイト

アイキャッチの例

 

 
例として用いたアレンジ前のテンプレートはこちらです。
 

 
アレンジ後はこちらです。
 

 
ポイントは以下の通りです。

  • ゆるっとした雰囲気
  • テキストに視線を集める
  • イラスト素材は少なめ
  • 色数を抑える
  • 余白を意識する

アレンジ前との大きな違いは、余白を作ったことです。
余白があると圧迫感が減るのと洗練さをだせます。

テンプレートに余白を作れるか意識してみてください。

デザインでの余白の効果的な使い方がわかる記事はこちらです。

【簡単なのに効果的】余白のスゴイ効果とデザインに取り入れるコツをわかりやすく解説します

ブログアイキャッチ作成のポイント

ここまではアイキャッチ作成の手順を解説しました。
ここからはアイキャッチを作るうえで大事なポイントをまとめます。

ポイント①テンプレートを統一する

アイキャッチに使うテンプレートはなるべく統一させます。
全く同じじゃなくてもいいですが、2~3個を使いまわす感じです。

テンプレートを選ぶ手間を省くと時短になります。
ただでさえ記事を書き終わった後で消耗してるのにテンプレート選びに時間をかけたくないですよね。

しかも同じようなテンプレートを使うと、トップページが統一されてとてもきれいです。

時短&キレイを叶えてくれて一石二鳥なので、テンプレートは使いまわします。

ポイント②配色を統一する

アイキャッチの配色も統一させたいです。

これもさきほどと同じ理由で、アイキャッチの色味が揃ってるとブログの外観がおしゃれに見えます。

テーマカラーが決まってるとブログの世界観が出来上がるので、ブログの見た目を手っ取り早く整えたい人はまず配色から揃えてみましょう。

ブログの配色の決め方をご覧ください。

【簡単】ブログ配色の決め方|色を統一するだけでおしゃれなブログに変身します

ブログアイキャッチを作る上での注意点

アイキャッチを作るポイントの後は注意点です。

注意点①粗い画像は使わない

粗い画像を使うとアイキャッチがダサくなる原因になります。

さきほどの作成手順で紹介したハイクオリティのフリー素材を使うと一気にあか抜けるのでおすすめです。

自分の撮った写真でないといけない事情がある以外は、美しいフリー画像を使いたいです。

注意点②各端末から見え方をチェックする

アイキャッチを作って記事を公開したら各端末からの見え方を確認します。

特にスマホからの見え方のチェックを忘れがちです。
ブログの閲覧は半分以上がスマホからなので注意です。

Twitterにアップする人はTwitterからのチェックも忘れずに。

記事のURLをCard validatorに入力し、Preview cardをクリックするとチェックできます。

アイキャッチの重要性

ここまでアイキャッチ作成の手順とポイント、注意点を解説してきました。

ここまで読んでくれた人の中には「アイキャッチにこだわらなきゃいけないの?」と思ってる人もいるかもしれません。
なのでアイキャッチを整えるとどんなメリットがあるか簡単に解説します。

SEO効果

アイキャッチをしっかり作ることで実はSEOにも効果があります。

記事自体が検索結果に表示されるの2~3か月かかりますが、画像検索だと1か月くらいで表示されるようになります。

しかも記事より上位表示されてるケースが多いです。
 

 
(リライト前のアイキャッチのため現在のアイキャッチとデザインが異なります)

もしあなたのアイキャッチがおしゃれだと、画像検索でクリックしてもらえる確率が高まりますよね。

アイキャッチにこだわるのはSEO対策の観点からも効果的です。

ブログ初心者にも効果的

アイキャッチはブログ初心者にも効果的です。

おしゃれなアイキャッチだとPV数に貢献してくれます。

記事自体の質はあまり高くなくても、つい長居しちゃうブログってありませんか?
そういうブログはデザインがおしゃれな場合が多いです。

一般的に「ブログ初心者はデザインより記事内容に力を入れろ」とよく言われてます。
もちろんそれも正解だと思いますが、初心者がマネしやすいのはデザインです。

記事の質をマネするのは大変だけど、デザインは見た目の問題なので「なぜおしゃれなのか」分析しやすいからです。

初心者こそブログの見た目にこだわりたいですね。

ブログの世界観ができる

アイキャッチのテイストがブログのテーマに合ってると世界観が出来上がります。

例えばミニマリスト向けブログのアイキャッチが、シンプルなデザインだとミニマリズムの世界観ができあがりますよね。

運営者の世界観が表現されてるブログの方が個性のないブログより愛着がわくはずです。

アイキャッチであなたの個性をだしてみませんか?

まとめ

最後にアイキャッチの作り方の手順をまとめます。

  1. CANVAを利用
  2. サイズを指定
  3. テンプレートを選ぶ
  4. アレンジする
  5. ダウンロードと圧縮
私自身、アイキャッチを何度も作り直してきたので最初からテンプレートを統一できたわけではありません。
記事をリライトするタイミングでアイキャッチも変更する感じでした。

最初から完璧なブログにするのは難しいので徐々に作りこんでいきましょう。

なおアイキャッチをおしゃれにするコツをまとめた記事もぜひチェックしてくださいね。

ブログのアイキャッチがダサイ…おしゃれにする8つのコツ【テンプレート統一で時短&おしゃれが叶う】

もし「センスに全く自身がない」「アイキャッチを作るのが面倒くさい」という方は私がデザインさせていただきます。
ココナラからお申し込みくださいね。
ブログのオシャレなアイキャッチ/ヘッダーを作ります かわいい画像でクリック率を上げる!
では今回はここまでです。