コンテンツ・メディア

• §08-01無限スクロール

  末尾まで来たら次の内容を自動で読み込む。

  ページ送りの操作なしに続きを読み進められる。フィードや画像一覧など、終わりを意識せず流し見する内容に向き、目的の項目を探す一覧には向かない。

  コンテンツ閲覧
• §08-03Virtual list (windowing)

  画面内の行だけを描画して大量データを扱う。

  数万件の一覧でもスクロールが滑らかに動き、初期表示も速い。ログや大規模テーブルなど、全件表示が重くなる場面で使う。

  コンテンツ閲覧
• §08-04Masonry グリッド

  高さの違うタイルを隙間なく敷き詰めて並べる。

  縦横比の異なる画像やカードを余白なく並べ、一覧の密度を高める。写真やピン留めのように、サイズを揃えられない内容の一覧に向く。

  コンテンツ閲覧
• §08-06ストーリーバー

  画面上部に丸いアバターを並べて投稿へ誘導する。

  短期間だけ表示する投稿を目立つ位置に並べ、閲覧を促す。未読のあるアカウントを一目で見分けさせたいときに使う。

  コンテンツ閲覧

• §20-01動画プレイヤー (custom controls)

  再生速度・画質・字幕を切り替えられる独自の操作盤を持つ。

  再生速度や画質、字幕を利用者が選べ、好みの見方で視聴できる。講義動画や長尺コンテンツで、標準の操作では足りないときに使う。

  メディア（音声・動画）
• §20-02Picture-in-Picture

  動画を小窓に切り離して他の操作中も表示する。

  動画を見続けながら別のページや作業に移れる。配信や解説動画のように、見ながら他のことをする使い方が多い場面で使う。

  メディア（音声・動画）
• §20-03チャプターマーカー

  動画の進行バーに章の区切りを示す。

  長い動画の中から見たい箇所へ直接移動させる。講義や解説動画のように内容が節に分かれるものに向く。

  メディア（音声・動画）
• §20-08Waveform 表示

  音声の波形を描き、クリックで再生位置を移す。

  無音部分や盛り上がりが視覚的に分かり、目的の箇所に素早く移動できる。録音やポッドキャストの編集・視聴で使う。

  メディア（音声・動画）
• §20-10トランスクリプト追従 (karaoke 風)

  再生位置に合わせて文字起こしの該当箇所を強調する。

  聞き逃した部分を文字で追え、どこを再生しているかを見失わない。講義や会議の録画、ポッドキャストの閲覧に向く。

  メディア（音声・動画）

参考: mux.com

• §19-01マップ + マーカー (Mapbox/MapLibre)

  地図上に地点をマーカーで表示する。

  店舗や物件、イベントの場所を位置関係とともに伝えられる。住所の一覧より、どこが近いかを直感的に見せたいときに使う。

  マップ・地理
• §19-02マーカークラスタリング

  近接する多数のピンを一つの円に束ねて示す。

  地図上の点が多すぎて重なり、個々を判別できない問題に効く。店舗や投稿の分布を広域で見せる場面に向く。

  マップ・地理
• §19-04ルート表示 (polyline)

  地図上に出発地から目的地までの経路を線で描く。

  出発地から目的地までの道筋を地図に重ね、距離感と経由地を直感的に伝える。配送追跡や移動記録など、道のり自体が情報になる場面で使う。

  マップ・地理
• §19-06描画ツール (polygon/circle)

  地図上に多角形や円を描いて範囲を選ぶ。

  利用者が自分で範囲を指定して検索や集計を行う。配達区域や調査対象の設定など、住所では表せない範囲を扱うときに使う。

  マップ・地理
• §19-09isochrone (到達圏)

  ある地点から一定時間で到達できる範囲を地図に描く。

  直線距離ではなく実際の移動時間で候補を比べられる。通勤圏からの物件探しや、配送範囲の提示に向く。

  マップ・地理

参考: mapbox docs