いろいろなウェブサイトで使える汎用的なリストデザイン集
最終更新日: Update!!
見出し、テーブルに続く第3回目はリストのデザインをまとめました。リストは主に項目を並べる時に用いられますが、ナビゲーションやメニューなどの実装といった幅広い場面で用いられます。また、縦型や横型などリスト並べる方向や序列があるかないかの違いもあり種類も多い為、デザインも比例して増えてきます。
今回はリストの種類と目的別に分けてデザインを紹介していきたいと思います。
リストのマーカーに数字が充て振られ、リスト自体がグルーピングされると同時に並びが整理され見やすくなります。項目の数が多い場合などに効果的なデザインです。
2.ランキング形式のリスト
順番に並べるだけでなく、デザインを変化させることにより順位も認識できるようになったデザインです。シンプルなデザインにする場合は文字サイズや太さの調整でコントロールすると自然な感じにまとまります。
シンプルにアイコンや図形などのマーカーが付きます。アンダーラインや背景色を入れることで変化をつけることもできます。
4.縦型ナビメニュー風(入れ子)
縦にリストが並んだナビメニューなどでよく見られる構成です。リストの中にリストが含まれた入れ子の部分はデザインを変えています。jQueryなどを併用し、アコーディオンパネルのような動きがついたものもよく見かけます。
質問部分が定義される項目にあたり、回答部分を説明文で表現します。各項目の見出しアイコンにQとAの文字をデザインに使用しています。
6.新着情報の一覧リスト
日付部分を定義部分に置き、お知らせ内容を説明部分で表現します。定義項目と説明文をインラインで並べることがポイントになります。
各リスト項目が均等幅で並んだグローバルナビゲーションでよく用いられている形です。リストの項目数は限られており、少なすぎても多すぎてもいけません。
8.パンくずリスト・フローチャート
横一列に並んだリストに進行方向や時系列、階層構造などの意味合いをもたせたリストです。矢印をデザインに採用したりと工夫されています。
9.タグリスト
ブログなどで記事のキーワード検索で見かけるデザインです。リストの周りに余白を設けることで独立したデザインになります。インラインで並びますが、キーワードが改行で途切れないようにしないといけません。
近年のウェブデザインに多いレイアウトで、コンテンツがリストの項目内でまとまっています。視認性を確保するためにも3〜4カラムまでに抑えて、コンテンツ内もシンプルにすることがポイントです。
今回のリストもウェブサイトのデザインをしていく中で登場頻度が多い部分になります。その分デザインの幅も広いのでどのように上手く表現できるかがポイントになります。メンテナンスが容易になるというメリットもあるので、できるだけリストでマークアップするようにして、CSSでスタイリングしていくようにしましょう。
今回のデザインも同じくCSSで作成することが出来ます。サンプルはこちらからどうぞ。
序列リスト
リストの項目自身に順番や順位としての意味を持つリストのタイプです。数字などのナンバリングを振り分けたり、順番や順位でアクセントをつけたりといったデザインがマッチします。 1.リストのマーカーにナンバリング

非序列リスト
項目が並列で同等に並べられたリストです。ナビゲーションメニューなどもこの種類に含まれます。入れ子のリスト構成になるケースもありますので、シンプルなものから複雑なものまでバリエーションは豊富です。 3.ワンポイントのマーカー

定義リスト
定義される文言があり、それに対しての説明がついたリストを指します。説明だけではイメージしにくいのですが、実際のデザインではいろんな箇所に使われています。 5.FAQなどのお問い合わせ内容リスト

横並びリスト
基本的にリストは縦方向に並んでいきますが、ナビゲーションメニューなどで短いキーワードをインラインで並べるケースもあります。CSSでの調整が必要になりますが、使用頻度も高いデザインです。 7.グローバルナビゲーションリスト


グリッドリスト
複数のカラム上に並び、リスト内部にイメージやテキストなどが含まれ、リスト自体がコンテンツとして成立したデザインです。横方向に並んでいきますが、カラム数を超えた分は改行されて配置されます。 10.カード型
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories