この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
デザイナーの たなか ゆきこ です。 デザインを行うときにかかせないのが、プロトタイピング。 2018年3月、sketch にとうとうプロトタイピングがやってきましたので、早速試してみたいと思います。
公式：https://sketchapp.com/ https://sketchapp.com/docs/prototyping/
Sketch の version を確認
プロトタイピングは、Sketch 49 のアップデートで使えますので、ご自分の Sketch バージョンを確認しましょう。
Sketch 上部メニューの【About & Registration...】を選ぶと確認できます。
プロトタイピングでは、以下ができるようになっています。
- オブジェクトを選択しての画面遷移指定
- ホットスポット（エリア）を作成からの遷移
- プロトタイプを開始するアートボードを指定
- プレビュー確認
他にも、以下2つの説明されています。
- Sketch Cloudでの共有
- モバイルアプリSketch Mirrorの同期
Sketch アートボード上の配置したオブジェクトを選択しての画面遷移先指定
オブジェクトを選択していない場合、【Link】アイコンは選択できません。
オブジェクトを選択すると、【Link】アイコンを選択できるようになります。 そのまま、遷移先のアートボードを選択します。
選択できたら、右のメニューに【Prototyping】の項目が表示されます。
| Target | アートボード名が表示されます |
| Animation | 画面の動きを指定できます。（モーダル or ナビゲーション など） |
また、上記のような感覚的に繋ぐコトもできますが、以下のような操作も可能です。
- オブジェクトを選択
- 右のメニュー【Prototyping】の【+】をタップ
- 遷移先をリストで選択
Sketch 上にホットスポット（エリア）を追加してからの遷移画面遷移先指定
オブジェクトからの遷移もできますが、この範囲をさわったら遷移させるにも対応しています。それが【Hotspott】です。
- 【Insert】から【Hotspott】を選びます。
- 矩形を描くようにエリアを作成します。
- 最後に遷移先のアートボードを選択します。
これで、ホットスポット（エリア）を追加してからの遷移画面遷移先指定が可能となっています。
Sketch Prototyping プロトタイプ開始アートボードを指定
プレビュー画面で、【フラッグアイコン】をチェックすることで、プレビューの開始点として登録できます。
Sketch Prototyping のプレビュー確認
【Preview】をクリックすると、プレビューが表示されます。設定した動きが表示されます。 ナビゲーション固定は、今後に期待ですね。
プロトタイピング戦国時代
ソフトウェアでは Adobe XD も大きく取り上げられており、それぞれのメリットデメリットはあります。 既存Webサービスも Prott、inVision、Flinto、Origami Studioたくさんのサービスが存在してます。 個人的には、案件がアプリなのかWEBなのかとか、エンジニアとの協働作業とかチームメンバーによっても使い分けるのが一番良さそうだなと思っています。 デザイナーとしては、あくまで、ツール（道具）であることを忘れないように、心がけましょう。
関連記事
この記事を読んで、クラスメソッドにデザイナーはいるんだ、それもありだなと思ってくれた方は、こちらからエントリーしてみてください。
紹介した人の欄があるので私の名前「田中由希子」と書いていただければと思います。入社半年後にいいことがあるはず。