2023/06/13 PR

スマホゲームのUI/UXはプロトタイプ作成でここまで変わる！神機能（！？）搭載のProtoPieが面白い！【セミナーレポート】

スマホゲームのタイトル画面で楽しげに揺れるタイトルロゴや、レベルアップボタンを連続タップした際に数字が増える爽快な演出。タップしたときの気持ち良い感触は、スマホゲームやWebアプリの生命線のひとつだ。そんな優れたUI/UX開発に欠かせないプロトタイピングツールが今回のセミナーで紹介された「ProtoPie」である。

2023年5月22日（月）、ボーンデジタルはスマホゲーム開発の現場でProtoPieを活用することでどういったメリットがあるのかを石倉究氏を招き「プロトタイプでここまでできる！スマホゲームUI/UXデザインセミナー」を開催した。

石倉氏は日々ゲームのUIデザインやアニメーションを探求する、ProtoPieのヘビーユーザー。株式会社ジークレストでアニメーターを務め、株式会社サイバーエージェントのゲーム事業部インタラクションデザイン室にも籍を置く第一線の人物である。

記事の目次

石倉究氏

株式会社ジークレスト　アニメーター
株式会社サイバーエージェントゲーム事業部インタラクションデザイン室兼務。
Webデザイナーを経験後、2009年にサイバーエージェントの子会社ジークレストへ中途入社。ゲームのUIデザインやアニメーションを担当。インタラクション室のメンバーとしても日々活動中。

UI開発ワークフローにおけるProtoPieの立ち位置

セミナーではまず、ゲームのUI開発ワークフローにおけるProtoPieの立ち位置を解説。一般的に、「ワイヤーフレーム」→「モックアップ」→「プロトタイプ」→「本実装」→「実機」という5工程で開発は進む。

ワイヤーフレームは基本的な画面内の要素や各画面のつながりなどを矩形などで組み上げたもの。この時点ではデザインを行わない。

モックアップは背景やパーツなどのデザインを行い、全体と細部のデザインを検証するためのもの。この工程では主に、FigmaなどのUIデザインを得意とするツールを用いて画面をつくることが多い。場合によっては、あたかも操作してアプリが反応しているかのような「動画モック」をAfter Effectsで制作することもある。ただ、動画モックはそれらしい様子を見ることができるだけで、インタラクションの検証にはならない。

そしてプロトタイプは、モックアップに動き（インタラクション）を加え、触って操作性を確認・検証できるテスト版。ProtoPieをはじめとしたプロトタイピングツールを使って、タッチやスクロールなどの操作に反応するようにつくる、本物のアプリに近いものだ。プロトタイプとはそもそも試作品やテスト用製品を指す言葉だが、UI/UX開発においては、実装前に触って動かし、確認できるもののことを指す。

続く本実装は、UnityやUnreal Engineといったゲームエンジンの中で、デザインとインタラクションを再現する工程。ここでは、ゲームエンジンが備えるポストプロセス（エフェクトやパーティクルといったVFX要素）も追加される。

そして本実装が完了したデータはパッケージ化され、実機用アプリとなる。

石倉氏はこう語る。「プロトタイピングは本物のアプリに近い感覚で触って確認できるのがポイントです。実際に動かせるので、エンジニアやデザイナー、アニメーターといった各チームメンバーに一発で伝わりますし、言葉や図で説明するよりも確実に共通認識が持てます」。

なお、石倉氏の所属するデザインチームにはデザイナーが3名、アニメーターが1名（石倉氏）が所属。もともとチームメンバーにアニメーター（UIモーションを専門とするメンバー）はいなかったが、より細かいインタラクションデザインをつくる必要から、石倉氏がチームにジョインした。XDやFigma、After Effectsだけでは細かいインタラクションの制作に限界を感じていたことから、ProtoPieを使用することになったという。

また、ProtoPieをワークフローに組み入れた際のイメージとして、石倉氏は自身が関わったスマホゲーム開発の実工数を紹介してくれた。

