1. HOME
  2. LIFE
  3. 情報量の多い一覧ページを見やすく整理!記事一覧のカード表示スタイルを3タイプから選択可能
LIFE

情報量の多い一覧ページを見やすく整理!記事一覧のカード表示スタイルを3タイプから選択可能

LIFE

2438

グリッドレイアウトは一度に多くの記事の概要を表示し、ユーザーに伝えることができるため、特に情報量の多いメディアでは重宝されるレイアウトです。しかし、一方でデザイン性においては単調になりがちです。カード記事のサイズを変えるというのも変化といえば変化と言えますが、ユーザーの目を引くためにもう少しパンチを効かせたいところです。

そこで、当テーマでは記事一覧の表示スタイルに変化を生む施策を講じました。それが、記事の表示スタイルを変化させることです。例えば以下のような感じです。

A①・・・アイキャッチ有り(アイキャッチ、カテゴリー、タイトル、記事抜粋、日付、投稿者、閲覧数)
A②・・・アイキャッチ無し(カテゴリー、タイトル、記事抜粋、日付、投稿者、閲覧数)
B・・・アイキャッチ背景カード型(タイトル、日付、カテゴリー、投稿者、閲覧数)

Aが2種あるのはアイキャッチ画像が設定されているか否かで表示スタイルを自動で切り替えているためです。これが意味することは、アイキャッチ画像を設定しないケースを想定しているということです。記事一覧の表示に変化を生み、アクセントをつけていく上で上記3種のスタイルは一定の割合でどれも必要なピースとなるのであえてそのような仕様を取っているというわけです。アイキャッチ画像付きのAやBを多用すれば一見華やかに見えますが、多くの記事が並ぶグリッドレイアウトでは少しうるさく映ってしまうのも事実です。

適度なバランスを保ち、ユーザーを飽きさせないアクセントの効いた一覧ページが設計できるのは当テーマの大きな強みです。また、このA・Bのスタイル設定は記事個別に設定することもできるので、ピンポイントで微調整したい場合などで大変便利です。