Smart Layoutの「その先」へ：Sketchで崩れないUIを作るための静的思考からの脱却
デザインシステムを構築する際、多くのデザイナーが「シンボルを作って終わり」にしてしまう。しかし、真のプロフェッショナルは、「シンボルの外側（レイアウトエンジン）がどう反応するか」を設計の段階でシミュレートしている。
今回は、SketchのSmart Layoutを極限まで使い倒し、多言語対応や可変長データにも微動だにしない「堅牢なコンポーネント」を設計するための極意を伝授する。
—
1. Smart Layoutの真髄：ネスト構造による「動的パディング」の制御
多くの初心者が陥る罠は、ボタンのパディングを固定値で定義し、テキストが長くなった瞬間にレイアウトが崩壊することだ。解決策はただ一つ、「レイヤーの包含関係とリサイズルールの徹底」にある。
プロが実践する「入れ子」の設計術
1. Atomレベル: テキストレイヤー単体でシンボル化するのではなく、バックグラウンドとテキストをグループ化し、親シンボルとして定義する。
2. Stacking: 親シンボルに `Smart Layout (Horizontal)` を設定し、左右のパディングを「固定（Fixed）」、中心のテキスト幅を「可変（Auto）」にする。
3. Nested Overrides: アイコンを追加する際は、アイコン単体ではなく「アイコン用シンボル」を内包させる。これにより、アイコンのON/OFFがパディングを破壊せずに完了する。
極意: 親のシンボル内で `Resize object on resize` を無効にし、すべてをStackで制御せよ。手動での調整は、未来の自分に対する負債でしかない。
—
2. 開発スピードを加速させる「神速」ショートカットとプラグイン
テックリードとして、ツール操作に迷う時間は最小化すべきだ。
必須のショートカット
- `Cmd + Shift + L`: 選択したレイヤーのSmart Layout設定を即座にトグル。
- `Ctrl + Alt + Cmd + V`: 属性のみをコピー（スタイルの一括適用に必須）。
- `Option + ドラッグ`: レイヤーの再配置時、Stackの挙動を確認しながらマージンを調整する際、パディングの数値を意識的に強制する。
導入すべき神プラグイン
- [Anima](https://www.animaapp.com/): デザインからコードへの変換精度が最も高い。
- [Sketch Runner](https://sketchrunner.com/): これがないとSketchはただの重いソフトだ。`Cmd + ‘` で全機能を呼び出せ。
- [Stark](https://getstark.co/): アクセシビリティチェックを自動化する。コントラスト比の崩壊を未然に防ぐのはデザインの義務だ。
—
3. チーム開発における「共通言語」としての設定ファイル
チームでデザインシステムを運用する場合、Sketchの機能だけでは不十分だ。デザインの仕様をコード側へ正しく伝えるための「設計指針（JSON）」を共有せよ。
以下は、コンポーネントのプロパティを定義する際の実践的なJSON構造例である。
{
“component_name”: “PrimaryButton”,
“layout_engine”: “SmartLayout”,
“properties”: {
“padding”: {
“horizontal”: 24, // 多言語対応を見据えた最小幅
“vertical”: 12
},
“behavior”: {
“text_wrap”: “Auto”, // テキストの折り返しを許可
“min_width”: 80 // 誤タップ防止のための最小クリック領域
},
“tokens”: {
“bg_color”: “brand-primary”,
“text_style”: “button-label-bold”
}
}
}
運用ルール:
- Naming Convention: レイヤー名は「`/`」で階層化し、Sketchのメニュー構造を整理する。
- Documentation: JSONをGit管理下に置き、デザイン仕様書（README）から参照させる。これにより、エンジニアは実装時に「パディング値はいくつだったか？」とデザイナーに聞く必要がなくなる。
—
4. 現場で震えるほど役立つ「破壊しない」設計テクニック
最後に、複雑なカードUIを作る際の「裏技」を一つ。
「スペーサー・コンポーネント」の活用:
複雑なカード内で、要素間の余白を制御するために「透明な四角形」をスペーサーとしてシンボル化せよ。Smart Layoutと組み合わせることで、「要素の有無によって余白が動的に変化する」魔法のようなUIが実現する。
- ステップ:
1. 10pxの透明なシンボルを作成。
2. カード内の要素間に配置。
3. アイコンやバッジの表示/非表示を切り替えると、スペーサーが自動的に詰まり、パディングが完璧に維持される。
—
結び：ツールは「思考の速度」に追いつけ
デザインシステムとは、単なるビジュアルの集積ではない。それは「チーム全員が同じメンタルモデルでUIを構築するための共通言語」だ。
SketchのSmart Layoutを単なるレイアウト補助ツールと捉えるな。これは、あなたのデザインを「コードに近い論理構造」へと昇華させるための強力な抽象化レイヤーである。
さあ、ツールに振り回されるのは今日で終わりにしよう。設計のロジックを磨き、エンジニアと魂で対話できるプロダクトデザイナーを目指せ。