ux-activity-feed について
アクティビティフィードを設計するプロダクト・デザインチーム向けの UX スキルです。時系列順かランキング順かを決めたうえで、項目の内容、通知の集約、空のフィードへの対応、更新状態の表示を案内します。
主な機能
- 01時系列順かランキング順かを選択
- 02フィード項目の内容を整理
- 03タイムスタンプを控えめにし一覧性を向上
- 04通知の集約と操作項目を計画
- 05新規ユーザーに空のフィードを表示しない
活用シーン
- 01ソーシャル製品のアクティビティフィード設計
- 02取引やアカウント更新の一覧設計
- 03大量通知や新規ユーザー向け表示の設計
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ux-activity-feedを入力して読み込まれたか確認します。
詳細
アクティビティフィードスキル
このスキルの動作（最初にお読みください）
これは生成型のスキルです。フィードの役割は重要なものを浮かび上がらせ、ノイズを消えさせることですが、デフォルト設定はそれに逆行します。各エントリには利用可能なすべてのフィールドが詰め込まれ、正確なタイムスタンプが大声で主張し、すべての行にすべてのソーシャルコントロールが並び、グループ化されていない通知が一つずつ鳴り響き、まっさらなフィードが、新規ユーザーが去るか留まるかを決めるまさにその瞬間に彼らを迎えてしまいます。さらに、後から変更するのが難しい最初の選択——時系列か、アルゴリズム/ランキングか——があり、チームはしばしばこれを偶然に決めてしまいます。そこで、このスキルは次をゲートします。
- フィードの種類とフィードの目的を確立する — 時系列かランキングかは後から変更するのが難しく、下流のすべてを再形成します。
- 常に真であるコアを適用する — 各エントリをキュレーションし、テキストを読みやすく保ち、タイムスタンプを控えめにし、空のフィードを決して表示せず、更新ステータスを表示します。
- コンテキスト依存の決定（通知の集約、フォロー推薦、エントリごとのコントロール）をトレードオフとともに浮かび上がらせます。
その後、検証のために ux-aesthetics-audit、ux-heuristics-audit、ux-accessibility-audit、ux-microcopy-audit、ux-dark-patterns-audit、ux-mobile-responsiveness-audit に引き継ぎます。
スコープと構成（docs/orchestration-policy.md §9 に準拠）: このスキルはフィード画面とそのエントリを対象とし、より下位スコープのスキルを再導出するのではなく組み合わせます。コアの子（フィードの一部として構築）: ux-cards によるエントリごとのカードアナトミー。サブパートを所有するピア（委譲）: 通知コンポーネントの動作は ux-notifications-and-toasts に、ローダー/スケルトンは ux-loaders-and-progress に（到達した場合、それらのサブパートを所有します）。下流（提案はするが自動構築はしない）: 空フィード画面の技巧は ux-empty-states 経由で。継承し、再生成しない: 既存のデザインシステムの下では、色/タイポグラフィ/スペーシングをそのトークンから取得します — ゼロから設計する場合にのみそれらを設定します。
ステップ 0 — 設計前にコンテキストを確立する
不明な場合は尋ねてください。回答なしで進める場合は前提を明示してください。
- 時系列かランキングか？ 時系列（新しい→古い）は真のタイムラインを提示します — いつ起こったかが要点である場合（取引ログ、チームのアクティビティ履歴）に適しています。ランキング/アルゴリズムは関連性、トレンド、スポンサード、または編集による選定でキュレーションします — 何を見る価値があるかが新しさよりも重要である場合に適しています。重要な警告: 後でアルゴリズムに置き換えるつもりの時系列フィードを出荷しないでください — その切り替えはユーザーをひどく動揺させます。今、意図的に選択してください。
- フィードの目的は何か？ ソーシャルエンゲージメント、トランザクション/アカウント更新、または通知ダイジェスト — これにより、各エントリに必要なコントロールとコンテンツが決まります。
- 新規または静かなアカウントには何が見えるか？ つながりのない新規ユーザー、またはアクティビティの停滞は、空のフィードに直面します — 最初から計画してください（インストール後にユーザーを引き込む期間は約3〜7日です）。
常に適用すべきコア（ほぼすべてのフィードに当てはまる正解）
- 各エントリを厳選する — 完全性よりもミニマリズム。 フィードの項目の背後には大量のデータがあるかもしれませんが、ユーザーが判断して次に進むために必要なものだけを表示します。詰め込みすぎた行、不一致なフォント、冗長なラベルは、注意をタスクからそらします。明確さがあれば、ユーザーは素早くスキャンできます。
- テキストを読みやすく保つ。 フィードは素早く消費されるために存在します — 大きく明快なフォントと強い背景コントラストを、アクセシビリティツールでテストします。これは視覚に障害のあるユーザーにとって最も重要です。
- タイムスタンプは控えめにする。 それらは第三級のシグナルです — 正確な時計ではなく、おおよその「どれくらい前か」です。省略形（「3h」「2d」）を使い、コンテンツと競合させないようにします。
- 空のフィードを決して表示しない。 初回起動時や停滞中の空白のフィードは、エンゲージメントを損ないます。シードを用意しましょう: オンボーディング中の「フォローするのにおすすめのユーザー」、人気/トレンドのコンテンツ、友達を招待するプロンプト、またはプロフィールの完成を促すナッジ — 即座のアクティビティを生み出すものなら何でもです。
- エントリごとに必須のコントロールのみ。 重要なインタラクションを含め（例: ソーシャルのいいね/コメント/シェア、読み取り専用の更新フィードではおそらく何もなし）、残りは削ぎ落とします — 余分なコントロールはすべて、行を散らかすオーバーヘッドです。
- 更新時にフィードのステータスを表示する。 ユーザーがプル・トゥ・リフレッシュや追加読み込みを行うとき、明確なローディングインジケーター（スピナー/スケルトン）が、凍りついた画面を見つめるのではなく、システムステータスを伝えます。
コンテキスト依存の判断（自動適用せず、提示する）
| 判断 | 適用する場合 | 避ける / 適応させる場合 | デフォルトの推奨 |
|---|---|---|---|
| フィードの種類: 時系列 vs. ランキング | 新しさが価値である場合（ログ、履歴、リアルタイムのチームアクティビティ）は時系列。関連性/量が純粋な新しさをノイズにする場合はランキング | 後でアルゴリズムに切り替える予定なら純粋な時系列（変更はユーザーを動揺させる）。ユーザーが文字通りのタイムラインを期待する場合はランキング | いつと何のどちらがより重要かで選び、後付けせずに決め切る |
| 通知の集約 / グループ化 | 大量またはパワーユーザー — 類似のアラートを時間、種類、インタラクションでまとめる（「今日256人があなたをフォローしました」） | 各イベントが個別に意味を持つ少量のフィード | 量がさもなければ押し寄せるようになったら、類似の更新をグループ化する |
| パーソナライズされたフォロー推薦 | ソーシャル/ディスカバリー製品 — つながり、共通の興味、影響力のあるアカウントからプロフィールを提案して探索を促す | 推薦がフィルターバブルに狭まってしまうこと | 提案を提供しつつ、多様/交叉関心のコンテンツを意図的に混ぜる |
| エントリごとのコントロールセット | ソーシャルフィード: いいね/コメント/シェア。トランザクションフィード: おそらく単一の「表示」またはなし | 必要としないフィードにソーシャルのコントロールをコピーすること | コントロールをフィードの目的に合わせる。少ない方が通常は良い |
| スポンサー/編集コンテンツの挿入（ランキングのみ） | ビジネスモデルがプロモーション項目を必要とする場合 | 広告を自然なアクティビティに見せかけること | スポンサー/プロモーションのエントリを明確にラベル付けする（→ ダークパターン） |
結果を検証する（オーケストレーション）
引き継ぎでは、各レンズをインストール可能なスキルの
nameで指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。
生成または修正を行った後は、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングしてください。ここでは、heuristics、microcopy、dark-patterns は Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness は Tier B（オファー） です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞り込まれます。mobile-responsiveness はモバイルにのみ適用されます。ユーザーがこのスキルを特定の目的で呼び出した場合は、その範囲を尊重してください。
ux-aesthetics-audit(Tier B — オファー、デザインシステムがある場合は抑制) — エントリの密度とスキャンしやすさ、行全体で一貫した扱い、タイムスタンプを従属させること、雑然としない構成。ux-heuristics-audit(Tier A) — システム状態の可視性（更新・読み込み）、想起よりも認識、フィード順とユーザーの期待の一致（特にランキング形式のフィード）。ux-accessibility-audit(Tier B — オファー、デザインシステムがある場合は絞り込み) — 素早く読むための文字サイズとコントラスト、コントロールのラベルとターゲット、フィード項目のスクリーンリーダー順序。ux-microcopy-audit(Tier A) — 省略されたタイムスタンプ、集約された通知の言い回し（「今日256人があなたをフォローしました」）、エントリのラベル、空のフィードのプロンプト。ux-dark-patterns-audit(Tier A) — フィード特有の罠：オーガニックに見せかけた非開示のスポンサーコンテンツ、エンゲージメントを最大化する操作、フィルターバブルによる狭まり。ランキングはアプリの滞在時間だけでなく、ユーザーに資するものであるべきです。ux-mobile-responsiveness-audit(Tier B — オファー) — 引っ張って更新と無限スクロールの挙動、エントリごとのコントロールのタップターゲット、小さい画面での可読性と片手での到達性。
監査でコンフリクトが表面化した場合（例：ビジネス側はプロモーションエントリを増やしたいが、信頼できるストリームを望む場合）、主要なタスクに立ち返って解決してください：ユーザーは重要なことをキャッチアップするためにフィードを開いたのです — ノイズよりもシグナルを守りましょう。
よくある do/don't パターン
| ❌ しない | ✅ する |
|---|---|
| デフォルトで時系列かランキングかを選ぶ | いつ と 何 のどちらが重要かによって意図的に選び、それを貫く |
| 時系列で始めてからアルゴリズムに差し替える | 最初に決める。予期しない切り替えはユーザーを不快にさせる |
| 利用可能なすべてのフィールドを各エントリに詰め込む | 判断して次に進むために必要なものだけに絞る |
| 目立つ正確なタイムスタンプ | 省略された相対表示で、視覚的に従属させる |
| フォロワーやいいねごとに1件の通知 | 類似の通知を集約する（「今日256人があなたをフォローしました」） |
| 新規ユーザーを空のフィードで迎える | シードする：フォロー候補、人気コンテンツ、招待・プロフィールのプロンプト |
| すべての行にすべてのソーシャルコントロール | フィードの目的に必要なコントロールだけ |
| オーガニックに見せかけたプロモーション項目 | 明確にラベル付けされたスポンサー・編集エントリ（→ dark-patterns） |
| 更新時に画面が固まる | 可視化された読み込みインジケーター／スケルトン |
| 確認せずに出荷する | aesthetics + heuristics + accessibility + microcopy + dark-patterns + mobile-responsiveness に引き継ぐ |