リストデザイン 入門 – 初心者向けガイド

関連記事：​​【 データテーブル 】テーブルUIのベストプラクティス

リストには決まった構造はありません。各項目は、行や列を持つ構造化されたデータセットの一部ではなく、独立しており、その項目は、メニュードロップダウンの１行のテキストであったり、多くのデータを伴う複雑なカードコンポーネントであったりします。

つまり、リストとテーブルの最も大きな違いはデータ構造であり、テーブルには特定のデザインがありますが、リストには様々なフォーマットがあります。

 リストデザイン の種類

リストのデザインには以下の３種類があります：

• テキストリスト
• 画像リスト
• カードリスト

テキストリストのデザイン

テキストリストには以下の３つの種類があり、大体はテキストと画像、アイコン、チェックボックスやラジオなどの UI 要素が含まれます。

• 単一行リスト：最もシンプルなリストで、１項目につき１行しか表示されない。設定や連絡先リストといった、短くて消化しやすい情報に最適。
• ２行リスト：このリストには２行目があり、字幕や説明文のような補足情報によく使われる。簡潔さと文脈のバランスがとれていることから、メールや通知に最適。
• ３行リスト：タイトル、説明、追加メタデータなど、より詳細な情報を表示する。商品リストやメディアファイルなど、コンテンツが多い場合に便利。

画像リスト

デザイナーは、画像やビデオギャラリーのようにビジュアルが主なコンテンツである場合に画像リストを使いますが、画像に１行のテキストを添えて、詳細や背景を説明することもあります。

また、画像リストにテキストが含まれていない場合、スクリーンリーダーが適切にコンテンツをナビゲートできるように、デザイナーは説明的な alt 属性を必ず使わないといけません。

カードリスト

カードリストには通常、ビジュアルコンテンツとテキストが含まれ、CTA（Call to Action）が含まれることもあります。そしてこのようなカードリストは、画像、タイトル、短い説明文、カテゴリータグ、価格、「カートに入れる」ボタンを特徴とする EC ストアの商品リストでよく見かけます。

リストデザイン UIの構築方法

ステップ１：まずコンテンツを考える

デザイナーは、表示したい内容に応じて最適な項目のデザインを決めないといけません。

UX デザイナーには、コンテンツリストを構成する主な方法として、水平、垂直、そしてグリッドレイアウトの３つがあります。

リストの例：Instagram

そのリストが実際に使われている優れた例に Instagram が挙げられます：

• メインフィード：垂直リスト
• ストーリーフィード：水平リスト
• 検索フィード：グリッドリスト

UXデザイナーは、この3つのリスト構造において無限とも思えるオプションやバリエーションを持っています。

ステップ２：アトミックデザインの原則に従う

デザインには以下の３つのコンポーネントがあります：

• リスト：全リスト項目をまとめる
• リスト項目：リスト内の個々の項目
• リストコンテンツ： 画像、テキスト、メタデータ、タイトル、サブタイトル、その他の UI 要素

これをどのように組み合わせるかを決める際には、以下のアトミックデザインのアプローチを用いるのが有効です。

• 原子：各リスト項目内のコンテンツ – 個々の画像とテキスト
• 分子：各項目内のコンポーネント – プロフィール画像コンポーネント
• 有機体：各リスト項目
• テンプレート：検索フィールド、フィルターなどを持つリスト全体。

ステップ３：一貫性を意識してデザインする

リストの UIデザインでは一貫性が重要です。テキスト、アイコン、アクションの配置など、リスト項目が同じレイアウトに確実に従うようにしましょう。そうすることで、視覚的な流れが改善されるだけでなく、ユーザーが必要な情報がどこにあるかを予測できるようになるため、ユーザビリティも上がります。一貫した構造で認知的負荷が軽減されることから、インターフェースがより直感的なものになるのです。

ステップ４：レスポンスを最適化する

さまざまな画面サイズでリストがどのように表示されるかを常に考慮しましょう。例えばモバイルデバイスでは縦長のリストが最適かもしれませんが、デスクトップではグリッドレイアウトの方が効果的かもしれません。また、フォントサイズ、間隔、レイアウトを調整し、デバイスに関係なく読みやすさと使いやすさを維持しましょう。

ステップ５：アクセシビリティをテストする

