distill

デザインから不要な複雑さを取り除き、本質的な要素を明らかにして、徹底的な簡素化によって明快さを生み出します。

複雑さがプロダクトに定着する前に、そぎ落としましょう。多くの場合、最善の簡素化は、最初から作り込みすぎないことです。

必須の準備

ユーザーは /distill でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。ここにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前に、このプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず最初に $setup を読み込んでください。

簡素化の目的が、目に見える選択肢、記憶への負担、または時期尚早な複雑さを減らすことにある場合は、認知負荷を参照してください。 煩雑さの原因が、優先順位、セクションの整理、またはラベルと値の明確さにある場合は、階層チェックリストを参照してください。 簡素化にあたって、どのコントロールを目立たせるか、控えめにするか、まとめるか、なくすかを判断する場合は、アクション階層を参照してください。

---

現状を評価する

デザインが複雑、または煩雑に感じられる原因を分析します。

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

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

2. 本質を見極める：

   • ユーザーの主な目的は何ですか？（1つだけにしてください）
   • 本当に必要なものと、あれば便利なものは何ですか？
   • 取り除く、隠す、またはまとめることができるものは何ですか？
   • 価値の80％を生み出す20％は何ですか？
   • ユーザーが今すぐ役立てられる、最小限の有用なバージョンは何ですか？
   • どの部分が不可欠で、装飾的で、将来的な目標ですか？

これらの点がコードベースから明確でない場合は、推測できない内容についてユーザーに直接確認してください。

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

簡素化を計画する

徹底した編集方針を立てます。

• 中核となる目的：達成すべきことは何ですか？
• 不可欠な要素：その目的の達成に本当に必要なものは何ですか？
• 段階的な開示：必要になるまで隠せるものは何ですか？
• 統合の機会：まとめたり、一体化したりできるものは何ですか？

テスラーの法則（複雑さを担うのは誰か？）

ドメインに内在する複雑さもあります。デザイン上の本当の判断は、その複雑さをシステムが引き受けるのか、それともユーザーに手作業で管理させるのかという点です。

次の方法で、不要な複雑さをプロダクト側に移すことを優先してください。

• 適切なデフォルト設定
• 入力済みのデータと記憶された設定
• 必要なときに、その場で表示されるガイダンス
• 推奨される進め方と設定
• 繰り返し発生するセットアップや書式設定作業の自動化

高度な操作機能は利用できるようにしつつ、基本的な作業を始める前に、すべてのユーザーに複雑さの全容を突きつけないでください。

出荷可能な最小スコープ

• 実際にユーザーの価値となる、最小限のバージョンを定義します
• 出荷可能な中核部分と、あると便利な機能や将来的な構想を切り分けます
• 任意の機能によって、有用なバージョンの出荷を妨げないでください

サイクルのルール

• シンプルに設計する
• 早い段階で作る
• 実際の利用で問題が明らかになってから改善する
• 機能が存在する前から、あらゆる例外ケースを机上で解決しようとしない

重要：簡素化は容易ではありません。優れた実行のために、良いアイデアをあえて断念する必要があります。徹底してください。

デザインを簡素化する

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

情報アーキテクチャ

• シェルではなく機能から始める：ナビゲーションやクロームを再設計する前に、実際のタスクフローを簡素化します
• 範囲を絞る：二次的な操作、任意の機能、重複する情報を取り除きます
• 段階的な開示：明確な入口（アコーディオン、モーダル、ステップ形式のフロー）の背後に複雑さを隠します
• 関連する操作をまとめる：類似したボタンを統合し、フォームをまとめ、関連するコンテンツをグループ化します
• 明確な階層：主要な操作は1つに絞り、二次的な操作は少数にし、それ以外は三次的な操作にするか非表示にします
• 重複をなくす：ほかで説明されていることは、ここでは繰り返しません

ビジュアルの簡素化

