こんにちは！プロダクトデザイナーの先輩として、今日は君の毎日のデザイン作業を劇的に変える魔法のようなテクニックを伝授するよ。
デザインシステムを構築していると、避けて通れないのが「データグリッド」や「複雑なテーブル」の設計だよね。ダッシュボードの数値一覧や、ユーザー管理画面。あの細かくて情報量の多い表を作るたびに、行や列の幅を手動で調整し、数値を書き換えるたびにレイアウトが崩れて絶望した経験はないかい？
「デザイナーの仕事はピクセルを並べることじゃない、構造をデザインすることだ」——そう分かっていても、テーブルのメンテナンスに時間を奪われては本末転倒だ。
今回は、Sketchが誇る最強の機能の一つ「Smart Distribute（スマート・ディストリビュート）」を極限まで応用し、テキストが伸び縮みしてもピタリと追従する、完全自動化されたデータグリッドの構築術を徹底解説するよ。これをマスターすれば、君のワークフローは音を立てて進化するはずだ。心してついておいで！
—
1. なぜテーブル設計は地獄と化すのか？（課題の根源）
まずは、敵を知ることから始めよう。なぜ通常のテーブル作成はあんなにも苦行なのだろうか？
- マージンの個別調整の絶望: 列を一つ追加したり、カラムの幅を広げたりすると、それに連動してすべてのセルを一つずつ選択し、位置を調整し直すハメになる。
- テキストの可変性への無力: 「1,000円」だったデータが「12,500,000円」に変わった途端、セルからはみ出したり、隣の要素と重なったりする。
- コンポーネントの硬直性: シンボル（Symbol）化しても、テキストの長さに応じて全体のグリッドが柔軟に変形してくれない。
多くの初心者は「テーブルは手動で並べるもの」と誤解している。だが、Sketchのレイアウトエンジン（Smart DistributeとResizing Constraints）の本質を理解すれば、テーブルは「生き物」のように自律して動くようになるんだ。
—
2. 【基礎】Smart Distributeの正体と、HelloWorld的動作確認
まずは、Smart Distributeの基本のおさらいと、今日最初の一歩を踏み出そう。「Hello World」を書くように、まずは最小限の要素でその挙動を体に叩き込むよ。
Smart Distributeとは何か？
複数のオブジェクトを選択したときに現れる「ピンク色のハンドル」を見たことがあるかい？あれこそがSmart Distributeの本体だ。要素間の「間隔（Spacing）」を均一に保ったまま、グループ全体のサイズや順序を直感的に操ることができる。
動作確認のステップ：
1. 3つの四角形を作る: アートボード上に適当な矩形（Rectangle）を3つ、横一列に並べてみよう。間隔はバラバラで構わない。
2. すべてを選択する: 3つの矩形を同時に選択する。
3. ピンクのハンドルを探す: 選択範囲の間に、ピンク色の数値（間隔を示す数字）とハンドルが表示されるはずだ。
4. 間隔をコントロールする: そのピンクの数値を直接クリックして「20」と入力してみよう。一瞬で、3つの四角形の間隔がピタリと20pxに揃うはずだ。
5. 順番を入れ替える: オブジェクトの中央にあるハンドルをドラッグして、一番左の要素を一番右に持っていってみてほしい。他の要素が自動的に押し出され、美しいアニメーションのように順番が入れ替わる。
これがSmart Distributeの基本だ。これを「行」と「列」の概念に応用していくのが今回のキモだよ。
—
3. 実践：テキスト変更に完全追従する「セル」の構築手順
ここからが本番だ。データグリッドの最小単位である「セル（Cell）」を作り、テキストが長くなろうともレイアウトが崩れない仕組みを作ろう。
ステップ1: セル用シンボルの作成
1. 背景とテキストの配置:
- 高さ`40px`、幅`120px`の矩形（セル背景）を作る。
- その上にテキストレイヤー（例: 「User ID」）を配置し、垂直・水平方向の中央に配置する。
2. Resizing（リサイズ制約）の設定:
- 背景の矩形を選択し、インスペクターパネルのResizingで 「Fix height（高さ固定）」 にチェックを入れ、ピン留め（Pins）は上下左右すべてを有効にする（親のサイズに合わせて伸縮するようにする）。
- テキストレイヤーを選択し、Resizingを 「Left（左固定）」 または中央揃えにし、テキスト自体の幅が可変になるように設定する。
3. シンボル化:
- 背景とテキストを同時に選択し、`Create Symbol` で `Cell / Default` という名前でシンボル化する。
ステップ2: カラム（列）の垂直方向の自動整列
1. 作成したセル・シンボルを縦に4つ並べる（ヘッダー1つ ＋ データ行3つ）。
2. これら4つのセルをすべて選択する。
3. Smart Distribute が発動し、垂直方向のピンクのハンドルが表示される。
4. 間隔を「0px」に設定する。これで、セル同士が隙間なく美しく結合された「カラム（列）」が完成する。
5. このカラム全体をグループ化し、`Column / User` と名前をつけよう。
—
4. 応用：複雑なデータグリッドとテーブルの自動生成術
さあ、ここからが今日一番ワクワクするパートだ。単なる「列の集まり」だったものを、縦横無尽に伸縮する「データグリッド」へと昇華させよう。
複数のカラムをSmart Distributeで束ねる
1. 先ほど作った `Column / User`（ユーザー列）をコピーして、`Column / Email`、`Column / Role`、`Column / Status` と、異なるデータ用のカラムを4列横に並べる。
2. この4つのカラム（グループ）をすべて選択する。
3. 再び Smart Distribute が横方向に出現する。カラム間の間隔を「1px」（グリッドの境界線用）などに設定する。
4. これで、横方向のグリッド構造が完璧に構築された！
テキストの長文化（オーバーフロー）への対応テスト
ここで、魔法の瞬間を体験しよう。
- `Column / Email` の中の1つのセルのテキストを、「alexander.the.great.1995@super-enterprise-domain.co.jp」という異常に長いメールアドレスに書き換えてみる。
- 通常のデザインツールならレイアウトが盛大に崩れるところだが……。
- Sketchのスマートな制約とSmart Distributeの組み合わせにより、そのセルが含まれるカラム全体の幅が自動的にグッと広がり、隣接するカラムが美しく押し出されるはずだ！
> 💡 先輩からのアドバイス:
> テーブル全体のコンポーネントを作る際は、各カラムの「最小幅（Min-width）」を意識することが大切だ。Sketchのオーバーライド機能を使ってテキストを書き換える際、あまりに長い文字列を入れるとレイアウトが破綻する原因になるため、ダミーデータの文字数はリアルなユースケースに合わせるのがプロの技だよ。
—
5. まとめ：毎日の作業を劇的に楽にするために
お疲れ様でした！ ここまでついてきてくれた君は、もうただの「パーツを並べるデザイナー」ではない。システムの振る舞いまでを設計する「UIアーキテクト」の領域に足を踏み入れている。
今日マスターした内容を振り返ってみよう：
1. Smart Distribute でオブジェクト間の距離と順序をシステム化する。
2. Resizing Constraints を適切に設定し、要素の伸縮ルールを定義する。
3. セル ➔ カラム ➔ グリッド という階層構造を意識してコンポーネントを組み立てる。
これを一度マスターしてデザインシステムの一部に組み込んでしまえば、後から「あ、ここに新しい列を追加して」「この数値を長めのテキストに変えて」と言われても、冷や汗をかく必要はもう一切ない。コーヒーを飲みながら、数秒でレイアウトを更新できるようになるはずだ。
デザインの面倒なルーティンワークはツールに任せて、君は「ユーザーにとって本当に価値のある体験とは何か」を考える時間に集中しよう。
それでは、次回のプロダクトデザイン・ラボでまた会おう！ Happy Designing!