WordPress

【誰でもかんたん】自作アイキャッチ!読まれるブログの画像作成テクニック!

自作アイキャッチ!読まれるブログのテクニック!

記事を書くだけでも大変なのに、アイキャッチ画像にまで作成時間をかけてられない!ブログのアイキャッチを簡単に自作できるテクニックが知りたい!

今回は、こんな悩みを解消します。

  • アイキャッチ画像の重要性
  • アイキャッチ画像自作におすすめのツール【7つ】
  • アイキャッチ画像自作に便利なフリー画像集【7つ】
  • アイキャッチ画像自作のコツと注意点
あふ太

こんにちは!「あふたろぐ」を書いている「あふ太」だよ!

この記事では、アイキャッチ画像を自作したい人向けに、「アイキャッチ画像の重要性」「作成に便利なツール」「フリーで使える画像集」「自作するときの注意点」について解説していくよ!

記事はしっかり書くけど、アイキャッチ画像作成に関しては「面倒」だったり「苦手」だったりで、「なんとなくそれっぽいイメージのフリー画像を挿し込んでおくだけ」という方も多いのではないでしょうか。

そんな方の為に、この記事では簡単にプロっぽいアイキャッチを自作する方法について解説していきます。

たかがアイキャッチ画像と侮ってはいけません。画像の使い方ひとつで、その記事への反応やアクセス流入数は大きく変わってきます。

アイキャッチ画像は、ブログの記事をより多くの人に読んでもらう為の大切な要素です。

このページを読めば、アイキャッチ画像の作成が苦手な人でも「素早く」「簡単に」「プロっぽく」自作できるようになります。

質の良いアイキャッチ画像を自作して、ブログのアクセス数UPに繋げましょう!

ブログのアイキャッチはどうして重要なの?

自作アイキャッチ!読まれるブログのテクニック!

アイキャッチは、ブログのアクセス数や滞在率に影響する大切な要素です。

良いデザインのアイキャッチは、画像検索からのアクセスを増やし、読者の「記事を読みたい!」という気持ちも強くしてくれます。

ブログのアクセスを集めるためには、キーワード選定やSNSの活用などのSEO対策も重要ですが、それと同じくらいアイキャッチも大切な要素です。

あふ太

まずは、アイキャッチの重要性についておさらいしておこう!

アイキャッチでブログの印象が決まる

【誰でもかんたん】自作アイキャッチ!読まれるブログの画像作成テクニック!_アイキャッチでブログの印象が決まる

アイキャッチは、なるべく統一されたデザイン・方向性で、記事の内容に沿ったものにしましょう。

統一デザインで、記事内容がイメージしやすいアイキャッチは、読者からそのブログに対する信頼感を高める効果があるからです。

逆に、

「記事内容がまったくイメージできない」

「全く関係無い記事内容だった」

「デザインがバラバラで色使いも見にくい」

といったアイキャッチばかりだと、ブログの回遊率が下がるどころか、直帰・離脱率が高くなってしまいます。

あふ太

フリー画像をそのまま使うにしても、最低限、記事内容と関係のある画像にしよう!

また、デザインを統一することで、あなたのブログのファンに対して「このデザインは、私のブログですよ」とアピールすることもできます。

ブログデザインの方向性、記事の内容に沿ったアイキャッチで、読者の信頼感を集め、ファンの獲得を目指しましょう。

あふ太

あと、アイキャッチをカテゴリごとにデザインで分けておくのも、読者が記事を探しやすくなるからおすすめだよ!

アイキャッチ画像で画像検索からアクセスが増える

アイキャッチ画像で、画像検索からブログへのアクセスを増やすことができます。

見映えの良い、直感的に分かりやすいアイキャッチ画像を作成しておくと、画像検索ページで読者の興味を惹きやすく、クリックされる可能性も上がるためです。

例えば「Google画像検索」だと、読者が検索したキーワードに関係する画像が一覧表示されます。

自作アイキャッチ!読まれるブログのテクニック!

画像の通り、このページで目立つのは文章よりも「画像」です。

ここに読者の興味を惹くアイキャッチ画像を表示させることができれば、タイトルリンクから記事へアクセスしてくれる可能性が高くなります。

あふ太

パッと見て、ブログの内容がイメージできるようなアイキャッチ画像はクリックされやすいよ!作成のコツは後で解説するよ!

アイキャッチ画像があるとSNSでシェアされやすい

アイキャッチは画像検索からのアクセス数を稼ぐだけでなく、SNSのシェア率UPにも効果があります。

