distill

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

複雑さが製品に定着する前に、要素を絞り込む必要があります。最も効果的な単純化は、そもそも作り込みすぎないことです。

必須の準備

frontend-design を読み、「Context Gathering Protocol」に従ってください。利用可能なコンテキストを再利用し、重要な情報が不足している場合にのみ質問してください。

単純化の目的が、目に見える選択肢、記憶の負担、または時期尚早な複雑さを減らすことにある場合は、認知負荷を参照してください。 ごちゃつきの原因が、優先順位、セクションの節度、またはラベルと値の明確さが損なわれていることにある場合は、階層チェックリストを参照してください。 単純化のために、どのコントロールを目立たせるか、控えめにするか、まとめるか、なくすかを決める場合は、アクション階層を参照してください。 ヘルパーコピー、重複するラベル、オンボーディングの手順、説明文を、構造、デフォルト、制約、プレビュー、インラインフィードバックの改善によって取り除く場合は、自己説明的なインターフェース設計のリファレンスを参照してください。

---

現状を評価する

デザインが複雑またはごちゃついて見える原因を分析します。

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は引き続き必要です）
• わかりにくくなるほど単純化する（謎めいていることはミニマリズムではありません）
• ユーザーが判断するために必要な情報を削除する
• 階層を完全になくす（目立たせるべきものもあります）
• 複雑な領域を過度に単純化する（実際のタスクの複雑さに合わせます）
• 先に小さくても役立つバージョンをリリースできたのに、作り込みすぎた後でシンプル化する
• あれば便利な機能によって、リリース可能な中核機能の提供を妨げる
• 基本的なフローを構築して使う前に、理論上のエッジケースをすべて設計する
• プロダクト側で対応できるのに、回避可能な設定やルールの追跡をユーザーに押しつける

簡素化を検証する

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

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

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

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

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

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