リストは、スクリーンリーダーに頼っているユーザーなど、どんなユーザーでもアクセスできるものでないといけません。順序付きリストや順序なしリストのような適切な HTML 要素を使って、可能な限り入れ子のリストは避けましょう。さらに、読みやすさのために適切な色のコントラストを確保し、画像には代替テキストを含めましょう。

リストUIデザインのベストプラクティス

１．ユーザーニーズに優先順位を付ける

いいリストUI デザインは、デザイン思考と UCD（ユーザー中心設計）の原則に従っており、リストデザインは、コンテンツに適切なフィールドを提供しながら、ユーザーのニーズにマッチしていないといけません。そして UX デザイナーは、レスポンシビリティと、複数のデバイスや画面サイズでのリストの見え方に注意を払わないといけません。

２．Material Design の原則に従う

Google の Material Design UI は リストデザイン 向けの「論理的」、「実行可能」、「一貫性がある」という３つの原則を以下のように定めています：

• 論理的：（アルファベット順、数字順など）意味のある方法でリストを整理する。
• 実行可能：確実に項目が特定しやすく、行動に移しやすいようにする。
• 一貫性：アイコン、テキスト、アクションのレイアウトを統一する。

３．リストをスキャン可能にする

良いリストUIをデザインする鍵は、ユーザーが素早く必要な情報を見つけられるようにすることです。これができればUXが向上し、製品の利用や推奨される可能性が高まります。

４．視覚的階層を活用する

階層は、リストを見やすく、読みやすくするのに重要な役割を果たしますが、UX デザイナーには、タイポグラフィ、色、スペーシング、画像など、この視覚的な階層を作る方法がいくつかあります。

リストUI の例：Eコマース

例えば、この ECリストでは、色、サイズ、タイポグラフィーを使ってコンテンツを以下のように分け、視覚的な階層を作り出しています：

• 商品名：中央上部に白と黒の大胆なタイポグラフィ
• 商品説明：小さいグレーの文字
• 価格：暗い大きな文字
• レビュー：小さなテキストと明るい星のアイコン
• 画像：大きな円形の商品画像

この商品リストは、顧客が最も重要なコンテンツ、つまり商品名、説明、価格などで商品を簡単に見渡せるようになる視覚的階層のいい例です。

リストUIの例：Spotify

もっとシンプルな例だと、Spotify はフォントのサイズと色を使って、曲名とアーティストの間に視覚的な階層を作り出しており、さまざまなサイズと色によって、ユーザーはそれに応じてプレイリストを簡単にスキャンすることができます。

ここでは、Web サイトやモバイルアプリのデザインプロジェクトに適用できる、一般的なリストのデザインパターンとインタラクションを見ていきましょう。

チェックボックスとラジオボタン

チェックボックスとラジオボタンは、ユーザーがリスト項目を選択したり、アクションを実行したりするのに非常に重要な UI 要素であり、一般的なルールとして、デザイナーは複数のリスト項目の選択にはチェックボックス、単一の選択にはラジオボタンを使います。

スクロールとスワイプ

スクロールとスワイプによって、ユーザーは複数のアクションを実行できます。例えば、多くのアプリでは、リスト項目を左または右にスワイプして、一方では削除し、他方ではアーカイブすることができます。

デザイナーはまた、パフォーマンスの最適化のために、スクロールインタラクションや遅延読み込みを作成しないといけません。

リスト選択

選択リストやドロップダウンメニューで、ユーザーはチェックアウト時の配送方法の選択など、複数のオプションから選択できるようになります。また、UX デザイナーは、長いドロップダウンメニューに検索機能を組み込むこともあり、それは国や県の選択リストなどでよく見られます。

折りたたみと拡大

デザイナーは、折りたたみ可能なリストを使って、詳細を開いたり閉じたりすることができます。常時表示されるコンテンツの量を減らすのは、ユーザビリティと認知負荷を最小限に抑えるのに非常に重要であり、折りたたみ可能なインタラクションは、入れ子になったリストやサブメニューにも便利です。

並び直しと並び替え

リスト項目の順序を並び直すことで、ユーザーはデータの優先順位や体験方法をコントロールすることができ、好みに応じて、通常はドラッグ＆ドロップで、手動で項目を上下に移動させることができます。このカスタマイズは、ユーザーが自分のニーズに合わせてコンテンツを並べることができるため、ポジティブなユーザー体験が生み出されます。

