見出し、テーブルに続く第3回目はリストのデザインをまとめました。リストは主に項目を並べる時に用いられますが、ナビゲーションやメニューなどの実装といった幅広い場面で用いられます。また、縦型や横型などリスト並べる方向や序列があるかないかの違いもあり種類も多い為、デザインも比例して増えてきます。   今回はリストの種類と目的別に分けてデザインを紹介していきたいと思います。  

序列リスト

リストの項目自身に順番や順位としての意味を持つリストのタイプです。数字などのナンバリングを振り分けたり、順番や順位でアクセントをつけたりといったデザインがマッチします。   1.リストのマーカーにナンバリング     リストのマーカーに数字が充て振られ、リスト自体がグルーピングされると同時に並びが整理され見やすくなります。項目の数が多い場合などに効果的なデザインです。     2.ランキング形式のリスト     順番に並べるだけでなく、デザインを変化させることにより順位も認識できるようになったデザインです。シンプルなデザインにする場合は文字サイズや太さの調整でコントロールすると自然な感じにまとまります。    

非序列リスト

項目が並列で同等に並べられたリストです。ナビゲーションメニューなどもこの種類に含まれます。入れ子のリスト構成になるケースもありますので、シンプルなものから複雑なものまでバリエーションは豊富です。   3.ワンポイントのマーカー     シンプルにアイコンや図形などのマーカーが付きます。アンダーラインや背景色を入れることで変化をつけることもできます。     4.縦型ナビメニュー風（入れ子）     縦にリストが並んだナビメニューなどでよく見られる構成です。リストの中にリストが含まれた入れ子の部分はデザインを変えています。jQueryなどを併用し、アコーディオンパネルのような動きがついたものもよく見かけます。    

定義リスト

定義される文言があり、それに対しての説明がついたリストを指します。説明だけではイメージしにくいのですが、実際のデザインではいろんな箇所に使われています。   5.FAQなどのお問い合わせ内容リスト     質問部分が定義される項目にあたり、回答部分を説明文で表現します。各項目の見出しアイコンにQとAの文字をデザインに使用しています。     6.新着情報の一覧リスト     日付部分を定義部分に置き、お知らせ内容を説明部分で表現します。定義項目と説明文をインラインで並べることがポイントになります。    

横並びリスト

基本的にリストは縦方向に並んでいきますが、ナビゲーションメニューなどで短いキーワードをインラインで並べるケースもあります。CSSでの調整が必要になりますが、使用頻度も高いデザインです。   7.グローバルナビゲーションリスト     各リスト項目が均等幅で並んだグローバルナビゲーションでよく用いられている形です。リストの項目数は限られており、少なすぎても多すぎてもいけません。     8.パンくずリスト・フローチャート     横一列に並んだリストに進行方向や時系列、階層構造などの意味合いをもたせたリストです。矢印をデザインに採用したりと工夫されています。     9.タグリスト     ブログなどで記事のキーワード検索で見かけるデザインです。リストの周りに余白を設けることで独立したデザインになります。インラインで並びますが、キーワードが改行で途切れないようにしないといけません。    

グリッドリスト

複数のカラム上に並び、リスト内部にイメージやテキストなどが含まれ、リスト自体がコンテンツとして成立したデザインです。横方向に並んでいきますが、カラム数を超えた分は改行されて配置されます。   10.カード型     近年のウェブデザインに多いレイアウトで、コンテンツがリストの項目内でまとまっています。視認性を確保するためにも3〜4カラムまでに抑えて、コンテンツ内もシンプルにすることがポイントです。     今回のリストもウェブサイトのデザインをしていく中で登場頻度が多い部分になります。その分デザインの幅も広いのでどのように上手く表現できるかがポイントになります。メンテナンスが容易になるというメリットもあるので、できるだけリストでマークアップするようにして、CSSでスタイリングしていくようにしましょう。   今回のデザインも同じくCSSで作成することが出来ます。サンプルはこちらからどうぞ。