『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 の紹介

登壇者紹介

(00:03) こんにちは、皆さん。ProtoPieとRiot Gamesを使ったゲームUX/UIプロトタイピングに関するこのエキサイティングなライブ配信へようこそ。始める前に、皆さんがどこから参加しているか教えてください。チャットに移動して、どこから視聴しているかを教えてください。全員のチャット機能を有効にしましたので、メッセージを投稿できるはずです。さあ、どこから参加しているか教えてください。多くの方々が参加してくれていますね。エイドリアン、アラン、アルベルト、たくさんの方が参加しています。チャットでメッセージを入力してください。こんにちは、チュニジアからのご参加です。

---
(00:46) ロンドンから参加のMed FAOさん、ボンジュール、ウゴさん、参加ありがとう。ビ（またはオルビ？）さん、アーバインからのカイさん、UKからのジョナサンさん、ギリシャからこんにちは。コロンビアからこんにちは。おお、今日は大勢の視聴者がいますね。ドイツからのマックスさん、韓国のソウルからありがとうございます。韓国では今2時です。ジョンさん、こんにちは。はい、引き続き皆さんの場所をチャットで教えてください。皆さんと親しくなりたいです。

---
(01:33) 私はジュリアです。ProtoPieのプロダクトマーケティングマネージャーを務めており、今日のセッションをリードします。今日のライブ配信では、Riot Gamesという著名なゲーム開発者兼パブリッシャーを特集します。Riot Gamesは『リーグ・オブ・レジェンド』などのマルチプレイヤーオンラインゲームで世界的に知られています。非常に光栄なことに、Riot Gamesでプロダクト＆インタラクションデザインのリードを務めるロバート・イグナシアさんをご紹介します。ロバートさん、挨拶していただけますか？

---
(02:07) 「こんにちは、皆さん。ご参加ありがとうございます。ここに参加できてうれしいです。」ロバートさん、ありがとうございます。今日はジョージ・フィリップスさんも参加しています。ジョージさんはProtoPieのシニアビジネスディベロップメントマネージャーです。ジョージさん、視聴者の皆さんに挨拶していただけますか？ 「はい、こんにちは、皆さん。私はジョージ・フィリップスです。ジュリアが言った通り、私も一生涯ゲーマーであり、『リーグ・オブ・レジェンド』の大ファンです。個人的にもロバートさんが何を共有してくれるか非常に楽しみにしています。」

---
(02:42) では、その興奮をさらに高めましょう。今日のアジェンダを確認します。ロバートさんがRiot GamesでのゲームUX/UIプロトタイピングプロセスについてのプレゼンテーションをリードします。その後、ジョージさんが、ProtoPieがゲームプロトタイピングやHi-Fiプロトタイピングにとって優れた選択肢である理由をいくつか説明します。そして、いつものように、Q&Aセッションを最後に設けますので、皆さんの質問を取り上げます。発表中もぜひアクティブに参加し、Q&Aセクションから質問を送信してください。最後にそれらをすべてカバーします。

---
(03:15) では、今日カバーすることがたくさんあるので、ロバートさんにマイクをお渡しします。画面共有を停止します。はい、適切な画面が共有されていることを願います。はい、共有されていますね。すごいですね。では始めましょう。今日はRiot Gamesでのインタラクションデザインについてお話しします。Riot GamesでProtoPieを使用してプロトタイプを作成する方法をいくつか紹介し、Riotでインタラクションデザインをどのように定義しているかをお見せします。また、日常的に使用しているいくつかの重要な機能を紹介し、最後にRiotで行っているクールな仕事をいくつかお見せします。

Riotの企業紹介と、コミュニティやタッチポイントを大事にしている話

(03:55) では、始めましょう。まず、私自身について少しお話しします。私はフロリダ出身で、現在はカリフォルニアのRiotのメインキャンパスで働いています。デザイナーになる前は、長年寿司シェフをしていました。現在は10年以上のモーションとビジュアルデザインの経験があり、様々なプロダクトで働いてきました。過去3年間は、Riotでモーションデザインのリードを務めており、とても楽しい時間を過ごしています。

---
(04:27) Riotについてはジュリアから素晴らしい紹介がありましたが、簡単に説明すると、Riotは業界で最も愛され、影響力のあるゲームを生み出していることで知られています。当社のゲームは世界中の何百万人ものプレイヤーに楽しまれており、4,000人を超える非常に才能ある社員が働いています。Riotの使命は、「プレイヤーに最も焦点を当てたゲーム会社」であり続けることです。私たちは、すべての取り組みでプレイヤーの期待を上回ることを目指しており、これはプレイヤーを愛しているからです。当社には、ゲームに対して非常に情熱的な素晴らしいコミュニティがあり、イベントにも熱心に参加してくれます。

