eliminate-visual-clutter

スキル：視覚的な雑然さを取り除く

目的

機能的な目的を果たさない不要な視覚要素（枠線、背景、影、装飾）を取り除きます。

種類

修正＋評価

入力

• デザインのスクリーンショットまたは説明
• 要素の一覧（枠線、影、背景、区切り線）

出力

• 雑然さの評価（取り除ける要素）
• シンプル化したデザイン仕様
• 合格／不合格の評価

実施する変換

余白やコントラストで代用し、意味を伝えない装飾要素を特定して取り除きます。

判断基準

合格（すっきりしたデザイン）

• すべての視覚要素が機能的な目的を果たしている
• 区切りには枠線ではなく余白を使用している
• 目的のない装飾的な影やグラデーションがない
• 背景は控えめに使用している（すべてのカードに背景が必要なわけではない）
• 区切り線が最小限である

不合格（雑然としたデザイン）

• あらゆる要素に枠線がある（「箱っぽい」印象）
• 影が装飾目的で使われている
• セクション間に区切り線が多用されている
• すべてのコンポーネントに背景色がある
• 意味を伝えない装飾要素がある

見直すべき要素

要素	確認すること	取り除くことが多いか？
枠線	枠線が必要ですか？それとも余白だけで十分ですか？	はい。代わりにマージンを使います
カードの背景	ボックスが必要ですか？それとも余白だけで十分ですか？	多くの場合、余白でグループを表現します
区切り線	線が必要ですか？それとも余白を増やすだけで十分ですか？	通常は、代わりに間隔を広げます
影	奥行きが必要ですか？それとも装飾ですか？	多くの場合、影をなくします
背景色	この色は何かを伝えていますか？	装飾目的のみなら、取り除きます
アイコン	このアイコンは意味を付け加えていますか？	装飾目的のみなら、取り除きます

シンプル化の手順

1. まずすべてを揃えます（枠線、影、背景）
2. 枠線を取り除きます → 代わりに間隔を使います
3. 背景を取り除きます → 余白でグループ化します
4. 区切り線を取り除きます → セクション間の余白を増やします
5. 影を取り除きます → 高さが必要な場合（モーダル、ドロップダウン）にのみ残します
6. 階層や明瞭さに必要なものだけを戻します

使用する視覚・UXの手がかり

1. 余白：最も洗練された区切り方
2. 近接性：枠線を使わずにグループ化する
3. タイポグラフィ：装飾を使わずに階層を示す
4. コントラスト：要素を増やさずに強調する

よくある失敗パターン

失敗	説明	修正方法
枠線過多	すべての要素が枠で囲まれている	枠線を50％以上取り除き、余白を使います
影の乱用	静的な要素に影を付ける	ホバー状態やモーダルに限って使用します
区切り線の過剰使用	あらゆるセクション間に線を引く	半分を取り除き、余白を2倍にします
背景の洪水	すべてのカードにグレーの背景がある	余白を設けた白、または控えめな枠線を使います
アイコンの氾濫	すべてのラベルやボタンにアイコンがある	意味を付け加える場合にのみ残します
グラデーションの乱用	あらゆる場所に装飾的なグラデーションがある	単色にするか、目的に沿ったグラデーションを1つ使います

前提条件

• 間隔の体系が整っていること
• 視覚的な階層が確立されていること

依存関係

• apply-consistent-spacing（余白で枠線を置き換える）
• establish-visual-hierarchy（コントラストで装飾を置き換える）

UIのリファクタリングに関する参考資料

• 「余白は多すぎるくらいから始める」
• 「間隔で代用できる場合は枠線を使わない」
• 「箱っぽいデザインを避ける」
• 「少ないほど豊か」

評価例

入力： 枠線（1pxのグレー）、背景（#f5f5f5）、影（小）、アイコン付きタイトル、区切り線、コンテンツ、区切り線、アイコンとテキストを含むフッターがあるカード

評価： 不合格（雑然としている）

• 枠線＋背景＋影は過剰です
• 2本の区切り線は不要です
• アイコンは装飾的な可能性があります

推奨事項：

• 背景を取り除きます（白を使います）
• 影を取り除きます（静的なカードに高さは不要です）
• 枠線を残すか、十分なパディングを設けます
• 区切り線を取り除き、セクションのパディングを増やします
• アイコンが意味を持つか評価し、装飾的なら取り除きます