このサンプルはこちらから実際に触れます。またダウンロードして中身を見たりできるのでぜひご覧下さい。（なお出てくる可愛いわんちゃんは弊社エンジニア谷のマメヒコとクロスケです。尊い・・・。）

ちなみにこの記事で使用したProtoPieのバージョンは4.0.3、MacOS 10.14.6です。ProtoPieはこちらから1ヶ月無料でダウンロードできます。

目次

1. なぜモックが必要なのか

 　なぜProtoPie?

2. どうやってProtoPieを活用してプロダクトを開発しているのか

3. ProtoPieを使ってみる

 　超基本編 – ボタンをタップしたら遷移

 　基本編 – 滑らかな遷移アニメーション

 　中級編 – スクロールに連動した動き

 　上級編 – 数式と変数を使ってみる

 　番外編 – ゲームを作る

4. おわりに

１. なぜモックが必要なのか

新規開発の現場でモックが果たす役割は、フェーズによっても異なります。最初はビジネスサイドで作ろうとしてるアプリの、全体感の把握のために必要になります。まだ要件が決まりきっていない段階から、欲しい体験をモックとして素早く具現化し、それを見ながらさらなる要件を決めていきます。ある程度できてきたら、そのモックでユーザーテストを行い、使いにくい部分を確認していきます。そして実装の段階では、細かいインタラクションをエンジニアに伝えるためにもモックが必要になってきます。

なぜProtoPie?

サイバーエージェントの開発現場では、アプリのクオリティの担保と、競合アプリとの差別化のために、UI、インタラクションに特に力を入れています。そのこだわりを作り込み、チームメンバーに伝えるためにも、どんなツールを使うのかも重要です。

そのため、簡単な遷移しか作れないプロトタイピングツールより、インタラクションを自由に作り込めるツールが必然的に開発現場で導入されるようになってきます。また細かい作り込みが出来ることと同じくらい、簡単に素早く作れることも重要になります。フィードバックを素早く反映したり、複数のパターンを作って比較する必要があるためです。

こうした理由から直感的な操作で作業でき、思い描いたことは大体実現できるProtoPieが徐々に社内で広まっていきました。

２. どうやってProtoPieを活用してプロダクトを開発してるのか

今担当しているプロジェクトでも、ProtoPieは開発の軸と言っても過言ではないほど活躍しています。今回はビジネスサイドとのすり合わせの時点で、社外パートナーの方にもモックを触ってもらう必要がありました。その時に彼らに「イケてる！」と思ってもらえるように、イージングや遷移のタイミングまで拘り、ほぼ全ての画面でタップできないボタンが無いよう詳細に作り込みました。

そしてそのリアルなモックを使い、社内でユーザーテストをして、新たに出た使いづらそうな部分を直して少しずつブラッシュアップしていきました。

開発が始まる段階でも、モックは工数の見積もりの役に立ちました。また実装にあたっても、アニメーションのタイミングやイージングなどを伝え、細かいところまで再現してもらっています。また、エンジニア側からローディングの時間やエラーパターンなどについての指摘ももらい、さらにブラッシュアップしていきました。

と、長々と仕事っぷりを説明させて頂きましたが、私がProtoPieを使い倒した中で得た、基本の使い方から上級編まで、紹介していきます！

３. ProtoPieを使ってみる

超基本編 – ボタンをタップしたら遷移

まずは「ボタンをタップしたらページを遷移する」という動きを作ってみましょう。

シーンにオブジェクトを配置

まず遷移前と遷移後のページを作ります。Sketch、Figma、AdobeXDならファイルごとインポートできます。

Sketchファイルはこちら。

https://github.com/ukn530/how-to-use-protopie/raw/master/DevelopersBlog.sketch

ProtoPieではアートボードはひとつずつシーンとしてページが分かれます。2つシーンを作りましょう。ウィンドウ左のこのアイコンからシーンを作れます。さらにシーン名をダブルクリックして、それぞれHome、Detailと名前をつけておきます。また中央上からデバイスもiPhone Xにします。

Sketchを開いておき、左上のインポートからSketchを選択しましょう。該当のアートボードを@3xで読み込みます。

この時、影と角丸もアニメーションできるのでProtoPie側でつけましょう。Sketchと同じように右側のインスペクタから設定できます。コンテナー（レイヤーをまとめるグループみたいなもの）に角丸をつけたら、一番下の「サブレイヤーをクリッピングする」にチェックをつけてマスクさせましょう。

さらにスクロールもここで設定します。上部メニューのコンテナーからScrollコンテナーを作成。スクロール領域の大きさを設定（今回はスクリーン全体）し、その中にスクロールしたいレイヤーを入れます。

ここまでできるとこんな感じです。

インタラクションをつける

ProtoPieでインタラクションをつける時に必要なのは以下2つです。

