subtractive-design について
subtractive-designは、削ることを設計の軸に置くインターフェース設計手法です。要素の目的を確かめ、選択肢を減らし、段階的に情報を開示することで、明快で抑制の効いた画面を目指します。
主な機能
- 01各要素の目的を確認
- 02各段階の選択肢を削減
- 03余白で階層を形成
- 04複雑さを段階的に開示
- 05画面要素を点検して削除
活用シーン
- 01操作の多い画面を簡素化
- 02ページの主操作を明確化
- 03重複する文言や装飾を削除
- 04画面の不要な要素を点検
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/subtractive-designを入力して読み込まれたか確認します。
詳細
引き算のデザイン
デザインは引き算です。何もない状態が、階層、落ち着き、集中を生み出します。何かを足すと仕事をした気になりますが、取り除くほうが難しく、より良い選択であることがほとんどです。
基本方針
- すべての要素、トークン、インタラクションに、明確に説明できる目的を求めます。
- 各段階でユーザーが下す判断は、できるだけ少なくします。
- 余白、静けさ、抑制を、積極的なデザイン素材として使います。
- 必要な複雑さは誇示せず、隠します。
- 生成が簡単だったというだけで存在するものは、すべて削ります。
推奨／避けること
| 推奨 | 避けること |
|---|---|
| 明確な主要アクション | 重要度が同じボタンが並ぶ状態 |
| 段階的な情報開示 | すべての選択肢を最初から表示すること |
| 共通のトークンとパターン | 画面ごとの場当たり的な装飾 |
| 設定作業を減らすデフォルト | デザインが定まっていないことを補う設定パネル |
| 落ち着いた余白 | 空いているという理由だけで空間を埋めること |
プロセス
- 画面が達成すべきことを列挙します。
- その一覧に役立たない要素をすべて特定します。
- 特定した要素を削除するか、目立たない位置づけにします。
- 残った要素にもラベル、装飾、動きが必要かを再検討します。
- これ以上削ると、必要な判断や操作方法が分からなくなる時点で止めます。
レビューチェックリスト
- タスクに支障をきたさずに削除できるコントロールはありますか？
- 明確な主要アクションが一つだけありますか？
- 副次的なアクションは、視覚的にも副次的になっていますか？
- UI にすでに表示されている内容を繰り返すテキストはありますか？
- 装飾的なレイヤーは、その存在に見合う役割を果たしていますか？
- より控えめな表現でも、同じ意図をより速く伝えられますか？
エッセイの出典
- 美しさは、何もないことから生まれる
- 見えないものをデザインする
- インターフェースデザインにおけるヒュッゲ
コメント
Markdown 対応