【実務・中級編】Adobe XDでレスポンシブデザイン！「スタック」と「パディング」の使いこなし術 – UI/UX・デザインツール活用バイブル

Adobe XD「スタック」と「パディング」で実現する、メンテ不能なデザインからの脱却

「またブレイクポイントごとにレイアウトをコピペして修正しているのか？」

もし君のチームでそんな不毛な作業が行われているなら、今日でその悪習を断ち切ろう。Adobe XDの「スタック（Stack）」と「パディング（Padding）」は、単なる便利な機能ではない。これらは「デザインをコードの論理構造に近づけるための変換器」だ。

本稿では、UI/UXエンジニアが現場で生き残るための、極限まで最適化されたプロトタイピング術を伝授する。

—

1. 「スタック」は Flexbox の影武者だ

スタックの本質は、コンポーネント内の要素を「垂直または水平の自動フロー」として定義することにある。これを使いこなすコツは、「スタックの中にスタックを入れ子にする」ことだ。

垂直スタック（リスト全体）: 内部に水平スタック（行）を配置する。
水平スタック（カード内のアイコンとテキスト）: これらを適切にネストすることで、CSSの `flex-direction: column/row` と `gap` の挙動を完璧に再現できる。

開発スピードを加速させる必須ショートカット

マウスでプロパティパネルをいじる時間は捨てろ。

グループ化してスタック化: `Cmd + G` (Mac) / `Ctrl + G` (Win) でグループ化し、即座にパネルの「スタック」にチェック。
スタックの方向反転: `Cmd + Shift + E` (Mac) で垂直/水平を瞬時に切り替え。これを知っているだけでプロトタイピングの速度は3倍になる。

—

2. 「パディング」で余白の言語化を強制せよ

デザインの崩れは、決まって「手動の余白調整」から生まれる。パディング機能は、要素のサイズが変わっても余白を固定値として保持するための最強の武器だ。

現場の鉄則：
ボタンやカードは「必ず」パディングを有効にすること。コンテンツの文字数が増減しても、レイアウトが崩れず「勝手に伸び縮みする」状態を作る。これができれば、実装時にエンジニアが「ここ、文字数が増えたらどうなりますか？」と聞く必要はなくなる。

—

3. チーム開発を壊さないための「設定共有化ルール」

個人の感性でデザインを作らせるな。デザインシステムとしての整合性を保つためのルールを定義せよ。

命名規則: `Atom / Molecule / Organism` の頭文字をレイヤー名に含める（例: `M_Card_Featured`）。
アセットの同期: XDの「ドキュメントアセット」を適切に管理し、カラーと文字スタイルは必ずライブラリ化する。
パディングの数値: 8pxベースのグリッドシステムを強制する。パディングの値を手打ちするな。デザインシステムで定義した「スペーシングトークン」のみを使わせる文化を作れ。

—

4. 開発者に渡す「設定ファイル」のベストプラクティス

デザインをコードに落とす際、XDのパディングやスタックの構造をどうJSONで管理するか。以下は、デザインシステムからCSS変数を生成するためのデータ構造案だ。

{
“spacing”: {
“xs”: 4,
“sm”: 8,
“md”: 16,
“lg”: 24
},
“layout”: {
“card_padding”: {
“top”: 16,
“right”: 16,
“bottom”: 16,
“left”: 16
},
“card_gap”: 8 // スタックのgapに相当する値
}
}

※このJSONをCI/CDパイプラインに組み込み、Style Dictionary等でSass/CSS変数へ自動変換するフローを構築するのが、真のテックリードの仕事だ。

—

5. 現場を救う「神プラグイン」3選

XDの標準機能だけでは足りない「痒いところ」を補う必須プラグインだ。

1. [Google Sheets Sync]: リアルなデータでプロトタイプを埋めろ。ダミーテキストでデザインを判断する時代は終わった。
2. [Super Formula]: 複雑なスタック構造の計算を自動化する。計算ミスによるズレを根絶せよ。
3. [Icons4Design]: アイコンのパス構造を統一する。SVGの書き出し時にレイヤーがバラバラになる悲劇を防ぐ。

—

最後に：UIは「絵」ではなく「システム」である

スタックとパディングを使いこなすことは、単なるツール習得ではない。「画面の振る舞いを設計する」というエンジニアリングの精神をデザインの現場に持ち込むことだ。

君たちが作るプロトタイプが、実装フェーズで「そのまま動く仕様書」になったとき、初めて君は本当のテックリードとして認められる。さあ、今すぐXDを開いて、そのスタックを整理し直せ。

現場からは以上だ。健闘を祈る。