プリンセスコネクト！Re:Dive 制作事例 ～UIを高速かつ高品質に作るためのプロトタイプ開発のススメ！～

2018/08/24 CEDEC 2018

Transcript

1. © Cygames, Inc. / 102 1 1 ～UIを高速かつ高品質に作るためのプロトタイプ開発のススメ！～ 株式会社Cygames 佐々木拓夢／齋藤友梨子 プリンセスコネクト！Re:Dive 制作事例
2. © Cygames, Inc. / 102 2 2 概要 •プリンセスコネクト！Re:Dive（以後プリコネR） の制作事例を元に、新規開発の際に課題となった 高品質なUIを短時間で作る方法を、組織的な取り 組みを交えながらご紹介します。 •作品コンセプトを実現するために、UIデザイナー としてアプローチした手法や考え方を、具体的に 解説します。
3. © Cygames, Inc. / 102 3 3 自己紹介 Sasaki Takumu 佐々木 拓夢 Yuriko Saito 齋藤 友梨子 ゲームアートディレクター UIデザイナー 2014年より新卒として株式会社Cygamesに所属。 数多くの大型タイトルにて、イラストレーション業務 に従事。「プリンセスコネクト！Re:Dive」ではUI・ UXや2Dアニメーション等のデザイン業務を担当。 現在はゲームアートディレクターとしてデザイン全般 の監修を担当する傍ら、 UI・UXデザイン等の開発環境の改善にも努めている。 ファッション業界にてブランディングマネージャー として活躍後、ソーシャルゲーム開発会社を経て 2015年より株式会社Cygamesに所属。 前作「プリンセスコネクト！」のUIデザインを担当 後、新規プロジェクトに従事しながら 「プリンセスコネクト！Re:Dive」の開発に合流。 UIチームのリーダーとして開発フローの整備とグラ フィックを担当。
4. © Cygames, Inc. / 102 4 4 アジェンダ UIデザイン編 プロトタイピング編 はじめに
5. © Cygames, Inc. / 102 5 5 プリコネRについて • 2018年2月15日リリース • 2015年2月よりAmeba(ブラウザ)にて配信されていた「プリン セスコネクト！」の続編 • iOS/Android/PCにて配信中
6. © Cygames, Inc. / 102 6 6
7. © Cygames, Inc. / 102 7 7 本作のコンセプトは
8. © Cygames, Inc. / 102 8 8 アニメRPG
9. © Cygames, Inc. / 102 9 9 アニメRPGとは？ • アニメとRPGが融合し、アニメを観ているかのようなゲーム体験 を目指した • 膨大なストーリーアニメと専用カットインアニメ • アニメパートとゲームパートがシームレスに移行する仕掛け
10. © Cygames, Inc. / 102 10 10 アジェンダ UIデザイン編 はじめに プロトタイピング編
11. © Cygames, Inc. / 102 11 11 UIデザイン編
12. © Cygames, Inc. / 102 12 12 本作におけるUIの目指したもの
13. © Cygames, Inc. / 102 13 13 ゲームパートでストレスを与えずに アニメに没入してもらうこと
14. © Cygames, Inc. / 102 14 14 プリコネRのUIが目指したもの ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素
15. © Cygames, Inc. / 102 15 15 ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素 プリコネRのUIが目指したもの
16. © Cygames, Inc. / 102 16 16 ストレスのない画面遷移 ロード時間を高速化することで ストレスのない画面遷移に プリコネRは周回ゲーム 反復操作が多い 同じ画面を何度も通過する 様々な機能に遷移して遊ぶ タップ数＆指の移動量を少なく アニメーションはシンプル＆なめらか 小刻みに時間を使って遊べるように
17. © Cygames, Inc. / 102 17 17 ストレスのない画面遷移 ロード時間の高速化に デザイナーがどう取り組んだか
18. © Cygames, Inc. / 102 18 18 ストレスのない画面遷移 ①各画面で使いまわせるデザインの徹底 ②階層によって共通素材の比率を変える デザイナーができる ロード高速化のためのデザイン的工夫
19. © Cygames, Inc. / 102 19 19 各画面でつかいまわせるデザイン デザイン的な工夫① ストレスのない画面遷移 ～デザイン的工夫①～
20. © Cygames, Inc. / 102 20 20 ストレスのない画面遷移 ～デザイン的工夫①～ プリコネRは背景がアニメやイラストなど多種多様 各画面でつかいまわせるデザイン 画面ごとにパーツを用意せず、多様な種類の 背景でも成立するデザインを作成
21. © Cygames, Inc. / 102 21 21 明るい背景 暗い背景 ストレスのない画面遷移 ～デザイン的工夫①～
22. © Cygames, Inc. / 102 22 22 階層によって共通素材の比率を変える デザイン的工夫② ストレスのない画面遷移 ～デザイン的工夫②～
23. © Cygames, Inc. / 102 23 23 第一階層 第二階層 第三階層以降のページ 共通素材率低 ストレスのない画面遷移 ～デザイン的工夫②～ 階層が深くなるにつれ共通素材率を高くする 共通素材率中 共通素材率高
24. © Cygames, Inc. / 102 24 24 第一階層 ストレスのない画面遷移 ～デザイン的工夫②～ 第一階層は共通素材が少なくアニメも使ったリッチな構成 頻繁にユーザーの目に触れる箇所は専用素材の割合が多い
25. © Cygames, Inc. / 102 25 25 第一階層 ストレスのない画面遷移 ～デザイン的工夫②～ 共通素材 専用素材 第一階層は共通素材が少なくアニメも使ったリッチな構成
26. © Cygames, Inc. / 102 26 26 第二階層 ストレスのない画面遷移 ～デザイン的工夫②～ 第二階層は共通素材の割合は約60%程度 必要な部分だけ専用素材にしその他は共通素材で構成
27. © Cygames, Inc. / 102 27 27 第二階層 ストレスのない画面遷移 ～デザイン的工夫②～ 第二階層は共通素材の割合は約60%程度 共通素材 専用素材
28. © Cygames, Inc. / 102 28 28 第三階層 ストレスのない画面遷移 ～デザイン的工夫②～ 第三階層ではほぼ100％が共通素材で構成 不必要な専用素材を増やさず共通素材で構成し容量削減
29. © Cygames, Inc. / 102 29 29 第三階層 ストレスのない画面遷移 ～デザイン的工夫②～ 第三階層ではほぼ100％が共通素材で構成 共通素材 専用素材
30. © Cygames, Inc. / 102 30 30 • 各画面で使いまわせるデザイン • 階層によって共通素材の比率を変える 容量を減らしてロード時間の短縮化しつつ 使いまわし感を抑制 ストレスのない画面遷移 ～デザイン的工夫～
31. © Cygames, Inc. / 102 31 31 まとめ • ゲーム内の多様な画面に使い回せる素材を作り容量を 削減、ロード時間を高速化させる事が重要 • ユーザーが良く見る箇所は専用素材、それ以外は共通 素材で制作し、高速化とクオリティのバランスを保つ ストレスのない画面遷移
32. © Cygames, Inc. / 102 32 32 ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素 プリコネRのUIが目指したもの
33. © Cygames, Inc. / 102 33 33 迷わない設計 迷わない設計とは
34. © Cygames, Inc. / 102 34 34 迷わない設計 攻略情報がいらないこと
35. © Cygames, Inc. / 102 35 35 迷わない設計 攻略情報がいらないためには • 行き止まりがないように感じる • 何をすれば良いかすぐにわかる • 目標を見失わずにプレイできる
36. © Cygames, Inc. / 102 36 36 迷わない設計 ロード時間高速化により 隙間時間で遊びやすくなっている より隙間時間に遊びやすいように、どこから 始めても迷わず何をすれば良いのかすぐにわ かる設計にする必要がある さらに
37. © Cygames, Inc. / 102 37 37 ミッション ユーザーの想定経路を検証し作成 クエスト選択 バトル 勝利 ミッション 詰まるポイントを調査 • 詰まる可能性がある画面には必ず「強くなるため」の導線を作成 • どんな状況でもメインサイクルが行き止まることがないようにする 迷わない設計 ～行き止まりをなくす～
38. © Cygames, Inc. / 102 38 38 キャラ一覧 キャラ強化 装備入手 クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 灰：メイン キャラ強化のメインサイクル 迷わない設計 ～行き止まりをなくす～
39. © Cygames, Inc. / 102 39 39 ユーザーがよく行き来する場所 • クエスト画面（装備を集める） • キャラ強化画面（あつめた装備を使う） キャラ強化の遷移をさらに検証 ユーザーが良く遷移する画面に 迷わず行き止まりなく周回できる導線を作成 迷わない設計 ～行き止まりをなくす～
40. © Cygames, Inc. / 102 40 40 キャラ一覧 キャラ強化 装備入手 クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 素材収集サイクルも行き止まることがない設計で迷わない 迷わない設計 ～行き止まりをなくす～ アイテムの収集のみを迷わず繰り返せる 灰：メイン 赤：素材収集
41. © Cygames, Inc. / 102 41 41 キャラ一覧 キャラ強化 装備入手 クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 迷わない設計 ～行き止まりをなくす～ キャラ強化のみを迷わず繰り返せる キャラ強化サイクルも行き止まることがない設計で迷わない 灰：メイン 青：キャラ強化
42. © Cygames, Inc. / 102 42 42 キャラ一覧 キャラ強化 装備入手 クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 繰り返せる すべてのサイクルが行き止まることがない設計で迷わない 迷わない設計 ～行き止まりをなくす～ 灰：メイン 青：キャラ強化 赤：素材収集
43. © Cygames, Inc. / 102 43 43 元居た画面を見失わないように ポップアップを利用 • 機能1つに対しベース画面は1つ • 派生機能はポップアップで重ねる • 画面遷移しないので元の画面を見失わない 迷わない設計 ～元の画面を見失わない～
44. © Cygames, Inc. / 102 44 44 ベース ポップアップ1 ポップアップ2 ポップアップ3 迷わない設計 ～元の画面を見失わない～
45. © Cygames, Inc. / 102 45 45 ポップアップ1 ポップアップ2 ポップアップ3 複数の画面で同じポップアップの使い回しが可能 ▼装備作成の場合 ▼メインクエストの場合 ポップアップ2 ポップアップ3 ベース ベース 迷わない設計 ～元の画面を見失わない～
46. © Cygames, Inc. / 102 46 46 経路の途中には必ず解を用意 複数の方法でよりわかりやすくする 先に進む導線のボタンは青色 NO YES マークで未クリアのコンテンツを知らせる 迷わない設計 ～解を用意～
47. © Cygames, Inc. / 102 47 47 迷わない設計 まとめ • ユーザーが良く遷移する場所にどこからでも行けるよう にする事で迷わせない • 元の画面を見失わない遷移方法にこだわる事で現在地を わかりやすくする • 先に進むための導線を色や全く同じ演出にする事で感覚 でプレイしても迷わず先に進めるようにする
48. © Cygames, Inc. / 102 48 48 プリコネUIの目指したもの ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素
49. © Cygames, Inc. / 102 49 49 魅力的なグラフィックとは 魅力的なグラフィック
50. © Cygames, Inc. / 102 50 50 魅力的なグラフィック アニメRPGだとわかるUI
51. © Cygames, Inc. / 102 51 51 魅力的なグラフィック アニメRPGだとわかるUI • キャラクターと世界観に触れる機会が多い • UIを見ただけでプリコネRとわかる
52. © Cygames, Inc. / 102 52 52 キャラクターと世界観に触れる機会が多い キャラクターの躍動感や個性を できる限り大きく取り込んだUIにする 魅力的なグラフィック ～キャラと世界観に触れる～
53. © Cygames, Inc. / 102 53 53 Before キャラの絵が小さくて魅力が充分に伝わらない… 魅力的なグラフィック ～キャラと世界観に触れる～
54. © Cygames, Inc. / 102 54 54 After キャラが魅力的に見える! 魅力的なグラフィック ～キャラと世界観に触れる～
55. © Cygames, Inc. / 102 55 55 UIを見ただけでプリコネRとわかる アニメーションをそのままUIにする 魅力的なグラフィック ～アニメRPGだとわかるUI～
56. © Cygames, Inc. / 102 56 56 Before 画面が止まっていてアニメRPGらしさがない 魅力的なグラフィック ～アニメRPGだとわかるUI～
57. © Cygames, Inc. / 102 57 57 After アニメをUIに用いることでアニメRPGらしさが出た 魅力的なグラフィック ～アニメRPGだとわかるUI～
58. © Cygames, Inc. / 102 58 58 よりアニメRPGに合うＵＩを作るために 魅力的なグラフィック ～世界観に合ったデザイン～ 世界観に合ったデザインを作成 さらに
59. © Cygames, Inc. / 102 59 59 悪目立ちするUI 悪目立ちしないUI 魅力的なグラフィック ～世界観に合ったデザイン～
60. © Cygames, Inc. / 102 60 60 悪目立ちするUI アニメの塗りと単一なキャラの主線に似合う加工にする 悪目立ちしないUI 魅力的なグラフィック ～世界観に合ったデザイン～
61. © Cygames, Inc. / 102 61 61 世界観に合ったUIデザインを作るために 服の色は #ffffffではなく 少しだけ色味が 入っている UIの白も #ffffffではなく 少しだけ色味を 入れている UI素材に 実際に使った色 ペコリーヌから スポイトした色 キャラクターの色味やゲーム内背景の影の入れ方などを 参考にしUIの色味や加工を決める 魅力的なグラフィック ～世界観に合ったデザイン～
62. © Cygames, Inc. / 102 62 62 まとめ • 機能的なだけではなくキャラクターの魅力とユーザー の接点をどれだけ増やせるデザインにできるかが重要 • アニメーションをUIに導入する場合、UIそのものを アニメの塗りや主線などアニメとの親和性を重視した デザインにすることが大切 魅力的なグラフィック
63. © Cygames, Inc. / 102 63 63 UIデザイン編のまとめ ①ストレスのない画面遷移 • ロード時間の高速化のため使い回せる素材を作り容量を削減 • 使い回し感の抑制にユーザーの見る頻度別に使う素材を選択 ②迷わない設計 • ユーザーの経路を想定し行き止まりのない遷移を作成 • 遷移演出（ポップアップ）や色彩設計で現在地をわかりやすく ③魅力的なグラフィック • キャラクターの魅力とユーザーの接点を増やす • アニメをどう生かすかに主体を置きUIとの親和性を重視
64. © Cygames, Inc. / 102 64 64 プロトタイピング編 プロトタイプを使って高品質なUIを高速に作る方法
65. © Cygames, Inc. / 102 65 65 本作におけるプロトタイピング 早い段階で試作を開発し課題を検証する手法
66. © Cygames, Inc. / 102 66 66 本作におけるプロトタイピングの目的 最終的には高品質なUIを高速で作るということ 早い段階で評価・検証をすることで手戻りを減らす 様々な視点による評価でUIを高品質化 UIデザインにおけるプロトタイピングの目的
67. © Cygames, Inc. / 102 67 67 プロトタイプ制作 実装 クロスレビュー A/Bテスト 本作におけるプロトタイピング プロトタイピング全体フロー
68. © Cygames, Inc. / 102 68 68 本作におけるプロトタイピング プロトタイプ制作 実装 クロスレビュー A/Bテスト プロトタイピング全体フロー
69. © Cygames, Inc. / 102 69 69 プロトタイプ制作 ～忠実度の選択～ 低忠実度 高忠実度 早い・簡易的 遅い・本物風
70. © Cygames, Inc. / 102 70 70 プロトタイプ制作 ～忠実度の選択～ • 高速にデザイン作成できる • 見た目の良し悪しではなく機能性を確認するもの ＝遷移確認用の簡易的なプロトタイプ 低忠実度
71. © Cygames, Inc. / 102 71 71 プロトタイプ制作 ～忠実度の選択～ • アニメーションやトランジションの確認ができる • 手触りの部分も確認できる • 作り込みが必要な分高コスト ＝よりゲームに近い見た目のプロトタイプ 高忠実度
72. © Cygames, Inc. / 102 72 72 プロトタイプ制作 ～忠実度の選択～ 低忠実度 プロトタイプ 高忠実度 プロトタイプ 開発初期 開発中期 開発後期 ・高速に概要を詰めたい ・画面設計を行いたい ・ラフでもOK ・手触りを改善したい ・アニメーションを調整したい ・製品に近い状態 開発フェーズ別の忠実度選択基準
73. © Cygames, Inc. / 102 73 73 プロトタイプ制作 ～忠実度の選択～ 「ゲーム体験」を改善して高品質なUIが作りたい 高忠実度のプロトタイプを採用
74. © Cygames, Inc. / 102 74 74 プロトタイプ制作 ～高忠実度の弱点解消術～ 忠実度が上がるほど感覚的な部分の検証が可能になるが、 比例してコストが高まっていく アニメーションの作り込みが必要 コーディングが必要 プロトタイプを作り込むと再現が大変 時間がかかる 高品質のUIを作るための高忠実度プロトタイプだが・・・
75. © Cygames, Inc. / 102 75 75 プロトタイプ制作 ～高忠実度の弱点解消術～ Adobe Animateを採用 An
76. © Cygames, Inc. / 102 76 76 プロトタイプ制作 ～高忠実度の弱点解消術～ Animateはアニメーションツールなので、動きの作り込みが容易 コーディングが(基本)不要 Animateで制作したFlashデータをUnityに移植する内製ツール Adobe Animateをプロトタイプ制作に選んだ理由①
77. © Cygames, Inc. / 102 77 77 FlashToUnityとは An Animate(Flash)データを UnityのPrefabに変換する社内ツール 複雑な調整を加えても そのままUnity上で再現ができる
78. © Cygames, Inc. / 102 78 78 プロトタイプ制作 ～高忠実度の弱点解消術～ Flashをそのまま実機にビルドすることができる 高忠実度プロトタイプを実現できるツールが少なかった Animateで高忠実度プロトタイプを高速に開発 Adobe Animateをプロトタイプ制作に選んだ理由②
79. © Cygames, Inc. / 102 79 79 プロトタイプ制作 ～高忠実度の弱点解消術～ 実際のプロトタイプ
80. © Cygames, Inc. / 102 80 80 プロトタイプ制作 ～さらなる高速化～ UIアニメーションプリセット ・専用のキャンバス上にあらかじめよく使うアニメーションを用意 効率化に加え、クォリティの安定化を図ることができる
81. © Cygames, Inc. / 102 81 81 レビュー
82. © Cygames, Inc. / 102 82 82 レビュー 制作したプロトタイプを評価 • 複数の視点により高品質化するために2種類のレビューを実施 プロトタイプ制作 実装 クロスレビュー A/Bテスト
83. © Cygames, Inc. / 102 83 83 クロスレビュー
84. © Cygames, Inc. / 102 84 84 クロスレビューとは？ プロトタイプを職種問わず触り、評価・検証をすること ・さまざまな視点を通すことによって、改善案をより見つけやすくする ・実機で確認することによって精度の高い評価が可能 プロトタイプ制作 実装 クロスレビュー A/Bテスト
85. © Cygames, Inc. / 102 85 85 クロスレビューの流れ 1.デザイナー 2.プランナー・エンジニア 3. 社内スタッフ
86. © Cygames, Inc. / 102 86 86 1.デザイナーが評価する点 ☑キャラクターと世界観が魅力的か ☑操作性 ☑統一性 -キャラクターと世界観を魅力的に表現できているか。可愛さを十分に伝えられているか -ボタンが無理のない位置に収まっているか -他の画面とデザイン、表現、操作性などに統一性があるか。設計ルールは守られているか ☑演出・アニメーションの品質 -演出・アニメーションの品質が担保されているか。ユーザーにストレスを与えていないか
87. © Cygames, Inc. / 102 87 87 クロスレビューの流れ 1.デザイナー 2.プランナー・エンジニア 3.社内スタッフ
88. © Cygames, Inc. / 102 88 88 2.プランナー・エンジニアが評価する点 ☑仕様(プランナー) ☑実装難易度（エンジニア） ☑わかりやすさ -当初プランナーが想定していた仕様を満たしているか。抜け漏れはないか -実装難易度の算出、手法の検証 -どこを操作すればいいのか理解できるか。使いづらい部分は無いか -デザイナー以外のスタッフによる初めてのレビュー
89. © Cygames, Inc. / 102 89 89 クロスレビューの流れ 1.デザイナー 2.プランナー・エンジニア 3.社内スタッフ
90. © Cygames, Inc. / 102 90 90 3.社内スタッフが評価する点 ☑わかりやすさ ☑操作性 -初見でもどこを操作すればいいか理解できるか。使いづらい部分は無いか -ボタンの位置など、操作しづらい部分は無いか ☑初めて見た印象 -その他、初見で対象の画面を見た際に抱いた感想など
91. © Cygames, Inc. / 102 91 91 クロスレビューを通して 徹底したユーザー目線に立つのが重要
92. © Cygames, Inc. / 102 92 92 A/Bテスト
93. © Cygames, Inc. / 102 93 93 A/Bテストとは？ 社内の無作為のメンバーに対して、アンケートを実施 プロトタイプ制作 実装 クロスレビュー A/Bテスト • クロスレビューを実施したうえで２つの案で悩んだ場合に実施 • A,Bどちらのデザインが最も早く目的を達成できたかを調査 • 軽微なデザインの差に向いている
94. © Cygames, Inc. / 102 94 94 A/Bテストとは？ A案 B案 ・ボタンの組み方をテストした例 ・B案の方が使いやすそうという意見が多かった
95. © Cygames, Inc. / 102 95 95 実装 クロスレビュー、A/Bテストを経て、実装に回る プロトタイプ制作 クロスレビュー 実装 A/Bテスト
96. © Cygames, Inc. / 102 96 96 プロトタイピングの導入で考慮すべき事項 ☑修正、試行錯誤の期間を決める ☑ゴールを明確にする ☑プロトタイプも実機で確認する プロトタイプは試行錯誤の回数を何回重ねられるかが重要。どの画面をいつまでに終わら せるのかという認識を関係者全員でもつことが重要。 プロトタイプの制作前にこの画面はどこまで作り込む必要があるかという認識を関係者 全員でもつことが重要。 ついPC上での確認で済ませてしまいがちですが、本実装したのちに端末で触ってみると 使いづらいということも。
97. © Cygames, Inc. / 102 97 97 プロトタイプ編まとめ
98. © Cygames, Inc. / 102 98 98 プロトタイプ編のまとめ • 手触りを改善するためのプロトタイピングにおいては、 UIデザイナーが最も精度の高い調整ができる高忠実度の プロトタイピングを採用すべき • UIデザインのプロトタイピングは、手触りの改善を早い 段階で行う事で、手戻りを大幅に減らせる • UIデザインのプロトタイピングは、感覚的な部分を言語 化しやすくする効果があり、結果的にユーザー目線での 具体的な改善につながりやすくなる
99. © Cygames, Inc. / 102 99 99 プロトタイプ編のまとめ プロトタイプによって試行錯誤を高速化することで 結果的に高品質なUI開発ができた
100. © Cygames, Inc. / 102 100 100 本作の開発を通じて
101. © Cygames, Inc. / 102 101 101 本作の開発を通じて • 本作ではアニメRPGというコンセプトのもと、全員がその 問いに向かって全力で試行錯誤をした • ユーザーが本当に最も求めているものを実現するために、 UI観点で出来ることは何なのかを常に各々が考えて実行 • ゲーム性、キャラクター、世界観などの魅力を最大限に引 き上げるのがUIデザイナーの仕事
102. © Cygames, Inc. / 102 102 102 最後に 開発スタッフは プリコネが大好きです！