distill

デザインから不要な複雑さを取り除き、本質的な要素を明らかにすることで、徹底的にシンプルにし、明快さを生み出します。

必須の準備

/impeccable を実行してください。デザインの原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前にこのプロトコルに従ってください。デザインコンテキストがまだない場合は、必ず最初に /impeccable teach を実行してください。

---

現状を評価する

デザインが複雑または雑然として見える原因を分析します。

1. 複雑さの原因を特定する：

   • 要素が多すぎる：競合するボタン、重複した情報、視覚的な雑然さ
   • 変化が多すぎる：目的なく使われている色、フォント、サイズ、スタイルが多すぎる
   • 情報過多：すべてが一度に表示され、段階的な情報開示がない
   • 視覚的なノイズ：不要な境界線、影、背景、装飾
   • 階層が不明瞭：何が最も重要なのか分かりにくい
   • 機能の肥大化：選択肢、操作、進行経路が多すぎる

2. 本質を見極める：

   • ユーザーの主な目的は何ですか？（1つであるべきです）
   • 本当に必要なものと、あると便利なものは何ですか？
   • 何を削除、非表示、または統合できますか？
   • 価値の80％を生み出す20％は何ですか？

コードベースからこれらの点が分からない場合は、推測できない内容を明確にするため、ユーザーに直接質問してください。

重要：シンプルにするとは、機能を削除することではありません。ユーザーの目標達成を妨げるものを取り除くことです。すべての要素に、存在する理由が必要です。

シンプル化の計画を立てる

徹底的な編集方針を作成します。

• 中核となる目的：達成すべきことは何ですか？（1つだけ）
• 必須の要素：その目的の達成に本当に必要なものは何ですか？
• 段階的な情報開示：必要になるまで非表示にできるものは何ですか？
• 統合の機会：何を組み合わせたり、まとめたりできますか？

重要：シンプル化は簡単ではありません。優れた実行の余地を作るために、良いアイデアをあえて断念する必要があります。徹底してください。

デザインをシンプルにする

以下の各側面について、複雑さを体系的に取り除きます。

情報アーキテクチャ

• 対象範囲を絞る：二次的な操作、任意の機能、重複する情報を削除する
• 段階的な情報開示：明確な入口（アコーディオン、モーダル、ステップ形式のフロー）から複雑な操作にアクセスできるようにする
• 関連する操作を統合する：似たボタンをまとめ、フォームを統合し、関連するコンテンツをグループ化する
• 明確な階層：主操作は1つに絞り、二次操作は少数にし、それ以外は三次操作または非表示にする
• 重複をなくす：ほかの場所で説明している内容は、ここで繰り返さない

視覚的なシンプル化

• カラーパレットを絞る：5～7色ではなく、1～2色とニュートラルカラーを使う
• タイポグラフィを制限する：フォントファミリーは1つ、サイズは最大3～4種類、ウェイトは2～3種類にする
• 装飾を削除する：階層や機能に役立たない境界線、影、背景を取り除く
• 構造をフラットにする：入れ子を減らし、不要なコンテナーを削除する。カードの中にカードを入れない
• 不要なカードをなくす：基本的なレイアウトにカードは不要。代わりに余白と配置を使う
• 余白を統一する：1つの余白スケールを使い、任意の間隔をなくす

レイアウトのシンプル化

• 直線的な流れ：可能な場合は複雑なグリッドをシンプルな縦方向の流れに置き換える
• サイドバーをなくす：二次的なコンテンツは本文に移すか、非表示にする
• 幅を十分に使う：複雑なマルチカラムレイアウトではなく、利用可能なスペースを十分に活用する
• 配置を統一する：左揃えか中央揃えを選び、統一する
• 余白を十分に取る：コンテンツにゆとりを持たせ、詰め込みすぎない

操作のシンプル化

• 選択肢を減らす：ボタンと選択肢を減らし、進むべき道筋を明確にする（選択肢が多いことの弊害は現実にあります）
• スマートなデフォルト：一般的な選択は自動化し、必要な場合にのみユーザーに尋ねる
• インライン操作：可能な場合はモーダルのフローをインライン編集に置き換える
• ステップを減らす：サインアップを3ステップではなく1ステップにできますか？チェックアウトを簡略化できますか？
• 明確なCTA：競合する操作を5つ並べるのではなく、次に行うべきことを1つだけ明確に示す

コンテンツの簡素化

• 短いコピー: すべての文を半分に削り、さらにそれを繰り返します
• 能動態: 「変更を保存」であり、「変更が保存されます」ではありません
• 専門用語を排除: 平易な言葉が常に勝ります
• スキャンしやすい構造: 短い段落、箇条書き、明確な見出し
• 本質的な情報のみ: マーケティング的な飾り、法律用語、曖昧な表現を削除します
• 冗長なコピーを削除: イントロを繰り返すヘッダーや、繰り返される説明は不要です。一度だけ述べましょう

コードの簡素化

• 未使用のコードを削除: デッド CSS、未使用のコンポーネント、孤立したファイル
• コンポーネントツリーを平坦化: ネストの深さを減らします
• スタイルを統合: 類似したスタイルをマージし、ユーティリティを一貫して使用します
• バリエーションを削減: そのコンポーネントに 12 種類のバリエーションが必要ですか、それとも 3 種類で 90% のケースをカバーできますか？

絶対にしないこと:

• 必要な機能を削除する（シンプルさ ≠ 機能がないこと）
• シンプルさのためにアクセシビリティを犠牲にする（明確なラベルと ARIA は依然として必要です）
• 不明瞭になるほどシンプルにする（謎 ≠ ミニマリズム）
• ユーザーが意思決定するために必要な情報を削除する
• 階層を完全に排除する（強調されるべきものもあります）
• 複雑な領域を過度に単純化する（実際のタスクの複雑さに複雑さを合わせます）

簡素化を検証する

簡素化がユーザビリティを向上させることを確認します:

• タスク完了の高速化: ユーザーはより迅速に目標を達成できますか？
• 認知負荷の軽減: 何をすべきかを理解しやすくなっていますか？
• 依然として完全: 必要な機能はすべて引き続きアクセス可能ですか？
• より明確な階層: 何が最も重要かが明白ですか？
• より良いパフォーマンス: よりシンプルな設計はより速く読み込まれますか？

削除した複雑さを文書化する

機能やオプションを削除した場合:

• なぜ削除したかを文書化します
• 代替のアクセスポイントが必要かどうかを検討します
• 監視すべきユーザーフィードバックがあれば記録します

覚えておいてください: あなたには優れたセンスと判断力があります。簡素化は自信の行為です — 何を残すかを知り、残りを削除する勇気を持つことです。アントワーヌ・ド・サン＝テグジュペリが言ったように:「完璧とは、付け加えるものが何もなくなったときではなく、取り去るものが何もなくなったときに達成される。」