arrange

単調さや窮屈さ、構造の弱さを感じるレイアウトと間隔を評価して改善し、ありきたりな配置を意図的でリズム感のある構成に変えます。

必須の準備

/impeccable を実行してください。設計原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前にプロトコルに従ってください。設計コンテキストがまだない場合は、必ず先に /impeccable teach を実行してください。

---

現在のレイアウトを評価する

現在の空間設計のどこに問題があるかを分析します。

1. 間隔：

   • 間隔は一貫していますか、それとも恣意的ですか？（ランダムなパディング／マージン値）
   • すべての間隔が同じですか？（どこも同じパディングではリズムが生まれません）
   • 関連する要素は近くにまとめられ、グループ間には十分な余白がありますか？

2. 視覚的な階層：

   • 目を細めて見るテストを行います。比喩的に目を細めても、最も重要な要素、次に重要な要素、明確なグループ分けを見分けられますか？
   • 階層は効果的に表現されていますか？（余白とウェイトだけでも十分な場合がありますが、現在の方法は機能していますか？）
   • 余白によって、重要なものへ視線が導かれていますか？

3. グリッドと構造：

   • 明確な基本構造がありますか、それともレイアウトが無秩序に感じられますか？
   • どこでも同じカードグリッドを使っていませんか？（アイコン＋見出し＋テキストを延々と繰り返す）
   • すべてが中央揃えになっていませんか？（左揃えや非対称なレイアウトのほうが、よりデザインされた印象になります。ただし、常にそうすべきというわけではありません）

4. リズムと変化：

   • レイアウトに視覚的なリズムがありますか？（詰めた間隔とゆったりした間隔を交互に使う）
   • すべてのセクションが同じ構成になっていませんか？（単調な繰り返し）
   • 意図的な驚きや強調の場面がありますか？

5. 密度：

   • レイアウトが窮屈すぎませんか？（呼吸できる余白が足りない）
   • レイアウトがまばらすぎませんか？（目的のない余白が多すぎる）
   • 密度はコンテンツの種類に合っていますか？（データ密度の高い UI では間隔を詰め、マーケティングページでは余裕を持たせます）

重要：色やフォントに問題がなくても、レイアウトの問題がインターフェースに「しっくりこない」印象を与えている根本原因であることはよくあります。余白はデザインの素材です。意図を持って使いましょう。

レイアウト改善を計画する

グリッド、リズム、コンテナクエリの詳しいガイダンスについては、impeccable スキルの空間設計リファレンスを参照してください。

体系的な計画を立てます。

• 間隔のシステム：一貫したスケールを使います。フレームワークに組み込まれたスケール（例：Tailwind）、rem ベースのトークン、カスタムシステムのいずれでもかまいません。具体的な値より、一貫性が重要です。
• 階層の方針：余白を使って重要度をどのように伝えますか？
• レイアウトのアプローチ：コンテンツに適した構造は何ですか？1 次元には Flex、2 次元には Grid、複雑なページレイアウトには名前付き領域を使います。
• リズム：どこで間隔を詰め、どこでゆったりさせますか？

レイアウトを体系的に改善する

間隔のシステムを確立する

• 一貫した間隔のスケールを使います。フレームワークのスケール（Tailwind など）、rem ベースのトークン、カスタムスケールのいずれでもかまいません。重要なのは、値を恣意的に決めるのではなく、定義済みのセットから選ぶことです。
• カスタムプロパティを使う場合は、トークンに意味のある名前を付けます。--spacing-8 ではなく、--space-xs から --space-xl のようにします。
• マージンの相殺を回避するためのハックを使わずに済むよう、兄弟要素間の間隔にはマージンではなく gap を使います。
• 大きな画面で余裕を持たせる流動的な間隔には、clamp() を使います。

視覚的なリズムを生み出す

• 関連要素は近くにまとめる（兄弟要素間は 8～12px）
• 異なるセクション間には十分な間隔を設ける（48～96px）
• セクション内の間隔に変化を付ける。すべての行で同じ間隔にする必要はありません。
• 非対称な構成を取り入れます。適切な場合は、予測どおりの中央揃えパターンを崩します。

適切なレイアウトツールを選ぶ

