7-4. アイキャッチ画像の作り方

アイキャッチ画像の作成が請け負えると、単価アップ交渉の材料として有利に働きます。

そこで、今回は単価アップ交渉の材量となるアイキャッチ画像の作成方法について、いくつかのパターンを紹介します。

アイキャッチ画像をこだわるべき理由３選

アイキャッチ画像は、サイトにとって3つの大きな役割があります。

最初に読者の目がとまる

アイキャッチ画像は、読者の目に最初にとまるところです。

一般的にWEBサイトに訪れたユーザーは、そのWEBサイトが自分にとって必要かどうか3秒で判断すると言われています。

そのため、アイキャッチ画像のデザインが素敵で訴求力があれば、ユーザーが興味を持ちやすいのです。

ブログ記事はもちろん内容が重要ですが、アイキャッチ画像にまでこだわっているブログの方が、記事のクオリティも高そうに感じますよね。

SNSから流入が増える

ブログ記事をSNSに投稿すると、アイキャッチ画像が表示されます。

たとえば、Twitterの場合だと次のように表示され、アイキャッチ画像が目を引きます。

アイキャッチ画像が、SNSのタイムラインを流し読みしている人の目を留めるきっかけになります。

トップページのデザインがおしゃれになる

ブログのトップページはアイキャッチ画像が一覧で表示されます。そのためアイキャッチ画像のデザインがトップページのデザインに大きく影響してきます。

トップページのデザインがキレイだと、読者を回遊させやすくアクセス上昇に繋がります。

一方で、デザインがダサかったり、古臭いイメージを与えると、それだけで読者離れに繋がってしまいます。

アイキャッチ画像を作るおすすめツール３選

アイキャッチ画像を作成する場合は、次のいずれかのツールを使うのがおすすめです。

• Canva
• PowerPoint（パワポ）
• illustrator（イラレ）

ブログ初心者や時間をかけずアイキャッチ画像を作りたい人は「Canva」、パワポに使い慣れている人は「パワポ」、こだわりたい人やデザインを仕事にしたい人は「イラレ」がおすすめですよ！

Canva

これからブログを始める方や、PowerPoint（パワポ）やillustrator（イラレ）に慣れていない方は、Canvaを使うのがいいでしょう。

Canvaのおすすめできる点は、次の4点です。

• デザインテンプレートが豊富で、簡単におしゃれなアイキャッチ画像が作れる
• 無料で使える
• シンプルで直感的に操作できる
• スマホやタブレットでも操作できる

Canvaは、なんといってもデザインテンプレートが豊富で、簡単におしゃれなアイキャッチ画像を作れるのがメリットです。

また、無料で使える画像も豊富に用意されているので、比較的自由度も高いです。

無料版と有料版のCanvaProがありますが、無料版でも機能が十分に備わっているので、まずは無料版からはじめてみることをおすすめします。

PowerPoint（パワポ）

PowerPoint（パワポ）に使い慣れている方なら、パワポやGoogleスライドで作るのもおすすめです。

パワポは、本来資料作りに使われるビジネスツールですが、アイキャッチ画像作成にも使えます。

パワポがCanvaよりも優れているのは、次の3点です。

• パワポに慣れていれば、操作を覚える必要なし
• 図形が豊富で自由度高く使える
• ローカルで作業できるので、ネット環境で作業遅延が起きない

パワポは、アイキャッチ画像のテンプレートはありませんが図形を組み合わせれば、それなりにおしゃれなアイキャッチ画像が作れます。

新しい操作を覚えるのが面倒な方は、使い慣れているパワポを使うといいでしょう。

illustrator（イラレ）

illustrator（イラレ）は、Adobe（アドビ）社が提供しているグラフィックデザインツールです。

アイキャッチ画像だけでなく、ちらし・ポスター・パンフレット・ロゴ・名刺などあらゆる制作物をつくるときに使われるツールです。

イラレはWEBデザインでは欠かせないツールとなっているため、プロのWEBデザイナーを志す方は習得すべきでしょう。

illustrator（イラレ）が優れているのは、次の3点です。

• 本格的なデザインのアイキャッチ画像が作れる
• 解像度の劣化を防ぐことができる
• ロゴ制作も行えるため、ブログ全体のクオリティが上がる

イラストレーターを使うと、クオリティの高い画像が作れますが、機能が豊富なため操作を覚えるまでかなり時間がかかります。

また、単体で月額2,728円/月かかるので、アイキャッチ画像制作のみを目的とする方には、少し勿体ないかもしれません。

アイキャッチ画像を作る時の５つのポイント

アイキャッチ画像はこだわるべきですが、時間をかけすぎるのも良くありません。

短時間でもクオリティを担保する5つのポイントを紹介します。

• テイストを統一する
• 原色は使わず、使用するのは3色まで
• 記事の内容に合ったフリー画像を使う
• フォントにこだわる
• テキストを目立たせる

テイストを統一する

アイキャッチ画像のテイストを統一すると、サイト全体がまとまります。

前述したとおり、アイキャッチ画像はトップページに一覧で表示されるため、統一感があるだけでブログのクオリティがあがります。

また、SNS等で発信するときもアイキャッチ画像のテイストが揃っていると、フォロワーに認知されやすくなります。

Canvaの場合は、同一のテンプレートを使えばテキストの統一感がでます。使うにしても2～3個程度だけテンプレートを使いましょう。

また、ある程度アイキャッチ画像のルールを決めておくと、短時間で制作できますよ。

