デザインの現場において、「作業」と「創造」を混同してはいけません。
デザイナーが一生懸命「佐藤太郎」「090-xxxx-xxxx」といったダミーテキストを手打ちしている時間。あれは、あなたの才能をドブに捨てているのと同じです。
今日は、Sketchの「Data機能」を使い倒し、静的なデザインを「生きたデータ」で駆動させる方法を伝授します。これをマスターすれば、あなたの作業効率は文字通り桁が変わります。
—
1. なぜ「Data機能」がプロトタイピングの神なのか
多くの初心者は、UIを作った後に手作業でテキストを書き換えます。しかし、本物のUIはデータによって表情を変えます。
SketchのData機能は、「構造（レイアウト）」と「内容（データ）」を分離するための強力なフックです。これを使えば、開発者が実装するAPIのレスポンスを模したJSONを読み込ませるだけで、一瞬で数パターンのバリエーションを生成できます。
2. まずはここから：SketchのData機能、基本のセットアップ
特別なプラグインは不要です。Sketchには標準で「Data」パネルが備わっています。
1. 左上のメニューから： `File` > `Data` > `Add Data…` を選択。
2. フォルダを選択： 任意のフォルダを選びます。その中に「テキストファイル（.txt）」または「画像ファイル（.jpg/.png）」を入れておくだけです。
- テキストファイルの中身は、1行ごとにデータを記述してください。
- 例：`names.txt` というファイルに、一行ずつ名前を書いて保存。
これで、レイヤーを選択して `Data` メニューから選ぶだけで、魔法のようにデータが流し込まれます。
3. 【核心】JSON連携で「リアルなモックアップ」を作る
ここからがプロの領域です。テキストファイルを羅列するだけでは不十分。APIレスポンスに近い「構造化データ」を扱いたいですよね。実は、Sketchはプラグインを介することで、複雑なJSONをデザインに流し込めます。
最も推奨するのは [Sketch Data Populator](https://github.com/preciousforever/sketch-data-populator) です。
セットアップ手順
1. インストール： `Sketch Runner` を使っているなら一瞬です。`Runner` で `Data Populator` を検索してインストール。
2. JSONファイルの準備： 以下のような構成の `users.json` を用意します。
{
“users”: [
{
“name”: “田中 太郎”,
“email”: “taro@example.com”,
“avatar”: “https://i.pravatar.cc/150?u=1”
},
{
“name”: “山田 花子”,
“email”: “hanako@example.com”,
“avatar”: “https://i.pravatar.cc/150?u=2”
}
]
}
動作確認（HelloWorld）
1. Sketch上でテキストレイヤーを作成し、レイヤー名を `{name}` と名付けます（ここが重要！JSONのキーと合わせます）。
2. 画像レイヤーを作成し、レイヤー名を `{avatar}` と名付けます。
3. プラグインを実行し、上記のJSONファイルを指定して「Populate」ボタンを押す。
一瞬で、シンボル化されたカードが、本物さながらのユーザー情報で埋め尽くされます。これこそが、開発者と共通言語で会話するための最短ルートです。
4. 現場で震えるほど役立つ「3つの極意」
ただ流し込むだけではプロとは言えません。以下の運用を徹底してください。
- レイヤー名は「変数」と心得る：
レイヤー名を `Rectangle 1` のままにするのは罪です。必ず `{userName}`, `{price}` のように、将来的なデータ構造を意識した命名を行いましょう。
- シンボルとの強力な連携：
シンボル内でこのデータ機能を使いましょう。シンボルを配置し、データを流し込む。このサイクルが確立されると、数十件のリスト画面作成がわずか3秒で完了します。
- 「異常系」のデータを含める：
JSONには、あえて「非常に長い名前」や「空のデータ」を含めてください。デザインが崩れないかを確認するまでが、プロの仕事です。
—
最後に：デザインは「システム」である
あなたがやっているのは絵を描くことではなく、「データが流し込まれたときに、どう振る舞うべきか」というロジックを設計することです。
今回紹介したData機能とJSON連携は、ただの時短ツールではありません。あなたのデザインを「壊れにくい、拡張性の高いシステム」へと昇華させるための鍵です。
さあ、今日から「手打ち」という非効率なルーチンを卒業しましょう。迷ったらまたここに戻ってきてください。いつでも最高のアドバイスを準備しています。