【2021年】センス無くても問題がないアイキャッチ定番デザインランキング

ブログ内容を一瞬で把握することができるアイキャッチ画像の役割を考えれば、間違いなくブログ記事の中でも重要度の高い部分に位置づけられます。あるブログ記事と無いブログ記事では読者の満足度も雲泥の差になってしまいます。

一言で言うと、読者がこの先記事を読んでいくかに直結する部分。
このアイキャッチ画像1枚で、訪問者の心をつかめればこの先に続く記事を読んでもらえる。イマイチと感じてしまったらすぐに別のブログに離脱されてしまうという分かれ道になる部分になるからです。

結果、このアイキャッチ画像の部分でそのブログ記事の価値は決まってしまう。そう言っても過言ではありません。

人気ブログを見てみると「アイキャッチ画像」に心をつかまれることが多いと思います。そうして長い目で見ると結果ブログやSNS経由の集客力向上にもつながっていきます。

アイキャッチ画像の重要性まとめ

ブログに訪問した時、見た目がよくなる
記事の内容やイメージを伝える
訪問した読者の心をつかむ役割がある
ほか記事との差別化→ブログの個性や独自性を打ち出す
SNSで紹介された時の顔になる
オリジナルキャラクタがあればブログを覚えてもらいやすい

アイキャッチ画像の間違い

ブログカードやサムネイルとは異なります。アイキャッチ画像はブログ記事の上部にある大きな画像です。

守りたいルール

文字は真ん中に大き目の四角（正方形）にした方が別ページやSNSサムネイル表示が見やすい。スマホで見た時も見やすいので特別な事情がない限り真ん中に配置する。

またデザイン力のない私はできるだけシンプルなデザインにして使用する画像や書き込む文字や文の文言や配置や色を考えるようにしています。

ノンデザイナーがデザインをこだわり過ぎても時間と労力のわりに素人感がでてしまう事が多いのである程度で割り切ってシンプルなアイキャッチ画像にしています。

WordPressブログに使うアイキャッチ画像の拡張子はJPG、PNG、GIF、WEBPに対応しています。迷っているならJPG、PNGがおすすめです。
SVGという拡張子は現在のところ対応していませんので控えておきましょう。

アイキャッチ画像のおすすめサイズと比率はWordPressブログなら16：9です。Googleは1200px以上の高画質画像を推奨しているのでそのまま当てはめると1200px：675pxになります。

ただ実際にはこれ以下のサイズのアイキャッチ画像を利用しているブログは多いので読者が見てきれいに見えるサイズなら気にしなくていいと思っています。（※Google砲を狙いたい人は1200px以上の方がいいです。

ちなみにYouTubeが推奨しているサムネイルサイズは1280x720pxです。

よろしければ最後までご一読ください。

アイキャッチ定番デザインおすすめランキング

注意）当サイトのオリジナルランキングです。
好みや目的や用途により結果は異なります。

1枚の素材を背景にする
文字を入れて装飾をする
背景画像を加工する
５～９枚の画像を背景にする
文字の背景を装飾する
文字を囲んで装飾する
２～４枚の画像を背景にする
人物画像を効果的に使う
集中線を効果的に使う
ふきだしを効果的に使う

ねこ先生

それぞれに使う作成テクニックは
　別記事で紹介しています。

デザインパターン紹介

これから基本的なデザインパターンを紹介していきます。

素人感がでないようにまずはこの基本パターンを使ってブログ記事の中身にあわせたアイキャッチ画像を作ってみましょう。

ねこ子

お気に入りテクニックとパターンが決まってきたら作業時間も短く簡単になります。

01１枚の素材を背景にした
アイキャッチ画像（例）

ねこ先生

いちばんシンプルな「素材が命」技
　記事にあう素材が良ければ好印象。

写真素材を1枚使う

おすすめはメッセージ性の強い画像
16：9に切り抜いたり、サイズ変更で最適化させる

イラスト素材を1枚使う

ブログ記事の顔になるので
　古臭いより今どきのモノを！

