はてなブログに見る「クリックされやすいブログカード」の考察

投稿日:2020年4月29日 更新日:

スポンサーリンク

以前から、はてなブログのブログカードが、とても見やすく綺麗で「クリックしたくなる」と感じていましたので、私が利用しているWordPressテーマのブログカードをサンプルとして、「クリックしたくなるブログカードデザイン」を考察しました。

ブログカードサンプル

私が使ってるWordPressテーマ「ルクセリタス」で選べるブログカードの種類は次のようなものです。

厳密には画像に枠線をつける/つけない、ブログカード・画像の角の丸みを調整できますが、それほど大きな違いはないと判断したため、省略しました。また後ほど紹介するはてなブログのブログカードでは画像に枠線がついていないため「画像に枠線はつけない方がいいのでは?」と現時点では推測しています。

ブログカードに影をつけたタイプ

画像を左に配置したタイプ

影をつけて、画像を左に配置したブログカード

画像を右に配置したタイプ

影をつけて、画像を右に配置したブログカード

ブログカードに影を“つけない”タイプ

画像を左に配置したタイプ

影をつけないで、画像を左に配置したブログカード

画像を右に配置したタイプ

影をつけないで、画像を右に配置したブログカード

はてなブログのブログカード

そして、私が「最も自然にクリックしてしまう」と感じるのが、はてなブログのブログカードです。

それが次になります。

はてなブログのブログカード

ブログカードに影がなく、画像は右に配置。ブログカードの枠線はうっすらと丸みを帯びていて、記事タイトル下に本文冒頭が表示されています。そして左下にはブログトップページの URL が表示されています。

おそらく私がはてなブログのブログカードを最もクリックしたいと感じるのは、次の2点が原因だと思います。

  • ブログカードに影が“ない”
  • 画像が右に配置され、記事タイトルが左上に表示されている

それぞれの理由を私なりに考察してみます。

ブログカードに影が“ない”

  • 影があるブログカード
  • 影がないブログカード

この2つを、自分の深層心理や、物事を見た時に起こる自動的な脳の反応・解釈を、じっくり観察しながら何度も見比べると。

影があるブログカードでは「それがリンクである」と脳が理解するのに若干のタイムラグがあることがわかりました。

影をつけて、画像を右に配置したブログカード

影をつけないで、画像を右に配置したブログカード

このため影がないブログカードの方が、脳は自然にそれが「リンクである」と(早く)理解できるため、クリックしやすいのではないかと思います。

画像が右に配置され、記事タイトルが左上に表示されている

次のように画像が左に配置されていると、

影をつけないで、画像を左に配置したブログカード

ブログカードを一瞬見たときにまず画像が目に入ります。その次に視線を右に移動して記事タイトルを見る。という視線の流れがあります。

これは脳が「その記事が自分にとって有益が?」を判断するために、視線移動分の時間がかかることを意味します。

画像を見ただけで直感的に「それが自分にとって有益だ」と判断できる場合は別ですが、多くの場合ブログカードに配置される画像は、アイキャッチ画像を「切り取ったもの」になるはずです。

これだと脳が直感的に一瞬で「それは自分にとって有益だ」と感じるのは難しいはずです。

そう考えると、 WordPress に標準で装備されているかなり大きなブログカードは、アイキャッチ画像を切り取ることなく表示されるので、大きさを考えなければ、読者に直感的にブログカードの有益性を伝えるには、有利だと考えられます。

その点、次のように画像を右に配置すれば、

影をつけないで、画像を右に配置したブログカード

まず目に付くのは記事タイトルでそれを読む・あるいは感じ取ってから、アイキャッチ画像を切り取ったものが目に付きます。

この方が視線の移動と脳の解釈が、スムーズに行くのではないかと私は感じます。

多くの場合アイキャッチ画像が語るのは、その記事の雰囲気や印象だけです。その記事の内容を端的にそしてストレートに分かりやすく表現しているのは記事タイトルです。

だからこそ記事タイトルを一番最初に目に付く場所に配置し、読者がそれを読んで理解できるようにする方が、良いのではないか。

その方が、そのリンク先の内容を早く理解できるため、「リンク先の記事内容を理解して読みたいと思ってブログカードをクリックする」という動きを読者がしやすいのではないかと感じます。

まとめ

まとめると、私が感じた「クリックされやすいブログカード」は、次の2点を満たしているものだと、現時点では考えています。

  • ブログカードに影が“ない”
  • 画像が右に配置され、記事タイトルが左上に表示されている

現在の主流のブログカードは、バナーのように長方形の形をしています。このタイプのブログカードなら、上記の2点を満たしたものが一番クリックされやすいのではないかと、私は感じています。

このような現在の主流の「かっこいいブログカードデザイン」をお“除けば” WordPress 2デフォルトで装備されている「デカめのブログカード」いいのではないかと感じます。


スポンサーリンク

-WordPress
-,

執筆者:


コメントを残す

関連記事

「このブロックでエラーが発生したためプレビューできません」はWPテーマの更新で解決できた。

「このブロックでエラーが発生したためプレビューできません」はWPテーマの更新で解決できた。

スポンサーリンク 先程、WordPressで記事を投稿しようと、テキストエディタに下書きした文章をコピーし、記事投稿画面(Gutenberg)に貼り付けたら、こんなエラーが出た。 「このブロックでエラ …

WordPress

【2020年版】WordPressで投稿日を指定する(変える)方法【Gutenberg】

スポンサーリンク この記事では、2020年最新版WordPress、エディターGutenbergで記事投稿日時を変更する方法を紹介しています。 昔のWordPressでは投稿日の指定(変更)は簡単でし …

HAPPY

【盲点】新しいWordPressの「下書き保存がない。どこ?」→エディター右上に普通にありました(汗)。

スポンサーリンク 「新しいWordPressの下書き保存ボタンがない」「どこにある?」とお悩みですか? 私も同じように思い、半ばパニックになったのですが、エディター右上(上部メニュー)に普通にありまし …

WordPress記事の下書きにオススメのエディタWritebox。超集中できる。

【集中力UP】WordPressの下書きにはオンラインテキストエディタWriteboxがオススメです。書きやすくて集中できます。

スポンサーリンク 私はWordPressで記事を投稿する時の下書きにWriteboxというオンラインのテキストエディタを使っています。 このWriteboxの何が言いのかっていうと、とてつもなく集中で …

Cocoon、投稿記事、固定ページの日付を非表示にする方法

Cocoonの投稿・固定ページの日付を非表示にする方法

スポンサーリンク 無料WordPressテーマ「cocoon」の初期設定では、投稿と固定ページ右上には日付と更新日が表示されます。それを非表示にする方法を紹介します。 具体的には次のようにカスタマイズ …