ブログのアイキャッチとユーザービリティ

記事の最初に大きくアイキャッチ画像を表示するとインパクトがありますよね。

でもアイキャッチ画像って場所をとってしまうので、記事の内容に興味があってアクセスした人は邪魔だと感じてしまうことがあるんです。

記事の一覧ページではアイキャッチ画像を小さめにサムネイルとして表示させておいて、記事のページではアイキャッチ画像を表示しないほうがユーザーに親切な場合もあるんです。

でも、

「アイキャッチがない記事はみすぼらしく感じてしまうので、入れたいんです！」

「よそのブログもたいていはアイキャッチを表示しているじゃないですか？！」

というのがブログやニュースサイト運営者の本音ではないでしょうか？

お気持ちはわかるんですけどね。

そこで折衷案があります。添付のようなレイアウトです。

ポイントは２つです。

アイキャッチは横長に表示させる。
記事タイトルをアイキャッチに重ねる。

こうすればユーザーにとってそれほど邪魔にならず、最小限のスクロールで記事の内容が見えるからです。

わざわざ横長の画像を用意しなくても可能です。

スタイルシート（CSS）で画像の上下を切り取って表示させることが可能です。

.article-thumbnail {
	width: 100%; // 横いっぱいに広げる
	height: 250px; // 好きな高さに固定
	object-fit: cover; // 縦横どちらか長いほうに合わせる
	object-position: center; // 画像の中央をまんなかに合わせる
}

記事タイトルも、スタイルシート（CSS）でネガティブマージンを指定すれば、本来の場所から上にずらせるので、アイキャッチ画像に部分的に重ねられます。