素材の加工（ポイント）

効果的で失敗しにくい代表的な加工テクニックを紹介

サイズ変更
　アイキャッチ画像にあった大きさにする
切り取り
　16:9や黄金比にしたい
　目立たせたいなど好みに合わせて切り取る

アイキャッチ画像用素材の入手

アイキャッチ画像の素材の元はオリジナルで用意してもいいのですが、主流は国内外にある写真・イラスト素材提供サイトがおすすめです。

下記に知っておきたい特徴と提供元を厳選紹介します。

アイキャッチ画像の素材
無料素材の特徴	有料素材の特徴
無料なので気軽に利用できる。最近無料素材でもクオリティは高いので満足度が高い	有料素材はクオリティや種類の多さが魅力。同時に他ブログと素材がかぶることはまず無く差別化できる。
代表的な入手先
無料素材	有料素材
O-DAN(オーダン) イラストAC photoAC（写真AC）	PIXTA iStock Adobe Stock

02文字を入れて目立たせる
　アイキャッチ画像（例）

ねこ子

よくあるアイキャッチ画像のパターン
　文字を目立たせる工夫になります。

文字のみパターン

濃いめの背景にあわせやすい
　シンプルで王道の文字装飾になります。

縁文字を加えたパターン

縁文字だと文字が見やすくなる

色を変えるパターン

センスが問われる部分
もっぱら合わせやすい白と黒を多用

色を変え、縁文字パターン

多くの背景画像にあわせやすい

装飾文字でアピール力UP①

記号を加えてアピール力を高める

装飾文字でアピール力UP②

記号を加えてアピール力を高める

ねこ先生

背景素材の工夫（暗くする。ぼかす）で更に文字を目立たせることも可能です。

文字を入れる時のポイント

シンプルな素材の方が文字をのせやすい
文字サイズはバランスよく、文字は横向きに書く。
文字の種類は雰囲気のある読みやすい太めのフォントがおすすめ。
文字は中央部分にいれる。
その理由はサムネイルやSNSは中央部分のアイキャッチ画像を取得していくからである。
一番大事かも知れない事ですが、アイキャッチ画像にこだわりだすとキリがなく記事を書く時間が減るので時間を決めて作成する。

03背景素材を加工する
　アイキャッチ画像（例）

ねこ先生

素材加工は奥が深すぎます
初心者ならまずこの2つをマスター

背景を暗くするパターン

明るい背景画像を暗くして文字を明るい色にして
言葉を引き立てています

背景をぼかすパターン

背景をぼかして文字をくっきりと目立たせる

元々の素材

素材によっては加工して文字をいれる方が目立ちます。

素材の加工（ポイント）

明るくする・暗くするケース
　文字を目立たせるにも使うテクニック
ぼかす（ガウス）ケース
高画質でない素材でも利用できるようになる。
文字を目立たせることが可能になる。
プライバシーなどが保護される

04５～９枚の素材を使った
アイキャッチ画像（例）

ねこ子

並べるだけでそれなリに仕上がる魅力

9枚の素材を並べただけ①

たくさん素材を配置できる注目レイアウト
　記事内に出てくるキャプチャ素材やロゴ配置も◎

9枚の素材を並べただけ②

同じサイズに並べているパターン

8枚の素材を並べただけ

同じ位のサイズに並べているパターン

7枚の素材を並べただけ

同じ位のサイズに並べているパターン

6枚の素材を並べただけ

同じ位のサイズに並べているパターン

5枚の素材を並べただけ

同じ位のサイズに並べているパターン

ねこ先生

低解像度の画像でも豪華に見えます♪

1枚の素材として完成したら、明暗やぼかしなどを調整し文字をいれ装飾すれば完成度が高くなります。

▼完成イメージ▼

05文字の背景を装飾する
　アイキャッチ画像

後ろにアンダーラインを引く

いちばんシンプルなパターンだが見やすい

文字の後ろ部分だけに色付け

半透明にするかべた塗りするかは好みです。