TwitterなどのSNSにURLを記載すると、リンク先のアイキャッチ画像が大きく表示されるためです。

例えばTwitterだと、

自作アイキャッチ!読まれるブログのテクニック!

上画像の通り、リンク先のページに設定されているアイキャッチ画像が自動で縮小表示されます。

ただし、アイキャッチ画像を設定していない場合は、そのブログやサイトの「デフォルト画像」になるか、「画像無しの表示」になってしまうため注意が必要です。

目立つ、格好良い画像であるほど読者の目に留まりやすくなります。質の良いアイキャッチ画像をブログに設定して、SNSでのシェア率UPを狙いましょう。

あふ太

アイキャッチを自作するときは、いろいろな場面で表示されることも考えて、画像のサイズ(縦横比)や、文字の配置を調整しよう!後で詳しく解説するよ!

アイキャッチでSNSからのアクセスが増える

SNS向けのアイキャッチ画像は、魅力的でインパクトのあるデザインのものを使うようにしましょう。

アイキャッチが魅力的であるほど拡散されやすくなり、アクセス数が増える可能性が高まります。

これは、「商品のパッケージが魅力的だったので何となく買ってしまった」という、誰にでもある心理を利用したアクセスupの方法です。

魅力的なアイキャッチ画像を作成して、ブログのアクセス数UPを狙いましょう。

あふ太

どのSNSもURLと一緒にアイキャッチ画像が表示されるから、「クリックしてみよう」と思わせるデザインにしよう!

読まれるブログアイキャッチかんたん作成ツール

自作アイキャッチ!読まれるブログのテクニック!

ここからは、アイキャッチ画像の作成に便利なツールを紹介していきます。

無料版・有料版ともに、「便利さ」「手軽さ」「機能性」に長けたアイキャッチ画像作成ツールは下記の【7つ】です。

ご紹介するアイキャッチ作成ツールの中には有料版のものもありますが、まずは無料版で使い勝手を試してみることをおすすめします。

あふ太

当然、有料版の方が機能がフルに使えて便利だけど、シンプルなデザインのものや、フリー画像を使って文字入れする程度のアイキャッチであれば、無料版でも十分つくれるよ!

今回の「アイキャッチ画像作成に的を絞ったツール」として1番のおすすめツールは「Canva」になります。

アイキャッチ自作初心者でも簡単に操作が可能で、ブラウザ上ですべての作業が完了できるという超優秀な無料ツールです。

それでは、1つずつ見ていきましょう。

Canva

自作アイキャッチ!読まれるブログのテクニック!Cn

Canva(キャンバ)」は、豊富なデザイン用素材と、直感的で使いやすい画像編集機能を無料で利用することができる、アイキャッチ画像作成に1番おすすめのツールです。

Canvaは、ブラウザ上ですべての作業が完結できる上、本格的なアイキャッチ画像を簡単に作成することができます。

ブラウザの「ブログタブ」で記事を書きつつ、「Canvaタブ」を開けばすぐにアイキャッチ画像や見出し画像が作れて非常に便利です。

さらにそのままブラウザ上で保存が出来るので、データの管理に手間もかかりません。

アイキャッチ作成に「Canva」を使うメリット

  • ブラウザ上で編集・保存できる
  • 画面が見やすく編集操作も簡単
  • 豊富なデザイン用素材が使える
  • スマホでも作成できる
  • 必要なものは全て揃っているので時短になる
  • インストール不要
  • 自動保存してくれる
  • 無料!

特に初心者は、いきなり高額な専門ソフトを買う前に、まずCanva(無料版)でアイキャッチ自作を試してみましょう。

無料版を使ってみて「自分に合いそうだし、もっと多くの素材や機能を使いたいな」と思えたら、有料版を検討してみてください。

1,000円/月程度で、10,000点以上のハイクオリティーなデザイン用素材が全て使える上に、加工機能も制限なく利用できるようになります。

Canvaを使いこなして、「簡単に」「早く」「本格的な」アイキャッチ画像を作成しましょう!

「Canva」公式

あふ太

このブログのアイキャッチは基本的にCanva(有料版)で作成してるよ!デザインにこだわらないなら無料版でも十分使えるから試してみてね!

Google スライド

自作アイキャッチ!読まれるブログのテクニック!Cn2

Google スライド」は、プレゼンテーション資料を作成することができる無料ツールです。

