【反省と検証】ブログの集客とアイキャッチデザインを考える

ブログとは切っても切れない関係(と自分では思っている)アイキャッチのデザインについて、自分のブログのアイキャッチを振り返りながら傾向や対策、デザイン部分の技術的な手法も少し触れてみたいと思います。

ふうが
ふうが

アイキャッチは主にインデックスページや内部ブログカードやSNS投稿時のOGPなどに使われます。写真だけだったり、文字が入っていたり人それぞれですね。

しら
しら

こんなの凝る暇があったら記事に力をいれい!ってなるかもしれませんが、コレが中々に奥深い世界。サイト全体の雰囲気にも影響しますし、SNSからの流入を狙うのであれば、ちょっとカジっておいて損はないと思いますよ。

アイキャッチとは?

こういうやつです。今回のアイキャッチ画像はこれですね。

さて、画像を見ていただければわかるとおりアイキャッチ画像はその記事の看板のようなものです。私の場合はブログタイトルやちょっとした文言を追加してある程度その記事の雰囲気が分かるように心がけて作るようにしています。

例えばSNSのタイムラインで文字とURLだけで投稿した場合と、ちゃんとアイキャッチが設定されている場合で比較すると、文字だけだと目に入らなければ膨大な他の投稿に紛れてそのまま流れてしまうことが考えられます。機会損失。

Twitterの投稿画面、まずアイキャッチ画像が目に飛び込んできますよね。

このように、やっぱりアイキャッチ画像のデザインというのは重要なんだな・・・と考えています。であればどのようなデザインが良いのか。少し考えていきましょう。

でも、その前に・・・

アイキャッチの種類

そもそもアイキャッチと言っても色々なタイプがあります。少し実例と共に見ていきましょう。

王道の画像+文字パターン

めちゃくちゃよく見かける気がしますこのパターン。

背景に画像や写真を置いて、その上にタイトル・サブタイトルを乗せていくやり方です。イメージが掴みやすいしタイトルもはっきり見えますので一番メジャーなやり方ですね。たぶんこのタイプを量産していけばブログ運営としてはそんなに問題にならない気がします。

きり
きり

まぁ、ちょっとありきたり過ぎるという印象はあるデスけどね。強烈なオリジナリティとかは出しづらいかもしれない。

文字メインパターン

これもよく見るパティーンのやつ

これは、どちらかというと文字メイン+ワンポイントのイラストなどで構成されています。とにかくメインタイトルの文字を大きく表示できるので記事タイトルがキャッチーであればあるほど、効果が出そうな感じですね。

ふうが
ふうが

文字メインだと、フォントや配色でほとんどの要素が決まってしまう為、下手すると痛い感じに仕上がりがちですね。

イメージ写真のみパターン

記事イメージを画像だけで沸かせる手法

こちらは直接的には文字を挿入せず、関連写真を組み合わせたりして記事の中身をイメージさせる手法です。もちろんこの画像だけ見てもなんの記事かわかりませんよね。ただ、ここで記事タイトルが「新型コロナを早期発見?血中酸素飽和濃度を自宅で計測するにはアレが最適だった!」とか書いてあると、これはなかなかキャッチーですよね(くれぐれも薬事法には触れないように)。

しら
しら

記事の中身が全てだとは思うけど、なにも考えずに風景写真がアイキャッチだったりすると、少しもったいないと感じなくもないよね・・。

その他、組み合わせなど

こういった枠を付けたり、文字と余白の組み合わせでオリジナリティを出したりすることもできます。こうなってくると、チラシとかフライヤー・書籍の表紙みたいなテイストに近づいていきますね。ちょっとしたオサレ感が出てきます。

ふうが
ふうが

どちらかというと、ややデザイン重視になりがちなので注意が必要です。大事なのは結局見た人が記事を読んでくれるかということですもんね。

アイキャッチに必要なもの

それでは、どんな画像がアイキャッチに最適なんでしょうか。考えてみます。

アイキャッチに大事なもの
  • まずは、画像そのものが目を引き、興味をそそる
  • その画像を見て記事がどういうものなのか理解できる
  • できえば記事のテンションや雰囲気が画像から漏れ出る
  • もしくは画像のインパクトでとりあえず記事に引き込む
  • 結果、その記事を読もう!となる。

結論から言えばとにかくクリックしてもらえるかどうかに尽きるという話なんですが、それ以上にアイキャッチがしっかりしている、または独自性があるブログって他の数多あるブログの中でもユーザーが定着してくれる優位性が高いような気がします。新規流入に対しても効果的です。

サーチエンジンからの流入であればほぼ文字で誘因するので、あくまで画像はおまけかもしれませんが例えば、

  • そのランディングしたページから他のページを見てもらう為には?
  • 内部ブログカードや外部ブログカードで誘因したい場合には?
  • SNS流入で一番最初に目につくのは?

などなど考えた際には、しっかりとしたデザインでアイキャッチを作ること自体がブログのPVを上げるためにも有効だろうなぁと思うわけです。

