WordPressテーマ『十二単』リリース 🎉

クリック率向上に!簡単にセンスあるアイキャッチ画像を作る方法

もくじ

アイキャッチ画像について

アイキャッチ画像はその名の通り、アイ(eye)をキャッチするためのものです。サムネイルとも呼ばれていますね。

アイキャッチ画像イメージ

文字だけの記事一覧よりも画像があった方が目につく可能性が上がります。

アイキャッチ画像設定のメリット

アイキャッチ画像を設定するメリットとして、平均セッション数(=PV)向上があげられます。

アイキャッチ画像メリット

また、大体のWPテーマやブログソフトではSNSでシェアされた際にアイキャッチ画像がOGP画像に設定されるようにもなってます。

OGP画像のイメージ

そのため、SNS経由のユーザー獲得率の向上も狙うことができます。

アイキャッチ画像の作り方2パターン

  1. フリー画像をそのまま使う
  2. フリー画像を編集して使う

フリー画像をそのまま使う場合は下記サイトがお勧めです。

フリー画像を加工したり編集する場合は下記サイトがお勧めです。

Canvaでアイキャッチ画像を作る

登録 ~ サイズ選択まで

canvaは登録制ですので、まずは登録からです。

Googleアカウントを連携させればクリック数回と10秒程度で済みます。

登録を済ませてcanvaにログインするとトップページにアクセスできます。

ブログバナーを選択しましょう。

canvaデザインを作成イメージ
canvaデザイン選択2

あるいは画面左上あたりにあるデザインを作成ボタンからカスタムサイズを選択しても問題ありません。 単位はpx(ピクセル)推奨。

アイキャッチ画像は横2:縦1横3:縦2くらいの比率の横長画像を使うと良いかと思います。

具体的には500:300、600:300あたりなど。

あまり大きなサイズの画像を使うと、ページが重くなり表示速度の低下に繋がったりするので避けましょう

テンプレート選択 ~ 背景作成まで

洗練されたデザインというのは1px単位以下での調整や余白の設計、フォントの選択など、高度な技術や知識を要します。

もちろん、趣味運営であれば好きなように作成するのが良いですが、営利目的であればデザイナーさんの力を借りるかテンプレートを使用するのが無難な選択です。

canvaテンプレート選択

色はサイトのメインカラーに合わせると統一感が生まれます。

変更したい部分にカーソルを合わせると緑枠に囲われるので、上部のカラーパレットを選択し、色を調整しましょう。

タイトル挿入 ~ タイトル調整

次に記事タイトルを画像に挿入(コピペ)します。

この際テンプレートに付属している不要な箇所はドラッグで外に放り出すかdeleteキーで削除可能です。

canvaでテキストを挿入

左部バー内にあるテキストからテキストが挿入できます。色やフォントの変更は上のバーから可能です。


👉 フォントの選択

フォントはサイトの雰囲気に合わせ、ゴシックか明朝体を選ぶのが当たり障りがありません

また、デザイン主体のフォントは基本的に可読性が低いため、慣れないうちは使わない方が良いでしょう。

フォントの適切な使い方

デザイン主体のフォントはワンポイントとして使うか装飾として使うのに適しています。


👉 色の選択

今回は背景が青なので黒文字だと可読性(見やすさ)が落ちてしまいます。

薄い背景には濃い文字色、濃い背景には薄い文字色を使うと良いでしょう。

また、テキストが短ければ問題ありませんが、長いテキストにおいて全てが同じ文字サイズ、文字色だと情報量が多く、パッと見たときに視線が迷ってしまいます

そのため、見た人の心をつかみそうな部分や見てほしい部分を変更しましょう。

ここでは文字サイズを大きくし、補色(反対の色・背景に対して目立ちやすい色)を使用してみます

アイキャッチ画像はあくまでアイ(eye)キャッチが目的なので目立ってなんぼくらの気概で作った方が良いものができやすいかと思います。

なお、補色は慣れてくれば感覚で選べるようになってきます。

補色のイメージ

慣れるまでは逐一調べてみましょう。調べる際は下記サイトがおすすめです。

反対色と補色を調べます。

フリー素材使用 ~ フリー素材調整

Canva内にもフリー素材はたくさんあります。

左のバー内にある素材のところに多種多様なものがあります。

ですが、それらの素材がサイトの雰囲気と合わなかったり、検索をかけても有料素材しか出てこなかったり、同じ画像を何度も使用したことがあったりなどの諸問題が出てくることがあります。

そんなときは先ほど挙げたフリー素材サイトが活躍します。

今回はfreepikを例にとってみます。

freepikイメージ

トップページの検索窓からアイキャッチに合いそうな素材を探しましょう。右のバー内にあるベクトルを選択するとイラストのみ表示されます。

ベクトルはvectorのことで正しくはベクターだったりします。同じつづりで異なる発音の仕方があるため翻訳が失敗しているだけですね。

ここでダウンロードした素材をCanvaへドラッグしてアップロードします。

canvaに素材をアップロードするイメージ

左のバー内にあるアップロードの項目からアップロードした画像を選択して使いましょう。トリミングも直感的にできます。

こうして出来上がったものがこちらですね。

canvaで作ったアイキャッチサンプル

Photoshopなどを使用し、背景透過したり塗りつぶしなどを行うと少し凝ったものに仕上がります

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

[…] Canvaなどで適当に画像を作ります。画像サイズは3:4くらいの横長画像がおすすめです。Canvaの使い方は以前記事でご紹介したので参考にしてみてください。 […]

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。