Googleスライドには描画機能が備わっており、簡単な画像を作成したり、写真に文字を入れたりと、アイキャッチ画像の作成に便利な機能が備わっています。

アイキャッチ作成に「Google スライド」を使うメリット

  • ブラウザ上で編集・保存できる
  • インストール不要
  • クラウドに自動保存してくれる
  • 過去データの復元ができる
  • 無料!

また、作成したアイキャッチ画像のデータを削除してしまった場合でも、同じGoogleのサービスである「Googleドライブ」の「ゴミ箱」から復元することができるので安心です。

Googleスライドは、Googleアカウントさえ取得していれば、アイキャッチをすぐに作成することができる無料ツールです。

「Google スライド」公式

あふ太

この後紹介する「PowerPoint」とそっくりな機能で、さらにブラウザ上で動くのが「Googleスライド」だよ!

Pixlr Editor

自作アイキャッチ!読まれるブログのテクニック!Cn3

Pixlr Editor「ピクセラエディター」はオートデスク社が提供する無料のツールです。

無料とはいえ市販の画像処理ソフトにも引けをとらない高機能なツールで、画像サイのズ変更・明度調整・レイヤー・フィルター・ブラシ・塗りつぶしなどの加工もできてしまいます。

アイキャッチ作成に「Pixlr Editor」を使うメリット

  • サイズや明るさ調整など画像補正ができる
  • ブラシや塗りつぶしなどイラスト加工ができる
  • ブラウザ上で編集・保存できる
  • インストール不要
  • クラウドに自動保存してくれる
  • 会員登録なしでも使える
  • 無料!

会員登録なしでも使えますが、登録すれば「Pixlr Library(ピクセラライブラリ)」というブラウザ保存機能が利用できるようになります。

先に紹介したGoogleスライドよりも、後に紹介するPhotoshopに近い機能性で、もう少し加工にこだわったアイキャッチ画像を作成したい方におすすめです。

「ピクセラエディター」公式

あふ太

他にも、FacebookなどのSNSに投稿できる機能もついてるよ!元画像加工系のアイキャッチを作成したい場合は、有料ツールを買う前に試してみてね!

Photoshop

自作アイキャッチ!読まれるブログのテクニック!p

「Photoshop(フォトショップ)」は多くのプロデザイナーやフォトグラファーが利用する最強のグラフィックツールです。

本気で使いこなそうとすると専門的過ぎて難易度が高い!と有名なツールの1つですが、アイキャッチ画像を作成する程度の作業であれば初心者でも難しくありません。

むしろ慣れてきたら、本格的な加工機能を使った「超魅力的」なアイキャッチ画像の作成もできるようになります。

例えば、背景だけに色を付けたり、複数の風景を合わせて新しい画像を作ったり、人物の表情や年齢、ポーズまで変更できてしまいます。アナログ画像処理に関しては間違いなく最高峰のツールです。

アイキャッチ作成に「Photoshop」を使うメリット

  • 画像をブログに合う雰囲気に細かく加工できる
  • 画像合成したアイキャッチも作れる
  • 他のAdobe製品を使ってる人は使いやすい
  • とにかく細かい加工が得意!

ちなみに「Photoshop(フォトショップ)」は有料ですが、7日間の無料体験が可能です。

本格的なアイキャッチ画像の作成を目指したい方は、一度、Photoshopを試してみることをおすすめします。

「 Photoshop 」公式

あふ太

Photoshopは、「精密」な「画像加工」や「アナログペイント」を使ったアイキャッチ作成がしたい人向けのツールだよ!

Illustrator

自作アイキャッチ!読まれるブログのテクニック!p

「Illustrator(イラストレーター)」は、文字・曲線・図形などに特化したツールで、0からイラスト風のアイキャッチ画像を作成するのに向いています。

Photoshopとの大きな違いは、「ベクタ形式」でのイラスト作成になるので、一度配置した文字や図形・線を簡単に修正することができるということです。

アイキャッチ作成に「Illustrator」を使うメリット

  • 線や文字をブロック(図形)として移動変形できる
  • アイキャッチのデザイン流用が楽
  • ツールの動作が軽い

「Illustrator」も有償ソフトとなりますが、Adobe creative cloudによる7日間の無料体験が可能です。

このツールも使いこなすには慣れが必要ですが、シンプルなデザインのものであれば、初心者でもオリジナリティの高いイラスト風アイキャッチを作ることができます。

ベクタ形式ってなんだ?

