はじめに
エンジニアでも簡単に動きのあるプロトタイプを作成する方法について紹介していきます。
基本的にモバイルアプリのプロトタイプをターゲットとしています。
環境
- Sketch 43.2
- Craft Mangaer 1.0.45
- Craft Mangaer - Sync Prototype 2.3.51
Sketch,Craft
Sketch
エンジニアでもSketchは聞いたこと・使ったことがある、という方多いと思います。
こちらに仕様・使い方が記載されてますので、わからない方は見てみてください。
Sketchは静的なプロトタイプの作成はすごい簡単なのですが、動きのあるプロトタイプ（タップして画面遷移のようなもの）が作れません。
なので、次に紹介するCraftと連携して動きのあるプロトタイプを作成していきます。
料金は$99で購入できます。 バージョンアップデートに対応したい場合は、年額$99で更新することができます。
こちらから入手できます。
体験版も利用可能です。
Craft
Craftというのは、InVisionというプロトタイプ作成ツールが提供しているSketchのプラグインです。これをSketchと組み合わせると一気にプロトタイプ作成効率が上がります。
今回は画面遷移、InVisionとの連携に使うのですが、他にもダミー画像を入れるときなどに重宝します。
参考：ダミー作成に超便利！Sketch3に機能を追加するInVision Craftを試してみた
こちらから入手できます。
CraftにはCraftManagerというツールを使って、Craft内の様々なプラグインを管理していきます。プラグインのアップデートはこちらで管理しましょう。
プロトタイプ作り方
Craftプラグインが入っているか確認
まずSketchを立ち上げてみてください
Craft Managerと入れたSketchを起動すると、右下に雷マークがでてきたらOKです。ない場合は、Craft Managerのバージョンを見てみましょう
画面を作成する
それでは、簡単な画面遷移を作ってみたいと思います。
簡単にボタンを押したら次の画面に遷移するようなものを作ります。
Sketchの左上の＋(Insert)からArtbord→適当な画面パーツを選んでください。
私はiPhoneSEを選びました。
これをコピペで複製して２枚の画面を作ります。
画面名を名前を変えてください。
ここにボタンを付け足します。
ボタンと言っても、単純な四角ですが、左上の＋(Insert)から四角い図形を選択して、左の画面に配置します。大きさは適当です。
遷移を作る
それではボタンをタップしたら次の画面に遷移する、というアクションと遷移先を指定します。
右下の雷マークをタッチして、その後にボタンを選択状態にしてください。
次にキーボードのCを押すと矢印が出てくるので、遷移先の次の画面を選択してください。
すると下の画像のようなダイアログが出てきます。ここで、どのような遷移のアニメーションかを指定できます。
このダイアログでは、リンク先を画面もしくはオーバーレイかを選ぶことが出来、オーバーレイの場合は、さらにボタンのアクション（ダブルタップなど）や遷移のアニメーションを具体的に指定できます。
今回は linke to overlayでデフォルトの設定にしました。
完成したら次のような画面になります。
InVisionと同期
ここでInVisionと同期させます。
(この時点で、InVisionに登録してない方は登録してください。無料です。
また、画面名がまだ２枚とも一緒の方は変えてください。ここで同じだと２画面がInVisionに反映されません。)
Sketch画面右上のCraft pluginにあるSyncでInVisionと同期する設定をします。
Create select typeからcreate new prototypeを選択します。
適当な名前をつけてプロトタイプのプロジェクト名を作成します。
作成したら、Sync to InVisionボタンを押して、同期します。
同期が終了したら「カン！」という音がなります
InVisionの自分のページにいくと、先程作ったプロジェクトの中にプロトタイプが反映されています。ここで一枚しか画面がない人は、画面名を２枚とも異なるようにして、再度同期してみてください。
それでは、実際に作成した画面をタップしてみてみましょう。
次の画面に遷移するのがわかります。
まとめ
ここでは、簡単な画面遷移するプロトタイプを作成しました。
一度やり方を覚えると簡単に作成できるので、是非トライしてみてください！