---
(04:58) では、そのプレイヤーが愛しているゲームとは何か？　皆さんご存知の『リーグ・オブ・レジェンド』がその代表的なゲームです。私たちのゲームはすべて無料でプレイできます。また、最近ゲームコミュニティで人気を集めているタクティカル・ファーストパーソンシューター『ヴァロラント』も手掛けています。さらに、Riotはeスポーツの分野でも先駆者的存在であり、世界で最も大規模で権威のある大会をいくつも開催しています。『チャンピオンズ』や『ワールズ』は非常に盛り上がるイベントで、参加を強くお勧めします。

---
(05:27) 私たちはNetflixとのパートナーシップで『アルケイン』という小さなショーも制作しました。このショーは驚くほど好評で、Rotten Tomatoesで100％の評価を得ています。私は個人的にアニメーションの大ファンで、このショーの制作が私のRiotでのキャリアのハイライトの一つでした。では、Riotについてお話ししたので、次はRiotでのインタラクションデザインについて深掘りしましょう。

---
(06:01) Riotでは、ゲーム外の体験やゲームに至るまでのすべてのタッチポイント※も、ゲーム内と同じくらい重要視しています。これらのタッチポイントには、アカウント管理、チャットやゲームのプレゼンスといったソーシャル機能、そして私たちのゲームを宣伝するウェブサイトや、Riotクライアント、Riotモバイルが含まれます。

タッチポイント：
ユーザーが製品やサービスと接触するあらゆる場面やポイント。
ウェブサイト、アプリ、カスタマーサポート、広告、ソーシャルメディアなど、ユーザー体験に関わる全ての接点が含まれる。

インタラクションデザイナーの役割

(06:30) ここで簡単にディスクレイマー※をします。これからお見せする仕事は、すべて私個人の作品ではなく、多くの素晴らしいデザイナーとのコラボレーションによるものです。私は最終的な仕上げとしてプロトタイプを作成し、一部の貢献をしていますが、これは多くの人々の努力の成果です。また、これからお見せするプロジェクトは、Riotが将来実現を約束しているわけではなく、一部は単なる試行やビジョンワークです。

---
(07:00) では、インタラクションデザインについて話します。Riotでのインタラクションデザインは、ビジュアルデザイン、サウンドデザイン、UX/UIのすべてが完璧に融合する「魔法の瞬間」のようなものだと考えています。これは、モーションの原則やビジュアルデザインの原則を深く理解する必要があります。また、ボタンに触れると、それらの要素が美しい瞬間にまとまる「触覚フィードバック」を生み出すとき、それが私たちにとってのインタラクションデザインです。

---
(07:32) さらに、インタラクションデザインは、ブランド表現がドキュメント化された価値になる瞬間でもあります。私たちはブランドチームと密接に協力し、コンセプトやアートディレクションを動きや形、UIデザインに翻訳し、Riotらしさを表現しようとしています。プロジェクトの最終レンダリングの外側では、多くの地道な作業が必要です。多くの場合、それはファイルや個々の要素の集まりであり、それらが一つにまとまるのです。

---
(08:02) では、Riot Gamesにおけるインタラクションデザイナーの具体的な責任について詳しく見ていきましょう。インタラクションデザイナーの主な責務は、大きく3つの分野に分かれます。1つ目は、スケーラブルなインタラクションやコンポーネントのライブラリの開発と貢献です。いわゆるデザインシステムとして、あらかじめ定義されたコンポーネントを作成し、作業効率を向上させます。これにより、アニメーションやサウンド、トランジションの再利用が容易になります。

---
(09:14) 2つ目はUX/UIプロトタイピングのフェーズです。これは、おそらくインタラクションデザイナーの最も重要な部分で、機能を示し、テストを行うためにプロトタイプを構築します。これらのプロトタイプは、意思決定を促し、私たちが目指すコンセプトの具体的な証拠を提供します。最後の部分はリサーチと改善です。これは、ユーザーテストの段階で、プレイヤーからのフィードバックを得て、デザインを洗練させるプロセスです。

ディスクレイマー：
一般的に免責条項や注意書きを指す。

さらに詳しく

(10:21) では、各分野について少し詳しく見ていきましょう。まず、スケーラブルなインタラクションライブラリの構築についてです。先ほども言いましたが、すべてのパーツを私一人で作るわけではなく、あくまでライブラリの一部を担当しています。私の主な貢献はモーションデザインですが、Riotではアイコンのデザインにも携わっています。これに加え、カラーパレットや声のトーン、全体的な美学など、多くの要素が他のチームによって管理されています。

---
(10:53) これらのすべてのコンポーネントは、私たちのデザインシステム「プレイ」と呼ばれるドキュメンテーションに細かく記録されています。開発者はこのシステムにアクセスし、トークンやモーション値、コンポーネントを取得します。では次に、UIプロトタイピングとビジョンキャスティングについて話しましょう。いくつかの楽しい例をお見せします。

