ux-compare

UX 比較

ux-extract で作成した N 個のパターンライブラリを読み込み、比較内容をまとめます。次のような質問に答えます。

• 「claude.ai、Linear、Notion、Vercel、Superhuman では、空の状態はどのように扱われていますか？」
• 「キーボードショートカットを使っているアプリはどれですか？共通する用語は何ですか？」
• 「請求ページを作るとき、慣例に従うべきでしょうか、それとも意図的に外すべきでしょうか？」

抽出データが 1 つなら、参考資料として使えます。複数あれば、デザインライブラリになります。比較は意思決定を支援するものであり、ライブラリを「何をすべきか、その理由は何か」という指針に変えます。

使用するタイミング

• 実装前 — これから作る機能の種類について、3～5 個の参考例を比較すると、慣例とトレードオフが明らかになります。
• デザインレビュー中 — 「このパターンは抽出した 5 個の参考例のどれにもありません。意図的でしょうか？」
• チームの合意形成 — デザイン上の決定に共通の参考資料を用意できます。
• デザインブリーフの作成 — 共通するパターンを基準とし、異なるパターンを議論の対象にします。

入力

利用可能なライブラリ

まず、利用できるものを確認します。パターンライブラリは次の場所にあります。

• docs/ux-extracts/<app-name>/pattern-library.md
• .jez/artifacts/ux-extracts/<app-name>/pattern-library.md

見つかったものをすべて一覧表示します。古いライブラリを見分けられるよう、それぞれの抽出日とともにインベントリをユーザーに提示します。

Available pattern libraries:
- claude.ai      (extracted 2026-03-12)
- linear.app     (extracted 2026-02-28)
- notion.so      (extracted 2026-01-15) ← 3 months old
- superhuman     (extracted 2026-03-20)

ライブラリが 1 つしかない場合は、そこで止めて、まず他のアプリでも ux-extract を実行するよう提案します。ライブラリが 1 つだけでは、「比較」しても単なるライブラリにすぎません。

範囲／焦点

ユーザーに比較したい対象を尋ねるか、リクエストから判断します。

• ライブラリ全体 — すべてのライブラリに含まれるすべてのカテゴリを比較します（詳細ですが網羅的です）。
• 1 つのカテゴリ — 空の状態、キーボード、モーダルなど、1 つのカテゴリだけを比較します（より範囲が絞られ、具体的な判断に役立ちます）。
• 機能領域 — 「これらのアプリは設定をどのように扱っていますか？」のように、複数のカテゴリにまたがりながらも焦点を絞ります。
• 具体的な質問 — 「オフラインに対応しているアプリはどれですか？」のように、「特筆すべき欠如」のセクションも検索します。

範囲を絞ると、より的確な提案が得られます。既定では、次のように尋ねます。「どの機能またはパターンを比較しますか？」

対象に含めるライブラリ

既定では、ユーザーが指定したすべてのライブラリ、または指定がない場合はすべてのライブラリを含めます。ユーザーが除外できるようにします。「notion 以外すべて — notion のライブラリは古すぎます」

比較プロセス

1. すべてのライブラリを読む

対象となる各ライブラリについて、pattern-library.md をすべて読みます。次の点に注意します。

• 抽出日
• 抽出範囲（アプリ全体か、一部か）
• 「特筆すべき欠如」セクションの有無 — 比較で特に興味深いデータが含まれていることがよくあります。

2. カテゴリごとに確認する

指定された範囲について、いずれかのライブラリにある各パターンカテゴリを確認します。各カテゴリについて、次の作業を行います。

1. 各アプリの対応を列挙する — アプリごとに 1 つの箇条書きにし、可能な限り具体的かつ原文どおりに記載します。
2. 共通点を特定する — 大半またはすべてのアプリで共通している点を特定します。これはリスクの低い既定の選択肢です。
3. 相違点を特定する — 実際に異なる点を特定します。これはデザイン上の判断事項です。
4. 独自のアプローチを明示する — 1 つのアプリだけが採用しているアプローチを示します。革新か奇異かにかかわらず、取り上げます。
5. 網羅性の不足を明示する — あるアプリのライブラリでそのカテゴリが扱われていない場合は、その旨を伝えます（ライブラリに記載がないことを、アプリに存在しないこととして黙って扱わないでください）。

3. 欠如を相互参照する

カテゴリを確認した後、対象全体で欠けているものをまとめます。5 個中 4 個のアプリで破壊的な操作に取り消し機能がないなら、それはパターンです。5 個中 3 個のアプリで新規レコード作成のキーボードショートカットがないなら、それは繰り返し選ばれている判断です。

4. 推奨事項を統合する

意見を明確にしたガイダンスで締めくくります。

