変更前：見づらい、クリックしづらい

変更前の記事リストの外観が下図。

タイムライン風のボーダーラインや、日時の時計マークなど、いろいろやりたい感じが伝わってきます。でもこういうのはやればやるほど残念な感じになってしまいますね。隠し切れない素人感をビンビン感じます。

でも素人なんだからダサいのは目をつむります。それより問題なのは、「見づらさ」と「クリックしにくさ」です。

丸や四角やラインのグラフィック要素がごちゃごちゃしているため、どこからどこまでが一つの記事のかたまりなのか直感的にわかりにくいですね。さらにそれが原因でクリックできる範囲もわかりにくく、ユーザビリティが悪くなってしまっています。

これらの実用上の問題を解決すべく、次のようにデザインを変更しました。

変更後：見やすさ、クリックしやすさアップ

変更後の外観が下図です。

「見づらさ」と「クリックしにくさ」を解消しようとしたデザインです。どうでしょうか？

太いグレーのラインで囲うことで、一つ一つの記事の領域が瞬時に判断できるようになりました。またクリック範囲もグレーのラインに一致しているのでユーザーが迷わずいクリックできるようになったと思います。

カテゴリ名のラベルはかなり迷いましたが、黒背景に白文字にしました。このラベルは単独でクリックできるので、本来はリンクであることが分かるようにオレンジ等にするべきなのですが、ここでは記事タイトルの読みやすさや全体的な落ち着きを重視しました。カテゴリのリンクは別途グローバルナビを用意しようと思います。