---
(11:27) 私たちが作成するモーション言語やUI/UXは、すべてのIP（知的財産）に対応できるように、スケーラブルで包括的である必要があります。私たちはFPSゲームやトップダウン視点のゲーム、2v2の格闘ゲームなど、さまざまなプロパティを持っているため、これらにフィットする直感的なインタラクションを作成する必要があります。私たちは、14以上の言語に対応し、世界中のプレイヤーに向けた製品を提供しているため、グローバルなニーズも考慮しています。

---
(12:02) さらに、私たちはプレイヤーに「Sティアの瞬間※」を提供することを目指しています。これらはプレイヤーがゲームに入る前から興奮するような、感情豊かな体験を意味します。つまり、ゲームに向かう過程でプレイヤーの期待を高め、すでにゲームに没入する準備が整う瞬間を作り出すのです。研究と改善についてですが、私たちのデザインをより良いものにするためには 、反復が非常に重要です。プレイヤーからのフィードバックを収集し、データに基づいて改善を行います。

Sティアの瞬間：
プレイヤーにとって特に印象的で感動的な体験を指し、ゲームの中で最高の品質や感動を与える場面

どうしてProtoPieを採用しているのか？

(13:05) では、なぜProtoPieなのか、RiotがなぜProtoPieを使用するのかについて話しましょう。まず、ProtoPieを使用する前は、私たちは一般的なワークフローであるFigmaからAfter Effectsに移行し、長いレンダリング時間を待っていました。最終的には非常に重いMP4ファイルを得て、それをGoogle Sheetsのような形式で開発者に提供していました。しかし、これはインタラクティブ性に欠け、フィードバックを得るのが難しいものでした。

---
(14:17) 問題点としては、複数のプログラムを使用する断片化されたワークフロー、既存のコンポーネントを再利用できないこと、開発者との手間のかかるやり取りが挙げられます。そこで、私たちは新しいツールを試し、最終的にProtoPieを選びました。約2年間使用してきましたが、ProtoPieは私たちのワークフローを革命的に変えました。リンクを送るだけで、開発者がすぐにプロトタイプを操作でき、レンダリング時間も必要ありません。

---
(16:29) ProtoPieの最大の利点の一つは、開発者が実際に操作できるプロトタイプを提供できることです。また、開発者が個々のモーション値を確認し、動作をスロー再生することも可能です。これにより、迅速なフィードバックを得ることができ、プロトタイプの品質が向上します。さらには、パスワード保護されたリンクを使用して安全にテストを行うこともでき、ワークフローが非常に効率的になりました。

---
(17:30) では、Riotで使用しているProtoPieの重要な機能について説明します。まず、ゲームパッドのサポートです。ProtoPie Connectを使用すると、複数のデバイス間で通信が可能になります。これは、認証やメニュー操作において非常に便利です。また、Lottieアニメーションのサポートも非常に役立っています。細かいアイコンアニメーションなど、デザインにわずかな「楽しさ」を加えるための要素を細かく制御できるため、ProtoPieは非常に貴重です。

---
(19:12) さらに、再利用可能なコンポーネントも大きな利点です。私たちは、カードやソーシャルナビゲーションなど、再利用可能なコンポーネントを作成しており、これにより他のデザイナーが迅速にプロトタイプを作成できるようになっています。また、リンクを共有できることも非常に大きな利点です。これにより、Slackで簡単にプロトタイプを共有し、すぐにフィードバックを得ることができます。

---
(20:36) 最後に、ProtoPieチームからのサポートも素晴らしいです。Jeffさんは特に私が困っているときに何度も助けてくれました。フィードバックを聞き入れてくれる活発なコミュニティがあり、新機能のリクエストが実際にアプリに反映されることもあります。例えば、Riotでは独自のモーションカーブを使用していますが、その機能は私たちがリクエストしてから数ヶ月後に実装されました。

ProtoPieのデモ

(21:36) では、いくつかのデモをお見せしましょう。左側には、複雑なモバイルナビゲーションのプロトタイプがあります。フィルタリングのレベルが2段階あり、カラー変更やビデオプレビューもあります。右側には、リアルタイムイベントをシミュレートするプロトタイプがあります。これは、特定の瞬間に報酬を受け取るようなシナリオをテストするためのものです。

---
(22:37) 次に、より実践的な例として、ナビゲーションのデザインの反復についてお話しします。Riotのような企業では、ナビゲーションのデザインを100通り以上試し、最も心地よいものを見つけるために多くの反復作業を行います。

---
(23:02) さらに、非常にハイファイなプロトタイプの例もお見せします。これは、クライアントのスタートアップ画面で、感情を引き出すための複雑なプロトタイプです。動画が再生され、マウスオーバー時にビデオプレビューが表示されるなど、多くの細かいディテールが組み込まれています。

