MENU
みぅあねろの画像
みぅあねろ
ママトラベラー
19歳でハワイに一目惚れ。その後留学・ホームステイ、年1回のペースでハワイ旅行。

ヒルトンタイムシェアオーナー/ JALマイラー

国内旅行も大好き。国内旅行業務取扱管理者でもあります。
サイト移行に関するお知らせ

【はてなブログ】デザインにあったアイキャッチを考察してみる

2020 5/25

アイキャッチ画像 作り方 簡単 コツ ポイント

ブログにアイキャッチを入れていますか?

入れてます…!なんとなく(小声)

アイキャッチには、

  • SEO対策になる(画像検索からの流入など)
  • ブログの見た目を改善できる
  • SNSに拡散した時に目を引く
  • 関連記事へのアクセスを向上させる

といった効果があると言われています。

暫くの間ブログを運営してきて感じているのは「アイキャッチの正解は1つではなくブログデザインによって異なる」ということです。

そこで、はてなブログの人気テーマを例に、最適なアイキャッチについて考えていきます。

この記事はこんな方に読んでいただきたいです。

  • ブログを始めたばかりの方
  • 巷で見かけるようなアイキャッチを作っているのに、ブログにアップするとパッとしない、と感じている方
スポンサーリンク
目次

はてなブログの人気テーマごとに最適なアイキャッチを考える

全体として言えること(初級編)

アイキャッチ画像を作る際に心がけるべきことは

  • 記事の概要を端的に表現すること
  • どのデバイスからでも見やすい(目に留まりやすい)こと

の2点だと考えています。

例をあげてみます。こちらの2枚のアイキャッチを比較してみてください。


貯金のテクニックをまとめた記事のアイキャッチ画像を作成しているとします。

左はフリー画像で入手したままの画像、右はタイトル文字を入れた画像。右は、タイトルを画像中央に入れてみて「なんだか文字が読みづらい」と感じ、円の図形を挿入してみた、という感じです。

お気づきでしょうか。

肝心なお金の部分が隠れてる…!

その通り!良かれと思ってやった加工が逆効果になってしまっているの

・・・私も昔よくやっていました笑

では、この2つの画像はどうでしょうか。


右は画像を拡大して文字と写真のお金が重ならないようにしました。左はお金に関する記事なんだということはわかりますが、右のように具体的な内容までは伝わりません。では、右が正解なのか?というと、正解はブログのデザインによって異なるということです。

はてなブログの人気テーマで最適なアイキャッチ考察する(中級編)

そこで、はてなブログのテーマTOP3を例に、それぞれの正解を考えていきます。

現時点での人気テーマTOP3は以下の通りです。

◆ブログテーマTOP3

  1. Minimalism
  2. Brooklyn
  3. UnderShirt

この3つのテーマを比較しながら、それぞれに適したアイキャッチを考えていきます。

【考察1】サムネイルの形

まず、ブログの記事一覧に表示されるサムネイルの形に着目します。

  • MinimalismとBrooklynは正方形。画像が長方形の場合は自動でトリミングされる
  • UnderShirtは長方形で、ほぼそのままの画像が表示される

MinimalismやBrooklynでは、画像の左右が削除されるため、アイキャッチの文字が切れてしまっています

アイキャッチ 作成方法 ブログ初心者
左がPC、右がスマホで見たデザイン

一方UnderShirtの場合は、9:16位のサイズであれば画像が全部表示されます
アイキャッチ 作り方 解説 簡単

【考察1】まとめ正方形にトリミングされるデザインでは、画像の中央に要素(文字や被写体)が配置されているアイキャッチが適している

【考察2】スマホ画面での画像サイズ

大半のブログでは、PCよりもスマホからのアクセスが多くなっています。そのためスマホ画面での見やすさも重要な観点です。

【考察1】の通りUnderShirtではスマホ画面でも画像が大きく表示されています。そのため、文字入りでアイキャッチを作成するのが望ましいと考えます。文字が入ることで記事の内容を具体的に表現できますし、オーガニック検索で画像検索されたときにクリックしてもらいやすくなるためです。

では、MinimalismとBrooklynではどうでしょうか。初期状態では以下の通りです。

左がMinimalism、右がBrooklyn

Minimalismのアイキャッチ画像はかなり小さいため文字を入れる場合、4、5文字以内でないと目に留まらないと感じます。Brooklynは短い文は入れられそうです。

【考察2】まとめスマホ画面でも見やすい(=要素が大きい)ことが大切。そのうえで画像に文字も入れられるとBestだが、MinimalismとBrooklynは画像サイズが小さいので、無理に文字をいれずインパクトのある被写体だけで作成してもよい。

MinimalismやBrooklynで文字入りのアイキャッチを作るならどんなのが良いの?

こんな感じ・・・?(ダサくてごめん)

一応、この画像なら正方形にトリミングされても要素が削られることもなく、また小さいスマホ画面でもインパクトがあります。

【結論】テーマごとのベストなアイキャッチの作り方

以上を踏まえて、各テーマにとってベストなアイキャッチ画像の作り方をまとめます。

MinimalismとBrooklyn

  • 被写体や文字を画像の中央に配置する
  • 文字や被写体は大きめにする

MinimalismとBrooklynはアイキャッチが小さいので、画像だけで記事の概要を語るのには不向きなテーマです。タイトル文と画像の両方で読者の目を引く工夫が必要です。タイトル文の前半にメインキーワードを配置したりスミかっこ(【】)を使用したりすると効果的です。

UnderShirt

  • フォントサイズが小さすぎない限りは、自由にデザインできる
  • 記事の内容にあった画像やイラストを使用する
  • オーガニック検索からの流入やブログの滞在ページ数を向上させたい場合は、画像に文字を入れる

UnderShirtはアイキャッチ画像が長方形で表示され、またスマホ画面でも大きく表示されるため、割と自由にアイキャッチを作ることができます。タイトル文を全文読まない読者が多いので、アイキャッチで記事の内容を表現する手法が現在のトレンドになっていると感じています。現にWordPressユーザーの大半はアイキャッチを長方形表示にしています。

私も1年以上Minimalismを愛用してきましたが、アイキャッチの小さい正方形表示が不便で最近UnderShirtに変えました。

なんではてなブログではアイキャッチの初期表示を正方形にしているのか・・・ちょっと残念なところです。

以上になります。

次の記事では、私が使用している「アイキャッチ作成用の無料ツール&無料素材サイト」をご紹介します。

長文をお読みいただきありがとうございました!

スポンサーリンク


スポンサーリンク

この記事を書いた人

ハワイに恋したOL
2018年第一子を出産/ 19歳でハワイに魅了され留学・ホームステイ。その後も年1回ハワイ旅行/ ヒルトンタイムシェアオーナー/ JALマイラー

国内旅行も好き。国内旅行業務取扱管理者でもあります。

コメント

コメントする

目次
閉じる