端から端まで背景色をつける

背景色の部分が大きくなるので目につきやすい

ねこ子

文字を目立たせる定番技

ねこ先生

どの方法にするかブログ内で統一するのもいいと思います。

文字背景の装飾ポイント

背景素材の色バランスを考えて装飾する
迷ったら蛍光ペン色がおすすめ。
過度な装飾は視線の分散。見にくくなる

06文字を囲む
　アイキャッチ画像（例）

ねこ先生

注目させたい部分を囲んで装飾♪

背景をぼかし、文字を四角く囲む

背景をぼかし、文字部分を四角で囲んで目立たせる

文字をそれぞれ四角く囲む

中に色を塗っても線だけでもOK

文字を囲む装飾のポイント

文字と囲みの余白を大切にする
線を使用する場合、線は細すぎない、太すぎない。
ひと文字ずつ囲むは程よい目立ちになる。

07２～４枚の素材を使った
アイキャッチ画像（例）

ねこ子

素材を並べて見比べられるサイズが魅力

2まいの画像パターン

2つの画像を使う背景画像
　比較など見比べ記事に便利？！

中央部分の写真量が多いデザイン

いちばんシンプルなパターンで縁文字のみ

均等に4枚の写真を背景にする

シンプルなパターンですが安定しています

メインの写真を大きく配置

インパクトのある画像を使いたいレイアウト

本文に続く流れを強く感じさせる

今回は4画像を均等に配置しています。

ストーリーを感じさせるパターン

意味深なレイアウトで注目させたい記事に使いたい

２～４枚の素材を背景にするポイント

比較記事などで利用しやすい
見せたい部分が分かるように事前に要写真加工
均等配置以外はセンスが必要になってしまう。

08人物セリフ風の
アイキャッチ画像（例）

ねこ子

読者への問いかけも可能なスタイル

読者の心をつかみやすい？！

記事内容との相乗効果を考えます。

素敵な無料イラスト利用版

素敵な人物イラストも無料で提供されています。

AIが作った人物写真を利用

AI作成人物写真が無料で提供されています。

人物入りアイキャッチ画像のポイント

表記する言葉をより考える必要がある
　素材価値を下げるような利用は禁止
　※自分で作った素材の場合は除く
他の背景素材と組み合わせるシーンが多い
人物素材の背景は透過処理した方が便利
ふきだしや集中線で装飾するデザインも人気
人物素材の利用条件を確認しておく。

09集中線を使用する
アイキャッチ画像（例）

ねこ子

インパクト絶大で読者目線を集められる

集中線をつける①

集中線をつけて集中的に目立たせる

集中線をつける②

背景をぼかす（ガウス）処理したパターン
更に対象を目立たせられるようになります。

集中線入りアイキャッチ画像のポイント

長すぎる言葉は不向き
背景素材によっては白い集中線もおすすめ
派手な色はキツイ表現になりがち

集中線素材提供サイト（おすすめ）

AI-CATCHER（アイキャッチャー）素敵な人物が素材が多数ある無料イラスト提供サイト

10ふきだしを使用する
　アイキャッチ画像（例）

ねこ子

メインにもワンポイントにもなる素材

ワンポイントでふきだしをつける

アクセント文字のふきだしを入れた画像

メインタイトルをふきだしで囲む

タイトルを目立たせるためにふきだしで囲む

ふきだし入りアイキャッチ画像のポイント

ふきだし素材は無料提供サイトからの入手がおすすめ。
　完成度が高いので作る必要はありません。
背景素材などバランスやレイアウトが大事

ふきだし素材提供サイト（おすすめ）

フキダシデザインフキダシ素材が1000以上集まる専門サイト

少しセンスが必要になる
　　アイキャッチ画像テクニック紹介

01最初の文字色や大きさを
変えるアイキャッチ画像

ねこ先生

少し手間がかかるけれど
　だけど読者へのアピール力はUP。

最初の文字を大きく

同じ色でサイズだけを
　大きくすると自然な感じに仕上がる

