記事リストページの前後比較

変更前

デザイン変更前の記事リストページです。

↑装飾がほとんど無いあっさりした見た目です。シンプルなデザインが好みなのですが、シンプルすぎて無味乾燥な印象となっていました。デザインにメリハリや躍動感が無いので、読みたいという思いがわいてきません。

↑これは試行錯誤中の段階です。グリーンのラベルやカテゴリを表示したり、記事タイトルを太字にしたりしたことで印象にメリハリが出ました。ですがこのグリーンのラベルは押せないけど、グリーンのボタンは押せるなど、外観と機能に一貫性が無く、ユーザビリティがいまいちの状態でした。

変更後

デザイン変更後の記事リストページです。

↑キーデザインの黒と赤のドットを各記事の左肩にアクセントとして付けることで、くどすぎない程度に個性を持たせました。また、リンク要素の色をグリーンに統一することで、外観と機能に一貫性を持たせました。さらに、気づきにくいですが効果的だったこととしては、記事一覧リストの横幅を少し広くしたことが挙げられます。横幅が広くなることで、記事タイトルの折り返しによるサイズの不揃い感が軽減され、のびのびとすっきりした印象になりました。機能面の大きな変化としては、記事リストの上部にタグ一覧が追加されました。グローバルナビのカテゴリだけではやや分類がアバウトなので、より具体的なタグによって目的の記事に到達しやすくなったと思います。

記事詳細ページの変更前後比較

変更前

デザイン変更前の記事詳細ページです。

↑タイトル・見出し・本文がバラバラと点在している印象。これは文字サイズや余白の使い方にメリハリが無いためです。また、見出しやカテゴリのラベルなどのデザインにも一貫性が無いために各要素が調和していないこともバラバラに見える要因です。

変更後

デザイン変更後の記事詳細ページです。

↑黒と赤のドットを、記事タイトルと見出しに左肩に付けることで、ページ全体のデザインに一貫した印象を持たせました。また記事タイトルを網掛けのボックスで囲うことで、散らかっていたタイトル周辺の要素にカタマリ感が生まれました。グリーンのカテゴリラベルやタグリンクを付けたり、公開日時に時計マークを付けたりすることで、アイキャッチ画像が無いにも関わらずポップで目を引く印象になったと思います。 また、ブロック感やメリハリを出すのに最も効果的だったのが要素の幅に変化を持たせることです。記事タイトル部分のボックスは記事本文よりも左右に80ピクセルほど飛び出していて、記事中の見出しも左側に40ピクセルほど飛び出しています。これによって読み手が無意識のうちに要素の強弱やページの構造を感じ取っているのだと考えています。既成のテンプレートを使っている場合は、要素の幅を変えることは難しいですが、1カラムの自作テンプレートなら横幅は自由に変化させることができます。サイトの個性を出す意味でも横幅を変えるというのは効果的な手段だと思います。