Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Cygames
August 24, 2018

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

2018/08/24 CEDEC 2018

Cygames

August 24, 2018
Tweet

More Decks by Cygames

Other Decks in Technology

Transcript

  1. © Cygames, Inc. / 102 2 2 概要 •プリンセスコネクト!Re:Dive(以後プリコネR) の制作事例を元に、新規開発の際に課題となった

    高品質なUIを短時間で作る方法を、組織的な取り 組みを交えながらご紹介します。 •作品コンセプトを実現するために、UIデザイナー としてアプローチした手法や考え方を、具体的に 解説します。
  2. © 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チームのリーダーとして開発フローの整備とグラ フィックを担当。
  3. © Cygames, Inc. / 102 5 5 プリコネRについて • 2018年2月15日リリース

    • 2015年2月よりAmeba(ブラウザ)にて配信されていた「プリン セスコネクト!」の続編 • iOS/Android/PCにて配信中
  4. © Cygames, Inc. / 102 9 9 アニメRPGとは? • アニメとRPGが融合し、アニメを観ているかのようなゲーム体験

    を目指した • 膨大なストーリーアニメと専用カットインアニメ • アニメパートとゲームパートがシームレスに移行する仕掛け
  5. © Cygames, Inc. / 102 14 14 プリコネRのUIが目指したもの ストレスのない 画面遷移

    迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素
  6. © Cygames, Inc. / 102 15 15 ストレスのない 画面遷移 迷わない設計

    魅力的な グラフィック アニメに没入できるゲームパートの達成要素 プリコネRのUIが目指したもの
  7. © Cygames, Inc. / 102 16 16 ストレスのない画面遷移 ロード時間を高速化することで ストレスのない画面遷移に

    プリコネRは周回ゲーム 反復操作が多い 同じ画面を何度も通過する 様々な機能に遷移して遊ぶ タップ数&指の移動量を少なく アニメーションはシンプル&なめらか 小刻みに時間を使って遊べるように
  8. © Cygames, Inc. / 102 20 20 ストレスのない画面遷移 ~デザイン的工夫①~ プリコネRは背景がアニメやイラストなど多種多様

    各画面でつかいまわせるデザイン 画面ごとにパーツを用意せず、多様な種類の 背景でも成立するデザインを作成
  9. © Cygames, Inc. / 102 23 23 第一階層 第二階層 第三階層以降のページ

    共通素材率低 ストレスのない画面遷移 ~デザイン的工夫②~ 階層が深くなるにつれ共通素材率を高くする 共通素材率中 共通素材率高
  10. © Cygames, Inc. / 102 24 24 第一階層 ストレスのない画面遷移 ~デザイン的工夫②~

    第一階層は共通素材が少なくアニメも使ったリッチな構成 頻繁にユーザーの目に触れる箇所は専用素材の割合が多い
  11. © Cygames, Inc. / 102 25 25 第一階層 ストレスのない画面遷移 ~デザイン的工夫②~

    共通素材 専用素材 第一階層は共通素材が少なくアニメも使ったリッチな構成
  12. © Cygames, Inc. / 102 26 26 第二階層 ストレスのない画面遷移 ~デザイン的工夫②~

    第二階層は共通素材の割合は約60%程度 必要な部分だけ専用素材にしその他は共通素材で構成
  13. © Cygames, Inc. / 102 27 27 第二階層 ストレスのない画面遷移 ~デザイン的工夫②~

    第二階層は共通素材の割合は約60%程度 共通素材 専用素材
  14. © Cygames, Inc. / 102 28 28 第三階層 ストレスのない画面遷移 ~デザイン的工夫②~

    第三階層ではほぼ100%が共通素材で構成 不必要な専用素材を増やさず共通素材で構成し容量削減
  15. © Cygames, Inc. / 102 29 29 第三階層 ストレスのない画面遷移 ~デザイン的工夫②~

    第三階層ではほぼ100%が共通素材で構成 共通素材 専用素材
  16. © Cygames, Inc. / 102 30 30 • 各画面で使いまわせるデザイン •

    階層によって共通素材の比率を変える 容量を減らしてロード時間の短縮化しつつ 使いまわし感を抑制 ストレスのない画面遷移 ~デザイン的工夫~
  17. © Cygames, Inc. / 102 31 31 まとめ • ゲーム内の多様な画面に使い回せる素材を作り容量を

    削減、ロード時間を高速化させる事が重要 • ユーザーが良く見る箇所は専用素材、それ以外は共通 素材で制作し、高速化とクオリティのバランスを保つ ストレスのない画面遷移
  18. © Cygames, Inc. / 102 32 32 ストレスのない 画面遷移 迷わない設計

    魅力的な グラフィック アニメに没入できるゲームパートの達成要素 プリコネRのUIが目指したもの
  19. © Cygames, Inc. / 102 35 35 迷わない設計 攻略情報がいらないためには •

    行き止まりがないように感じる • 何をすれば良いかすぐにわかる • 目標を見失わずにプレイできる
  20. © Cygames, Inc. / 102 36 36 迷わない設計 ロード時間高速化により 隙間時間で遊びやすくなっている

    より隙間時間に遊びやすいように、どこから 始めても迷わず何をすれば良いのかすぐにわ かる設計にする必要がある さらに
  21. © Cygames, Inc. / 102 37 37 ミッション ユーザーの想定経路を検証し作成 クエスト選択

    バトル 勝利 ミッション 詰まるポイントを調査 • 詰まる可能性がある画面には必ず「強くなるため」の導線を作成 • どんな状況でもメインサイクルが行き止まることがないようにする 迷わない設計 ~行き止まりをなくす~
  22. © Cygames, Inc. / 102 38 38 キャラ一覧 キャラ強化 装備入手

    クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 灰:メイン キャラ強化のメインサイクル 迷わない設計 ~行き止まりをなくす~
  23. © Cygames, Inc. / 102 39 39 ユーザーがよく行き来する場所 • クエスト画面(装備を集める)

    • キャラ強化画面(あつめた装備を使う) キャラ強化の遷移をさらに検証 ユーザーが良く遷移する画面に 迷わず行き止まりなく周回できる導線を作成 迷わない設計 ~行き止まりをなくす~
  24. © Cygames, Inc. / 102 40 40 キャラ一覧 キャラ強化 装備入手

    クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 素材収集サイクルも行き止まることがない設計で迷わない 迷わない設計 ~行き止まりをなくす~ アイテムの収集のみを迷わず繰り返せる 灰:メイン 赤:素材収集
  25. © Cygames, Inc. / 102 41 41 キャラ一覧 キャラ強化 装備入手

    クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 迷わない設計 ~行き止まりをなくす~ キャラ強化のみを迷わず繰り返せる キャラ強化サイクルも行き止まることがない設計で迷わない 灰:メイン 青:キャラ強化
  26. © Cygames, Inc. / 102 42 42 キャラ一覧 キャラ強化 装備入手

    クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 繰り返せる すべてのサイクルが行き止まることがない設計で迷わない 迷わない設計 ~行き止まりをなくす~ 灰:メイン 青:キャラ強化 赤:素材収集
  27. © Cygames, Inc. / 102 43 43 元居た画面を見失わないように ポップアップを利用 •

    機能1つに対しベース画面は1つ • 派生機能はポップアップで重ねる • 画面遷移しないので元の画面を見失わない 迷わない設計 ~元の画面を見失わない~
  28. © Cygames, Inc. / 102 44 44 ベース ポップアップ1 ポップアップ2

    ポップアップ3 迷わない設計 ~元の画面を見失わない~
  29. © Cygames, Inc. / 102 45 45 ポップアップ1 ポップアップ2 ポップアップ3

    複数の画面で同じポップアップの使い回しが可能 ▼装備作成の場合 ▼メインクエストの場合 ポップアップ2 ポップアップ3 ベース ベース 迷わない設計 ~元の画面を見失わない~
  30. © Cygames, Inc. / 102 46 46 経路の途中には必ず解を用意 複数の方法でよりわかりやすくする 先に進む導線のボタンは青色

    NO YES マークで未クリアのコンテンツを知らせる 迷わない設計 ~解を用意~
  31. © Cygames, Inc. / 102 47 47 迷わない設計 まとめ •

    ユーザーが良く遷移する場所にどこからでも行けるよう にする事で迷わせない • 元の画面を見失わない遷移方法にこだわる事で現在地を わかりやすくする • 先に進むための導線を色や全く同じ演出にする事で感覚 でプレイしても迷わず先に進めるようにする
  32. © Cygames, Inc. / 102 48 48 プリコネUIの目指したもの ストレスのない 画面遷移

    迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素
  33. © Cygames, Inc. / 102 51 51 魅力的なグラフィック アニメRPGだとわかるUI •

    キャラクターと世界観に触れる機会が多い • UIを見ただけでプリコネRとわかる
  34. © Cygames, Inc. / 102 61 61 世界観に合ったUIデザインを作るために 服の色は #ffffffではなく

    少しだけ色味が 入っている UIの白も #ffffffではなく 少しだけ色味を 入れている UI素材に 実際に使った色 ペコリーヌから スポイトした色 キャラクターの色味やゲーム内背景の影の入れ方などを 参考にしUIの色味や加工を決める 魅力的なグラフィック ~世界観に合ったデザイン~
  35. © Cygames, Inc. / 102 62 62 まとめ • 機能的なだけではなくキャラクターの魅力とユーザー

    の接点をどれだけ増やせるデザインにできるかが重要 • アニメーションをUIに導入する場合、UIそのものを アニメの塗りや主線などアニメとの親和性を重視した デザインにすることが大切 魅力的なグラフィック
  36. © Cygames, Inc. / 102 63 63 UIデザイン編のまとめ ①ストレスのない画面遷移 •

    ロード時間の高速化のため使い回せる素材を作り容量を削減 • 使い回し感の抑制にユーザーの見る頻度別に使う素材を選択 ②迷わない設計 • ユーザーの経路を想定し行き止まりのない遷移を作成 • 遷移演出(ポップアップ)や色彩設計で現在地をわかりやすく ③魅力的なグラフィック • キャラクターの魅力とユーザーの接点を増やす • アニメをどう生かすかに主体を置きUIとの親和性を重視
  37. © Cygames, Inc. / 102 67 67 プロトタイプ制作 実装 クロスレビュー

    A/Bテスト 本作におけるプロトタイピング プロトタイピング全体フロー
  38. © Cygames, Inc. / 102 68 68 本作におけるプロトタイピング プロトタイプ制作 実装

    クロスレビュー A/Bテスト プロトタイピング全体フロー
  39. © Cygames, Inc. / 102 70 70 プロトタイプ制作 ~忠実度の選択~ •

    高速にデザイン作成できる • 見た目の良し悪しではなく機能性を確認するもの =遷移確認用の簡易的なプロトタイプ 低忠実度
  40. © Cygames, Inc. / 102 71 71 プロトタイプ制作 ~忠実度の選択~ •

    アニメーションやトランジションの確認ができる • 手触りの部分も確認できる • 作り込みが必要な分高コスト =よりゲームに近い見た目のプロトタイプ 高忠実度
  41. © Cygames, Inc. / 102 72 72 プロトタイプ制作 ~忠実度の選択~ 低忠実度

    プロトタイプ 高忠実度 プロトタイプ 開発初期 開発中期 開発後期 ・高速に概要を詰めたい ・画面設計を行いたい ・ラフでもOK ・手触りを改善したい ・アニメーションを調整したい ・製品に近い状態 開発フェーズ別の忠実度選択基準
  42. © Cygames, Inc. / 102 74 74 プロトタイプ制作 ~高忠実度の弱点解消術~ 忠実度が上がるほど感覚的な部分の検証が可能になるが、

    比例してコストが高まっていく アニメーションの作り込みが必要 コーディングが必要 プロトタイプを作り込むと再現が大変 時間がかかる 高品質のUIを作るための高忠実度プロトタイプだが・・・
  43. © Cygames, Inc. / 102 76 76 プロトタイプ制作 ~高忠実度の弱点解消術~ Animateはアニメーションツールなので、動きの作り込みが容易

    コーディングが(基本)不要 Animateで制作したFlashデータをUnityに移植する内製ツール Adobe Animateをプロトタイプ制作に選んだ理由①
  44. © Cygames, Inc. / 102 77 77 FlashToUnityとは An Animate(Flash)データを

    UnityのPrefabに変換する社内ツール 複雑な調整を加えても そのままUnity上で再現ができる
  45. © Cygames, Inc. / 102 78 78 プロトタイプ制作 ~高忠実度の弱点解消術~ Flashをそのまま実機にビルドすることができる

    高忠実度プロトタイプを実現できるツールが少なかった Animateで高忠実度プロトタイプを高速に開発 Adobe Animateをプロトタイプ制作に選んだ理由②
  46. © Cygames, Inc. / 102 80 80 プロトタイプ制作 ~さらなる高速化~ UIアニメーションプリセット

    ・専用のキャンバス上にあらかじめよく使うアニメーションを用意 効率化に加え、クォリティの安定化を図ることができる
  47. © Cygames, Inc. / 102 82 82 レビュー 制作したプロトタイプを評価 •

    複数の視点により高品質化するために2種類のレビューを実施 プロトタイプ制作 実装 クロスレビュー A/Bテスト
  48. © Cygames, Inc. / 102 86 86 1.デザイナーが評価する点 ☑キャラクターと世界観が魅力的か ☑操作性

    ☑統一性 -キャラクターと世界観を魅力的に表現できているか。可愛さを十分に伝えられているか -ボタンが無理のない位置に収まっているか -他の画面とデザイン、表現、操作性などに統一性があるか。設計ルールは守られているか ☑演出・アニメーションの品質 -演出・アニメーションの品質が担保されているか。ユーザーにストレスを与えていないか
  49. © Cygames, Inc. / 102 88 88 2.プランナー・エンジニアが評価する点 ☑仕様(プランナー) ☑実装難易度(エンジニア)

    ☑わかりやすさ -当初プランナーが想定していた仕様を満たしているか。抜け漏れはないか -実装難易度の算出、手法の検証 -どこを操作すればいいのか理解できるか。使いづらい部分は無いか -デザイナー以外のスタッフによる初めてのレビュー
  50. © Cygames, Inc. / 102 90 90 3.社内スタッフが評価する点 ☑わかりやすさ ☑操作性

    -初見でもどこを操作すればいいか理解できるか。使いづらい部分は無いか -ボタンの位置など、操作しづらい部分は無いか ☑初めて見た印象 -その他、初見で対象の画面を見た際に抱いた感想など
  51. © Cygames, Inc. / 102 93 93 A/Bテストとは? 社内の無作為のメンバーに対して、アンケートを実施 プロトタイプ制作

    実装 クロスレビュー A/Bテスト • クロスレビューを実施したうえで2つの案で悩んだ場合に実施 • A,Bどちらのデザインが最も早く目的を達成できたかを調査 • 軽微なデザインの差に向いている
  52. © Cygames, Inc. / 102 94 94 A/Bテストとは? A案 B案

    ・ボタンの組み方をテストした例 ・B案の方が使いやすそうという意見が多かった
  53. © Cygames, Inc. / 102 96 96 プロトタイピングの導入で考慮すべき事項 ☑修正、試行錯誤の期間を決める ☑ゴールを明確にする

    ☑プロトタイプも実機で確認する プロトタイプは試行錯誤の回数を何回重ねられるかが重要。どの画面をいつまでに終わら せるのかという認識を関係者全員でもつことが重要。 プロトタイプの制作前にこの画面はどこまで作り込む必要があるかという認識を関係者 全員でもつことが重要。 ついPC上での確認で済ませてしまいがちですが、本実装したのちに端末で触ってみると 使いづらいということも。
  54. © Cygames, Inc. / 102 98 98 プロトタイプ編のまとめ • 手触りを改善するためのプロトタイピングにおいては、

    UIデザイナーが最も精度の高い調整ができる高忠実度の プロトタイピングを採用すべき • UIデザインのプロトタイピングは、手触りの改善を早い 段階で行う事で、手戻りを大幅に減らせる • UIデザインのプロトタイピングは、感覚的な部分を言語 化しやすくする効果があり、結果的にユーザー目線での 具体的な改善につながりやすくなる
  55. © Cygames, Inc. / 102 101 101 本作の開発を通じて • 本作ではアニメRPGというコンセプトのもと、全員がその

    問いに向かって全力で試行錯誤をした • ユーザーが本当に最も求めているものを実現するために、 UI観点で出来ることは何なのかを常に各々が考えて実行 • ゲーム性、キャラクター、世界観などの魅力を最大限に引 き上げるのがUIデザイナーの仕事