---
(24:35) 結論として、ProtoPieは私たちのワークフローに大きな影響を与え、時間と労力を大幅に節約しました。手渡しが容易になり、反復作業もスムーズに行えるようになりました。リアルなプロトタイプが作成できることで、感情を引き出し、社内のステークホルダーやリーダーシップチームに提案を成功させることができるようになりました。

---
(25:01) これが私の発表の結びです。ご清聴ありがとうございました。

ProtoPieを選ぶ利点

(26:21) ジョージさん、どうぞ。
はい、ジュリアさん、ありがとうございます。
そして再度、ロバートさんもありがとうございました。ロバートさんが紹介してくれた通り、UXとUIはゲーム開発プロセスにおいて非常に重要です。それは、初めてのユーザー体験を改善し、プレイヤーを引きつけ、最終的には、デザインを気に入ったプレイヤーが長期的に定着することを可能にします。ProtoPieを使用しないと、デザインと開発チーム間のコミュニケーションが難しくなり、制作コストが増加し、低い忠実度のプロトタイプによる遅い反復プロセスを経なければならなくなります。また、ユーザーテストを行う前にすでにコーディングを始める必要があり、社内のステークホルダーの承認を得るためにも手間がかかります。そして、複数のツールを使用すると、ハンドオフプロセスが混乱を招きやすくなります。ロバートさんも同意すると思います。

---
(26:54) ProtoPieを使用することで、デザイナーはコードなしで高忠実度のプロトタイプを作成できるようになります。これにより、デザイナーはゲームのUIをより迅速に作成し、より早く反復を行うことが可能です。また、開発に入る前に、複数のデバイスでエンドユーザーや社内のステークホルダーとテストを行うことができます。内蔵のハンドオフプロセスにより、開発チームは必要なすべての詳細を把握し、最初から正確に作成できるようになります。また、ProtoPieはUnityやUnreal Engineに直接統合する機能も提供しており、これにより、開発プロセス全体がスムーズに進行します。

---
(27:54) Riot GamesのチームがどのようにProtoPieの機能を使用して日々の作業を改善しているかをご紹介しました。ProtoPieは、Figmaインポートを利用してインタラクティブなプロトタイプを作成し、Lottieファイルやビデオをアニメーションに取り入れ、コンポーネントライブラリを使用して協力し、共有リンクやパスワード保護されたリンクでユーザーテストを行い、ゲームコントローラーとマルチスクリーンインタラクションをProtoPie Connectでテストすることができます。

---
(28:28) ゲーム分野では、ProtoPieはデザインプロセス全体を向上させます。プレゲームではメニューやストアフロント、ローンチャーとして、ゲーム内ではHUD UIやメニューとして、ポストゲームではリキャップやロビーとして使用されます。また、ProtoPieはゲームだけでなく、他の業界にも非常に適しています。特に、Hi-Fiプロトタイピングは、さまざまな業界でますます重要なステップとなっており、UX/UIデザインプロセスにおいて不可欠なものとなっています。

---
(29:03) ProtoPieを使用せずにプロトタイプを作成すると、デザインサイクルが長くなり、静的なプロトタイプではインタラクティブ性が制限され、ユーザーフィードバックを適切に取得するのが難しくなります。ProtoPieを使用することで、デザインプロセスのサイクルを半分に短縮し、開発前に迅速に反復と検証を行うことができ、開発チームへのハンドオフもより効率的になります。さらに、効果的なユーザーテストが可能となり、インタラクティブで現実的なデザインが実現します。

---
(29:36) もしProtoPieに興味がある方は、ぜひQRコードをスキャンして、私たちのエキスパートとのデモセッションを予約してください。それでは、私からの紹介は以上です。

(30:22) ジョージさん、ProtoPieがなぜ高忠実度プロトタイピングやゲームプロトタイピングにとって強力な選択肢であるか、再度思い出させてくれてありがとう。それでは、待望のQ&Aセッションを始めます。Q&Aウィンドウを開きますね。チャットにも書きましたが、質問には投票することができます。

Q&A

Q&A1：ProtoPieにサウンドを組み込む方法

(30:22) まず最初の質問は「サウンドをデザインにどのように組み込んでいますか？サウンドエフェクトをデザインに使用するためのライブラリやウェブサイトはありますか？」という質問です。ロバートさん、お答えいただけますか？

---
(30:51) 素晴らしい質問ですね。Riotにはサウンドデザインチームがあります。私たちの音楽ビデオ制作の取り組み、『K/DA』やリル・ナズXとのコラボレーションなどで、一部の人は私たちを音楽制作会社と勘違いしているかもしれません。しかし、私たちには社内のサウンドチームがいて、多くのサウンドを制作しています。彼らは、例えば『リーグ・オブ・レジェンド』のようなゲーム向けのサウンドはゲームらしいと判断し、プラットフォームレベルではより中立的なサウンドが必要だと決めることもあります。