文字サイズと色も変える

少しでもインパクトを強くしたい時に

文字サイズと色変更のポイント

使用するソフトにより対応が異なります。

フォトショップやイラレはもちろんPhotoScape X(フォトスケープ)でも対応
ひと文字だけ切り離して変更するのが簡単で調整しやすいです。

02いろいろな素材を配置する
アイキャッチ画像

ねこ先生

アイコンやロゴ素材の選び方
　それぞれの配置や使い方に要センス

アイコンを配置する

記事内容やアイキャッチ画像にあわせた
　アイコンを設置してアピールする

数字を入れたアイコンでアピール

アイキャッチ画像に数字があると
　それだけで分かりやすく信頼度が上がる！

いろいろな素材を使う時のポイント

無限大の使用パターンがあるので
　センスが無ければ難しいテクニックになります。

素材の種類や配置は読者目線で考える
分かりやすい素材を使用する
必要以上に多用しない

03アニメーションGIFの
アイキャッチ画像

ねこ先生

動きのあるアイキャッチ画像
　センス次第でインパクトは大

文字と写真のアニメGIF

記事上部で読者に伝えたい事を
　強烈にアピールする事ができます。

写真だけのアニメGIF

記事内容にあわせた
　複数枚の写真素材で存在感をアピールする

アニメーションGIFを
　ブログで使う時のポイント

作成は無料ツールを使うと簡単で便利
データ量の大きさに注意する
枚数やエフェクトが多いとサイズが大きくなる
圧縮しすぎると画質が悪くなる

アイキャッチ画像作成に役立つ
　　共通テクニック紹介

ワードプレス（ブログ）が必要以上に重くなる１番の原因にもあげられる画像に対する基本的な取り扱いです。ブログ運営に役立つコツがあるので参考にしてください。

01アイキャッチ画像の
　縦横比（アスペクト比）

素材を切り取るときに参考にして欲しい比率です。
結論から言うとWordPressのアイキャッチ画像の比率は16：9がおすすめです。
1番の理由は多くの無料・有料ブログテーマのアイキャッチ画像の推奨比率に採用されているのがです。
有料のテーマなどは自動的に16:9の比率にトリミングするモノもあります。

昨今のFacebookやTwitterのOGP比率1.91:1と若干異なりますが、多くの人は気にならない教養範囲内のレベルです。

1.91:1	FacebookやTwitterのOGP比率 1200px×630px（第1推奨）
16:9 （1.77：1）	多くのブログテーマのアイキャッチ画像比率に採用されている。サイズ計算しやく美しい比率 YouTubeやPC画面など
1.618：1	黄金比
3:2 （1.5：1）	デジタル一眼レフカメラの比率の比率で記事内画像におすすめの比率
1.414:1	白銀比
4：3 （1.33：1）	コンパクトタイプのデジタルカメラの比率で記事内画像におすすめの比率
1:1	Instagramの比率

01アイキャッチ画像の
　1番いい縦横サイズの紹介

[答え]使用しているWordPressのテーマ毎に最適なサイズがあるので全てのブログに共通する最適なサイズはありません。
それぞれマニュアルに明記されていますが、調べた限りアイキャッチ画像のサイズは下記サイズがよく利用されています。
ちなみにGoogle推奨の画像横幅サイズは1,200 px 以上となっていますが、データ容量が大きくなるので読み込み速度が遅くなる致命的な問題あります。