並べ替えは並べ直しに似ていますが、ユーザーがリスト項目を手動で並べ替えるのではなく、あらかじめ定めれたカテゴリーから選択する点が異なります。例えば、Spotify では、プレイリストをタイトル、アーティスト、アルバム、最近追加された順に並べ替えることができます。

フィルタリング

フィルターをかけることで、ユーザーは必要なものをより早く見つけることができます。例えば Airbnb や Booking.com のような宿泊予約プラットフォームでは、ユーザーが複数のフィルターを適用して、ニーズや好みに合った物件をリストアップすることができます。

ディバイダー

ディバイダーでコンテンツ間の分離ができますが、不要な「視覚的な雑音」が加わってしまう可能性があります。リストがごちゃごちゃしすぎる場合は、コンテンツ区切り線の代わりとして空白スペースを試してみてください。

UXPin の リストUIデザイン

UXPin のコードベースのデザインツールを使えば、UXデザイナーは最終製品に正確に似たリストプロトタイプを作成できます。マルチレベルドロップダウンナビゲーションの例では、ステートとインタラクションを使って、単一のフレームだけで機能するドロップダウンリストを構築する方法が紹介されています。

UXPin Merge で MUIコンポーネントを使ってデザインする

UXPin Mergeを使うと、MUI（Material-UI）などのコードコンポーネントを UXPinに同期して、完全にインタラクティブなプロトタイプを行うことができます。以下のチュートリアルに従って、MUIコンポーネントを使ってリストを作成してみましょう。

ステップ１：MUIコンポーネントをインポートする

Merge を使って MUIコンポーネントが UXPin に統合されていることを確認します。これにより、コード化済みのコンポーネントをデザインに直接ドラッグ＆ドロップできるようになります。

ステップ２：リストコンポーネントを追加する

• UXPinで、MUI コンポーネントライブラリに移動する。
• MUI のListのコンポーネントをキャンバスにドラッグする。これがリストアイテムのコンテナになる。

ステップ３：リスト項目を設定する

• 次に、リストコンテナ内にListItemのコンポーネントをドラッグする。このコンポーネントは、個々のリスト項目を表す。
• ListItemTextを使って、各リスト項目のタイトルや説明などのメインコンテンツを追加する。

ステップ４：MUIプロパティでカスタマイズする

Merge を使うと、例えば以下のようにスタイル、レイアウト、動作などのコンポーネント プロパティを変更できます：

• タイポグラフィ：ListItemText 内のフォント、色、サイズを調整し、視覚的な階層を作成する。
• アイコン：ListItemIconを使って、チェックマークやナビゲーション矢印などのインタラクティブなアイコンを含める。

ステップ５：インタラクションを追加する

UXPin のインタラクションパネルを使って、クリックアクション、ホバー状態、または動的な動きを追加します。たとえば、クリックすると別のページに移動したり、モーダルをトリガーしたりするように項目を設定します。

ステップ６：プレビューとテストを行う

UXPinのPreview（プレビューモード）を使って、完全に機能するプロトタイプでテストします。その際、さまざまなデバイス間での応答性と使いやすさをチェックして、最適なエクスペリエンスを確認します。

ステップ７：デベロッパーへ引き継ぐ

UXPin Merge を使うと、リストUIをコード対応にすることができ、デベロッパーはコードに直接アクセスできるため、矛盾のないシームレスなデザインから開発までのプロセスが保証されます。

UXPin Mergeで忠実度と機能性を上げよう

UXPin 独自の Mergeテクノロジーを使って、プロトタイプをレベルアップしませんか。製品のデザインシステムまたはレポジトリのオープンソースコンポーネントライブラリを UXPin のエディターに同期すると、デザイナーは完全に機能するコード コンポーネントを使ってプロトタイプを構築できます。

Mergeの動作は、MUIライブラリ統合で確認できます。そしてデザイナーは、MUI の React ライブラリを使うと、完全に機能するプロトタイプを作成できます。また、MUI の React コンポーネントには状態とインタラクションが完備されているため、すべてをゼロから構築するのではなく、製品設計に集中でき、MUI のドキュメントに記載されているものはすべて、UXPin で１行もコードを書かずに再現できます。無料相談およびトライアルはこちらから。