そうしていく上で、アイキャッチ画像として必要な要素は

  • 画像から記事の内容が一目でイメージできる構成
  • 視認する時間が短いので、読みやすく分りやすいデザイン
  • 内容や結果が見たくなるような誘因

といったところでしょうか。

ちょっと逆に悪い例からケーススタディしていきましょう。

やらかしちゃってるデザイン

失敗作を前にうなだれる筆者(嘘です)

色々アイキャッチを作っていくと、出来不出来がもちろんあります。新しいデザイン手法を学んだあとに自分が過去に作ったものを見ると「あちゃぁ・・・」となることも。ここでは、このマーケットフォギアの過去のアイキャッチを見ながら失敗しているところを確認していきましょう(悲)

きり
きり

ある意味黒歴史。でも、過去の失敗に向き合わなくては進歩はない!デス!

文字詰め込み過ぎ+フォント選定ミス

いろいろがんばったのに。。

ぱっと見は悪くない?いや、でもやっぱりダメですね。なにがダメなんでしょう。

  • 画像内の文字が小さく、文字数が多い(情報過多)
  • 肝心の商品が文字に隠れて見えない
  • メイン・サブタイトル共にフォントを崩し過ぎている
きり
きり

ズタボロじゃん。。ひどい。

SEO的にもメインタイトルにキーワードや誘因性の高いワードをぶち込みまくっていきたい気持ちもありますが、アイキャッチに全部盛り込もうとするとこうなります。上の【みみせん】なんて文字ナゼいれたんだ、当時の自分を殴りたい。

写真がほとんど隠れてしまっているのも痛いですね。これだったら写真なんて何でもよくなっちゃいますね。イメージ画像みたいなものであれば隠してもいいですが、現物の商品が写っているのにそれを文字が隠しちゃってる。主役が何かわからないですね。

どんな形にしたらよかったのでしょうか。他の記事になりますが同様の商品レビューを見てみましょう。

そこそこPVある記事だったのに商品がディスコンに(悲)

なんかスッキリしましたね。これが最適解だとまでは言いませんが、商品がしっかり見える。商品名は大きく、サブタイトルもそこそこ目立ちますよね。個人的にはこのぐらいであれば及第でいいのかなと考えています。(グラデの配色が今見るとすこしきついけど・・・)

あと、この後の技術編で少し触れたいのですが根本的に使用フォントを見直しています。このフォントに対する意識というのはデザインの50%くらい占めるんじゃないかというくらい重要です。フォントが良ければ画像なんてなんでもいい、とは言いませんがそのぐらい大事です。

配色や余白の使い方ミス

さしねちゃんかわいい(自画自賛)

ちょっと当時はyoutubeのサムネ意識したつもりだったんですが、修行が足りなすぎました。どのへんがダメかというと・・・

  • 配色が悪く、色がケンカしすぎて見づらい
  • これも同じく文言が細かい上に文字が小さい
  • 情報が多いが整理されていないので意味が分からない
  • これもフォント設定が煮詰め切れていない
  • さしねちゃんは可愛いから無罪
ふうが
ふうが

なんかゴチャゴチャ密集した雰囲気を出したかったのですが、ほんとにゴチャゴチャしただけで見づらくなりました・・。かなしい。

皆さんも見ただけでわかりますよね、見づらい!。あのVtuber独特の盛り盛りな感じのアイキャッチにしたかったのに、これはつらい。さっきの例と同じですが乗せる情報の整理が甘い。そしてフォントがやはり定まっていない。本当のメインタイトルに使うべきフォントはなんなのか。

もし、多くの情報を乗せつつできるだけ見やすいデザインにするにはどうしたらいいのか。この記事に関してはアイキャッチを作り直しました。

すくなくとも情報を読み取りやすくなっているはず

まず配色が目に優しい。チカチカしないですよね。やっぱりデザインには配色が大事だということを実感させてくれます。色の組み合わせも重要ですね。

フォントにも注目してください。詳しい人ならすぐに気づくと思いますが、変形フォントながら全体的にゴシックの使用割合が増えています。手書き風フォントとかって見た目はいいけど、やはり安易に使いまくってはいけないということですね。

ふうが
ふうが

この2例を見ただけでも、アイキャッチが与える影響が大きいんだなと感じてもらえると思います。

良いアイキャッチにむけて

今日もブログデザインに勤しむ筆者(嘘です)

というわけで、失敗例を見ていくとなんとなくアイキャッチの正解というものが見えてきそうですね。ちょっとまとめてみましょう。

  • 見やすい配置・見やすい配色
  • 適切なフォント選び・フォントサイズ
  • メリハリの効いた余白
  • 情報量の整理(文字数・文言)
  • 素材の画像選びも重要

シンプルですが、このあたりを抑えておけると脱アイキャッチ初心者になれると思います。

しら
しら

とにかく作りまくることが大事でもある。

ちょっと記事が長くなってしまったので、実際にアイキャッチを作っていく上での技術的、手法的な面を次号でお伝えしていきたいと思います。

それまでに、必要なソフトや素材は網羅しておきましょう。

こちらの記事もどうぞ
タイトルとURLをコピーしました