「もう余白調整で消耗しない」——SketchのSmart LayoutでUI構築を自動化せよ
こんにちは。プロダクトデザイナーの皆さん、日々のUI制作でこんな悩みを抱えていませんか？
- 「ボタンのラベルを少し変えただけで、背景の余白を全部手動で直している」
- 「カードの中のテキスト量が増えて、下の要素と重なってしまった」
- 「似たようなコンポーネントを何パターンも作ってしまい、管理が破綻している」
もし一つでも当てはまるなら、今日でその苦しみとはお別れです。Sketchにおける「Smart Layout」は、単なる便利機能ではありません。「デザインをプログラムのように振る舞わせる」ための、UIエンジニアリングの第一歩です。
これをマスターすれば、あなたの作業効率は劇的に向上し、何より「UIの整合性」という呪縛から解放されます。
—
1. Smart Layoutとは何か？（本質的な理解）
一言で言えば、「要素の親子関係に『ルール（制約）』を付与する機能」です。
従来のデザインツールは「絵を描く」感覚でしたが、Smart Layoutは「UIコンポーネントに物理法則を組み込む」感覚に近いです。テキストが伸びれば背景が自動で追従し、ボタンが消えれば隣の要素がスッと詰まる。この「自動追従」こそが、スケーラブルなデザインシステムを作る心臓部となります。
—
2. 実践：ボタンコンポーネントで体験する「HelloWorld」
理屈はさておき、まずは実際に動かしてみましょう。最も基本的な「ボタン」で、Smart Layoutの恩恵を体感します。
ステップ1：準備
1. テキストツールで「Submit」と入力します。
2. そのテキストを選択した状態で `A` キーを押し、背景となる長方形（Rectangle）を描画します。
3. テキストと長方形をグループ化（`Cmd + G`）します。
ステップ2：Smart Layoutのセットアップ
ここが最重要ポイントです。
1. グループを選択した状態で、インスペクター（右側のパネル）の「Layout」という項目に注目してください。
2. 今「None」になっているはずです。ここをクリックし、「Horizontal」を選択します。
3. その横に現れる矢印アイコンは、「左から右へ（← | →）」を選択しましょう。
ステップ3：動作確認（魔法の瞬間）
グループの中にあるテキストをダブルクリックし、中身を「Submit」から「Register now for free」に変えてみてください。
どうでしょう？
テキストの長さに合わせて、背景の長方形が自動的に伸縮しましたよね。これこそがSmart Layoutの力です。もう手動で長方形のサイズを調整する必要はありません。
—
3. なぜ「右左の矢印」が重要なのか？
Smart Layoutの矢印設定は、「基準点（Anchor）」を決める作業です。
- ← | → （左右両端）: テキストが伸びると左右に背景が広がります。中央揃えのボタンに最適。
- → （右へ）: 左側を固定して右に伸びます。ラベルの横にアイコンを置く場合などに有効。
- ← （左へ）: 右側を固定して左に伸びます。
この設定を間違えると、テキストを打ち替えた瞬間にボタンが画面外へ飛んでいくような挙動になります。「どこを起点に伸縮させるか」を考えることは、Web開発におけるFlexboxの設計思想そのものです。
—
4. プロの現場で使うための「3つの極意」
単に使えるだけでなく、現場で「運用に耐えうる」設計にするためのヒントを伝授します。
1. Padding（余白）の固定値を守る
Smart Layoutを使う際は、必ず「Padding」機能を併用してください。テキストと背景の隙間を数値で指定することで、どんなに文字が増えても「余白の美学」が崩れません。
2. ネスト（入れ子）を恐れない
カードの中にボタンを入れ、さらにそのカードをリストにする。Smart Layoutはネスト可能です。親のSmart Layoutの中に子のSmart Layoutを配置することで、複雑なUIもひとつのコンポーネントとして制御できます。
3. シンボル化（Symbol）を前提にする
Smart Layoutの設定が終わったら、必ず「Create Symbol」しましょう。これで、アプリ全体でこの「生きているボタン」を再利用できるようになります。
—
最後に：デザインは「エンジニアリング」である
最初は慣れないかもしれませんが、Smart Layoutを使いこなすと、デザイン作業は「描画」から「組み立て」へと進化します。
「ここを直せば、あそこも自動で直る」。この予測可能な挙動こそが、エンジニアとの円滑な連携を生み、修正コストを極限まで下げます。
今日からあなたのSketchは、単なる作図ソフトではなく、「UIのロジックを管理するIDE」になります。ぜひ、今のプロジェクトで試してみてください。一度この快感を知ってしまえば、もう昔の「手動調整」には戻れなくなるはずです。
デザインの旅を、もっと効率的に。もっとクリエイティブに。応援しています！