読みやすく理解しやすいリストをデザインするための5つのポイントをWeb Design Tutsから紹介します。
How To Design The Perfect List
重要なポイントは「カラー」「スペース」「ライン」「タイポグラフィ」「アイコン」の5つで、これらを効果的にリストのデザインに取り入れます。
単にデザインがきれいというだけでなく、コンテンツとして目立ち、理解しやすく、クリックしやすい、ということも重要な要素です。
Color（カラー）
カラーは美しいレイアウトを実装するのに、重要な要素です。リストの項目や背景に効果的なカラーを使用することで、情報を目立たせることができます。
下記の例では、視認性の高いコントラストを使用しています。
Spacing（スペース）
項目間の充分な空白スペースは、視認性を高め、情報の理解力を高める重要なポイントです。
Dividers（ライン）
空白スペースに仕切のラインを配置することも効果的です。
li要素に「border-bottom: 1px solid #000;」と指定すると簡単にラインを使用することができます。
Typography（タイポグラフィ）
タイトルのカラー変更やボールドを使用して、リストの項目を目立たせることができます。
Icons（アイコン）
アイコンを使用することで、リストのリーダビリティを高めることができます。
下記はシンプルなチェックのアイコンを使用した例です。
リストの実装例
Readernaut
間隔をあけるだけなく、アンカーのホットスポットも適切に指定されています。
Version App
タイトルに明るいカラーを採用し、アイコンが情報を補助しています。
Barack Obama
アイコンにインタラクションを与えている例です。
Miles Dowsett
間隔だけでなく、アイコンを併用することでリーダビリティがアップしています。
Pen & Think
黄色の背景色がコントラストを与え、スキャナビリティも高いものとなっています。
Fetch
タイポグラフィ、間隔、仕切、アイコンが非常に効果的にデザインされています。
※上記の各サイトのリストのデザインは、必ずしもリスト要素で実装されているものではなく、見出しやテーブル要素で実装されているものもあります。
Post on:2009年1月21日