• カラーパレットを絞る：5〜7色ではなく、ニュートラルカラーに1〜2色を加えて使います
• タイポグラフィを限定する：フォントファミリーは1つ、サイズは最大3〜4種類、ウェイトは2〜3種類にします
• 装飾を取り除く：階層や機能に役立たない枠線、シャドウ、背景をなくします
• 構造をフラットにする：ネストを減らし、不要なコンテナを取り除きます。カードの中にカードを入れてはいけません
• 不要なカードをなくす：基本的なレイアウトにカードは必要ありません。代わりに余白と配置を使います
• 余白を統一する：余白のスケールを1つにし、恣意的な間隔をなくします

レイアウトの簡素化

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

インタラクションの簡素化

• 選択肢を減らす：ボタンや選択肢を減らし、次に進む道筋を明確にします（選択のパラドックスは現実にあります）
• 賢いデフォルト設定：一般的な選択は自動で行い、必要な場合にのみ尋ねます
• システムの複雑さを吸収する：ユーザーに隠れたルールを覚えさせるより、推測、状態の記憶、適切な自動化を優先します
• インライン操作：可能であれば、モーダル形式のフローをインライン編集に置き換えます
• 手順を減らす：サインアップを3段階ではなく1段階にできませんか？ チェックアウトを簡素化できませんか？
• 明確なCTA：競合する操作を5つ並べるのではなく、次に進むための分かりやすい選択肢を1つにします

コンテンツの簡素化

• 文章を短くする：すべての文を半分に削り、さらにもう一度削ります
• 能動態を使う：「変更を保存」ではなく「変更が保存されます」とします
• 専門用語をなくす：常に平易な言葉を使います
• スキャンしやすい構成にする：短い段落、箇条書き、明確な見出しを使います
• 必須の情報だけにする：宣伝文句、法律用語、曖昧な表現を取り除きます
• 重複する文章をなくす：導入の内容を見出しで繰り返したり、説明を重ねたりせず、一度だけ伝えます

コードの簡素化

• 未使用のコードを削除する：不要なCSS、未使用のコンポーネント、参照されていないファイルを取り除きます
• コンポーネントツリーをフラットにする：ネストの深さを減らします
• スタイルを統合する：似たスタイルをまとめ、ユーティリティを一貫して使います
• バリエーションを減らす：そのコンポーネントに12種類ものバリエーションが必要ですか？ それとも3種類でケースの90%に対応できますか？

絶対にしてはいけないこと：

• 必要な機能を削除する（シンプルにすることは機能をなくすことではありません）
• シンプルさのためにアクセシビリティを犠牲にする（分かりやすいラベルとARIAは引き続き必要です）
• 不明瞭になるほどシンプルにする（謎めいていることはミニマリズムではありません）
• ユーザーの意思決定に必要な情報を削除する
• 階層を完全になくす（目立たせるべき要素もあります）
• 複雑な領域を過度に簡素化する（実際のタスクの複雑さに合わせてください）
• 最初から小さく有用なバージョンをリリースできたのに、作り込みすぎてから簡素化する
• あると便利な機能によって、リリース可能な中核機能を妨げる
• 基本的なフローを構築して使う前に、理論上のあらゆるエッジケースを設計する
• プロダクト側で対応できるのに、回避可能な設定やルールの追跡をユーザーに押し付ける

簡素化を検証する

簡素化によって使いやすさが向上していることを確認します。

• タスクをより速く完了できる：ユーザーは目標をより短時間で達成できますか？
• 認知負荷が軽減されている：何をすればよいかが理解しやすくなっていますか？
• 必要な機能はすべて利用できる：必要な機能には引き続きアクセスできますか？
• 階層がより明確になっている：何が最も重要かが一目でわかりますか？
• パフォーマンスが向上している：よりシンプルなデザインによって読み込みが速くなっていますか？

削除した複雑さを記録する

機能やオプションを削除した場合は、次の点を確認します。

• 削除した理由を記録します
• 別のアクセス方法が必要かどうかを検討します
• 今後確認すべきユーザーからのフィードバックを記録します

優れたセンスと判断力を備えています。簡素化とは、自信を持って何を残すべきかを見極め、それ以外を削る勇気を持つことです。Antoine de Saint-Exupéryが述べたように、「完璧とは、これ以上付け加えるものがなくなったときではなく、これ以上取り除くものがなくなったときに達成されるものです。」