1280px×720px （16：9）	Youtubeサムネイル
810px×540px （３：２）	推奨ブログテーマ THE SONIC
1200px×630px （1.91：1）	推奨ブログテーマ WING(AFFINGER5） Cocoon
728px×380～450px）	推奨ブログテーマ STORK
680px×390px （68：39）	推奨ブログテーマ SANGO
760px×428px （190：107）	推奨ブログテーマ JIN

アイキャッチの適切なサイズの調べ方はfunctions.phpを開いて調べるのが１番確実ですが、Google ChromeデベロッパーツールのComputedでもわかります。見ている素敵なブログが何のテーマを使っているのかはWhat WordPress Theme Is That?でURLを入力すると分かります。

01アイキャッチ画像の
　ファイルサイズの量

少ない方が良いというのは当たり前の共通認識ですが、手の凝ったアイキャッチ画像を作成すればするほど大きくなってしまいます。
どの位が平均なのか？検討がつかなかったので、有名なブログのアイキャッチ画像のファイル量を比べてみました。目安程度に見てください。 View infoというクロームの機能拡張で簡単に調べることができます。

20kb以下	○○サイト
30kb以下（○○：○○）	○○サイト
40kb以下（○○：○○）	○○サイト
50kb以下（○○：○○）	○○サイト
60kb以下（○○：○○）	○○サイト
70kb以下（○○：○○）	○○サイト
80kb以下（○○：○○）	○○サイト
90kb以下（○○：○○）	○○サイト

アイキャッチ画像作成に役立つ
　　イラストや写真提供サイト紹介

ねこ子

まず最初に　

写真素材の提供サイトBEST3

O-DAN(オーダン)日本語検索できるので操作も簡単

簡単に理想の1枚を見つけられる
高品質な写真がさっとでてくるのに感謝感激

簡単に説明するとこんなサイト

大きな特徴を３つ

海外の無料写真をまとめて検索するサイト
高品質な写真を効率よく見つけられる
日本語で利用できる

サイトを星印で勝手に評価

定番度　　（超有名）
満足度　　（高い）
写真ジャンル　（豊富）
写真の質　　（大量）
写真のサイズ　　（イロイロ）
利用しやすさ　（簡単）

確認しておきたいポイント

編集・加工	可能
商用利用	可能
リンク／クレジット表記	不要
会員登録	不要

O-DAN(オーダン)にしかない魅力

目的のキーワードを日本語で入れてワンクリックするだけで海外の主要な写真提供サイト（40サイト以上）を横断して検索できる。
はじめて使用した時はちょい感動するレベルです♪

O-DAN(オーダン)の基本情報

※最新の注意を払って作成していますが、最新の情報は必ず公式サイトで確認お願いします。

写真提供の方法について

無料有料無料/有料その他

使用条件

なしクレジット表記商用可能その他

量

少量普通大量

種類

加工可能サイズ変更のみ商用可能 jpg jpg RAW

会員登録の必要性

不要必要用途により必要

利用制限

特になし？検索制限ありダウンロード制限あり

種類

日本人外国人自然風景家族その他

取扱い操作性について

わかりやすいわかりにくい広告多め？！

運営母体

個人（日本）企業（日本）個人（海外）企業（海外）その他

O-DAN(オーダン)のメリット

１度に複数のサイトを検索できる（一覧）
商用利用OKのみ検索可能
使い方が簡単で日本語検索可能
1日の検索・ダウンロードの制限がない
会員登録不要

O-DAN(オーダン)のデメリット

日本の写真配布イトは検索されない
日本人の人物写真は皆無
有料写真も検索できる仕様
細かな検索条件は指定できない
広告の許可設定しないとエラー表示になる

O-DAN(オーダン)の感想

ブログのアイキャッチを作る時にたくさんお世話になりました。どれだけ使用してもダウンロード制限とかかからないので便利です。問題点があるとすれば人気写真は他の人も使用している可能性が高いこと位だと思います。
そんなときは他の写真やイラストを組み合わせたり、色調や文字入れをしてオリジナリティをアップさせればOKだと思っています。

O-DAN(オーダン)のまとめ

次のような方に向いている「O-DAN(オーダン)」でした。

ブログを作り始めて写真画像を探している
質の高い写真画像を探している
写真の編集元になるような写真を探している
商用可能な写真を探している
海外の写真に興味がある
複数のサイトを一度でチェックしたい
日本語で海外にの写真を検索したい

公式サイトはコチラ！

世界中の無料写真を

O-DAN(オーダン)

ユーザー投稿型の無料写真配布サイト