---
(31:18) ただ、その前に私たちは通常、Appleのクリック音のような一般的なサウンドをライブラリからダウンロードしてきます。そして、それらのサウンドをProtoPieでコンポーネントに割り当てて、トリガーとして使用します。サウンドチームにProtoPieのリンクを送り、『こんな感じのサウンドが欲しい』といった例を見せて、彼らがそれを元に最終的なサウンドを作ります。それをProtoPieで置き換え、いくつかのバージョンを試して、どれが一番しっくりくるかを見極めます。

---
(31:47) なので、結論としては、私はよくインターネットからサウンドを引っ張ってきて、最終的なサウンドができるまでの間、仮に使っています。AppleのサウンドライブラリやGoogleのマテリアルサウンドライブラリなどを使うと良いと思います。

Q&A2：ゲーム業界に入りたい質問者へアドバイス

(32:21) ありがとうございます、ロバートさん。次の質問はジョージ・LROさんからで、彼はUXデザイナーで、ゲーム開発の経験がありません。ゲーム業界に足を踏み入れるためのアドバイスやステップを教えてください。

---
良い質問ですね。私もよくこの質問を受けます。私が通常言うのは、まず多くの異なる経験が得られる場所で働くことをお勧めします。現在はゲーム業界にいますが、過去にはディズニーの『マジックバンド』など、さまざまなプロダクトに関わってきました。異なる分野での経験を積むことで、最終的に一つの分野、例えばゲームに集中するときに、それらの経験が役立ちます。

---
(32:51) ゲームが好きなら、まずUnreal Engineを学んでおくことをお勧めします。チュートリアルを通して学ぶことは、キャリアに大きな利益をもたらすでしょう。また、広範なクライアントに対応するUXの経験を積むことも大切です。始めたばかりの人には、いきなり自分の好きな会社の社内ポジションに応募するのではなく、まずエージェンシーで働くことを勧めます。エージェンシーでは、低賃金でも多くの経験を積むことができますし、クライアント向けの仕事をこなすことでスキルが磨かれます。

---
(33:18) 私自身、エージェンシーで働き始めたことで、さまざまな分野での経験を得ることができ、それが今のキャリアに大きな役割を果たしています。兄弟にも同じアドバイスをしましたし、彼も3Dアーティストとして成功しています。

Q&A3：ハンドオフ※１（ProtoPieに対するエンジニアの反応）

(33:44) ロバートさん、ありがとうございます。質問にお答えいただきました。次の質問はホノンさんからで、ハンドオフについての質問です。エンジニアへの最初のハンドオフ体験はどのようなものでしたか？また、ProtoPieリンクを初めて受け取った際に、エンジニアたちはどのような反応をしましたか？シームレスなプロセスにするために、追加の取り組みが必要でしたか？

---
(34:22) 素晴らしい質問です。最初にリンクを渡したとき、エンジニアたちはそれがすぐに使えることに驚いていました。彼らは『これ、ずっとこうだったの？』と興奮していました。それまではレンダリングしたビデオファイルを渡す方法しかなかったので、ProtoPieリンクがどれほど便利かすぐに理解されました。基本的に、彼らにとって非常に直感的で使いやすいものでした。

ハンドオフ：
デザインや開発のプロセスで、デザイナーからエンジニアに作業を引き継ぐ段階のこと。デザイン仕様、インタラクション、アセットなどの情報が含まれる。

Q&A4：ハンドオフ２（Google Sheetsを使ってる話）

(34:52) ありがとうございます。次の質問もハンドオフに関連しています。Marlonさんからで、『Google SheetsでのドキュメントはNotionで行われているのでしょうか？』という質問です。

---
(35:29) いいえ、それはGoogle Sheetsで行われています。RiotではGoogleのスイートを使用していますので、リンクやファイルはすべてGoogle Driveを通じて共有しています。

Q&A5：顧客ジャーニー※を向上させるための工夫

(35:29) ありがとうございます。では、次の質問です。『Riotは新しい機能や顧客のジャーニーをさらに向上させるために、どのような検証手法を使用していますか？』という質問です。」

---
(36:08) 素晴らしい質問ですね。私たちは通常、ユーザーテストルームで質問を行ったり、実際にユーザーが私たちの製品を操作するのを見たりして、フィードバックを集めます。たとえば、ユーザーが操作して『これ、最高！』という反応をする瞬間を見ることもあります。私たちは、他の製品をテストする際に一般的に行う方法を取り入れています。つまり、『使いやすかったか？』『理解しやすかったか？』『混乱した部分はあったか？』といった標準的なテスト項目を調査チームとともに確認します。そして、その結果をフィードバックとして記録し、反映します。