• 安全なデフォルト — 収束パターン。これに従えば、ユーザーは親しみやすさを感じます。
• 意図的な選択 — 分岐パターン。それぞれのトレードオフを示し、ユーザーが選べるようにします。
• 避けるべきもの — 明確な理由がない限り、1つのアプリだけに見られるパターン。そのアプリがなぜ異なるやり方をしているのか、明確な理由がある場合を除きます。
• 埋める価値のあるギャップ — 意外な欠落、またはユーザーが対応されているのを見ると有益だろう欠落。

推奨事項のセクションこそが、比較を実行する理由です。それがなければ、ドキュメントは箇条書きの山にすぎません。それがあれば、意思決定になります。

出力

docs/ux-comparisons/<topic>-YYYY-MM-DD.md に書き込みます（そのパスが存在する場合は .jez/artifacts/ux-comparisons/<topic>-YYYY-MM-DD.md）。

トピックのスラッグはスコープから決めます — 例: empty-states、keyboard-shortcuts、onboarding、destructive-actions。

出力の完全な形については references/comparison-template.md を参照してください。

短縮版:

# UX Comparison: Empty States

Compared: claude.ai, linear.app, notion.so, superhuman
Date: 2026-04-19
Scope: How these apps handle empty states across list views, onboarding, and zero-data dashboards.

## At a glance

[2-3 sentences: what converges, what diverges, what's missing across the set]

## Pattern-by-pattern

### Empty list state

- **claude.ai**: illustration + headline + description + primary CTA + 3 shortcut hints
- **linear**: headline only, small text, no CTA
- **notion**: template picker (unique — offers 12 templates)
- **superhuman**: empty state not reached in extract (all-data demo account)

Convergence: most show some form of guidance; none are fully blank.
Divergence: claude.ai guides toward keyboard workflow; notion guides toward templates.
Unique: notion's template-first empty state.
Coverage gap: superhuman not assessed.

### Empty search results
[...]

## Recommendations

- **Safe default**: illustration + one-line description + primary CTA. All convergent apps do this.
- **Consider**: shortcut hints (like claude.ai) if your power-user persona is strong. Tradeoff: adds visual noise that doesn't help first-time users.
- **Skip**: notion's template picker unless you have a templates feature.
- **Fill a gap**: none of the 4 apps explain *why* the list is empty. A one-liner ("No clients yet — add your first to get started") is convergent practice and worth preserving.

## Source libraries

- claude.ai — 2026-03-12
- linear.app — 2026-02-28
- notion.so — 2026-01-15 (stale, re-extract recommended)
- superhuman — 2026-03-20

自律性

• そのまま実行する: 利用可能なライブラリを発見し、読み込み、比較ドキュメントを書き、元のライブラリから具体的なスクリーンショットやコピーを引用します
• 最初に確認する: ユーザーがスコープを指定していない場合 — 焦点を絞った1つの質問のほうが、広散する比較よりも安上がりです
• 停止して確認する: 使用可能なライブラリが2つ未満の場合 — 1つのライブラリでは比較は不可能です。まず ux-extract を提案してください

参照ファイル

いつ	読むもの
比較ドキュメントを書くとき	references/comparison-template.md

ヒント

• すべてのライブラリからすべてを再掲載しないでください。 比較とは付加価値を生み出す統合です。5つのライブラリから箇条書きをただコピーしているだけでは、比較していることになりません。
• 収束は通常最も安全な選択です が、常に最も興味深いものであるとは限りません。収束が優れたデザインではなくコピー＆ペーストである可能性がある箇所を指摘してください。
• 元のライブラリのスクリーンショットを引用する — コピーはしないでください。「claude.ai パターンライブラリ § Empty States、スクリーンショット 502 を参照」とすることで、抽出物を唯一の信頼できる情報源として保てます。
• 古くなったライブラリも役に立ちます — 日付を記すだけです。12か月前のライブラリはその時点のスナップショットであり、無価値ではありません。
• 推奨事項は意見が明確でなければなりません。 「状況によります」 は最も弱い出力です。立場を明示してください。ユーザーは反対してもかまいません。
• 比較も古くなります。 元になる抽出物が更新されたとき、または新しい参照がセットに加わったときに再実行してください。

将来: 5つを超えるアプリ

比較は非線形にスケールします。3つのアプリは快適です。5つは読みやすさの上限です。10になると、散文で統合することが不可能なマトリクスになります。5つを超えるライブラリを比較する場合は、それらをバケット分けしてください:

• ティア1（あなたのアプリに最も近い） — 詳細な箇条書き
• ティア2（参照クラス） — 要約的な箇条書き
• ティア3（外れ値、斬新なアプローチ） — 例外として言及

または、1つの巨大な比較ではなく、いくつかのより狭い比較を行ってください。