ProtoPieはこちらから1ヶ月無料でダウンロードできます。モックが必要なのか新規開発の現場でモックが果たす役割は、フェーズによっても異なります。最初はビジネスサイドで作ろうとしてるアプリの、全体感の把握のために必要になります。要件が決まりきっていない段階から、欲しい体験をモックとして素早く具現化し、それを見ながらさらなる要件を決めていきます。ある程度できてきたら、そのモックでユーザーテストを行い、使いにくい部分を確認していきます。実装の段階では、細かいインタラクションをエンジニアに伝えるためにもモックが必要になってきます。ProtoPie?サイバーエージェントの開発現場では、アプリのクオリティの担保と、競合アプリとの差別化のために、UI、インタラクションに特に力を入れています。そのこだわりを作り込み、チームメンバーに伝えるためにも、どんなツールを使うのかも重要です。そのため、簡単な遷移しか作れないプロトタイピングツールより、インタラクションを自由に作り込めるツールが必然的に開発現場で導入されるようになってきます。細かい作り込みが出来ることと同じくらい、簡単に素早く作れることも重要になります。フィードバックを素早く反映したり、複数のパターンを作って比較する必要があるためです。した理由から直感的な操作で作業でき、思い描いたことは大体実現できるProtoPieが徐々に社内で広まっていきました。やってProtoPieを活用してプロダクトを開発してるのか今担当しているプロジェクトでも、ProtoPieは開発の軸と言っても過言ではないほど活躍しています。今回はビジネスサイドとのすり合わせの時点で、社外パートナーの方にもモックを触ってもらう必要がありました。その時に彼らに「イケてる!」と思ってもらえるように、イージングや遷移のタイミングまで拘り、ほぼ全ての画面でタップできないボタンが無いよう詳細に作り込みました。そのリアルなモックを使い、社内でユーザーテストをして、新たに出た使いづらそうな部分を直して少しずつブラッシュアップしていきました。開発が始まる段階でも、モックは工数の見積もりの役に立ちました。実装にあたっても、アニメーションのタイミングやイージングなどを伝え、細かいところまで再現してもらっています。エンジニア側からローディングの時間やエラーパターンなどについての指摘ももらい、さらにブラッシュアップしていきました。ボタンをタップしたら遷移まずは「ボタンをタップしたらページを遷移する」という動きを作ってみましょう。シーンにオブジェクトを配置まず遷移前と遷移後のページを作ります。Sketch、Figma、AdobeXDならファイルごとインポートできます。Sketchファイルはこちら。https://github.com/ukn530/how-to-use-protopie/raw/master/DevelopersBlog.sketchProtoPieではアートボードはひとつずつシーンとしてページが分かれます。2つシーンを作りましょう。このアイコンからシーンを作れます。シーン名をダブルクリックして、それぞれHome、Detailと名前をつけておきます。Sketchを開いておき、左上のインポートからSketchを選択しましょう。該当のアートボードを@3xで読み込みます。この時、影と角丸もアニメーションできるのでProtoPie側でつけましょう。Sketchと同じように右側のインスペクタから設定できます。コンテナー(レイヤーをまとめるグループみたいなもの)に角丸をつけたら、一番下の「サブレイヤーをクリッピングする」にチェックをつけてマスクさせましょう。スクロールもここで設定します。コンテナーからScrollコンテナーを作成。スクロール領域の大きさを設定(今回はスクリーン全体)し、その中にスクロールしたいレイヤーを入れます。ここまでできるとこんな感じです。インタラクションをつけるProtoPieでインタラクションをつける時に必要なのは以下2つです。オブジェクト移動、ページ遷移などの画面の動きのこと今回の「タップしたらページ遷移」はトリガーにタップ、レスポンスにページ遷移を割り当てます。トリガーに設定したいレイヤーを選択、アートボード右側の「トリガーを追加」をクリックし、Tapを選択します。レスポンスはTapの下の「+」をクリックしJumpを選択、右のインスペクターで飛びたいシーン(Detail)を設定します。飛んだ先のクローズボタンにも同じ設定すると、以下のような超シンプルな遷移ができます。滑らかな遷移アニメーション「これくらいならSketch単体でもできるよ!」という感じなので、リッチにしていきます。ここでも基本のトリガー&レスポンスは変わりません。タッチ中画像を小さくするTapトリガーと同じように、TouchDownとTouchUpのトリガーを追加し、両方レスポンスにScaleを設定します。Scaleはサイズじゃなくファクターの項目でパーセンテージを指定してみましょう。TouchDownで95%、TouchUpで100%にしてみました。拡大縮小にかかる時間を0.3にしました。これで中心に向かって拡大縮小するようになります。遷移先に画像を繋げる実際にシーン間で画像を共有することはできませんが、それっぽく見せることはできます。遷移が発生するときに遷移先の画像の位置まで画像を移動させます。やることが多いので羅列します。0.3(タップ0.3秒後に遷移)TapトリガーにContent1のScaleを追加。281(遷移後のサイズにする)コンテナー内の画像も拡大させたいので、中の画像のリサイズ制約でマージンを上左右固定(幅固定を外す)、タイトル類は下左右マージン固定。TapトリガーにContent1のMoveを追加。基準点をさっき中央にしたので、Content1幅と高さの半分の値に移動させるとスクリーン上部にぴったり移動できる。281/2と入れると便利。タイトル類が邪魔なのでContent1内のTitleレイヤーを選択し、Tapトリガー内にOpacityを追加。「今日のニュース」などのレイヤーの上にContent1を移動させたいのでTapトリガーにReorderを追加。最前面アイコン)に移動させる。TapトリガーにContent2のOpacityを追加。TapトリガーにContent3のOpacityを追加。滑らかに見せるために遷移先シーン側も工夫しましょう。–トリガー追加でStartを追加(Startはこのシーンに移動した瞬間に実行されるトリガー)StartトリガーにContentのOpacityを追加。0に(ページが開く瞬間にContentを消す)StartトリガーにContentのOpacityを追加。0.3に(上で設定したOpacityを戻してContentが出現するアニメーションを作る)StartトリガーにContentのMoveを追加。0(このページが開いた瞬間に下に50ずらす)StartトリガーにContentのMoveを追加。0.3(上で設定したずらしを0.3秒かけて戻す)StartトリガーにButtonCloseのScaleを追加。y:50)StartトリガーにButtonCloseのScaleを追加。ここでプレビューしてHomeとDetailを行ったり来たりしてみると、HomeでContent1が拡大されたままになっているのが分かります。これは以下の方法で直せます。あとDetailからHomeに帰るときの動きを入れておきましょう。シーンDetailのStartトリガーの設定で「Jumpと同時にスタート」を追加。ここまで設定すると以下のようになります。Easingや時間はお好みで変えてみてください。最初に設定した角丸やシャドウも、ここでいじるとより丁寧になります。スクロールに連動した動き例えばTwitterのプロフィール画面のように、スクロール量に応じて画像を大きくしたり、タブバーがヘッダーにぶつかったらスクロールしないようにしたい時があります。そんな時はChainトリガーを使います。今回はDetailのスクロールでパララックスとTwitter風のヘッダー画像拡大を入れてみましょう。スクロールを設定してあるレイヤー(コンテナー1)を選択し、Chainトリガーを追加。右のインスペクタでレイヤー名の下にあるプルダウンで「スクロール」を選択。ChainにHeaderのMoveを追加。Rangeの値を下記のようにして400スクロールする時にHeaderのY座標が-50するようにする。Xには何も入れなくてOK。ChainにHeaderのScaleを追加。Rangeの値を下記のようにして-400スクロールする時にHeaderの高さを+400に拡大するようにする。幅は画像の縦横比を保つように実寸を設定。ここでプレビューしても拡大されないのは外側のコンテナーのみ拡大され、中の画像が拡大されてないから。中の画像のリサイズ制約でマージンを固定。Y:0(中央上)に設定。Chainにブラー画像のOpacity追加。(画像が非表示になっている可能性があるのでレイヤーパネルで目のアイコンをクリックして表示させてください。)これでスクロールの動きに連動して、画像が変化するようになりました。数式と変数を使ってみるさて、ここまでくると他のコンテンツを押した時も遷移させたくなるのが人の性です。インタラクション類はコピペできるので、2つほど複製してContent2、Content3で同じ設定をします。そこで2つのことに気づきます。スクロールしてからタップすると移動する画像がずれるタップしたコンテンツによって遷移先の画像を出し分けたいこれらはそれぞれ数式と変数を使うと実現できます。スクロール位置を取得する基本編でつけたタップ時の画像の移動は、どうやらスクロールした分ずれるようなのでMoveのYの値に、スクロール量を足してあげる必要があります。1`.scrollOffsetと入れます。レイヤー名やscrollOffsetは入力欄右の+から選択できるので、文字入力する必要はありません。1のスクロールした量」を「140.5にプラスする」という意味です。140.5というのはスクロール量が0の場合に移動する位置です。基準点を画像の中心にしたため、画像の高さの半分が移動すべき位置になっています。ProtoPieの数式では、スクロール量だけではなく位置や大きさなどいろいろ取れるので、140.5のような数字を直打ちせず下記のように数式のみで表現することもできます。(が、長いので採用するかはお好みで。)式としては、スクロールコンテナの幅に、画像のアスペクト比をかけて拡大される高さから移動すべき座標を出してそれにスクロール量を足しています。1`.scrollOffsetこれを3つのコンテンツのMoveに反映させると、どの位置からでも画像がスクリーン上部に動きます。クリックした画像を別シーンに伝える現状、どのコンテンツをタップしても遷移先は同じコンテンツなので、これをなんとかします。遷移先シーンに「何をタップしたか」を伝えるには変数が使えます。タップしたコンテンツの番号を変数に入れ、遷移先でその変数の番号を参照して、画像を出し分けるようにします。変数は画面左下のエリアで設定できます。+をクリックして「全てのシーンで使用」を選択し、変数を作成します。変数名はデフォルトで「variable1」になっているので、分かりやすいものに変えましょう。ここでは「contentIndex」にしておきます。変数には数字、テキスト、カラーのいずれかを入れることができますが、今回はデフォルトの数字で大丈夫です。ありますが、これをクリックするとプレビュー中、変数に何が入っているのかを確認できるので便利です。–Content1のTapトリガーにAssignのレスポンスを追加。変数名はcontentIndexを選択、数式に0を入力。Content2のTapトリガーにAssignのレスポンスを追加。変数名はcontentIndexを選択、数式に1を入力。Content3のTapトリガーにAssignのレスポンスを追加。変数名はcontentIndexを選択、数式に2を入力。2を入れましたが、バラバラであればなんでもOKです。–StartトリガーにConditionを追加。contentIndex、=、数値、0をそれぞれ入力。不透明度0追加したOpacityの時間は全て0に以下のようなStartの中身になるかと思います。ちなみにレスポンスの名前は変えられるので分かりやすく変えてもいいです。非表示になっているレイヤーは表示した上でOpacityをかけて下さい。これで遷移は綺麗に画像がつながるようになりました。あとはスクロール時の画像のブラーや、タイトルの変更などもちまちま設定すると、よりそれっぽくなります。紹介しきれなかった便利な機能として、Detectトリガーというのがあります。変数の値やレイヤーの動きなどを監視し続け、変化があった時に呼ばれるものです。ショッピングカートの数量カウンターなどを作る時に、変数に数字を足していき、変数の数字が変化したらテキストの表示も変化させるなどに使えます。ゲームを作る正直ProtoPieはゲームを作るのには適していないです。当たり判定が取れなかったり、自作関数に指示をまとめられないためです。Conditionや変数、Detectを駆使すればできないこともないです。いうことで作ってみました。ProtoPieの機能の粋を集めたものになってます。おわりに長々とProtoPieでできることを書いてきました。プロトタイピングツールを使いこなすことによって、関係各所とのコミュニケーションがスムーズになり、プロダクトの精度が上がることは間違いないです。その一方で、「何が良いインタラクションなのか」を判断するために、感性や、人間の心理に関する知識が必要だということにも気づきます。それを身につけるためには数を作って経験を積むことが最も大切だとは思いますが、知識の面では参考になる文献もあります。Designがやはり鉄板です。それぞれインタラクションやアニメーションに関する記述があります。Interfacesキャラクターに命を吹き込む12の原則があります。為になるのでぜひ読んでみてください。「イージングをInにすべきかOutにすべきか」みたいな判断はこの辺りで得られる気がします。