「ベクタ形式」とは、ラスタ形式(アナログ描画)と違い、複数の点(アンカー)を繋いだ線、色、図形などを「数値データ」として記録するため、簡単にサイズ調整や図形の移動ができるという特徴を持った描画方式です。数値データなので画像データが軽く、作成中の動作も軽快です。

「 Illustrator 」公式

あふ太

画像の加工には向かないけど、イラストに関しては最高峰のツールだよ!ボクが本業で使うときは、Photoshopとillustratorそれぞれ使い分けてるよ!

Keynote

自作アイキャッチ!読まれるブログのテクニック!Cn4

Keynote(キーノート)」は、iPhoneやMacで有名なAppleが提供しているプレゼンテーション資料作成ツールです。

30以上のテーマ素材が用意されており、写真の編集やエフェクトを追加して、魅力的なアイキャッチ画像を無料で作成することができます。

アイキャッチ作成に「Keynote」を使うメリット

  • 直感的な操作ができる
  • Appleらしい魅力的なデザインが可能
  • iCloudならWindowsユーザーも利用可能
  • iPhoneやiPadでも利用可能
  • Macユーザーなら無料!

MacシリーズやiPhone・iPadには最初から入っているツールなのでインストールも不要です。Windowsの場合はブラウザから「iCloud」にログインすることで編集作業ができるようになります。

「Keynote」公式

あふ太

次に紹介するMicrosoftの「powerpoint」と似たような機能をもっているよ!センスの良いテーマ素材とエフェクトが簡単に利用できるからアイキャッチ自作初心者にもおすすめ!

PowerPoint

自作アイキャッチ!読まれるブログのテクニック!Cn5

PowerPoint(パワーポイント)」は、プレゼンテーション用にリリースされたツールで、その画像編集機能を使ってアイキャッチ画像を作成することができます。

インストール版は有料ですが、機能限定版の(Office on the web)であれば無料で利用可能です。

アイキャッチ作成に「PowerPoint」を使うメリット

  • フィルター機能で写真の加工もできる
  • 専用コンテンツライブラリの素材が使える
  • 40種類以上のテンプレートカテゴリも使える
  • WEB版(Office on the web)なら無料!

Google スライドと似たような機能性ですが、powerpointはよりこだわったデザインのアイキャッチ作成に向いています。

ただし、制限無くpowerpointの機能を利用するためには費用がかかります。まず無料のWEB版を試してみて、同じく無料で使えるGoogleスライドと使い勝手を比較してみましょう。

「PowerPoint」公式

あふ太

こだわったデザインのアイキャッチを、使い慣れたパワポで作りたい!という人にはおすすめだよ!

アイキャッチ作成に便利なフリー画像素材集

自作アイキャッチ!読まれるブログのテクニック!

ここからは、アイキャッチ画像の作成に便利なおすすめのフリー素材・素材のサイトを紹介していきます。

魅力的なアイキャッチ画像を手早く、簡単に、確実に作成したいなら、「魅力的な素材を利用する」ことがもっとも効果的で効率的です。

2022年6月現在、たくさんのフリー素材サイトが存在する中で、素材検索機能が簡単で、素材数の多いサイトを中心に選んであります。

ブログのジャンルやテーマにぴったりなアイキャッチを「効率よく」作成するためにも、多くのフリー素材サイトを知っておくと便利です。

先に、各サイトで素材を検索する場合のコツを2つ紹介しておきます。

上手な素材検索方法①:目的キーワードから「連想できるキーワード」を検索してみよう

例えば、「待ち合わせ」している画像素材を選びたいけど、検索結果にあまり画像が表示されない場合があります。

こんなときは、目的のキーワードから連想できるキーワード、「カフェ」「駅前」「待機」などで再検索してみましょう。

きっと探している画像素材に近いものが表示されると思います。

上手な素材検索方法②:目的キーワードを「英単語」に変えて検索してみよう

今回紹介する素材サイトは、基本的に日本語検索に対応しているものですが、検索語によっては全然関係のない画像が表示されてしまうことがあります。

そんなときは、「待ち合わせ」を翻訳して「appointment」と検索してみましょう。

日本語で検索した場合よりも、イメージに近い画像素材が表示されるはずです。

あふ太

海外サイトの日本語対応化が進んでいるとはいえ、満足いく検索結果にならないことがあるから、基本的に英単語で検索するようにしよう!

O-DAN

O-DAN(オーダン)」は、無料で商用利用可能なフリー画像が利用できるサイトです。

