■アイキャッチの重要性

記事コンテンツに用いられるアイキャッチ。

一見、簡単にできそうと思われがちですが、レイアウトや配色・情報量のバランスを考えだすと意外と作成に手間と時間をとられてしまった。なんて経験はありませんか？

魅力的かつ効果的なアイキャッチは、集客力やSEOにも影響を与えます。

今回はアイキャッチ作成初心者でも簡単にアイキャッチが作れるようになる！アイキャッチ作成のポイントをご紹介していきます！

■アイキャッチ画像って何？

・サイト内の記事一覧で表示される画像
・SNSでシェアしたときのOGP画像として表示される画像

▶OGPとは？
「Open Graph Protocol（オープン・グラフ・プロトコル）」の略。
URL・サイトタイトル・画像・サイト説明文 などの情報を指します。

引用元：https://aumo.jp/

サムネイルとの違いとは

では、最近よく耳にする「サムネイル」との違いって何だと思いますか？

 

例）Mola | あなたの「人生に役立つ」を網羅するサイト（https://mo-la.jp/）

アイキャッチ画像が縮小された状態で表示されます。

つまり、「アイキャッチ画像」は右のようにサムネイル化され縮小された状態でも意図の伝わりやすいものが理想的なものと言えます。

■アイキャッチ作成のポイント

重要な２つの要素

「写真・イラスト」と「文字」のみ！！

この２つだけです。

では、この２つのポイントをそれぞれ詳しくご紹介していきます！

【⒈写真・イラスト】素材選びの6つのポイント

①主役が伝わりやすい写真を選ぶ
②印象的な色を取り入れる
③目に留まりやすい顔写真を使う
④ブランドコンセプトに合わせる
⑤ポップなイラスト素材を使う
⑥写真のみで勝負できるもの

全てを網羅するというわけではなく、目的に応じて項目1～3個を目安に組み合わせて検討していきます。

①主役が伝わりやすい写真を選ぶ

例）香水

伝えたい主役が伝わりやすい写真を選ぶ場合には、中心に題材のものや人が配置されている素材を選ぶようにしまょう。

②印象的な色を取り入れる

例）秋のおすすめネイル

印象的なイメージカラーを取り入れることで、季節感やトレンドを組み込むことが出来ます。

③目に留まりやすい顔写真を使う

例）ファッション・恋愛系

顔写真は単体でもユーザーの目に留まりやすいのが大きな特徴です。追加で細かな編集を加えずとも、印象的なアイキャッチを作成することが出来ます。

④ブランドコンセプトに合わせる

例）おすすめマスク情報

ブランドがあればそのコンセプトに合った魅せ方で作成しましょう。ブランドイメージにあったカラーやフォント種を活用することで、意識的に内容を伝えることが出来ます。

⑤ポップなイラスト素材を使う

例）人気サッカーシューズについて

写真だけでなくイラストを使うことで、写真にはないクリエイティブ感やトレンド感を演出することが出来ます。

⑥写真のみで勝負できるもの

例）動物系

動物などの印象的な写真を使用する場合や、記事タイトルのみで惹きを作りたい場合には、必ずしも、写真・イラストに文字を入れる必要はありません。また他アイキャッチとの差別化を図りたい場合にも有効です。

＜Before＞

▼問題点
・LGBTQに関しての知識をもたないユーザーに内容が伝わりにくい
・小説を題材とした記事が写真のみでは連想できない

＜After＞

▼ポイント
・伝えたい主役は小説なので小説を連想させる素材をメインに
・デリケートな表題でもあるため写真では無くポップなイラストに
・LGBTを象徴するカラーを使用

 

【2.文字】テキストにこだわる

①文字を目立たせる
②効果的なキャッチコピーを入れる
③文字の配置にこだわる

次に写真やイラストだけでは伝えきれない情報を文字で補っていきます。

①文字を目立たせる

