arrange

単調、窮屈、または構造が弱く感じられるレイアウトや余白を評価して改善し、ありきたりな配置を意図的でリズムのある構成へと変えます。

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

必須の準備

ユーザーは /arrange でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。そこにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。次に進む前に、そのプロトコルに従ってください。デザインコンテキストがまだない場合は、まず $setup を読み込む必要があります。

---

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

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

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）を構築します。シャドウは控えめにします。
• 高さを装飾としてではなく、階層を補強するために使用します。

光学的な調整

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

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

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

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

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

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