キーワードに対し、約40種類以上の無料写真素材サイトから該当画像を検索できるという特徴を持っています。

例えば、探している画像に関するキーワードを入力するだけで、ODANと連携している素材サイトの画像をまとめて検索できるので非常に楽です。ほぼこのサイトだけで希望の画像が見つかると思います。

あふ太

海外サイトだけど、日本語対応済みだから英語が苦手でも安心して使えるよ!

Pixabay

Pixabay(ピクサベイ)」は、世界中に利用者がいる無料のフリー素材サイトで、取り扱い写真は100万点以上、イラストは30万点以上、さらに動画もダウンロードすることができます。

トップページの検索バーに希望の画像キーワードを打ち込むだけの簡単操作で、会員登録も必要なく気軽に素材を探すことが可能です。

例えば「パソコン」「ブログ」「SEO」など、欲しい素材の関連キーワードで検索すると、各素材のタグ情報を元に関係する素材をすべて表示してくれます。その中から使用したい素材をダウンロードしてアイキャッチ作成に利用することができます。

また、Wordpressを利用してブログを書いている人は、pixabayの画像を記事に直接挿入できるプラグインを利用することもできます。

時にアイキャッチ画像の加工を必要としない場合は、記事作成の時短になるのでどんどん活用しましょう。

写真AC(photoAC)

写真AC(photoAC)」は、会員数800万人超えのサイトで、写真やイラストなどの画像を幅広いカテゴリから素材の無料ダウンロードが可能です。

他の海外サイトと違い、日本人が被写体でシーンも高品質なものが多く、なにより「日本語キーワードで的確な素材検索ができる」という大きなメリットがあります。

利用には会員登録が必要ですが、GoogleアカウントやSNSアカウントがあれば簡単に登録可能です。

ただし、無料会員のままだと「ダウンロード待機:15秒」「ダウンロード数:9回/日」「キーワード検索:5回/日」と制限があります。

無料版で物足りなくなった場合は、1,427円(税別)/月でプレミアム会員になることを検討しましょう。すべての機能が制限なく利用できるようになります。

「写真AC(photoAC)」なら必ず希望に近い画像素材が見つかるはずです。よりこだわったブログのアイキャッチ作成に役立ててください。

ぱくたそ

ぱくたそ(PAKUTASO)」は、日本の人や風景でアイキャッチ作成がしたい人におすすめの素材サイトです。

日本人や日本の風景など「日本の写真素材」を大量に取り扱っているので、目的に合う画像素材が必ず見つかります。

使い方も簡単で、キーワード検索に加え、カテゴリやタグから欲しい画像を探して、「S(サムネ用)」「M(ブログアイキャッチ用)」「L(高解像度)」を選んでダウンロードするだけです。

ぱくたそは、加工必須の画像からそのまま利用できる画像まで、多くの素材を「完全無料・商用利用可・登録不要」で利用することができます。

伝わりやすくクオリティの高い日本向けのアイキャッチ画像を作成したいと考えている人は、是非ブックマークしておきましょう。

あふ太

日本向けに作成された画像がたくさんあるから、日本向けのブログのアイキャッチ作成にもピッタリの素材が見つかるよ!

FLAT ICON DESIGN

FLAT ICON DESIGN(フラットアイコンデザイン)」は、フラットデザインのアイコン素材を無料でダウンロードできるサイトです。

おしゃれなフラットデザインの素材は加工もしやすく、アイキャッチの作成にとても重宝します。

会員登録も必要なく、商用利用や改変、二次利用もOK、クレジット表記も不要です。

ヒト、モノ、動物など、アイコン素材の種類も豊富で、ダウンロード前に背景色を変えることもできます。

おしゃれなフラットデザインのアイコン素材を利用して、他ブログのアイキャッチと差別化を図りましょう。

あふ太

ファイル形式もPNG、JPG、SVGなど色々選べるよ!背景色を変えてダウンロードできるのが便利!

ICOOON MONO

「ICOOON MONO(アイコーンモノ)」は、6,000種類以上の単色アイコン素材を無料でダウンロードできる便利なサイトです。

ダウンロード時にカラーを選択することで、シンプルなワンポイントイラストを探すときには非常に重宝します。

デザインの世界でもビジネスシーンでも、「わかりやすさ」「正確さ」「シンプルさ」は 
気持ちいい コミュニケーションの前提としてあり、更なる居心地のよさを生むのではと考えています。

ICOOON MONO(アイコーンモノ)」は、6,000種類以上の単色アイコン素材を無料でダウンロードできる便利なサイトです。

