こんにちは！プロダクトデザイナーの先輩として、今日は君にとてもエキサイティングな話をしよう。
UIデザインを作っていて、こんな絶望を味わったことはないかい？
- 「英語から日本語（またはその逆）に翻訳した途端、テキストがボタンからはみ出した」
- 「ユーザー名が長すぎて、カードのレイアウトが見事にグチャグチャに崩れた」
- 「文字数を変えるたびに、背景の四角形やパディングを手動で調整し直している……」
わかるよ、そのイライラ。毎日のようにローカライズ対応やコンテンツの流し込みに追われるプロにとって、これは時間の無駄でしかない。デザインシステムを構築する上で、テキストの増減でレイアウトが壊れるコンポーネントは、いわば「バグを内包したコード」と同じなんだ。
でも、安心してほしい。今日ここで解説するSketchの「Smart Layout（スマートレイアウト）」の極意をマスターすれば、そんなフラストレーションとは今日でおさらばだ。マルチリンガル対応も、爆弾のような長文入力も、すべてコンポーネント側が勝手に美しく受け止めてくれる。
今日は、デザイナーとエンジニアの双方から「神」と崇められるような、堅牢で美しいボタンとカードの設計術を一緒に紐解いていこう。これをマスターすれば、毎日の作業が劇的に楽になるだけでなく、デザインの品質そのものが一段階上に引き上げられるはずだ。
—
1. そもそも「Smart Layout」とは何か？（基本のキ）
SketchのSmart Layoutは、一言で言えば「コンポーネント内のレイアウト方向とパディングを自動制御するルールエンジン」だ。
CSSの Flexbox や Auto Layout（Figma）に近い概念だと言えば、エンジニア出身の君ならピンとくるだろう。親レイヤーに対して「子要素を横並びに配置し、常に左から詰める」「縦並びにして、テキストが折り返したら下に押し出す」といった制約（Constraints）を超えた動的な振る舞いを定義できる。
最重要の基礎セットアップ
まず、SketchでSmart Layoutを使うための大前提を確認しよう。
1. アートボードではなく「グループ」または「シンボル（Symbol）」を使う
Smart Layoutの真価を発揮するのはシンボルだ。
2. スタック（Stack）の概念を理解する
複数のレイヤーを選択し、`Layer > Stack`（またはショートカット）を適用すると、レイヤー間に「見えないマジックテープ」が貼られる。これがSmart Layoutの土台になる。
—
2. 【実践Step 1】絶対に崩れない「神ボタン」の設計術
まずは基本となる「ボタン（Button）」から作ってみよう。
理想的なボタンとは、「中にどんな文字が入ろうとも、左右のパディングが常に一定であること」だ。
ステップ・バイ・ステップ手順
1. テキストレイヤーの準備
- テキストツールで「Button」と入力する。
- 超重要ポイント： テキストのプロパティで、サイズ変更の挙動を 「Auto-width（自動幅）」 に設定する。固定幅にしてしまうと、Smart Layoutが機能しなくなるので注意だ。
2. 背景シェイプの作成
- テキストの背面に長方形（Rectangle）を配置する。これがボタンの背景になる。
3. シンボル化とSmart Layoutの適用
- テキストと背景シェイプを同時に選択し、`Create Symbol` でシンボル化する（例：`Component/Button/Primary`）。
- シンボル編集画面（Master）に移動する。
- 右側のインスペクタパネルに注目してほしい。「Smart Layout」という項目があるはずだ。
- ここで 「Horizontal（左右方向）」 のレイアウトを選択し、矢印を 「中央揃え（Center）」 か 「左から右（Left to Right）」 に設定する。
4. パディングの固定（これぞプロの技）
- 背景シェイプとテキストの間隔をピクセルパーフェクトに保つために、Sketchの「Padding」コントロール（インスペクタのSmart Layoutエリアにある数値入力欄）を使用する。
- 上下左右のパディング（例：Top: 12, Bottom: 12, Left: 24, Right: 24）を明示的に入力する。
これで「HelloWorld」的な最初のテストはクリアだ。
シンボルインスタンスのテキストを「Click Here」から「今すぐ無料でアカウントを作成する（長文）」に変えてみてほしい。テキストの長さに合わせて背景が完璧に伸縮するはずだ。どうだい？ 感動的だろう？
—
3. 【実践Step 2】ネスト構造の極意：複雑なカードUIの構築
ボタンが作れたら、次は応用編だ。アイコン、タイトル、本文、そして先ほど作った「神ボタン」が同居する「複雑なカードコンポーネント」を設計しよう。
ここで必要になるのが、「Smart Layoutのネスト（入れ子構造）」だ。
堅牢なカードを組み立てるステップ
[Card Container (Vertical Stack)]
├── [Header Area (Horizontal Stack)]
│ ├── [Avatar Icon]
│ └── [User Meta (Vertical Stack)]
│ ├── [User Name (Text)]
│ └── [Timestamp (Text)]
├── [Body Text (Text – Auto-height)]
└── [Action Area (Horizontal Stack)]
└── [Button (先ほど作ったシンボル)]
1. 最小パーツのスタック化
- ユーザー名とタイムスタンプを縦に並べ、スタック（Vertical Stack）にする。
- アバター画像と、その縦並びスタックを横に並べ、さらに親スタック（Horizontal Stack）にする。これがカードの「ヘッダー部分」だ。
2. 本文エリアの設計
- 本文のテキストレイヤーは、幅を固定し、高さを可変にする 「Auto-height」 に設定する。これができていないと、長文が折り返した時に下の要素と重なるという悲劇（テキスト折り返しエラー）が起きる。
3. カード全体の縦方向（Vertical）のSmart Layout化
- ヘッダー、本文、アクションエリア（ボタン）のすべてを縦方向のスタックとしてまとめる。
- カード全体のシンボルを作成し、Smart Layoutを 「Vertical（上下方向）」、矢印を 「上から下（Top to Bottom）」 に設定する。
なぜこれで「テキスト折り返しエラー」が完全に防げるのか？
SketchのSmart Layoutは、上から下、あるいは左から右へと、「レイアウトの物理的な押し出し」を計算してくれる。
本文の文字数がどれだけ増えても、Auto-heightによってテキストボックス自体が縦に伸び、その下にいる「神ボタン」を押し下げる。そしてカード全体の背景も、そのコンテンツ量に応じて自動的に高さを拡張する。
要素同士が絶対に重なり合わない、完璧なエコシステムがここで完成するんだ。
—
4. 現場で役立つ！プロのトラブルシューティングと裏技
最後に、現場でよくある「あれ、動かない？」を防ぐための実践的な知見をいくつかシェアしておこう。
- 「テキストが勝手に折り返されない」ときのチェックリスト
- テキストレイヤーが「Fixed」幅になっていないか？ → 必ず「Auto-width」または適切なバウンディングボックスの「Fixed」を確認。
- スタックの方向（Direction）が意図したものになっているか？
- オーバーライド（Override）の罠に気をつける
- シンボルインスタンス側でテキストを長文に変えた際、もしレイアウトが崩れたら、それはマスター側のコンポーネントで「スタックの制約（Constraints）」や「パディング値」の設定が漏れている証拠だ。常にマスター側（Master Symbol）に戻って修正する習慣をつけよう。
- マージン（間隔）の制御
- スタック内の要素間の余白（Spacing）は、インスペクタから一括で制御できる。デザインシステムのルール（8ptグリッドなど）に厳密に従うために、この数値をチームで統一しておくと、エンジニアへの引き継ぎが劇的にスムーズになる。
—
おわりに
今日学んだSmart Layoutのネスト構造とパディングの動的制御は、単なる「便利な機能」ではない。それは、「デザインの意図をコードのように論理的に構造化する」という、プロフェッショナルなアプローチそのものだ。
これをマスターした君なら、もう二度と「文字数オーバーによるレイアウト崩れ」におびえる必要はない。デザイナーとしての生産性は跳ね上がり、エンジニアからは「神のように美しいデータ構造だ」と絶賛されること請け合いだ。
さあ、今すぐSketchを開いて、君自身のコンポーネントをアップデートしてみよう。
毎日の作業が劇的に変わる瞬間を、ぜひ楽しんでくれ！