---
(36:40) また、私たちはユーザーのニーズや希望に耳を傾けることが重要だと考えています。ただ単に新機能を開発するだけではなく、長い間求められていたものを提供することが私たちの目的です。私がモバイルチームにいた頃、アプリのレビューをチェックして、ユーザーがどの部分を気に入っていて、どの部分を改善してほしいと思っているのかを常に確認していました。それを記録して、次のデザインに反映させるようにしました。」

---
(37:06) 他の企業と同様、ユーザーのフィードバックを大事にし、それに基づいて改善を進めるのが私たちのスタイルです。特別な方法というよりも、ユーザーフィードバックを重視するプロセスです。

顧客ジャーニー：
顧客が商品やサービスを知り、購入・利用するまでの一連の体験プロセス。認知、検討、購入、アフターケアなどのステップが含まれる。

Q&A6：マイクロインタラクション※の組み込み方

(37:41) ロバートさん、ありがとうございます。次はMarlon Franceさんからの質問です。『マイクロインタラクション、特にアニメーションはどのように製品に組み込まれていますか？どのようなアセットを生成して、どのように統合されていますか？』という質問です。

---
(37:41) 非常に良い質問ですね。より表現力豊かでVFXに重点を置いたものの場合は、まずUIの上にフレームバイフレームで手描きで描くことがよくあります。それを元に、After Effectsでアニメーション化し、最終的にはLottieを使用してエクスポートします。Lottie※のJSONファイルを作成し、ProtoPieに取り込んで、トリガーに応じて動作するように設定しています。

---
(38:11) 私たちのプロセスでは、通常、フレームバイフレームのベクタリングを行い、それをLottieファイルとしてエクスポートし、ProtoPieに統合するという流れです。より複雑なアニメーションのために、他のツールを使用することも検討していますが、現時点では主にこのプロセスを採用しています。

マイクロインタラクション：
ユーザーインターフェース内で行われる小さな操作や反応のこと。
ボタンを押したときに起きるエフェクトやアニメーション、通知音など

Lottie：
JSONベースのアニメーションファイル形式。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できる。
https://lottiefiles.com/jp/what-is-lottie

Q&A7：ProtoPieの学習ハードルは高い？低い？

(38:54) ありがとうございます。それでは次の質問です。ProtoPieを使用する際の学習曲線についてですが、多くの視聴者がProtoPieを初めて使用する際の学習曲線について興味を持っているようです。特にリアルタイムプロジェクトでの使用を開始する際、学習期間はどのように管理されましたか？Riotはあなたのトレーニング期間をサポートしましたか？

---
(39:25) これは良い質問ですね。正直に言うと、私自身もある程度は個人的な時間を使って勉強しましたが、Riotは非常にサポートしてくれました。私はインタラクションツールのオーディションを行いたいと伝え、学習時間をもらいました。Riotでは新しいツールや技術を試すための時間が与えられます。実際に、ProtoPie 101のコースを受講して、基本的なフレームワークを学びました。

---
(39:52) デザイナーとして、ツールは常に進化していきますので、新しいものを学ぶことに慣れています。ProtoPieについては、非常に多くのドキュメントやオンラインチュートリアルがあり、かなり早く使いこなせるようになりました。特に、最初に作成したプロトタイプはゲームパッド用のグリッドナビゲーションでしたが、これは非常に難易度が高かったので、それを乗り越えた後は他のプロトタイプ作成がとても簡単に感じられました。

---
(40:19) テレビのリモコンのようなグリッドナビゲーション※は非常に複雑です。しかし、それを最初に学んだことで、他のプロトタイプを作成する際には非常にスムーズに進みました。

グリッドナビゲーション：
画面上の要素を格子状に配置し、ユーザーが矢印キーなどで上下左右に移動して操作する方式

Q&A8：FigmaからProtoPieへの移行について

(40:58) ありがとうございます、ロバートさん。次の質問は、FigmaとProtoPieのワークフローについてです。異なる反復の中で、どのようにデザインが常に最新の状態で同期されているのですか？

---
(41:32) FigmaからProtoPieへの移行は非常に効率的です。デザインに変更が加えられた場合、ProtoPieは名前認識の機能を持っているため、同じ名前のコンポーネントがある場合、自動的に入れ替えることができます。視覚的なコンポーネントに焦点を当てるのではなく、インタラクションのルールセットに基づいて作業することができるため、作業が非常にスムーズです。

---
(41:59) さらに、複雑なデザインの場合、例えばニュースフィードのようなものは、すべてがインタラクティブでない限り、静的な画像として扱うことができます。これにより、プロトタイプが軽くなり、デザインの更新が非常に簡単になります。

Q&A9：モーション製作はUIとUXのどっちが主導するの？

