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

デザイナーの たなか ゆきこ です。 デザインを行うときにかかせないのが、プロトタイピング。 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 ナビゲーション など)

また、上記のような感覚的に繋ぐコトもできますが、以下のような操作も可能です。

  1. オブジェクトを選択
  2. 右のメニュー【Prototyping】の【+】をタップ
  3. 遷移先をリストで選択

Sketch 上にホットスポット(エリア)を追加してからの遷移画面遷移先指定

オブジェクトからの遷移もできますが、この範囲をさわったら遷移させるにも対応しています。それが【Hotspott】です。

  1. 【Insert】から【Hotspott】を選びます。
  2. 矩形を描くようにエリアを作成します。
  3. 最後に遷移先のアートボードを選択します。

これで、ホットスポット(エリア)を追加してからの遷移画面遷移先指定が可能となっています。

Sketch Prototyping プロトタイプ開始アートボードを指定

プレビュー画面で、【フラッグアイコン】をチェックすることで、プレビューの開始点として登録できます。

Sketch Prototyping のプレビュー確認

【Preview】をクリックすると、プレビューが表示されます。設定した動きが表示されます。 ナビゲーション固定は、今後に期待ですね。

プロトタイピング戦国時代

ソフトウェアでは Adobe XD も大きく取り上げられており、それぞれのメリットデメリットはあります。 既存Webサービスも Prott、inVision、Flinto、Origami Studioたくさんのサービスが存在してます。 個人的には、案件がアプリなのかWEBなのかとか、エンジニアとの協働作業とかチームメンバーによっても使い分けるのが一番良さそうだなと思っています。 デザイナーとしては、あくまで、ツール(道具)であることを忘れないように、心がけましょう。

関連記事

[Sketch作業効率化]色を一気に変更できるプラグインChainの使い方

デザイナーヘルプツール InVision と Sketch の合体技

この記事を読んで、クラスメソッドにデザイナーはいるんだ、それもありだなと思ってくれた方は、こちらからエントリーしてみてください。

紹介した人の欄があるので私の名前「田中由希子」と書いていただければと思います。入社半年後にいいことがあるはず。