Webサイトの「一覧ページ」は、複数のコンテンツやアイテム、あるいは詳細ページへのリンクを一覧形式で表示するページです。一般的なブログや情報サイトにおいてはカテゴリページやタグページ、検索結果ページがこれに該当します。
情報サイトにおいて一覧ページを最適化することは、情報の探しやすさを向上させるため特に重要です。

一覧ページのバリエーション

一覧ページの形式には様々なバリエーションがあります。
代表的な形式と適したコンテンツをいくつか紹介してみましょう。

リスト形式

いわゆる「ブログ」で最も一般的な表示方法です。

特に注釈がなければ、ユーザーは日付で降順に並んでいる(上部の記事が新しい)と認識します。

更新型のブログやコラム、ニュースコンテンツに適した表示方法です。

連番付きリスト

ちょっとしたことなのですが、タイトルの行頭に番号をつけることでコンテンツが連続していることや、記事を読む順番が認知される効果があります。
講座など体系的なコンテンツを順番に読んでもらいたいときに使えるテクニックです。

アイキャッチのためのサムネイル画像はむしろ邪魔になることもあります。
あえてサムネイルを非表示にするのもひとつの工夫でしょう。

番号は直接タイトルに記述するのではなく、CSSの疑似要素(::before)で表示するとSEO的な影響を回避できます。

なお、ページが分割されるとユーザーが混乱するので、すべての項目が表示されるよう1ページあたりの表示件数を多めに設定する必要があります。

カード(タイル)形式

流し見的に画像からアイテムを選ぶ、ギャラリーやカタログなどのコンテンツに適しています。

商品カタログなどでは、サムネイル画像の画角や構図を統一しておくと比較がしやすくなります。

ただし、ユーザーが特定の情報を探している場合、視線の移動が多いため見落としの可能性が高まります。

見栄えが良いので一般的な雑記ブログでもよく採用されますが、普通に記事を並べているだけでは効果的な活用とは言いづらいものがあります。

カード(タイル)+データ表示

カード(タイル)表示と基本は同じで、抜粋部分にアイテムのデータを表示します。
商品一覧などスペックを比較したいカタログコンテンツに適した表示方法です。

テーブルタグやリストタグでフォーマットを統一しておくと、データ行の位置が揃って比較しやすくなります。

デメリットは同じく視線移動の多さから見落としが増える点で、データ項目を基準にした絞り込み検索と組み合わせるとよりユーザビリティが高まるでしょう。

リスト+データ表示

リスト表示にデータを加えたタイプです。

データ比較という点ではやや見にくくなりますが、上から順番に視線が移動するので見落としは少なくなります。

また上部の物ほど重要と認識されるので、何らかの基準でソートしてランキング風に表示するのも良いでしょう。

可能なら、ユーザー自身が操作できるソート機能があればベストです。

記事型

いわゆるまとめ記事やトピッククラスターのピラーページとして使われます。

記事として作りこむと一覧性が損なわれることもあるため、ナビゲーションが優先される主要なカテゴリページを置き換えるには注意が必要です。

このページ自体がトピックの概要を表すコンテンツになるので、投稿ページや固定ページを利用する、あるいは、トピッククラスター専用のカテゴリを用意したほうが良いでしょう。

WordPressでの問題点

一覧ページのレイアウトをコンテンツの性格に合わせて使い分ける重要性はご理解いただけたと思います。
ただし、これらをWordPressで再現するにはいくつかの問題があります。

カテゴリごとに表示方法が変えられるか?

ひとつの情報サイトの中にもカタログ型コンテンツと講座型のコンテンツ、ニュースコンテンツなどが混在する場合があります。

それぞれに最適な一覧ページを作るには、カテゴリごとに表示方法を指定できる仕組みが必要なので、一覧ページの作りこみが可能なテーマを選ぶ必要があります。

抜粋部分のカスタマイズが可能か?

一覧にデータを表示したい場合、本来記事の抜粋を表示する部分にテーブルタグやリストタグを使ってレイアウトする必要があります。

しかし抜粋を表示するWP関数のthe_excerptはHTMLを除去するエスケープ処理が施されており、単純に抜粋欄にHTMLを記述しても反映されません。

プログラミング知識の必要なカスタマイズ、もしくはテーマ側での対応が必要です。

対応できるWPテーマ

デフォルトでカテゴリごとに一覧レイアウトを指定できるWPテーマは少数派です。多くの場合、自分自身でカスタマイズして対応する必要があります。

2024年2月現在、上記の一覧レイアウト全てをテーマデフォルトの機能のみで設定できるテーマはEmanon シリーズだけだろうと思います。無料のEmanonFreeを含めすべてのグレードで対応しています。

カテゴリごとに一覧ページを最適化することは、情報サイトにとって重要事項です。
他のテーマでも、より柔軟に一覧レイアウトを選択できるよう開発が進むことが望まれます。


\絶賛発売中!/

情報サイトでオーソリティーを目指そう!の続編はnoteにて販売しております。