特に長めの工数がかかるガチャ画面の制作については、約7日かけて「美しい止め画」のための絵コンテをつくり、約7〜10日かけてエフェクトやリッチな演出を施した動画モックをAfter Effectsで制作。そして最後に約5日かけて、ガチャ全体のインタラクション制作をProtoPieで行ったという。

なぜProtoPieなのか

プロトタイピングツールは多数あるが、大きく「トランジション型」と「複合型」に分けられる。

トランジション型は主にUIデザインのしやすさに重点が置かれ、インタラクションについてはタップして画面遷移する程度の簡単なものに留まる。

複合型は画面遷移はもちろん、ボタンの動きや細かいUIパーツのインタラクションまでつくることができるタイプで、ProtoPieも複合型に属するツールだ。

複合型にもいくつか選択肢はあるが、なぜProtoPieなのだろうか。石倉氏はその答えを「3つの強み」として紹介した。

1　画面遷移・インタラクションがしっかりつくれる

ProtoPieでのインタラクションは、「緑色の長方形（オブジェクト）をタップする（トリガー）と、右に移動する（レスポンス）」というように、オブジェクト・トリガー・レスポンスの3ステップで構築していく。
トリガーは26種類、レスポンスは25種類用意されており、これらの組み合わせと設定値の調整により、インタラクションを自在に操ることが可能だ。

https://www.protopie.io/learn/docs/introducing-protopie/making-your-first-prototype

「やろうと思えば簡単なゲームをつくることができるくらい柔軟性があります。例えば、指で画面をタッチしたまま、スクロールに合わせて指でゲームのオブジェクトを動かして、障害物に当たったらゲームオーバーするゲーム。このくらいならつくれてしまいます」（石倉氏）。

2　デバイス上ですぐに確認できる

「PCのProtoPieでちょちょっと調整したら、すぐにスマホに反映してボタンの触り心地を検証する。こんなながれをノーコードでできちゃいます」（石倉氏）。ProtoPieでの調整からスマホでの検証まで、直感的に作業できてしまうのが強みだ。

3　エンジニアへの共有がスムーズ

プロトタイピングから本実装へと進む際には、デザイナーがエンジニアに渡したデザインの仕様書「ハンドオフ」をベースにして、エンジニアがインタラクションをアプリに組み込む。

そのハンドオフで役立つのがProtoPieの「Interaction Recording」だ。完成したインタラクションデザインデータをクラウドにアップロードし、「Handoff」ボタンを押して録画を開始し、ブラウザ上で自由に操作するだけで、一連の操作を記録してくれる。

録画された操作情報はタイムラインに展開され、各オブジェクトのアニメーション内容が数値で表示される。エンジニアはその数値を用いてゲームエンジンでシーンを再現すれば良いため、正確な実装が可能となる。

Interaction Recordingを行ったデータ。「GAME START」のボタンを選択すると、タイムライン時点での設定値が右端に表示される

「エンジニアにPIEデータ（ProtoPieのファイル）を渡すだけでは情報としては不十分。ProtoPieを使えば、インタラクションを録画してタイムライン上にそれを展開できて、しかも各インタラクションが数値化されているんです。これは実装上特に便利で、僕たちの開発チームでもフル活用しています。おかげでデータの受け渡しがかなりスムーズになりました」（石倉氏）。

スマホゲームのタイトル画面制作デモ

続いては、実際にProtoPieを操作するハンズオンでデモ。石倉氏がサンプルとして用意したスマホゲームのタイトル画面のプロトタイプを使って、簡単なインタラクションを設定して見せてくれた。

今回はゲームのタイトル画面の読み込み時に表示されるアニメーションを中心に、設定方法をステップバイステップで紹介してくれたが、手順はとてもシンプル。まずは画面左側の「レイヤー」から操作するオブジェクトを選択し、画面右側の「Start」（タイトル読み込み時を示すトリガー）の直下に「Opacity」や「Scale」、「Move」といったレスポンスを繋ぐ。

