画面遷移の「その先」へ。Sketchの変数を操り、プロダクトに命を吹き込む方法
こんにちは。UI/UXデザインの最前線で、日々「使い心地」と「実装のリアリティ」の境界線を溶かしているエンジニアです。
皆さんは、プロトタイプを作る際、単なる「画面から画面へのジャンプ」に満足していませんか？
「ログイン済みの時だけこのボタンが出る」「入力した名前が次の画面で表示される」。これらを開発者にコードで説明する前に、Sketchだけで再現できたら……と思いませんか？
今回は、Sketchのネイティブプロトタイピング機能に隠された「変数（Variables）」と「条件分岐（Conditional Logic）」という、現場のプロが愛用する秘密兵器を伝授します。これを使えば、あなたのプロトタイプは「紙芝居」から、エンジニアが震えて驚く「動く仕様書」へと進化します。
—
1. なぜ「Sketchのネイティブ機能」にこだわるのか？
複雑なインタラクションを実現するツールは他にもあります。しかし、Sketchでこれを行う最大の利点は「デザインデータそのものを壊さないこと」です。
- コンポーネントとの親和性: Sketchのシンボル（コンポーネント）構造をそのまま活用できる。
- 軽量性: 外部ツールにデータを書き出す必要がないため、修正が即座に反映される。
- 開発者への共感: 「ここから先は変数の値によって振る舞いが変わる」というロジックを視覚的に伝えられる。
—
2. 準備：まずはここから始めよう
まずは環境のセットアップです。特別なプラグインは不要。Sketchの最新版さえあればすべて可能です。
1. 右パネルの「Prototype」タブを開く:
これが魔法の入り口です。
2. 「Variables」パネルの確認:
右サイドバーの「Variables」アイコンをクリックして、変数を定義できる場所があることを確認しましょう。
—
3. HelloWorld的・実践：入力内容を「記憶」させる
まずは「入力したユーザー名を変数に格納し、次の画面で表示する」という基本をやってみましょう。
ステップ1：変数の作成
1. 右側の「Variables」セクションの「+」ボタンを押します。
2. 名前を `userName`、タイプを `String` に設定します。初期値は空っぽでOKです。
ステップ2：入力アクションの紐付け
1. テキストフィールド（Input）を選択します。
2. Prototypeモードで「Interaction」を追加。
3. Triggerを `On Text Change` に設定。
4. Actionに 「Set Variable」 を選択します。
5. `userName` = `Target Layer` (入力フィールド内のテキスト) と指定します。
ステップ3：表示側の設定
1. 次の画面に移動し、名前を表示したいラベルを選択します。
2. Textプロパティで、右側の丸いアイコンをクリックし、`userName` 変数を選択します。
これだけで、プレビュー上では入力した文字が次の画面に引き継がれます。 開発者に「ここのデータ連携、こういう仕様でお願いします」と伝える際、これ以上の説得力はありません。
—
4. 条件分岐：インタラクションの「知能」を高める
次に、「ログインボタンを押した時、入力がない場合はエラーを出す」という条件分岐を実装します。
1. ボタンを選択し、`On Click` アクションを追加。
2. 「Conditional Logic」 を選択します。
3. 以下のようなロジックを組みます：
// 擬似コード的な思考回路
IF (userName == “”) {
// 空欄の場合：アラートを出す、またはエラーメッセージを表示
Show Layer “Error-Message”
} ELSE {
// 入力がある場合：画面遷移
Go to Screen “Dashboard”
}
SketchのUI上で、`If` の条件に `userName` を選び、演算子で「is empty」などを選択するだけです。エンジニアが普段頭の中で行っている条件判定を、そのままデザインに落とし込めます。
—
5. 最後に：なぜこれが「現場」で最強なのか
多くのデザイナーが「細かい動きはエンジニアがやってくれるから」とプロトタイプを疎かにしがちです。しかし、「仕様の曖昧さ」はバグの温床です。
「変数が空の時はどうする？」「通信エラーが起きたら？」といったエッジケースをプロトタイプ段階で可視化しておくことで、開発チームとのコミュニケーションコストは劇的に下がります。
「毎日の作業を楽にする」とは、単にデザインを早くすることではありません。「後戻り」を極限まで減らすことです。
ぜひ今日、小さな変数一つから試してみてください。あなたのデザインが「ただの絵」から「意思を持ったプロダクト」に変わる瞬間を、ぜひ体験してほしいと思います。
—
次回のヒント: 次回は、この変数を活用して「ダークモード切り替え」や「複雑なカート計算ロジック」を構築する方法を深掘りします。お楽しみに！