arrange

単調で窮屈、または構成が弱く感じられるレイアウトや間隔を評価して改善し、ありきたりな配置を、意図的でリズムのある構成に仕上げます。

主な問題が空間構成にある場合に使用してください。優先順位が不明確、強調が競合している、セクションタイトルが目立ちすぎる、ラベルと値の重み付けに問題がある場合は、hierarchyを使用してください。

必須の準備

frontend-designを読み、そのコンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、重大な情報の不足についてのみ質問してください。

---

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

現在の空間デザインの弱点を分析します。

1. 間隔：

   • 間隔は一貫していますか、それとも場当たり的ですか？（ランダムなパディング／マージンの値）
   • どこも同じ間隔になっていませんか？（どこも同じパディングではリズムが生まれません）
   • 関連する要素は近くにまとめられ、グループ間には十分な空間がありますか？
   • グループ内よりもグループの周囲に広い空間がありますか？そうでなければ、まとまりが曖昧に感じられる可能性があります。

2. 視覚的な階層：

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

3. グリッドと構造：

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

4. リズムと変化：

   • レイアウトに視覚的なリズムがありますか？（狭い間隔と広い間隔の交互の配置）
   • すべてのセクションが同じ構成になっていませんか？（単調な繰り返し）
   • 意図的に驚きや強調を生み出す箇所がありますか？

5. 密度：

   • レイアウトが窮屈すぎませんか？（余裕が足りない）
   • レイアウトが疎すぎませんか？（目的のない余白が多すぎる）
   • 密度はコンテンツの種類に合っていますか？（データ密度の高いUIでは間隔を狭め、マーケティングページではより広い余白が必要です）
   • 余白を足りない箇所にその都度追加するよりも、最初に余白を多めに取り、一部を削るほうがすっきりした結果になりますか？

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

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

グリッド、リズム、コンテナクエリの詳細なガイダンスについては、frontend-designスキルの空間デザインのリファレンスを参照してください。 レイアウトと階層の問題が重なる場合は、グレースケールでのテスト、アクションの優先順位付け、ラベルと値の扱いについて、階層チェックリストを参照してください。 隣接する領域を分ける方法として、カード、境界線、影、間隔、背景色の変更のどれが適切かを判断する際は、サーフェスの分離を参照してください。

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

• 間隔のシステム：一貫したスケールを使用します。フレームワークに組み込まれたスケール（例：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）を構築します。シャドウは控えめにします。
• 高さを装飾としてではなく、階層を補強するために使用します。

視覚的な調整

• アイコンが幾何学的には中央揃えでも、見た目が中心からずれている場合は、位置を微調整します。ただし、実際にずれて見えると確信できる場合に限ります。推測で調整しないでください。

絶対にしないこと：

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

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

• ぼかしテスト：視界がぼやけていても、主要な要素、二次的な要素、グループ分けを見分けられますか？
• リズム：詰まった間隔とゆったりした間隔に、心地よいリズムがありますか？
• 階層：最も重要なコンテンツが2秒以内にわかりますか？
• 余白：レイアウトに窮屈さや無駄がなく、心地よく感じられますか？
• 一貫性：間隔のシステムが一貫して適用されていますか？
• レスポンシブ性：画面サイズに合わせて、レイアウトが自然に適応しますか？

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