Customer Spotlight

5

分で読める

ProtoPieでQualiArtsがコンソール品質のモバイルゲームUI/UXを実現した方法

CyberAgentのモバイルゲームスタジオ、QualiArtsが、ProtoPieを活用してアニメーションのレビュー時間を70%短縮し、製品の再現度99%を実現した方法をご紹介します。プレイヤーが求める、触感のある「操作感」を損なうことなく実現しました。

ProtoPie、

CyberAgent傘下のスマートフォンゲーム開発スタジオであるQualiArtsは、コンソール品質の体験を提供することで、日本のモバイルゲーム市場におけるUI/UX基準を一貫して再定義してきました。彼らの代表作であるアイドルマネジメントRPG IDOLY PRIDE は、スタジオがモバイルゲームUIプロトタイピング。の細部に妥協しないときに何が起こるかを示す好例です。

QualiArtsにとって、優れたUX/UIデザインはゲームの見た目だけの話ではありません。大切なのは、それがどう感じられるかです。チームは「hand-feel」(手触り tedzuri) に強くこだわっています。これは、あらゆるタップやスワイプに対する正確な触覚フィードバックを指します。キャラクター選択でわずか0.1秒遅れるだけで、プレイヤーの没入感は完全に損なわれてしまいます。

しかし、その基準を実現するには、かつて大きなコストがかかっていました。

Screenshot of the ProtoPie Handoff interface displaying detailed interaction recipes for engineers. The view shows specific values for duration, delay, and easing curves (cubic-bezier), allowing developers to implement the IDOLY PRIDE UI with 100% accuracy.

ボトルネック:微調整のたびに3日待ち

ProtoPieを導入する前、QualiArtsのUI実装ワークフローでは、Figma、After Effects、Unityをまたぐ複雑な引き継ぎが必要でした。デザイナーはAfter Effectsで詳細なアニメーションを作成していましたが、それらは静的な動画のままでした。そのビジョンをUnity上でインタラクティブかつ検証可能な状態に変換するには、通常エンジニアに丸3日かかっていたのです。

Diagram illustrating the legacy UI development process before utilizing ProtoPie. The workflow moves from Screen Design in Figma to Video Mocks in Adobe After Effects, and finally to Unity Implementation. A callout highlights key pain points of this workflow: the inability to verify usability with video only and the high cost of sharing animations with engineers.

実装がようやく届いても、たいていは「惜しいが完璧ではない」という状態でした。ボタンの跳ね返りが少し遅れる、連打時にぎこちない、といった微妙な問題は珍しくありませんでした。修正のたびにさらに3日サイクルが発生するため、デザイナーは最も野心的なアイデアを自主的に抑えるようになり、「革新的」よりも「安全」な解決策を選びがちになっていきました。

その結果:創造的なボトルネックは才能の不足ではなく、反復にかかる高コストによって生じていました。

3日から90秒へ:ProtoPieによるプロトタイピング

QualiArtsは、ビルド前のモバイルゲームプロトタイプ検証の主要ツールとしてProtoPieを採用しました。決め手となったのは、ProtoPieがIDOLY PRIDEの非常に複雑なレベルアップ演出を、最終的なUnity実装と見分けがつかないほど正確に再現できたことでした。

ProtoPieを使えば、検証サイクルは3日からわずか90秒へと短縮されました。コードを1行も書かずに、デザイナーは同期表示、パーティクルエフェクト、ハプティックフィードバックを含む高度なインタラクションを構築し、それらをiPhoneのようなデバイスへ即座にプッシュできます。

現在のワークフローは、タップし、0.03秒調整し、もう一度タップして確認するだけです。デザイナーは自分が納得するまで反復します。これにより、チームはデザイン段階で人間工学上の問題やAndroid固有のパフォーマンスボトルネックも発見でき、静的なモックアップでは決して表面化しない課題を捉えられます。

Screen recording of the ProtoPie Studio interface showing the timeline and interaction panel. A designer adjusts specific animation curves and timing parameters for the game UI, demonstrating the ability to rapidly iterate on detailed interaction rules without coding.

デザイナーとエンジニアの間の「伝言ゲーム」に終止符を打つ

最も大きな変化は「ハンドオフ」段階で起こりました。ProtoPieのHandoff機能は、デザイナーのインタラクションから、実装可能で正確な仕様を自動生成します:

  • 正確なタイミング:「速くして」ではなく「0.18秒」。

  • 正確なイージング:「バウンスさせて」ではなく「Cubic-bezier関数」。

  • 明示的な値:スケール、不透明度、座標遷移の具体的な数値。

その結果、モバイルゲームのプロトタイピングワークフローでは、翻訳の過程で失われるものが何もなくなります。

その違いは、誰かに「青く塗って」と伝えるのと、具体的なHEXコードを渡すのと同じくらい明白です。エンジニアはもはや意図を読み解いたり、果てしないSlackスレッドで確認を追いかけたりする時間を無駄にしません。

レイアウトにはFigma、インタラクションにはProtoPie、ハンドオフにはProtoPie Cloudを組み合わせることで、QualiArtsはアニメーションのレビュー時間を70%短縮しながら、99%のプロダクト忠実度を実現しました。

Chart titled 'Efficiency gains and seamless integration powered by ProtoPie' detailing four key workflow improvements. The section covers: 1) Rapid Interaction Testing on real devices for instant feedback, 2) Streamlining internal proposals using dynamic UI prototypes with Figma integration, 3) Smooth Handoff to engineers using interaction recipes and URLs, and 4) Building Hi-Fi Prototypes with intuitive controls to define animation rules.

文化の変化:自信を持ってデザインする

QualiArtsにおけるProtoPieの影響は、ワークフロー効率を超えています。チームのデザインへの向き合い方そのものを根本から変えました。

かつてはエンジニアの稼働を守るためにアイデアを抑えていたデザイナーも、今では自由に実験し、野心的なプロトタイプを提案できます。プレイヤーがプレミアムな体験を期待するIDOLY PRIDEでは、パララックス効果や多層表示からコンテキストに応じたマイクロインタラクションまで、あらゆるUI要素が、Unityコードが1行も書かれる前にProtoPieで何百回も検証されています。

その精度は非常に高く、最終実装後でさえ、デザイナーでさえProtoPieのプロトタイプと本番環境を見分けるのに苦労することがあります。

ProtoPieは、スピードと品質のトレードオフを過去のものにしました。QualiArtsは単にプロトタイプを作っているだけではありません。モバイルゲームのプロトタイプが達成できること、そして自信を持ってリリースするとはどういうことかを再定義したのです。

Side-by-side comparison GIF showing the IDOLY PRIDE game interface. The left panel shows the 'ProtoPie' prototype, and the right panel labeled 'Real Device' (実機) shows the final implementation. The animation demonstrates that the high-fidelity prototype is visually indistinguishable from the actual game running on a smartphone, highlighting the accuracy of QualiArts' design-to-development workflow.

チームでProtoPieの実力を体験してください