白配色の多い背景写真に対して白文字を使用してしまうと見にくいように、使用する写真素材に合わせて魅せ方を工夫することも重要です。またイメージに合わせてフォント種も検討してみましょう。

・ゴシック体：「カジュアル」「力強さ」「信頼感」
・明朝体：「高級感」「繊細さ」「上品」「知的」
・行書体：「和風」「伝統」「しなやかさ」
・デザイン書体：「ポップ感」「お得感」「新しさ」等々

②効果的なキャッチコピーを入れる(疑問形・訴えかける系)

「痩せたい！」と思っているユーザーに対して行動を促すアイキャッチ
ダイエットをしたくでも実際に行動できない人が多い⇒「じゃあいつ痩せるの？」

興味・関心があるユーザーに対して共感を生むアイキャッチ
知っているようで知らない⇒共感を生む疑問形テキスト「～って何？」

無意識にしちゃっていたかもと思わせる注意喚起系アイキャッチ
知らずに自分もしているかも⇒「こう思われる可能性がある」「気にした方が良いですよ」

②効果的なキャッチコピーを入れる(NG例)

特に下段のようにスマホ表示になると、文字量が多いだけで、さらに読みづらいアイキャッチ画像になってしまいます。

アイキャッチ内の文字はあくまで補足要素！です。(こことても重要です)

———————————————————————

■画像内テキストの意識すべき２つのポイント
ⅰ. 単語中心の構成
ⅱ.長い文章にしない

＜Before＞「花の色によって意味が違うバラの花言葉15選　贈るなら本数にも注意」
＜ After  ＞「バラの花言葉の秘密～本数で変わる意味～」

また、文字を読まずとも写真だけで記事内容を連想させるような素材を選ぶことも重要です。文字量とのバランスを意識するだけでも、見え方は180度変化します。

③文字の配置にこだわる

・トリミングを意識

写真に文字を重ねる時、切れてしまうと困る情報・目立たせたい情報がある時は、なるべく中央に文字を置きます。トリミング状況によっては、上下左右が切れてしまう場合がある為、注意しましょう。

■アイキャッチ推奨サイズ

▶推奨理由
・ページの読み込みが早くSEOに有効
　└重すぎる写真使うとページによってはパフォーマンスが低下

・Google、Twitter、Facebookの推奨サイズ
　└Twitter、Facebookの表示比率が「1.91:1」(SNS等のOGPに対応)

・LINEは正方形で表示される（オレンジ部分：630×630px）
　└SNSでシェアされやすいアイキャッチに

 

■バナー広告にも活かせる配置やレイアウト

・配置レイアウト

字間調整（カーニング）も忘れずに行いましょう。文字間の不自然な空白は、違和感に繋がります。文字数が少ない時は、中心に寄せるように意識するとスッキリとまとまります。

なお、GDNの場合にはテキスト量の指定があります。画像内に含めるテキスト量は20%以内を目安に作成しましょう。また文字サイズがユーザーにとって伝わりやすいかにも注意しましょう。

・遷移先ページとの関連性

バナーにはメインビジュアルに使われているカラーや、遷移サイトのメインカラーを使うことをおすすめします。遷移先イメージと異なる配色の場合、離脱率が上がってしまう可能性もあります。

例えば、赤メインのバナーをクリックした先のページが青を基調にしたページだった場合、ユーザーは大きな違和感を感じます。

そのため、バナーと遷移先のページに関連性をもたせることが重要です。

■まとめ

アイキャッチは読者やターゲットユーザーの最初に目につくものです。
つまり、デザインが素敵であればユーザーも思わず記事を読んでしまいます。

みなさんはお洒落なパッケージだからついつい商品を買ってしまったなんて経験はありませんか？いわゆるジャケ買い、パケ買いです。（私はよくしてしまいます…。）

そんなユーザー行動を、アイキャッチ画像でも促すことが出来ます！今回ご紹介したポイントを参考に、ユーザーが思わず目を惹いてクリックしたくなってしまうような、魅力的で効果的なアイキャッチをぜひ作ってみてください。