ダウンロード時にカラー変更も可能で、アイキャッチカラーに合わせたシンプルなワンポイントイラストを追加することができます。

ブログやHPに使といった商用利用がOKなので、クレジット表記や許可なしで自由にアイキャッチ作成に利用することができます。

ICOOON MONOを活用して、「見やすい」「わかりやすい」「キーワードとの関係性が高い」アイキャッチを作成すれば、ブログの読者に対してより居心地の良いコンテンツを提供することができます。

あふ太

色だけじゃなく、「白背景」「透明背景」「画像サイズ」も選べるよ!先に紹介した画像編集ツールとアイコン素材を使いこなして、こだわりのアイキャッチ画像を作成しよう!

HUMAN PICTOGRAM2.0

HUMAN PICTOGRAM2.0(ヒューマンピクトグラム2.0)」は、その名の通りピクトグラムのイラスト素材を無料でダウンロードできます。

シンプルで直感的なアイキャッチ画像の作成をしたい時におすすめです。

「リポビタンD」や「ちゃぶ台返し」「驚いて腰を抜かす人」など、マニアックで特殊なピクトグラムが豊富で、いろいろな記事のアイキャッチ画像に対応可能です。

商用利用、加工編集も自由で、クレジット表記も不要なので、安心してブログのアイキャッチ作成に利用できます。

あふ太

「ピクトグラム」とは、一般的な看板みたいに視覚に訴えるデザインではなくて、「情報を誰にでも分かるように単純化」したデザインのことだよ!

アイキャッチ画像素材選びのポイント【5つ】

ここでは、アイキャッチ作成の元となる素材を選ぶポイントを【5つ】紹介します。

すべての条件をクリアしないとダメ!というわけではなく、記事の種類によって2~3項目程度組み合わせていけばOKです。

特に「ダウンロードした写真画像をメインとしたアイキャッチ作成」を考えている方は、ポイントをよく覚えておきましょう。

①:主役が分かりやすい

アイキャッチに使う画像は、何が主役なのか一目で分かるものにしましょう。

中心に記事のテーマをイメージさせる物や、人物が配置されている素材を選ぶようにします。

②:色合いが印象的

印象的な色合いの画像素材をアイキャッチに利用することで、季節感やトレンドをアピールすることができます。

様々な色合いのアイキャッチを作成できるようになれば、記事テーマごとに違った雰囲気を表現することも可能です。

③:目を惹き付ける顔写真

人物の顔写真は、素材のままでも読者の目を惹き付けやすいという特徴があります。

無理に編集加工しなくても十分魅力的なアイキャッチ画像になるので、記事によって使い分けましょう。

④:ブログのコンセプトに合う

記事ごとのテーマに合った画像素材を選びましょう。

記事にマッチするアイキャッチを作成することで、意識的に内容をアピールすることができます。

⑤:無加工のまま使用できる

単体で十分魅力のある画像素材を選んだ場合は、無理に文字入れをする必要はありません。

意図的にブログ内で他記事のアイキャッチと差別化を図ることも可能です。

あふ太

あと、文字でのアピールはタイトルのみしたい記事の場合にも活用できるよ!

ブログアイキャッチ作成の注意点【3つ】

自作アイキャッチ!読まれるブログのテクニック!

ここからは、アイキャッチ画像を設定する時の注意点について解説していきます。

①:大切な情報はセーフティゾーン内に入れよう

大切な情報はアイキャッチ画像の「セーフティゾーン」内に入れるようにしましょう。

アイキャッチ画像はそれぞれのSNSで対応サイズに切り取られて表示されるため、意図せず伝えたい情報が見切れてしまう場合があります。

自作アイキャッチ!読まれるブログのテクニック!
あふ太

「セーフティゾーン」とは、SNSなどで表示された時でもアイキャッチが見切れることのない部分のことだよ!

また、各SNSでのアイキャッチ表示は、「OGP」と呼ばれるリンク画像を適切に表示する仕組みによってサイズに違いがあります。

「OGP」ってなんだ?

「OGP」とは、「Open Graph Protocol(オープン・グラフ・プロトコル)」の略で、SNSでブログがシェアされたときに、アイキャッチ画像やタイトル・説明文などをタイムライン上に表示させる仕組みです。

この「OGP」でアイキャッチが自動縮小されるため、サイズや描画部分を適切に設定しておかないと、重要な情報が見切れてしまうことになります。

主要なSNSでの推奨画像サイズは以下の通りです。

