タイムライン・フィードUIのデザイン：情報を流れるように表示する設計

タイムライン・フィードUIは、SNS・ニュース・アクティビティログなど、時系列で更新されるコンテンツを表示するための重要なUIパターンです。本記事では、快適なフィード体験を実現するタイムラインUIの設計方法を解説します。

フィードUIの種類と特徴

時系列フィード（Chronological Feed）：

投稿が新しい順に並ぶシンプルなタイムライン。SNSの初期には標準でしたが、現在はアルゴリズムフィードに置き換えられることが多い。「新着」タブとして提供することが多い。

アルゴリズムフィード（Algorithmic Feed）：

ユーザーの行動・好みに基づいてAIが選択・並び替えたコンテンツを表示。エンゲージメントが高まる一方、「見たいものが見られない」不満も生じる。

アクティビティフィード（Activity Feed）：

「〇〇があなたの投稿をいいねしました」「〇〇があなたをフォローしました」などのユーザーへの通知を時系列で表示。

フィードカードのデザイン

フィードの1アイテム（カード）のデザインは、コンテンツタイプによって最適な構成が異なります。

テキスト投稿カード：

• ユーザーアバター（左端）
• ユーザー名・投稿時刻（右）
• 本文テキスト（長い場合は「続きを読む」で折りたたみ）
• リアクションボタン（いいね・コメント・シェア）

画像付き投稿カード：

• 画像は本文の下に全幅で表示
• 複数画像はグリッドまたは横スクロールで表示

リンク共有カード：

• リンク先のOGP画像・タイトル・ドメインのプレビューカード
• 記事タイトルがクリッカブル

無限スクロール（Infinite Scroll）のUX

実装のポイント：

• スクロールが画面末尾から200〜300px手前に達したら次のコンテンツを先読み開始
• 読み込み中はスピナーを表示
• 読み込んだコンテンツをスムーズに追加（レイアウトシフトを防ぐ）

無限スクロールの問題点と対策：

• フッターへのアクセスが難しくなる → フッターを固定またはページ分割と組み合わせ
• 「どこまで読んだか」わからなくなる → 読んだ位置の保存・復元
• バッテリー・データ消費が増加 → 自動再生の制限

プルダウンリフレッシュのUI

フィードの先頭を下に引っ張る（プルダウン）ことで最新コンテンツを更新するジェスチャーUI。

デザインのポイント：

• 引っ張る途中でインジケーターが徐々に表示される
• 一定距離（約70px）で「放すと更新」の状態になる
• 放したらローディングスピナーに変化
• 更新完了後に新しいコンテンツ数を表示（「3件の新しい投稿」）

フィードのフィルター・切り替えUI

複数のフィードカテゴリ（「フォロー中」「おすすめ」「トレンド」など）を切り替えるUIは、タブバーまたは横スクロールのチップで実装するのが一般的です。

現在選択中のタブは視覚的に強調（アンダーライン・ブランドカラー）し、タブの切り替えは素早い応答性が求められます。

まとめ

タイムライン・フィードUIは「コンテンツの流れ」を快適に体験させる設計が核心です。適切なカードデザイン・スムーズな無限スクロール・プルダウンリフレッシュを組み合わせることで、ユーザーが長時間滞在したくなるフィード体験を実現できます。