• トリガー　タップ、ドラッグなどの操作（入力）のこと
• レスポンス　オブジェクト移動、ページ遷移などの画面の動きのこと

今回の「タップしたらページ遷移」はトリガーにタップ、レスポンスにページ遷移を割り当てます。トリガーに設定したいレイヤーを選択、アートボード右側の「トリガーを追加」をクリックし、Tapを選択します。

基本編 – 滑らかな遷移アニメーション

「これくらいならSketch単体でもできるよ！」という感じなので、リッチにしていきます。ここでも基本のトリガー&レスポンスは変わりません。

タッチ中画像を小さくする

Tapトリガーと同じように、TouchDownとTouchUpのトリガーを追加し、両方レスポンスにScaleを設定します。Scaleはサイズじゃなくファクターの項目でパーセンテージを指定してみましょう。TouchDownで95%、TouchUpで100%にしてみました。また拡大縮小にかかる時間を0.3にしました。

この状態でプレビューすると左上に向かって小さくなってしまうので、対象レイヤー（Content1）を選択し、右のインスペクタから基準点をX: 50 Y: 50にします。これで中心に向かって拡大縮小するようになります。

遷移先に画像を繋げる

実際にシーン間で画像を共有することはできませんが、それっぽく見せることはできます。遷移が発生するときに遷移先の画像の位置まで画像を移動させます。

やることが多いので羅列します。

– シーンHome –

1. さっき設定したJumpのスタートディレー: 0.3（タップ0.3秒後に遷移）
2. TapトリガーにContent1のScaleを追加。サイズを幅: 375 高さ: 281（遷移後のサイズにする）
3. コンテナー内の画像も拡大させたいので、中の画像のリサイズ制約でマージンを上左右固定（幅固定を外す）、タイトル類は下左右マージン固定。
4. TapトリガーにContent1のMoveを追加。基準点をさっき中央にしたので、Content1幅と高さの半分の値に移動させるとスクリーン上部にぴったり移動できる。X: 375/2 Y: 281/2と入れると便利。
5. タイトル類が邪魔なのでContent1内のTitleレイヤーを選択し、Tapトリガー内にOpacityを追加。不透明度を0に。
6. 「今日のニュース」などのレイヤーの上にContent1を移動させたいのでTapトリガーにReorderを追加。Content1を最前面（なぜかが最前面アイコン）に移動させる。
7. 上記で追加したScale、Move、Opacityの時間: 0.3 に。
8. TapトリガーにContent2のOpacityを追加。不透明度0に。
9. TapトリガーにContent3のOpacityを追加。不透明度0に。

さらに滑らかに見せるために遷移先シーン側も工夫しましょう。

– シーンDetail –

1. トリガー追加でStartを追加（Startはこのシーンに移動した瞬間に実行されるトリガー）
2. StartトリガーにContentのOpacityを追加。不透明度: 0 時間: 0に（ページが開く瞬間にContentを消す）
3. StartトリガーにContentのOpacityを追加。不透明度: 100 Easing: Ease Out 時間: 0.3に（上で設定したOpacityを戻してContentが出現するアニメーションを作る）
4. StartトリガーにContentのMoveを追加。指定値ずつ移動でY: 50 時間: 0（このページが開いた瞬間に下に50ずらす）
5. StartトリガーにContentのMoveを追加。指定値ずつ移動でY: -50 Easing: Ease Out 時間: 0.3（上で設定したずらしを0.3秒かけて戻す）
6. StartトリガーにButtonCloseのScaleを追加。ファクターを X:0 Y:0 時間: 0。（ButtonCloseレイヤーの基準点はx:50 y:50）
7. StartトリガーにButtonCloseのScaleを追加。ファクターを X:100 Y:100 Easing: Spring Friction: 20 スタートディレイ: 0.3。

ここでプレビューしてHomeとDetailを行ったり来たりしてみると、HomeでContent1が拡大されたままになっているのが分かります。これは以下の方法で直せます。あとDetailからHomeに帰るときの動きを入れておきましょう。

1. シーンHome、DetailそれぞれのJumpレスポンスの中の、「選択したシーンをリセット」にチェック
2. シーンDetailのJumpレスポンスのエフェクトをSlide Out 上から下 に。
3. シーンDetailのStartトリガーの設定で「Jumpと同時にスタート」を追加。

ここまで設定すると以下のようになります。

中級編 – スクロールに連動した動き

例えばTwitterのプロフィール画面のように、スクロール量に応じて画像を大きくしたり、タブバーがヘッダーにぶつかったらスクロールしないようにしたい時があります。そんな時はChainトリガーを使います。

ここまで基本編を中心に紹介してきましたが、中級編と上級編としてより詳しい使い方を知りたい方はこちらでご紹介していますのでぜひご覧ください。