[sketch] Prottyping機能を試してみました #sketch

たなかゆきこ

2018.03.01

この記事は公開されてから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なのかとか、エンジニアとの協働作業とかチームメンバーによっても使い分けるのが一番良さそうだなと思っています。デザイナーとしては、あくまで、ツール（道具）であることを忘れないように、心がけましょう。