原色は使わず、使用するのは3色まで

原色・純色はプロのデザイナーでも使うのが困難で、使うと一気にダサくなります。

次の画像のように原色・純色を使うと目がチカチカし、安っぽくなります。

画像編集ソフトに標準搭載されているカラーはなるべくそのまま使わずに、彩度や明度を調整して色味をかえていきましょう。

また、色を使いすぎるとチープになってしまうので、使用する色は黒・白以外で3色までにしましょう。

色が増えれば増えるほど視覚的な情報量が多くなってしまうので、伝えたい情報が伝わらりづらくなります。

ブログ全体のイメージカラーを決め、それに合わせた色使いをするとキレイにまとまります。

記事の内容に合ったフリー画像を使う

アイキャッチ画像は、記事の内容が一瞬でわかる写真を使うのがベストです。

次のとおり「ワードプレスの初期設定」をテーマに、良い事例と悪い事例を比べてみます。

ワードプレスがテーマの記事なので、悪い例のコーヒーの写真は使うべきではありません。

この場合、パソコンがメインの写真が望ましいでしょう。

フォントにこだわる

フォントを変えるだけで、アイキャッチ画像の印象は大きく変わります。

次の画像は、4つの異なるフォントを使った画像の比較です。

一般的には、ゴシック体・明朝体が主流ですが、Canvaやパワポ、イラレでは複数のフォントが使えます。

また、「FONT FREE」などのサイトを使えば、無料フォントをダウンロードすることができるので、好みのフォントを探してみるといいでしょう。

テキストを目立たせる

アイキャッチ画像にテキストを載せる場合も、少しの工夫で目立たせることができます。

例えば、次の画像だとテキストが画像に沈んでしまっていて、非常に視認性が悪いですよね。

そこで、少し工夫をするだけでテキストを目立たせる方法を解説します。

1つ目は、テキストを縁取りする方法です。簡単ですがこちらも文字が見やすくなります。

ふちどりは、背景が暗い場合は白、背景が明るい場合は黒を使うのが簡単です。慣れてきたら、他の色を使ってみてもいいですね。

2つ目は、テキストの背景に図形をかぶせる方法です。文字の背景に白や黒の長方形などの図形を配置することでテキストが読みやすくなります。

図形は、背景の透過度しても不透明でもかまいません。

透過すると写真が目立ち、テキストが写真になじみます。一方で図形を不透明にすると、文字がくっきり見えるので、テキストがより目立ちます。

3つ目は、フォントを横幅いっぱいに表示する方法です。画像が目立たなくなりますが、フォントが目立たせたい場合はありです。

フォントが単純に大きいだけで、雑誌の表紙やポスターのような印象にできるので、簡単なわりにはおすすめです。

アイキャッチ画像を作るときの注意点３選

アイキャッチ画像を作る時には、次の3点に注意してください。

• ファイルサイズは200KB以下にする
• 画像サイズは 1200×630px（1.91：1）にする
• 拡張子をPNGにする

ファイルサイズは200KB以下にする

アイキャッチ画像の画質が高いに越したことはありませんが、必要以上にサイズが大きいと画像の読み込みに時間がかかり、読者が離脱してしまいます。

画像サイズはできるだけ圧縮するべきで、目安としては200㎅以下に設定することです。

Googleの公式発表で、ページ容量「1.6MB以内」を目指すべきとしています。記事内に複数枚の画像を設置することや、画像以外のデータも考慮すると200KBが精いっぱいでしょう。

一方で、画像・写真素材の大半は1MB（1,000KB）以上の大きなファイルサイズのため、そのまま使うと容量が大きすぎます。

そのため、アイキャッチ画像は公開前に圧縮する必要があります。

おすすめは「Squoosh」というGoogle Chrome Labsが提供している画像圧縮サービスです。ブラウザ上からドラッグ&ドロップで簡単に画像の圧縮ができます。

画像サイズは 1200×630px（1.91：1）にする

Googleが推奨している画像幅が1200pxです。1200pxに合わせてSNSに投稿することを考えると、縦幅は630pxがいいでしょう。

これはTwitterの表示サイズが2：1、Facebookの表示サイズが1.91：1となっていることが理由です。

Facebookの場合はぴったしのサイズですが、Twitterの場合は上下が15px切れます。ただし15px程度なのでそこまで気にしなくて大丈夫でしょう。

1200×630pxに設定するのが大変だったら、汎用性が高い1200×675pxの16：9でもいいですよ。

また、テキストはなるべく画像の中心に配置すると、アイキャッチ画像で正方形で切り取られた時でもテキストがキレイにおさまります。

拡張子をPNGにする

画像ファイルの拡張子は、PNG（ピング）がおすすめです。画像ファイルのあとに「.png」とついているのがPNGファイルです。

ただし、PNGファイルは若干重くなる傾向があるので、200KBを大きく超えそうな場合は、JPEG（ジェイペグ）で代用するといいでしょう。

さきほど紹介した「Squoosh」では、OxiPNGファイルに変換するとPNGファイルになります。

Googleが推奨しているのは、拡張子WebPですが2022年現在だと、WebP非対応ブラウザが10％ほどあるので、まだPNGファイルを使えばいいと思います。

簡単なポートフォリオを作ろう

アイキャッチ画像のサンプルとして、簡単なポートフォリオを用意しておくといいでしょう。

ポートフォリオとは、簡単にいえば作品集です。

簡単なものでかまわないので、次のようにパワポ等でつくってPDF形式にしておくといいでしょう。