DevIOブログにおける知見やノウハウを共有する社内勉強会『 DevelopersIO ブログ勉強会2023 #5 』が開催され、今回は「デザイン」をテーマに、デザイナー3人が登壇しました。
本記事では、DevIOブログにて扱われる「アイキャッチ画像」とはどういうものなのかを考えます。
実際に「アイキャッチ画像」がどこで使われどんな役割を持っているのかを知ることで、アイキャッチ画像に必要な要素が理解でき、画像作成時のヒントになれれば幸いです。
具体的な画像についての概要を説明した「これを知れば記事のクオリティがさらにUPする画像データの基礎知識」、アイキャッチの作成方法を紹介する「Figmaでアイキャッチが簡単に作れる！」の２つも通して読んでみると、より迷いなくアイキャッチ画像の作成に進めると思います。
アジェンダ
アイキャッチ画像ってなんのためにあるの?
「アイキャッチ」とはどういう意味か？というところを説明していきます。
DevIOブログにて記事に設定されたアイキャッチ画像は、表示形式の違いやSNSなどの複数箇所で表示されることがあると思います。
ざっくり、よく目にする表示箇所を4つ集めてみました。
左上から、
①DevIOブログ記事の一番上に表示されたときの画像
②DevIOブログTOP画面などの一覧で表示されたときの画像
③facebookにて記事URLを共有したときの画像
④X（旧Twitter）にて記事URLを共有したときの画像
この4つ、すべて画像の名称と役割が違います。
正解はこちらです。
①DevIOブログ記事の一番上に表示されたときは「キービジュアル」
②DevIOブログTOP画面などの一覧で表示されたときは「サムネイル」
③facebookにて記事URLを共有したときは「OGP」
④X（旧Twitter）にて記事URLを共有したときは「バナー」
では4つの画像の意味と役割を見ていきます。
①キービジュアル：ブログ記事の内容や意図をわかりやすく伝える役割
②サムネイル：画像などコンテンツを表示する際の縮小表示させた見本の役割（参考:wikipedia）
③OGP：SNSでシェアされたときにページ内の内容や要素を正しく伝える役割
④バナー：広告や宣伝用にリンクさせ、ページに遷移する役割
このように、DevIOブログでは、記事に設定した1つの画像が4つの役割を持つことになります。
そして、「アイキャッチ」という名称は、視覚で情報を伝える方法のことを指します。
キービジュアル、サムネイル、OGP、バナーの4つの画像の役割は全て、読者の視覚に訴えかけて、閲覧やクリックなどの行動を促すものです。
4つともすべて読者の視覚を捉える要素ということで、DevIOブログでは「アイキャッチ」と呼んでいます。
ではここからは、DevIOブログでの「アイキャッチ」の役割を、1つずつ独自の例えを入れながら解説していきます。
①記事上のキービジュアル
DevIOブログにおいてのキービジュアルは、「本の表紙」のようなものと考えてみるのはいかがでしょうか。
本の表紙とは、タイトルや内容を補完する役割であり、ざっくりとどんな内容なのかを伝えるものです。
キービジュアル（本の表紙）から記事の内容が想像でき、興味を持って本文に進みやすくするためのものになると良いと思います。
②TOP画面のサムネイル
キービジュアルが本の表紙とするならば、TOP画面でのサムネイル表示は「本棚にならんだ状態」と考えられます。
読者は本棚から気になる本に手を伸ばすように、読みたいと思った記事をクリックして記事を開きます。
本の表紙が内容に沿った的確なビジュアルなら、中身が想像しやすく手に取りやすいと思います。
こちらのサムネイル表示状態でも、キービジュアルと同じく記事の内容が想像できるという要素があると良いでしょう。
キービジュアルとの違いですが、サムネイル表示時には画像サイズが縮小されるという点に注意してください。
細かすぎる文字や写真を使ってしまうと、サムネイルでは潰れて見えてしまい、せっかくの重要な要素が伝えられなくなってしまいます。
③SNSシェア時のOGP
少々OGPおよびSNSの特性について考えてみます。
facebookなどのSNSでは、コンテンツ更新頻度が高くすぐに情報が古くなってしまいます。
即座に読者の目に止まるものでないと、なかなかクリックしてもらえない可能性が高いです。
ではどんな要素が目に止まりやすいでしょうか。
facebookでの投稿に絞りますが、投稿文や、OGPに付属して展開されるタイトルや導入文よりも、画像の方が大きく表示されるため、画像から得る情報が多い方が良いと思います。
そのため、画像内でのテキストは太めのゴシックや読みやすさを重視し、一目で状況がわかるイラストやアイコン、ロゴマークなどが目に止まりやすいかと考えます。
ここでも、キービジュアル、サムネイルと同じく記事の内容が想像できるという要素が必要ですが、ここでの違いは、より視覚的にわかりやすいものの方が良いという点です。
DevIOブログ上でのアイキャッチの役割を「本」で例えてきましたので、facebookなどのSNSでシェアをした時のOGPも本に関連して例えてみると、「街中の本のポスター」かなと感じました。
流れの早いSNSで目に止まるOGPと、街中の人混みを歩きながらふと目に止まる本の宣伝ポスターを関連づけて想像してみました。
④X（旧Twitter）シェア時のバナー
X（旧Twitter）でシェアした際、以前まではOGPと同じくブログタイトルや導入文が表示されていました。
しかし2023年10月頃から、XでのOGPは画像表示のみになり画像左下にドメイン名が追加されるという仕様に変更されました。
ここで注意しないといけないのは、画像をクリックしないとブログへ遷移できないこと、普通の画像投稿との差異が見えづらいことです。
画像情報からページへ遷移するのは、どちらかというとバナーの役割に近くなります。
記事を見てもらうには画像をクリックしてもらうことが必要なため、画像投稿と勘違いされてしまうとクリックされずにスルーされてしまう可能性があります。
「これはブログ記事であり、この先に読み物がある」ということをわかってもらう必要が出てきました。
キービジュアル、サムネイル、OGPでは、「記事の内容が想像できるという要素」があると良いと書きましたが、Xにおいての表示（バナーの役割）としては、「〇〇する方法」や「〜してみた」などの「情報がこの先にある」というのをあらわす惹きのテキスト要素が必要になってきます。
ここでは、Xにおいての表示（バナーの役割）を「本屋さんのポップ」と例えてみます。
本屋さんでは、おすすめの本の横に宣伝のスタンドが立っている場合がありますね。
この本にはこんな情報が詰まっているよという文言が書かれており、それが気になったり欲しい情報だったりした時には、つい本に手が伸びるかと思います。
DevIOブログにおける「アイキャッチ」の役割からわかる理想のカタチ
DevIOブログにおいては、1つのアイキャッチ画像が4つの役割を持つことがわかりました。
4つすべてに共通することは、「ざっくり記事の内容がわかって、どんな結末になるのかがきになる」こと、キービジュアル以外の3つは「クリックしたくなる」という機能を満たせる要素があると理想です。
素敵なアイキャッチをつくるために
具体的に、どんな感じに作れば素敵になるでしょうか。
仮のタイトルと内容でアイキャッチ画像のラフを作ってみます。
【例】「タイトル:パワーポイントでアイキャッチ画像をつくってみた」
- 初心者向けに、誰でもつくれるパワーポイントでの画像作成方法
- パワーポイントならではの便利な機能を紹介
- 画像作成ソフトのようにはできないこともあるけども、簡単につくれるよというメッセージ
一番簡単なパターン
タイトルとイラスト、タイトルとロゴマークで構成してみました。
「ざっくり記事の内容がわかる」という点をクリアしたものになります。
タイトルテキストを読みやすいコントラストで置き、作業を想像できるイラストや使用したソフトウェアのロゴマークを配置するだけでも、ざっくり内容が想像できるかと思います。（パワーポイントのロゴマークは仮のオブジェクトを配置しています）
また、タイトルには入れていませんが「非デザイナー必見」の要素をアイキャッチに入れて、誰でも始めやすいという印象にしています。
※イラストやロゴ素材を使用する際には、規約やルールを必ず確認し守って使用してください。
もっとよくしてみよう
タイトルの要素だけの配置が一番簡単ですが、タイトルや内容からキーワードを抜き出した要約した短い文章の方が、この記事を読んでもらいたい人に分かりやすく届きやすくなるかもしれません。
「簡単に画像が作りたい人向け」と、「パワーポイントの使い方を知りたい人向け」という2つの違いをつけてみました。
上：「簡単に画像が作りたい人向け」には、急いで画像をつくりたいと思っている人に読んで欲しい、誰でも簡単に操作できるというのを伝えたい意図
下：「パワーポイントの使い方を知りたい人向け」には、パワーポイントの活用方法を知りたい人や、パワーポイントの機能としてできたこと/できなかったことのレポートを読んで欲しいという意図
「ざっくり記事の内容がわかって、どんな結末になるのかがきになる」、情報がこの先にあるため「クリックしたくなる」というのをクリアしたものです。
さいごに
アイキャッチとは視覚的に情報を伝える方法です。
いつもの記事にひと工夫するだけで、この情報を届けたいひとに届きやすくなるかもしれません。
どんなアイキャッチを作ったらいいかわからない...と悩んでいる方は、このアイキャッチがどこに表示されて、どんな情報があったらいいのかを思い浮かべながらアイキャッチを作ってみてください！
3
