【UIパーツ大全】リスト[list]参考パーツ一覧

「リスト（list）」は情報を整理してユーザーに伝えるための基本パーツです。単なる箇条書きから、複雑なインタラクティブリストまで、使い方や見せ方次第でユーザー体験を大きく左右します。本記事では実用的なUIリストパターンの種類、活用シーン、デザインのポイントをまとめて紹介します。

リストUIとは何か？

リストとは関連する情報を並べて表示するUI要素です。ユーザーが複数の選択肢や情報から目的のものを見つけやすくするために使われます。よく使われる例としては、ToDoリスト、設定メニュー、検索結果一覧、通知リストなどがあります。

なぜリストUIが重要なのか？

リストは情報の整理、階層構造の表現、インタラクションの起点として重要な役割を持っています。以下の点が特に重要です。

• 可読性の確保：視線の流れに沿って情報を並べることで、ユーザーが内容を理解しやすくなる。
• 操作性の向上：リスト項目をタップ・クリックして詳細を開いたり、ドラッグして並び替えたりできる。
• 再利用性：同じUIパターンを様々な情報に適用でき、デザインの一貫性を保ちやすい。

基本的なリストパターン一覧

箇条書きリスト（Bulleted List）

• 使用例：特徴一覧、注意点、手順など。
• デザインポイント
  • 左端にアイコンやドットをつける。
  • 行間を広めに取って可読性を確保。

<ul>
  <li>レスポンシブ対応済み</li>
  <li>ダークモード対応</li>
  <li>アクセシビリティ準拠</li>
</ul>

番号付きリスト（Numbered List）

• 使用例：手順説明、ランキング表示など。
• デザインポイント
  • 数字に視覚的な強調を加える。
  • 手順が多い場合はステップUIとしてアニメーションを加えるとよい。

<ol>
  <li>アカウントを作成</li>
  <li>プロフィールを設定</li>
  <li>投稿を始める</li>
</ol>

メディアリスト（Media List）

• 使用例：ユーザー一覧、記事リスト、通知など。
• 特徴：テキストと画像（アイコン、サムネイル）がセットで並ぶ。

<div class="media-list">
  <div class="media-item">
    <img src="user.jpg" alt="ユーザー画像">
    <div class="text">
      <h4>山田太郎</h4>
      <p>オンライン</p>
    </div>
  </div>
</div>

カード型リスト（Card List）

• 使用例：ECサイトの商品一覧、ブログ記事一覧など。
• 特徴：1アイテム＝1カードとして扱い、視覚的に目立たせる。
• レイアウト：グリッド（カード3列など）またはリスト型（縦一列）。

<div class="card-list">
  <div class="card">
    <img src="item.jpg" alt="商品画像">
    <h3>商品名</h3>
    <p>¥1,980</p>
  </div>
</div>

折りたたみリスト（Accordion）

• 使用例：FAQ、設定メニュー、カテゴリの展開など。
• 特徴：クリックで詳細を開閉できるインタラクション付きリスト。
• UXポイント：初期状態での開閉、アニメーション速度、視認性。

チェックリスト（Checklist）

• 使用例：タスク管理、アンケートなど。
• 特徴：チェックボックスがついたリスト。選択状態に応じてスタイルを変える。

ドラッグ可能リスト（Draggable List）

• 使用例：順序変更、プレイリスト管理、カスタマイズ設定など。
• 実装例：SortableJS、React DnDなどのライブラリを活用。

リストデザインのUX/UIポイント

行間・余白を意識する

読みやすさに直結するのが「行間」と「項目間の余白」です。情報が詰まりすぎると視認性が落ちるため、最低でも8〜12px以上の余白を設定すると良いです。

アイコンやサムネイルで意味を伝える

テキストだけでは直感的に理解しにくい場合、アイコンや画像を併用することで情報が明確になります。特に通知やユーザー一覧では視覚的ヒントが有効です。

スクロールと読み込みの設計

• 無限スクロール（Infinite Scroll）：SNS系サービスや商品一覧で多用される。
• ページネーション（Pagination）：SEOや分析に強い。
• 「もっと見る」ボタン：簡易な実装に適しており、ユーザー操作を明示的にできる。

よく使われるUIキット・ライブラリ

以下のUIライブラリを使えば、リストパーツの設計がスムーズになります。

まとめ

リストUIは見た目の工夫だけでなく目的に応じた構成、動き、アクセシビリティへの配慮が求められます。多くのユーザーが触れる領域だからこそ細部まで意識した設計が大切です。今回紹介したパターンを参考に、あなたのプロダクトに最適なリストUIを選んで実装してください。