(42:29) ありがとうございます。次の質問はカール・バレットさんからです。『UX、UI、モーションデザインが協力する際、それらを統合し、統一された体験にするためのビジョンを誰が主導しますか？』という質問です。

---
(43:05) 素晴らしい質問ですね。ある企業では、UXがプロジェクトを主導することが多いと思いますが、Riotではそれぞれの役割がしっかりとした会話を通じて協力しています。UXチームがアイデアを考え、ビジュアルデザインがそのアイデアを形にし、最終的に私たちインタラクションデザインが仕上げを行います。その後、全員でジャムセッションを行い、アイデアを練り直すプロセスがあります。

---
(43:35) 「例えば、UXが『このアコーディオンメニューはあまり心地よくないかも』と言えば、それを調整します。私たちはアジャイルなプロセスを採用しており、全員が専門知識を持ち寄って最適な解決策を見つけようとします。ですので、誰かが一方的に主導するというよりも、全員で協力して進めていく形です。」

Q&A10：PC版ヴァロラントをコンソールでリリースするとき、
デザインライブラリにどのような影響があった？

(44:24) ありがとうございます。次はFabioさんからの質問です。『最近ヴァロラントがコンソール版でリリースされましたが、もともとPC向けに設計されたUX/UIライブラリにどのような影響がありましたか？デザインの検証から反復までのプロセスを教えてください』という質問です。

---

(45:06) 良い質問ですね。私自身はヴァロラントのチームに直接所属していませんが、モーショングラフィックのコミュニティに関わっています。Riotでは異なるプラットフォーム向けに、同じコンポーネントを最適化して作成しています。たとえば、コンソール用のUIは、画面が大きく、遠くからでも見やすいデザインが必要です。コンポーネントが強調されるべき部分は太く表示されるように調整されます。

---

(46:28) つまり、私たちはプ ラットフォームに応じてモーションライブラリやUIを調整し、デスクトップ、モバイル、コンソール向けに異なるバージョンを作成しています。また、各チームがデザインを更新する際には、それらの変更が他のチームにも反映されるようにコミュニケーションを取ることが大切です。

Q&A11：ProtoPieが解決した問題と、未解決の問題は？

(47:04) ありがとうございます。次は、ProtoPieに関する質問です。『ProtoPieを使うことで解決された問題はありますが、逆にProtoPieがまだ解決していない課題はありますか？ProtoPieに追加してほしい機能は何ですか？』という質問です。

---
(47:36) 良い質問ですね。私は以前、ProtoPieのCEOにリストを送ったことがありますが、覚えている限りでお答えします。例えば、私たちはゲームデザインで『グラデーション』を多用しますが、現在ProtoPieではグラデーションのサポートがありません。また、ゲームパッドがリンク内で直接使えるようになると、さらに便利になると思います。これにより、ProtoPie Connectを使用せずにプロトタイプをテストできるようになります。

---
(48:09) さらに、線の制御に関するもう少し細かい調整も欲しいですね。たとえば、ストロークのアニメーションやトリムパスのような効果を使えると、デザインの幅が広がります。ProtoPieはプロトタイピングツールとして非常に優れていますが、モーションデザインツールとしてはまだ改善の余地があります。

---
(49:05) そして、私がProtoPieに最も欲しい機能は『右クリック』です。右クリックを使って、より多くの機能にアクセスできるようになると非常に助かります。

Q&A11：デザインプロセスにおけるRiot独自の取り組みはありますか？

(49:49) ありがとうございます。ProtoPieチームとして、いただいたフィードバックはしっかりと共有させていただきます。では、次の質問です。『Riotでは、他の企業と比べて、デザインプロセスにおいて独自の取り組みを行っている部分はありますか？』という質問です。

---
(50:20) 実を言うと、Riotのデザインプロセスは他の企業と大きく変わることはありません。ただし、私たちが非常に大切にしているのは、品質の高さです。Riotでは、すべてのデザインが完璧であることを目指しています。例えば、リリース前に何度もテストし、最終的にクオリティが十分でなければ、リリースを取りやめることもあります。私たちのゲームが少数でありながら、非常に高い評価を得ているのは、そのような徹底したクオリティ管理が理由です。

---
(50:44) また、Riotではチーム全体が非常に協力的で、働きやすい環境が整っています。皆が助け合いながら最良の結果を目指しています。

Q&A12：ProtoPieを導入したプロセス

(51:22) ありがとうございます、ロバートさん。次の質問は、ProtoPieをRiotに導入したプロセスについてです。ProtoPieをRiotに持ち込む際、どのようなプロセスがありましたか？

---
これはとても良い質問ですね。新しいツールを導入する際には、まずその必要性をしっかり説明する必要があります。私はProtoPieを導入するために、ドキュメントを作成してRiot内のステークホルダーに対してプレゼンを行いました。たとえば、対象となるオーディエンスや課題、そしてどのようにProtoPieがその課題を解決できるかを詳細に説明しました。また、ジョージさんにも価格について問い合わせをしました。