SNSサイズ
LINE横 630px * 縦 630px
はてなブックマーク横1200px * 縦840px
Facebook横1200px * 縦630px
Twitter横1200px * 縦630px
各SNSでの推奨画像サイズ

上記の通り、アイキャッチ画像のサイズは、汎用性の高い「横1200px × 縦630px」がおすすめです。

セーフティゾーンとして「横600px × 縦600px」内に大切な情報を入れるようにしましょう。OGP画像となっても情報が見切れることが無くなります。

とはいえ、「横1200px × 縦630px」は汎用性が高いというだけなので、連携するSNSにマトを絞ってサイズ調整できればベストです。

また、セーフティラインを意識し過ぎてもアイキャッチデザインの幅が狭くなってしまいます。あくまで目安として考えておきましょう。

あふ太

この知識があるだけで、アイキャッチ修正の手間がだいぶ減るよ!

②:素材は著作権に注意して使おう

企業やサービスのロゴなど「公式画像」をアイキャッチに利用する際は、ガイドラインに必ず目を通しましょう。

公式画像の利用に関するルールだけでなく、配布元によっては「利用すること自体が禁止」の場合もあります。知らずに著作権を侵害してしまわないように注意が必要です。

また、公式画像は最新のものか必ずチェックしてから使いましょう。

良く調べずに「古い公式ロゴ」や「よく似たニセモノのロゴ」を使ってしまうと、意図せずライセンス違反となってしまう可能性があります。

公式画像を取り扱うときは…

  • ガイドラインで画像利用の許可範囲を確認する
  • 最新のデザインかチェックする

公式画像は、取り扱うサービスや企業のイメージを伝えるのに最適な素材です。許可された範囲内で上手く活用して読者の目を引き付けるアイキャッチを作成しましょう。

あふ太

基本的に公式ロゴは「縦横比固定でのサイズ変更」のみが許可されていて、カラー変更や変形、画質が著しく悪いものの使用は認められないことが多いから気を付けよう!

③:画像の種類に合った保存形式にしよう

アイキャッチは、画像の種類によって適切な形式で保存しましょう。

適切な形式で保存することで画質の劣化を抑えることができるため、アイキャッチの見た目が綺麗になります。

主なブログ向けの画像保存形式

  • SVG:データを数値管理するため繰り返し編集をしても劣化は無いが、細かい表現には不向き
  • PNG:元画像のまま保存するのでデータが大きい。透明・グラデーションなどの表現ができる
  • JPEG:元画像データを圧縮(小さく)保存できるが劣化がしやすい。透明部分は白くなる
  • GIF:データが小さく透過もできるが、取り扱える色数が非常に少ない

例えば、ロゴやアイコン、イラストなどは「SVG(ベクタ形式)」での管理が綺麗で扱いやすく、実写画像など複雑な色や形を表現するものは「PNG・JPEG(ラスタ形式)」の方が向いています。「GIF(ラスタ形式)」は記事の説明用アニメーション画像向けです。

とはいえ、上記の通り「画質の高い=データが大きい」ということなので、画質にこだわり過ぎるとブログの読み込み速度が遅くなってしまいます。

適切な保存形式・サイズで画像素材を管理し、ブログの状況に合わせて綺麗で品質の高いアイキャッチ画像を作成するようにしましょう。

あふ太

「JPEG」と「JPG」は同じものだよ!「BMP」や「TIFF」は重かったり扱いにくかったりで、ブログのアイキャッチに使われることはほとんどないよ!

ブログアイキャッチ作成のコツ【7つ】

ここからは、アイキャッチ作成のコツ【7つ】についての解説です。

アイキャッチはなんとなく作るのではなく、「ある程度ルールを守って作る」方が見映えの良い仕上がりになります。

先ほど紹介した注意点と合わせて、より魅力的なデザインのアイキャッチ画像を作成できるようになりましょう。

①:関連する情報は近づけて配置しよう

②:配置やサイズを整列させよう

③:異なる要素にはメリハリをつけよう

④:デザインの反復で一貫性を持たせよう

⑤:印象的なキャッチコピーを入れよう

⑥:フォントを揃えよう

⑦:色合いを意識しよう

文字は見やすい色にしよう

アイキャッチ画像に記載する文字はハッキリと読みやすい色合いにしましょう。

NG例 文字が背景色とかぶっていて見難い

自作アイキャッチ!読まれるブログのテクニック!

