こんにちは！UI/UXエンジニアの先輩として、今日は君と少し深い話をしようか。
デザインツールを触っていて、こんな絶望を味わったことはないかい？
「親コンポーネントのサイズを変えた途端、中のテキストがぶっ壊れた」「ネスト（入れ子）を深くしすぎて、どこを直せばいいのか分からない…」
……うん、痛いほど分かるよ。初心者から一歩抜け出して、本格的なデザインシステムを作り始めたエンジニアやデザイナーが、必ずと言っていいほど最初にぶつかる壁がこの「ネストされたコンポーネントのサイズ崩れ」なんだ。
今回は、Mac専用の伝説的デザインツール「Sketch」が誇る最強の機能、Smart Layout（スマートレイアウト）を極限まで使いこなし、複雑なUIでも絶対に破綻しない「厳格なルール設計」の秘伝を伝授するよ。これをマスターすれば、毎日のレイアウト修正作業から解放されて、感動的なほどスムーズにプロトタイピングが進むようになるはずだ。
肩の力を抜いて、僕と一緒に一つずつ紐解いていこうか。
—
1. Sketchとは何か？（そして、なぜ今「Smart Layout」なのか）
Sketchは、WebやアプリのUIデザインにおいて「コンポーネント指向（部品化）」という概念を世界で最初に定着させた、いわばモダンデザインツールのパイオニアだ。ReactやVue.jsといったモダンフロントエンドの思想と完全にシンクロしており、「デザインをコードのように構造化する」ことができる。
そのSketchの真骨頂が、Smart Layoutだ。
要素の追加・削除・テキストの長短に合わせて、コンポーネント自身が自動的にパディングや間隔を計算して伸縮してくれるこの機能は、まるでCSSのFlexboxやAuto Layoutをビジュアル操作しているかのような快適さをもたらしてくれる。
しかし、このSmart Layout、ネスト（入れ子構造）が深くなると途端に機嫌を損ねるという厄介な一面を持っている。「親が子を支配し、子が孫をどう押し出すか」のルール（メンタルモデル）を正しく理解していないと、意図しない挙動のオンパレードになってしまうんだ。
—
2. 最初のセットアップ：失敗しない「レイアウトの土台作り」
まずは、Sketchの環境と、これから作るコンポーネントの基礎を整えよう。難しく考えなくていい、一緒に基本の「Helloworld」ならぬ、「Hello Smart Layout」を作ってみよう。
ステップ1：環境の確認
最新のSketchがインストールされていることを確認したら、新規ドキュメントを開き、アートボード（Artboard）を一つ配置しよう（ショートカット: `A`）。
ステップ2：最小単位のコンポーネントを作る（アトム）
まずは、ボタンのような一番小さな要素（アトム）を作る。
1. テキストツール（`T`）で「Button」と入力。
2. そのテキストを選択した状態で、`Cmd + Option + K` を押してシンボル（Symbol）に変換する（名前は `Atom/Button` としよう）。
3. インスペクター（右側のパネル）に注目してほしい。ここでSmart Layoutの設定を行う。
- 今回は横方向に広がるボタンを作りたいので、レイアウト方向を 「Horizontal (Left to Right)」 に設定する。
> 💡 先輩からのアドバイス：
> 最初の一歩として、「パディング（余白）」を適切に持たせることが重要だ。テキストレイヤー単体ではなく、必ず背景の矩形（Rectangle）とグループ化し、シンボル化する前にレイアウトの方向を意識しておこう。
—
3. 「複雑なネスト」でなぜレイアウトが壊れるのか？
さて、ここからが本題だ。
先ほど作ったボタンを、カードのような「親コンポーネント（モルック・組織）」の中に配置してみよう。
- 親コンポーネント： `Molecule/Card`
- 子コンポーネント： `Atom/Button`（さっき作ったやつ）
ここで多くの人がやってしまう致命的なミスが、「親と子のSmart Layoutの方向が矛盾している」ことだ。
例えば、
- 親カード：縦方向（Top to Bottom）に要素が並ぶ設定
- 子ボタン：横方向（Left to Right）に文字が伸びる設定
この状態で、親カードの中にあるテキストの長さを変えたり、ボタンを2つ並べたりすると……見事にレイアウトが崩壊する。親は「縦に縮めよう」とし、子は「横に広がろう」とするため、計算の糸がこんがらがってしまうんだ。
—
4. 事故を防ぐ！厳格なルール設計の3大原則
複雑なネスト構造を持つUIでサイズ可変エラーを防ぐには、以下の3つのルールをチーム全体で厳格に共有する必要がある。
原則1：レイアウトの「流れる方向」を一方向に統一する（一筆書きの法則）
データの流れ（Data Flow）と同じように、レイアウトの流れる方向も上から下、あるいは左から右へと一貫させよう。
- 外側（親）から内側（子）へプレッシャーがかかる構造にする。
- 親が「縦並び」なら、その中の子要素も縦方向の伸縮ルールに従わせるか、あるいは固定サイズ（Fixed Size）にする。中途半端な「中央揃えの自動伸縮」をネストの深部で使うのは禁物だ。
原則2：ピン留め（Pinning）と固定サイズの使い分け
Sketchでは、リサイズ時の挙動を「ピン（Pin to corner）」や「固定サイズ（Fix width/height）」で制御できる。
- ネストされた孫コンポーネントの幅や高さを曖昧にしてはいけない。
- 「アイコンは固定サイズ（例: 24x24px）、テキストは可変」というように、何を可変にして、何を固定するのかの境界線を明確にコードのように定義する。
原則3：パディングは「親」ではなく「子」の内部に持たせる
これが一番やりがちなミスだ。親コンポーネントのボックスに直接パディングを持たせ、その中に子シンボルを放り込むと、子側のSmart Layoutと干渉して予測不能な余白が生まれる。
- ルール： すべてのコンポーネントは、自身の境界線（Bounding Box）の内部に自己完結したパディングを持つこと。親は「並べるだけ」、子は「自身のサイズを主張するだけ」と役割を完全に分離する。
—
5. 精度高い動作確認（僕らの「HelloWorld」）
理論だけでは腹落ちしないよね。実際に、崩れないカードコンポーネントを作って動作確認をしてみよう。
1. 「カード（親）」の作成
1. 長方形（Rectangle）で幅 `320px`、高さは自由なカードのベースを作る。
2. これを `Molecule/Card` というシンボルにする。
3. インスペクターのSmart Layoutで 「Vertical (Top to Bottom)」 を選択する。
2. 要素のネスト
1. カードの中に、以下の要素を縦に並べる。
- タイトルテキスト（Atom）
- 説明文テキスト（Atom）
- 先ほど作ったボタン（`Atom/Button`）
2. それぞれのシンボルが、親のSmart Layoutのルールに従って縦にきれいに並んでいることを確認する。
3. ストレステスト（動作確認）を行う
ここがエンジニアの腕の見せ所だ。あえて過酷なテスト（ストレステスト）を行ってみよう。
- タイトルの文字数を「あいうえお」から「これは非常に長いタイトルテキストのサンプルです。改行されても崩れないかテストします」に変更してみる。
- 結果の確認： タイトルが改行され、それに伴って説明文とボタンが綺麗に押し下がり、カード全体の高さが自動的に拡張されたかい？
- もしここでボタンがテキストに重なったり、あらぬ方向に飛び出したりしたら、どこかのレイアウト方向（Horizontal/Vertical）が間違っている証拠だ。インスペクターに戻って設定を見直そう。
—
おわりに：毎日の作業が劇的に楽になる未来へ
お疲れ様！ここまでついてきてくれてありがとう。
SketchのSmart Layoutは、ただの「便利な整列機能」ではない。それは、君が作るUIの「堅牢なアーキテクチャ（設計図）」そのものなんだ。
最初は「制約が多くてめんどくさいな」と感じるかもしれない。けれど、今回紹介した3つの原則――「方向の統一」「固定と可変の明確化」「パディングの自己完結」――を意識してコンポーネントを組むようになると、デザインの修正スピードが文字通り10倍になる。
デザイナーがどれだけテキストを書き換えても、プロダクトマネージャーが無理な要望を追加してきても、君が組んだコンポーネントは微動だにせず、美しくレスポンシブに追従してくれる。その瞬間、デザインツールを触るのが最高に楽しくなるはずだ。
さあ、今日の午後から君のSketchを開いて、古いコンポーネントたちの構造を見直してみよう。
これをマスターした君は、もうただのデザイナーじゃない。「デザインシステムのアーキテクト」だ。自信を持って進んでいこう！