---
(51:47) 新しいツールを導入する際には、しっかりとした準備が必要です。例えば、Figmaではこれができないが、ProtoPieではどのように改善できるかという点をしっかりと説明し、具体的な解決策を提案しました。幸いにも、私の提案は支持され、ProtoPieの導入が承認されました。

Q&A13：ProtoPieで行った変更はプロトタイプにリアルタイムで反映されるの？

(52:12) ありがとうございます。次はベンさんからの質問です。『デザインツールで行ったアップデートは、リアルタイムでプロトタイプに反映されますか？デスクトップ上で変更を行い、モバイルビューアでその違いをすぐに確認することは可能ですか？』という質問です。

---
良い質問ですね。ProtoPieでは、変更を保存すると、リンクが保存済みのマーク（チェックマーク）で表示されます。これが表示された時点で、プロトタイプが更新されているため、モバイルビューアや他のデバイスでもすぐに反映されます。非常にスムーズなプロセスです。

---
(52:46) その通りです。変更を保存してクラウドにアップロードすることで、QRコードを再スキャンしたり、ページをリフレッシュするだけで最新の状態が反映されます。

Q&A14：なぜFigmaを使わないのか？

(53:24) 次の質問です。『なぜFigmaだけでプロトタイピングをせず、ProtoPieを使うのですか？』という質問がありました。ロバートさん、お答えいただけますか？

---
良い質問ですね。ProtoPieを使う理由は、Figmaでは再現できないほど複雑なプロトタイプを作成できるからです。Figmaでは、画面ごとに異なる状態をデザインしなければなりませんが、ProtoPieではルールを設定することで、多くの異なるシナリオをカバーすることができます。

---
(53:54) さらに、ProtoPieではAfter Effectsなどのようにレンダリング待ち時間が発生しないため、作業が非常にスムーズです。これだけでもProtoPieを使う理由としては十分だと思います。

Q&A15：UnrealやUnityとの連携は？

(54:30) ありがとうございます。次の質問はAlanさんからです。『UnrealやUnityとの統合はどのように機能していますか？Riotで使用していますか？』という質問です。

---
正直に言うと、私はまだUnrealとの統合を試していません。しかし、ProtoPieがUnrealやUnityとの統合をサポートしているという話を聞いており、非常に興味を持っています。現時点では、ビデオやゲームのプロトタイプを作成する際に、ProtoPieを直接使用していますが、今後はUnrealとの統合を試してみたいと考えています。

---
(54:58) 補足として、ProtoPieはUnityとのシームレスな統合を提供しています。最近、Unity用のプラグインとProtoPie Connectをリリースしました。これにより、WebGLビルドをUnityのプロトタイプに統合することができ、非常にインタラクティブで没入感のあるプロトタイピングが可能になります。また、Unreal Engine 5とも統合されていますので、ぜひお試しください。

Q&A16：ProtoPie初学者へ学習アドバイス

(55:33) 次の質問です。『ProtoPieを使用し始めたばかりの人向けに、学習の進め方やリアルタイムプロジェクトでの使用についてのアドバイスはありますか？』という質問です。

---
非常に良い質問です。私が最初に行ったことは、ProtoPieの公式チュートリアルを受講することでした。それが私にとってのスタートポイントでした。ProtoPie 101のコースはとても役立ちました。その後、自分でプロトタイプを作成し、試行錯誤を繰り返しました。難しい最初のプロジェクトを乗り越えることで、他のプロトタイプ作成が楽になりました。

---
(56:10) ありがとうございます。ProtoPieを使う際のチャレンジや、今後追加して欲しい機能についての質問もありましたが、ロバートさんがすでにProtoPieに関するフィードバックを共有してくださったので、私たちProtoPieチームは今後もそのフィードバックを参考にして、製品を改善していきます。

エンディング

(56:46) それでは、ここで質問コーナーを締めくくります。ロバートさん、今日はたくさんの質問にお答えいただき、本当にありがとうございました。そして、皆さんにも感謝します。今日のセッションが皆さんのプロトタイピングの理解を深めるきっかけになったと思います。

---
(57:05) ジョージさん、プロトタイプの重要性についての説明もありがとうございます。ProtoPieは、Hi-FiプロトタイピングやゲームのUI/UXプロトタイピングにおいて、非常に強力なツールです。また、今日のセッションを成功に導いてくれたProtoPieチームの皆さんにも感謝します。次回のライブイベントでお会いできることを楽しみにしています。それでは、皆さん、ありがとうございました。

---
(57:35) ありがとうございました。

---
(57:40) ありがとうございました。皆さん、お疲れ様でした。