『Proto Pie』Riot Gamesでの導入事例～Youtube翻訳のまとめ
今年の８月。
Riot GamseによるProtopie導入事例の紹介動画がYoutubeにアップロードされました。Protopieは、UI/UXデザインやモーションプロトタイピングのためのデザインツールです。
ChatGPTに助けを借りつつ、動画の要点をまとめました。
フル翻訳版はこちら↓
ProtoPie Livestream: Game UX/UI Prototyping with Riot Games
Riot Games や ProtoPie の紹介
イントロダクション
・ジュリア（ProtoPieのプロダクトマーケティングマネージャー）が司会を担当
・Riot Gamesのロバート・イグナシア（インタラクションデザインのリード）
・ProtoPieのシニアビジネスディベロップメントマネージャー、ジョージ・フィリップス
・ロバートがRiot GamesにおけるゲームUX/UIプロトタイピングについてプレゼン予定
・ジョージがProtoPieがゲームプロトタイピングに適している理由を説明予定
・最後にQ&Aセッションを予定
Riotの企業紹介と、タッチポイントを大事にしている話
ロバートは、寿司シェフからデザイナーへのキャリア転身を経て、現在Riotでモーションデザインのリードを務めています。彼の紹介によると、Riotは「プレイヤーに焦点を当てたゲーム会社」であり、業界で最も愛されているゲームを開発しているとのことです。
Riotの代表作には『リーグ・オブ・レジェンド』や、人気の『ヴァロラント』があり、どちらも無料でプレイ可能
Riotはeスポーツの分野でも先駆者であり、『チャンピオンズ』や『ワールズ』などの大規模な大会を開催
さらに、Netflixとの提携で制作されたアニメ『アルケイン』も非常に高評価を得ており、Riotの幅広い影響力を示しています。
Riotは、ゲーム内だけでなく、ゲーム外の体験やプレイヤーとの接点（アカウント管理、ソーシャル機能、ウェブサイト、クライアントなど）も同じように重要視している、と彼は強調しました。
タッチポイント：
ユーザーが製品やサービスと接触するあらゆる場面やポイント。 ウェブサイト、アプリ、カスタマーサポート、広告、ソーシャルメディアなど、ユーザー体験に関わる全ての接点が含まれる。
インタラクションデザイナーの役割
ロバートは、これから紹介するプロジェクトはチームとのコラボレーションの成果であり、一部は試行やビジョンワークであることを説明しました。彼の言葉によれば、Riotにおけるインタラクションデザインは、ビジュアル、サウンド、UX/UIが完璧に融合する「魔法の瞬間」を生み出すものです。
a.スケーラブルなインタラクションやコンポーネントのライブラリ開発
デザインシステムの一環として、再利用可能なコンポーネントを作成し、効率を向上させる
b.UX/UIプロトタイピング
機能を示しテストを行うためのプロトタイプを構築し、意思決定の指針となる
c.リサーチと改善
プレイヤーからのフィードバックをもとに、デザインを洗練させる
これらの取り組みは、ブランドの価値を表現するインタラクションデザインに繋がり、Riotらしさを確立するためにブランドチームと密接に協力しています。
さらに詳しく
まず、スケーラブルなインタラクションライブラリの構築。
ロバートはモーションデザインを担当し、他のチームと協力して、カラーパレットやアイコンデザイン、声のトーンなどの要素をまとめたデザインシステム「プレイ」を管理しています。これにより、開発者は必要なコンポーネントを簡単に使えるようになります。
次に、UIプロトタイピング。
Riotのゲームは多様で、FPSや格闘ゲーム、そして多言語対応が必要です。そのため、すべてのゲームに合うスケーラブルで直感的なインタラクションデザインが求められます。
「Sティアの瞬間」とは、プレイヤーがゲームに入る前からワクワクし、ゲームに没入する準備が整う瞬間です。この瞬間をデザインで作り出すことが、インタラクションデザイナーの重要な仕事の一つです。
最後に、リサーチと改善。プレイヤーのフィードバックをもとにデザインを改善し、より良い体験を提供するために何度も繰り返し調整します。
Sティアの瞬間：
プレイヤーにとって特に印象的で感動的な体験を指し、ゲームの中で最高の品質や感動を与える場面
どうしてProtoPieを採用しているのか？
ProtoPieを導入する前、RiotではFigmaからAfter Effectsに移行し、MP4ファイルを生成して開発者に渡すという非効率的なワークフローを使用していました。この手法では、インタラクティブ性がなく、フィードバックを得るのが困難でした。
ProtoPieを導入したことで、以下のような利点が得られました。
インタラクティブなプロトタイプ：
開発者が直接操作でき、スロー再生でモーションの細部を確認できるため、フィードバックが迅速に得られる。
ゲームパッドのサポートやLottieアニメーションの活用：
複数のデバイス間での操作や細かいアニメーションの制御が可能になり、プロトタイプに「楽しさ」を加えられる。
再利用可能なコンポーネント：
カードやナビゲーションなどを作成して他のデザイナーが素早くプロトタイプを作成できる。
リンク共有による効率化：
ProtoPieのリンクをSlackなどで共有し、簡単にフィードバックを収集。
コミュニティとサポート：
ユーザーのリクエストに応じて新機能が迅速に実装され、Riot独自のモーションカーブも追加された。
このように、ProtoPieの導入によってRiotのワークフローは大きく改善されました。
ProtoPieのデモ
モバイルナビゲーションのプロトタイプとリアルタイムイベントのシミュレーションが紹介されました。モバイルナビゲーションのプロトタイプでは、2段階のフィルタリングやカラー変更、ビデオプレビューなど、細かいインタラクションが含まれています。また、リアルタイムイベントでは、特定の瞬間に報酬を受け取るシナリオをテストできるように設計されています。
・ナビゲーションデザインの反復：
Riotでは、ナビゲーションデザインを100通り以上試行し、最も心地よいものを見つけるために多くの反復作業を行っています。
・ハイファイなプロトタイプ：
クライアントのスタートアップ画面のプロトタイプには、動画再生やマウスオーバー時のビデオプレビューなど、感情を引き出すための細かいディテールが含まれています。
ProtoPieを使うことで、時間と労力を大幅に節約でき、リアルなプロトタイプを通じて、ステークホルダーやリーダーシップチームに効果的な提案が可能になったと結論づけています。
ProtoPieを選ぶ利点
ProtoPieはデザインと開発チーム間のコミュニケーションを円滑にし、高忠実度のプロトタイプを作成できる点が大きなメリットです。これにより、ゲームのUX/UIを迅速に設計し、早期にフィードバックを得て、反復がスムーズになります。
従来のプロセスでは複数のツールを使用していたため、開発前にコーディングが必要だったり、手間のかかるハンドオフが必要でしたが、ProtoPieを導入することでこれらの課題が解消されました。
・コードなしで高忠実度プロトタイプを作成
デザイナーがより早く、かつ正確にプロトタイプを作成でき、複数のデバイスでテストを実施可能。
・FigmaインポートやLottieアニメーションの活用
インタラクティブなプロトタイプを簡単に作成でき、Lottieファイルやビデオを活用することで細かなアニメーションを加えることができます。
・再利用可能なコンポーネントライブラリ
協力作業を促進し、効率的にプロトタイプを作成できる。
・ProtoPieはUnityやUnreal Engineと直接統合できるため、開発プロセス全体もスムーズに進みます。ゲームだけでなく、他の業界でも重要なプロトタイピングツールとして活用されており、デザインサイクルを半分に短縮し、ユーザーテストも容易に行えます。
最後に、ProtoPieを使用することで、ゲームのプレゲーム、ゲーム内、ポストゲームの全てのフェーズにおいて、現実的でインタラクティブなデザインを実現します。
Q&Aより10問抜粋
１）ProtoPieにサウンドを組み込む方法
サウンドをデザインにどのように組み込んでいますか？
サウンドエフェクトを使用するためのライブラリやウェブサイトはありますか？
Riotには社内のサウンドチームがあり、ゲーム向けやプラットフォーム向けに適したサウンドを作成している。ProtoPieでは、仮にAppleやGoogleのマテリアルサウンドライブラリからサウンドをダウンロードし、プロトタイプで使用。サウンドチームにプロトタイプを共有し、最終的なサウンドを作成する。
２）ハンドオフ（ProtoPieに対するエンジニアの反応）
エンジニアへの最初のハンドオフ体験はどのようなものでしたか？
ProtoPieリンクを受け取った際、エンジニアたちはどのような反応をしましたか？
シームレスなプロセスにするために追加の取り組みが必要でしたか？
最初にProtoPieのリンクを渡した際、エンジニアたちはすぐに使えることに驚き、非常に直感的で便利だと感じていた。従来のビデオファイルの受け渡しよりもはるかに効率的で、エンジニアからも好評だった。
３）マイクロインタラクションの組み込み方
マイクロインタラクション、特にアニメーションはどのように製品に組み込まれていますか？
どのようなアセットを生成して、どのように統合されていますか？
アニメーションは、まずUIの上にフレームバイフレームで手描きで作成し、それをAfter Effectsでアニメーション化する。最終的にはLottieを使用してJSONファイルを作成し、ProtoPieに取り込んで、トリガーに応じて動作するように設定している。
通常はフレームバイフレームでベクタリングを行い、Lottieファイルとしてエクスポートし、ProtoPieに統合するというプロセスを採用している。
Lottie： JSONベースのアニメーションファイル形式。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できる。 https://lottiefiles.com/jp/what-is-lottie
４）ProtoPieの学習ハードルは高い？低い？
ProtoPieの学習コストは高いですか？
学習期間はどのように管理されましたか？
ProtoPieの学習コストは低め。Riotは学習時間をサポートしてくれ、ProtoPie 101のコースやオンラインチュートリアルを活用した。最初に難しいゲームパッドのプロトタイプを作成し、それをクリアすると他の作業は簡単に進められた。
５）FigmaとProtoPieのデータの移行について
FigmaとProtoPieのワークフローでは、デザインが常に最新の状態で同期されていますか？
FigmaからProtoPieへの移行は効率的です。
ProtoPieには名前認識機能があり、同じ名前のコンポーネントは自動的に入れ替えられます。また、インタラクションのルールセットに基づいて作業できるため、スムーズに進行します。複雑なデザインの場合でも、静的な画像として扱うことでプロトタイプが軽くなり、更新が容易です。
６）モーション製作はUIとUXのどっちが主導するの？
UX、UI、モーションデザインが協力する際、それらを統合し、統一された体験にするためのビジョンは誰が主導しますか？
Riotでは、UX、UI、モーションデザインが協力して進める。
特定のチームが一方的に主導するのではなく、UXがアイデアを出し、ビジュアルデザインが形にし、インタラクションデザインが最終仕上げを行う。全員で意見を出し合い、アジャイルなプロセスで最適な解決策を見つける形で進行する。
７）ProtoPieが解決した問題と、未解決の問題は？
ProtoPieを使うことで解決された問題はありますか？
未解決の課題や追加してほしい機能はありますか？
ProtoPieが解決した問題:
・複数のツールを使用した非効率なワークフローを改善できた。
・インタラクティブで高忠実度のプロトタイプを迅速に作成できるようになった。
・開発チームとのコミュニケーションがスムーズになり、ハンドオフが容易になった。
まだ解決していない課題や要望:
・グラデーションのサポートがない。
・ゲームパッドのテストをProtoPie Connectなしで行えるようにしてほしい。
・ストロークやトリムパスのアニメーションなど、細かい線の制御機能が不足している。
・右クリック機能が追加され、より多くの操作ができるようにしてほしい。
８）ProtoPieで行った変更はリアルタイムで反映される？
デザインツールで行ったアップデートは、リアルタイムでプロトタイプに反映されますか？
デスクトップでの変更をモバイルビューアですぐに確認できますか？
保存後、モバイルビューアや他のデバイスでもすぐに反映されます。
QRコードの再スキャンやページのリフレッシュを行うだけで、最新の状態が確認できます。
９）なぜFigmaを使わないのか？
なぜFigmaだけでプロトタイピングをせず、ProtoPieを使うのですか？
ProtoPieを使う理由は、Figmaでは再現できない複雑なプロトタイプを作成できるからです。Figmaでは画面ごとに状態をデザインする必要がありますが、ProtoPieではルールを設定して複数のシナリオをカバーできます。
また、ProtoPieではレンダリング待ち時間が発生しないため、作業が非常にスムーズに進みます。
10）(ProtoPieの) UnrealやUnityとの連携は？
UnrealやUnityとの統合はどのように機能していますか？
Riotで使用していますか？
RiotではUnrealとの統合は試していないが、ProtoPieがUnrealやUnityとの統合をサポートしていることは確認している。ProtoPieは、Unity用のプラグインとProtoPie Connectを提供しており、WebGLビルドをUnityのプロトタイプにシームレスに統合できる。
これにより、インタラクティブで没入感のあるプロトタイプが作成可能。
また、Unreal Engine 5とも統合されており、今後試す予定だ。
この記事が気に入ったらサポートをしてみませんか？