背景色にもよりますが、黒背景部分に黒の文字。これでは全く目立ちません。

サイズが小さく表示される場合はなおさら目立たなくなります。

OK例 文字が明るい

自作アイキャッチ!読まれるブログのテクニック!

文字色を反対の白へ変更しバックエフェクトに黒影を入れてみます。

これならかなりハッキリしますが、全体がモノトーン色なのでまだ目立ちにくいですね。

文字をカラーに変更してみます。

OK例 文字の背景を暗く処理し、文字自体も発光エフェクトをかけ色を付けた

自作アイキャッチ!読まれるブログのテクニック!

カラーに変更して+ネオン処理、かなり目立つようになりました!

背景にも枠を挟んで透過処理をしてあります。

あふ太

このブログのアイキャッチはほぼ全部Canvaでつくってるよ!

無料版でもかなりの機能が使えるから試してみてね!

「Canva」公式

全体の色合いを意識しよう

アイキャッチ画像で目を引くために目立たせるのは重要ですが、あまりにも奇抜で見ていて気持ちの良くない色合いは避けましょう。

ブログジャンルや記事の趣旨、コンテンツの内容に沿った色合いの中で、アイキャッチのデザインを決めていきます。

まず、色の印象は、色相、明度、彩度と、3つの要素で構成されています。

何かを伝える為にあるアイキャッチ画像では、この3要素の組み合わせで目立つ色を選択します。

自作アイキャッチ!読まれるブログのテクニック!

補色とは上の図で「正反対に位置する色の組合せ」です。補色関係の色を並べてみるとハッキリした派手なデザインを作りやすいのでワンポイントで補色を入れ、アクセントとして利用されることが多いです。


類似色はその名の通り、「両隣の似ている色の組み合わせ」です。似ている色同士を使うと、統一感を出すことが出来ます。

明度は色の明るさで、こちらの数値が上がるほど光を当てたように白くなっていきます。暗い背景をまず用意し、明るい文字を組み合わせれば明度の差で文字のをより強調出来るようになります。

彩度とは、その色の鮮やかさです。明度と同じで、背景と文字の彩度の差を利用して目立たせることが出来ます。

NG例 近似色のアイキャッチ画像

自作アイキャッチ!読まれるブログのテクニック!

OK例 補色を利用したアイキャッチ画像

自作アイキャッチ!読まれるブログのテクニック!

OK例  明暗と白黒の差で強調したアイキャッチ画像

自作アイキャッチ!読まれるブログのテクニック!

補色関係が上手に使えると、デザインの選択幅も一気に増えます。

アイキャッチ作成に慣れてないうちは明暗差を上手に利用して作成してみましょう。

また、どの色の組み合わせが良いのか判断してくれるサイトツールも無料で利用可能です。

自作アイキャッチ!読まれるブログのテクニック!

これはAdobe ColorというAdobe社のツールですが、カラー指定をすると自動で目的別にカラー提案をしてくれるというスグレモノです。

アイキャッチ画像は記事投稿後も確認しよう

アイキャッチ画像を入れた記事の投稿が終わったら、記事の確認をするように心がけてみてください。

案外ミスタイプしていたり、修正前の画像をUPしていたりが多いことに気が付くと思いますので、すぐに修正するようにしましょう。

記事のメンテナンスや追記時にも修正できますので、古くなった記事のアイキャッチ画像もチェックする癖をつけてみるといいです。

【誰でもかんたん】自作アイキャッチ!読まれるブログのテクニック!まとめ

アイキャッチのブログでの重要さは伝わりましたでしょうか。

アイキャッチ、、、なんとなく分かってはいたけど、文字ライティングとデザインは別のカテゴリなのでなかなか手が出せずにいた人も多いんじゃないかと思います。

まずは「アイキャッチ作成をこまめにする癖をつける」切っ掛けから、

アイキャッチ作成に慣れてきたら、魅力的なデザイン、色使い、さらに早く作れるようになる(この投稿のアイキャッチ程度ならCanvaで一枚3分程度です)と思います。

あなたのブログが品質UPするように練習してみてください。

ブログについてもっと知りたい、始め方が分からない人へ!

あふ太

「あふたろぐ」では「初心者でも分かりやすいブログの始め方・運営方法」を紹介してるよ!

ブログを始めてみたい!ブログ運営の全体像を知りたい人はコチラ!

あふ太

WordPressブログを実際に始めたい人向けの、おすすめの開設方法はコチラ!

ブログを始めようTOPへ

-WordPress
-, ,