• 1次元レイアウトにはFlexboxを使用する：アイテムの行、ナビゲーションバー、ボタングループ、カードのコンテンツ、ほとんどのコンポーネント内部など。Flexはよりシンプルで、大半のレイアウトタスクに適しています。
• 2次元レイアウトにはGridを使用する：ページ全体の構造、ダッシュボード、データ密度の高いインターフェース、行と列を連携して制御する必要があるものなど。
• flex-wrapを使ったFlexboxのほうがシンプルで柔軟な場合は、デフォルトでGridを使わないでください。
• ブレークポイントなしでレスポンシブなグリッドを作るには、repeat(auto-fit, minmax(280px, 1fr))を使用します。
• 複雑なページレイアウトには名前付きグリッドエリア（grid-template-areas）を使用し、ブレークポイントで再定義します。

カードグリッドの単調さを解消する

• 何にでもカードグリッドをデフォルトで使わないでください。間隔や配置だけでも、自然に視覚的なグループを作れます。
• カードを使うのは、コンテンツが明確に独立していて操作可能な場合に限ります。カードの中にカードを入れないでください。
• カードのサイズを変えたり、列をまたがせたり、カード以外のコンテンツと組み合わせたりして、繰り返し感を崩します。

視覚的な階層を強化する

• 明確な階層に必要な次元だけを使います。余白だけで十分な場合もあります。要素の周囲に十分な余白を設けると、視線を引きつけます。洗練されたデザインの中には、余白とウェイトだけでリズムを生み出しているものもあります。よりシンプルな手段で不十分な場合にのみ、色やサイズのコントラストを加えます。
• 読み進める方向を意識します。LTR言語では視線は自然に左上から右下へ進みますが、主要なアクションの配置は状況によって異なります（例：ダイアログでは右下、ナビゲーションでは上部）。
• 近接と分離によって、コンテンツを明確にグループ化します。

奥行きと浮き上がりを管理する

• 意味に基づくz-indexのスケールを作成します（dropdown → sticky → modal-backdrop → modal → toast → tooltip）。
• 一貫性のあるシャドウのスケールを作成します（sm → md → lg → xl）。シャドウは控えめにします。
• 浮き上がりは階層を補強するために使い、装飾として使わないでください。

視覚的な微調整

• アイコンが幾何学的には中央に配置されているのに視覚的にずれて見える場合は、位置を微調整します。ただし、本当にずれて見えると確信できる場合に限ります。推測で調整しないでください。

絶対にしないでください：

• スケールにない任意の間隔値を使用する
• すべての間隔を同じにする。変化が階層を生み出します。
• すべてをカードで囲む。すべてにコンテナが必要なわけではありません。
• カードの中にカードを入れる。内部の階層には間隔や区切り線を使います。
• どこでも同じカードグリッドを使う（アイコン＋見出し＋テキストの繰り返し）
• すべてを中央揃えにする。非対称な左揃えのほうが、よりデザインされた印象になります。
• ヒーローメトリックのレイアウト（大きな数字、小さなラベル、統計、グラデーション）をテンプレートとしてデフォルトで使う。実際のユーザーデータを表示する場合は、目立つメトリックが有効なこともありますが、装飾用の数字ではなく実データを表示する必要があります。
• Flexboxのほうがシンプルな場合に、デフォルトでCSS Gridを使う。目的に合った最もシンプルなツールを使います。
• 任意のz-index値（999、9999）を使う。意味に基づくスケールを作成します。

レイアウトの改善を確認する

• 目を細めて見るテスト：視界をぼかしたときに、主要な要素、二次的な要素、グループを見分けられますか？
• リズム：詰まった間隔とゆったりした間隔が心地よく交互に現れていますか？
• 階層：最も重要なコンテンツが2秒以内に明確にわかりますか？
• ゆとり：レイアウトは窮屈でも無駄でもなく、心地よく感じられますか？
• 一貫性：間隔のシステムが全体に統一して適用されていますか？
• レスポンシブ対応：画面サイズに応じて、レイアウトが自然に変化しますか？

忘れないでください。余白は、最も活用されていないデザインツールです。適切なリズムと階層を備えたレイアウトなら、シンプルなコンテンツでさえ、洗練され、意図が伝わるものになります。