プロの現場において、デザインの「修正」ほどコストのかかる作業はありません。クライアントから「このボタン、もう少し文字を大きくして」「やっぱりこのセクション、間に要素を一つ足して」と言われた瞬間、レイアウトを手作業で整え直す……そんな不毛な時間は、今日で終わりにしましょう。
Adobe XDの「スタック」と「パディング」。これらは単なる便利機能ではなく、デザインを「生き物」に変えるためのエンジンです。これをマスターすれば、あなたの作るデザインは「一枚の絵」から、画面サイズに合わせて呼吸する「システム」へと進化します。
—
1. なぜ「スタック」と「パディング」が最強なのか？
従来のUIデザインは、要素を配置して、座標を固定して……という「静的」な作業でした。しかし、今のWebやアプリはレスポンシブが前提です。
- パディング（Padding）： コンテナ（枠）と中身（コンテンツ）の距離を自動管理します。文字数が増えても、背景の形が自動的に最適化されます。
- スタック（Stack）： 要素同士の「余白（ギャップ）」を維持したまま、整列させます。順番を入れ替えるだけで、余白の調整は自動で行われます。
これらを組み合わせることで、「中身に合わせて箱が伸び縮みする」という、エンジニアが実装するコードに近い論理的な構造をデザインデータに持ち込めるのです。
—
2. まずはここから！基礎セットアップ
特別な環境設定は不要ですが、XDで「モダンなレイアウト」を組むための思考のセットアップだけ済ませましょう。
1. グループ化（Cmd+G / Ctrl+G）が全ての鍵:
スタックやパディングは、必ず「グループ」または「コンポーネント」に対して適用します。バラバラのレイヤーのままでは機能しません。
2. 右パネルの「レイアウト」セクションを凝視する:
要素を選択した際、右パネルに現れる「スタック」と「パディング」のチェックボックス。ここがあなたの戦場です。
—
3. 【HelloWorld】ボタンで実践する自動伸縮
一番わかりやすい例として、「文字量が変わっても崩れないボタン」を作ってみましょう。
1. テキストを書く: 「Submit」と入力します。
2. 背景を作る: テキストの背後に長方形を描きます。
3. グループ化: テキストと長方形を選択し、グループ化します。
4. パディングをON: 右パネルの「パディング」にチェックを入れます。
- これで、テキストの周りに余白が定義されました。
5. 魔法を確認: テキストの中身を「送信する」に変更してみてください。……どうですか？背景の長方形が自動的に伸びたはずです。
これこそが、プロが使う「コンポーネント指向」の第一歩です。
—
4. スタックで「ブレイクポイント」の絶望を消し去る
次に、リストやカードのレイアウトです。要素を縦に並べたグループを選択し、右パネルの「スタック（垂直方向）」をONにしてください。
- 余白の管理: スタック内の要素を選択すると、要素間に「紫色のバー」が出現します。これをドラッグするだけで、全ての余白を一括調整できます。
- 順番の入れ替え: 要素をドラッグ＆ドロップで入れ替えるだけで、他の要素は自動的に「詰められます」。
現場で震えるほどのメリット:
画面幅を変えた時、スタックが適用されていれば、要素の配置変更や改行時の余白調整が驚くほど滑らかになります。ブレイクポイントごとの手動修正は、もう不要です。
—
5. 伝説のエンジニアからのアドバイス：運用ルール
この機能を使う際、一つだけ守ってほしい原則があります。
> 「座標で配置せず、フローで配置せよ」
初心者はつい「X軸: 120px」のように数値を打ち込みたがりますが、スタックとパディングの世界では、その数値は「余白」のみに存在すべきです。「中身が変われば、全体が最適化される」というロジックを信じてください。
プロの小技：レスポンシブの最適解
- スタックの入れ子（ネスト）: カードコンポーネントの中に、さらにスタックを入れる。こうすることで、複雑なUIも爆速で修正可能になります。
- レスポンシブサイズ変更: グループの「レスポンシブサイズ変更」を「自動」に設定しておけば、アートボードの幅を広げた瞬間に、内部のスタックがその空間を埋めるように動きます。
—
まとめ：あなたのデザインを「コード」に近づけよう
デザインツールは、単なるお絵描きソフトではありません。「画面の設計図」です。
スタックとパディングを使いこなすことは、「フロントエンドエンジニアが実装しやすい設計」をデザイン段階で構築することと同義です。あなたが作ったこの論理的な構造は、そのままCSSのFlexboxやGridの実装に直結します。
まずは今日、既存のUIを一つ、「スタック」で組み直してみてください。その瞬間に、あなたの作業効率は劇的に変わり、デザインの品質は数段上のステージへ到達するはずです。
さあ、ツールを開いて、自由自在に伸び縮みするレイアウトを体感してみましょう！