そして画面右端のプロパティで適用量、開始時間、持続時間、イージングの種類（リニア、イーズインイーズアウトなど）を選ぶ。同じオブジェクトに対して複数のレスポンスを利用することで、例えばタイトルロゴの場合、透明度が変化しながらロゴが大きくなるといった演出もできる。

つくったアニメーションはプレビューウィンドウですぐに確認できるだけでなく、スマホを接続しておけば実機確認も行える。さらに、PIEデータをクラウドにアップしておけば、最新のデータをチーム内で共有しながら、クラウド経由での実機確認やブラウザ上でのプレビューも可能になる。

「ProtoPieのプレビューや実機確認機能はワークフロー上とても重要です。動きの抜け漏れを防いで、大幅なつくり直しを防げます。また、アニメーターとしても、何度もブラッシュアップして気持ちの良いアニメーションを追求できるので、満足度の高い仕事ができます」（石倉氏）。

ProtoPieをさらに活用する

続いて石倉氏は、ProtoPieの良さを活かすため、2つの使い方を提案した。

1　ワイヤーフレーム制作でProtoPieを活用

先ほど、ゲームのUI開発ワークフローのながれを「ワイヤーフレーム」→「モックアップ」→「プロトタイプ」→「本実装」→「実機」と紹介したが、石倉氏はワイヤーフレームの時点でProtoPieを活用することを提案した。

「プロトタイピングの工程に進んだときに、そもそものデザインが動きを想定したものになっていないと、最悪の場合、ワイヤーフレームから見直さなくてはいけません。だからProtoPieでワイヤーフレームに大まかな動きを付けておくと良いと思います。画面遷移やコアループでどのようにユーザーを誘導するのかを、ワイヤーフレームの時点でしっかり検証しておけば、動きの共通認識を持ちながらモックアップ作成に進めます」（石倉氏）。

2　汎用アニメーションのルールづくりに活用

スマホゲームでもWebアプリでも、複数項目を並べて見せる「一覧」は使用頻度が高いビューで、様々なタイプがある。これらのビューのアニメーションは、ProtoPieであらかじめ動きを検証しておき、アニメーションをルール化しておくことを石倉氏は推奨する。

「それと、ボタンなどの共通UIパーツの触感を検証するのにもProtoPieは使えます。アプリの中で使うボタンを全部横に並べて、ひとつずつ触ってみて、その感覚を揃えていくんです。もちろん個別に動かすケースも出てきますが、まずは汎用ルールに揃っていることで、ユーザーも安心して遊べます」（石倉氏）。

質疑応答セッション

セミナーの締めくくりは質疑応答に充てられた。現に開発で多用している石倉氏だからこそ言える、ProtoPieを使ったプロトタイピングの本音が伺えた。

Q：いろいろできそうなことはわかったのですが、逆にProtoPieではつくりにくいものはありますか？

A：PhotoshopやAfter Effectsで言うところのレイヤー効果（乗算や加算）などは使えません。それと、パーティクルのようなエフェクトも使えません。ゲームの場合、パーティクルや有機的な動きを使いたいことがあるので、そういうときはAfter Effectsと組み合わせたり、Unityなどゲームエンジン側で実装できるものはゲームエンジン側でと切り分けています。

ProtoPieは、手軽につくれて動作も軽いというのが特長でもあるので、僕たちのチームでも、UIパーツの動きだけをProtoPieでつくって、不得意な部分はAfter Effectsやゲームエンジンで実装するというように使い分けています。

ただ、ProtoPieの機能が少ないわけではありません。センサー類への対応や音声認識、数式処理など、トリガーとレスポンスの種類は豊富です。例えば「Chain」というトリガーを使うと、オブジェクトに親子関係を適用して、子オブジェクトをちょっと遅れて動かしたりができます。スクロールすると背景画像が大きくなるとか、ちょっと遅れてボタンが付いてくるとか。いわゆる視差効果（パララックス）をつくることができます。