Tweet
Tweet

Slide 1

Slide 1 text

© Cygames, Inc. / 102 1 1 ～UIを高速かつ高品質に作るためのプロトタイプ開発のススメ！～ 株式会社Cygames 佐々木拓夢／齋藤友梨子 プリンセスコネクト！Re:Dive 制作事例

Slide 2

Slide 2 text

© Cygames, Inc. / 102 2 2 概要 •プリンセスコネクト！Re:Dive（以後プリコネR） の制作事例を元に、新規開発の際に課題となった 高品質なUIを短時間で作る方法を、組織的な取り 組みを交えながらご紹介します。 •作品コンセプトを実現するために、UIデザイナー としてアプローチした手法や考え方を、具体的に 解説します。

Slide 3

Slide 3 text

© 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チームのリーダーとして開発フローの整備とグラ フィックを担当。

Slide 4

Slide 4 text

© Cygames, Inc. / 102 4 4 アジェンダ UIデザイン編 プロトタイピング編 はじめに

Slide 5

Slide 5 text

© Cygames, Inc. / 102 5 5 プリコネRについて • 2018年2月15日リリース • 2015年2月よりAmeba(ブラウザ)にて配信されていた「プリン セスコネクト！」の続編 • iOS/Android/PCにて配信中

Slide 6

Slide 6 text

© Cygames, Inc. / 102 6 6

Slide 7

Slide 7 text

© Cygames, Inc. / 102 7 7 本作のコンセプトは

Slide 8

Slide 8 text

© Cygames, Inc. / 102 8 8 アニメRPG

Slide 9

Slide 9 text

© Cygames, Inc. / 102 9 9 アニメRPGとは？ • アニメとRPGが融合し、アニメを観ているかのようなゲーム体験 を目指した • 膨大なストーリーアニメと専用カットインアニメ • アニメパートとゲームパートがシームレスに移行する仕掛け

Slide 10

Slide 10 text

© Cygames, Inc. / 102 10 10 アジェンダ UIデザイン編 はじめに プロトタイピング編

Slide 11

Slide 11 text

© Cygames, Inc. / 102 11 11 UIデザイン編

Slide 12

Slide 12 text

© Cygames, Inc. / 102 12 12 本作におけるUIの目指したもの

Slide 13

Slide 13 text

© Cygames, Inc. / 102 13 13 ゲームパートでストレスを与えずに アニメに没入してもらうこと

Slide 14

Slide 14 text

© Cygames, Inc. / 102 14 14 プリコネRのUIが目指したもの ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素

Slide 15

Slide 15 text

© Cygames, Inc. / 102 15 15 ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素 プリコネRのUIが目指したもの

Slide 16

Slide 16 text

© Cygames, Inc. / 102 16 16 ストレスのない画面遷移 ロード時間を高速化することで ストレスのない画面遷移に プリコネRは周回ゲーム 反復操作が多い 同じ画面を何度も通過する 様々な機能に遷移して遊ぶ タップ数＆指の移動量を少なく アニメーションはシンプル＆なめらか 小刻みに時間を使って遊べるように

Slide 17

Slide 17 text

© Cygames, Inc. / 102 17 17 ストレスのない画面遷移 ロード時間の高速化に デザイナーがどう取り組んだか

Slide 18

Slide 18 text

© Cygames, Inc. / 102 18 18 ストレスのない画面遷移 ①各画面で使いまわせるデザインの徹底 ②階層によって共通素材の比率を変える デザイナーができる ロード高速化のためのデザイン的工夫

Slide 19

Slide 19 text

© Cygames, Inc. / 102 19 19 各画面でつかいまわせるデザイン デザイン的な工夫① ストレスのない画面遷移 ～デザイン的工夫①～

Slide 20

Slide 20 text

© Cygames, Inc. / 102 20 20 ストレスのない画面遷移 ～デザイン的工夫①～ プリコネRは背景がアニメやイラストなど多種多様 各画面でつかいまわせるデザイン 画面ごとにパーツを用意せず、多様な種類の 背景でも成立するデザインを作成

Slide 21

Slide 21 text

© Cygames, Inc. / 102 21 21 明るい背景 暗い背景 ストレスのない画面遷移 ～デザイン的工夫①～

Slide 22

Slide 22 text

© Cygames, Inc. / 102 22 22 階層によって共通素材の比率を変える デザイン的工夫② ストレスのない画面遷移 ～デザイン的工夫②～

Slide 23

Slide 23 text

© Cygames, Inc. / 102 23 23 第一階層 第二階層 第三階層以降のページ 共通素材率低 ストレスのない画面遷移 ～デザイン的工夫②～ 階層が深くなるにつれ共通素材率を高くする 共通素材率中 共通素材率高

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

© Cygames, Inc. / 102 29 29 第三階層 ストレスのない画面遷移 ～デザイン的工夫②～ 第三階層ではほぼ100％が共通素材で構成 共通素材 専用素材

Slide 30

Slide 30 text

© Cygames, Inc. / 102 30 30 • 各画面で使いまわせるデザイン • 階層によって共通素材の比率を変える 容量を減らしてロード時間の短縮化しつつ 使いまわし感を抑制 ストレスのない画面遷移 ～デザイン的工夫～

Slide 31

Slide 31 text

© Cygames, Inc. / 102 31 31 まとめ • ゲーム内の多様な画面に使い回せる素材を作り容量を 削減、ロード時間を高速化させる事が重要 • ユーザーが良く見る箇所は専用素材、それ以外は共通 素材で制作し、高速化とクオリティのバランスを保つ ストレスのない画面遷移

Slide 32

Slide 32 text

© Cygames, Inc. / 102 32 32 ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素 プリコネRのUIが目指したもの

Slide 33

Slide 33 text

© Cygames, Inc. / 102 33 33 迷わない設計 迷わない設計とは

Slide 34

Slide 34 text

© Cygames, Inc. / 102 34 34 迷わない設計 攻略情報がいらないこと

Slide 35

Slide 35 text

© Cygames, Inc. / 102 35 35 迷わない設計 攻略情報がいらないためには • 行き止まりがないように感じる • 何をすれば良いかすぐにわかる • 目標を見失わずにプレイできる

Slide 36

Slide 36 text

© Cygames, Inc. / 102 36 36 迷わない設計 ロード時間高速化により 隙間時間で遊びやすくなっている より隙間時間に遊びやすいように、どこから 始めても迷わず何をすれば良いのかすぐにわ かる設計にする必要がある さらに

Slide 37

Slide 37 text

© Cygames, Inc. / 102 37 37 ミッション ユーザーの想定経路を検証し作成 クエスト選択 バトル 勝利 ミッション 詰まるポイントを調査 • 詰まる可能性がある画面には必ず「強くなるため」の導線を作成 • どんな状況でもメインサイクルが行き止まることがないようにする 迷わない設計 ～行き止まりをなくす～

Slide 38

Slide 38 text

© Cygames, Inc. / 102 38 38 キャラ一覧 キャラ強化 装備入手 クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 灰：メイン キャラ強化のメインサイクル 迷わない設計 ～行き止まりをなくす～

Slide 39

Slide 39 text

© Cygames, Inc. / 102 39 39 ユーザーがよく行き来する場所 • クエスト画面（装備を集める） • キャラ強化画面（あつめた装備を使う） キャラ強化の遷移をさらに検証 ユーザーが良く遷移する画面に 迷わず行き止まりなく周回できる導線を作成 迷わない設計 ～行き止まりをなくす～

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

© Cygames, Inc. / 102 42 42 キャラ一覧 キャラ強化 装備入手 クエスト選択 クエスト詳細 クエスト 装備入手 キャラ強化 繰り返せる 繰り返せる すべてのサイクルが行き止まることがない設計で迷わない 迷わない設計 ～行き止まりをなくす～ 灰：メイン 青：キャラ強化 赤：素材収集

Slide 43

Slide 43 text

© Cygames, Inc. / 102 43 43 元居た画面を見失わないように ポップアップを利用 • 機能1つに対しベース画面は1つ • 派生機能はポップアップで重ねる • 画面遷移しないので元の画面を見失わない 迷わない設計 ～元の画面を見失わない～

Slide 44

Slide 44 text

© Cygames, Inc. / 102 44 44 ベース ポップアップ1 ポップアップ2 ポップアップ3 迷わない設計 ～元の画面を見失わない～

Slide 45

Slide 45 text

© Cygames, Inc. / 102 45 45 ポップアップ1 ポップアップ2 ポップアップ3 複数の画面で同じポップアップの使い回しが可能 ▼装備作成の場合 ▼メインクエストの場合 ポップアップ2 ポップアップ3 ベース ベース 迷わない設計 ～元の画面を見失わない～

Slide 46

Slide 46 text

© Cygames, Inc. / 102 46 46 経路の途中には必ず解を用意 複数の方法でよりわかりやすくする 先に進む導線のボタンは青色 NO YES マークで未クリアのコンテンツを知らせる 迷わない設計 ～解を用意～

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

© Cygames, Inc. / 102 48 48 プリコネUIの目指したもの ストレスのない 画面遷移 迷わない設計 魅力的な グラフィック アニメに没入できるゲームパートの達成要素

Slide 49

Slide 49 text

© Cygames, Inc. / 102 49 49 魅力的なグラフィックとは 魅力的なグラフィック

Slide 50

Slide 50 text

© Cygames, Inc. / 102 50 50 魅力的なグラフィック アニメRPGだとわかるUI

Slide 51

Slide 51 text

© Cygames, Inc. / 102 51 51 魅力的なグラフィック アニメRPGだとわかるUI • キャラクターと世界観に触れる機会が多い • UIを見ただけでプリコネRとわかる

Slide 52

Slide 52 text

© Cygames, Inc. / 102 52 52 キャラクターと世界観に触れる機会が多い キャラクターの躍動感や個性を できる限り大きく取り込んだUIにする 魅力的なグラフィック ～キャラと世界観に触れる～

Slide 53

Slide 53 text

© Cygames, Inc. / 102 53 53 Before キャラの絵が小さくて魅力が充分に伝わらない… 魅力的なグラフィック ～キャラと世界観に触れる～

Slide 54

Slide 54 text

© Cygames, Inc. / 102 54 54 After キャラが魅力的に見える! 魅力的なグラフィック ～キャラと世界観に触れる～

Slide 55

Slide 55 text

© Cygames, Inc. / 102 55 55 UIを見ただけでプリコネRとわかる アニメーションをそのままUIにする 魅力的なグラフィック ～アニメRPGだとわかるUI～

Slide 56

Slide 56 text

© Cygames, Inc. / 102 56 56 Before 画面が止まっていてアニメRPGらしさがない 魅力的なグラフィック ～アニメRPGだとわかるUI～

Slide 57

Slide 57 text

© Cygames, Inc. / 102 57 57 After アニメをUIに用いることでアニメRPGらしさが出た 魅力的なグラフィック ～アニメRPGだとわかるUI～

Slide 58

Slide 58 text

© Cygames, Inc. / 102 58 58 よりアニメRPGに合うＵＩを作るために 魅力的なグラフィック ～世界観に合ったデザイン～ 世界観に合ったデザインを作成 さらに

Slide 59

Slide 59 text

© Cygames, Inc. / 102 59 59 悪目立ちするUI 悪目立ちしないUI 魅力的なグラフィック ～世界観に合ったデザイン～

Slide 60

Slide 60 text

© Cygames, Inc. / 102 60 60 悪目立ちするUI アニメの塗りと単一なキャラの主線に似合う加工にする 悪目立ちしないUI 魅力的なグラフィック ～世界観に合ったデザイン～

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

© Cygames, Inc. / 102 62 62 まとめ • 機能的なだけではなくキャラクターの魅力とユーザー の接点をどれだけ増やせるデザインにできるかが重要 • アニメーションをUIに導入する場合、UIそのものを アニメの塗りや主線などアニメとの親和性を重視した デザインにすることが大切 魅力的なグラフィック

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

© Cygames, Inc. / 102 64 64 プロトタイピング編 プロトタイプを使って高品質なUIを高速に作る方法

Slide 65

Slide 65 text

© Cygames, Inc. / 102 65 65 本作におけるプロトタイピング 早い段階で試作を開発し課題を検証する手法

Slide 66

Slide 66 text

© Cygames, Inc. / 102 66 66 本作におけるプロトタイピングの目的 最終的には高品質なUIを高速で作るということ 早い段階で評価・検証をすることで手戻りを減らす 様々な視点による評価でUIを高品質化 UIデザインにおけるプロトタイピングの目的

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

© Cygames, Inc. / 102 69 69 プロトタイプ制作 ～忠実度の選択～ 低忠実度 高忠実度 早い・簡易的 遅い・本物風

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

© Cygames, Inc. / 102 72 72 プロトタイプ制作 ～忠実度の選択～ 低忠実度 プロトタイプ 高忠実度 プロトタイプ 開発初期 開発中期 開発後期 ・高速に概要を詰めたい ・画面設計を行いたい ・ラフでもOK ・手触りを改善したい ・アニメーションを調整したい ・製品に近い状態 開発フェーズ別の忠実度選択基準

Slide 73

Slide 73 text

© Cygames, Inc. / 102 73 73 プロトタイプ制作 ～忠実度の選択～ 「ゲーム体験」を改善して高品質なUIが作りたい 高忠実度のプロトタイプを採用

Slide 74

Slide 74 text

© Cygames, Inc. / 102 74 74 プロトタイプ制作 ～高忠実度の弱点解消術～ 忠実度が上がるほど感覚的な部分の検証が可能になるが、 比例してコストが高まっていく アニメーションの作り込みが必要 コーディングが必要 プロトタイプを作り込むと再現が大変 時間がかかる 高品質のUIを作るための高忠実度プロトタイプだが・・・

Slide 75

Slide 75 text

© Cygames, Inc. / 102 75 75 プロトタイプ制作 ～高忠実度の弱点解消術～ Adobe Animateを採用 An

Slide 76

Slide 76 text

© Cygames, Inc. / 102 76 76 プロトタイプ制作 ～高忠実度の弱点解消術～ Animateはアニメーションツールなので、動きの作り込みが容易 コーディングが(基本)不要 Animateで制作したFlashデータをUnityに移植する内製ツール Adobe Animateをプロトタイプ制作に選んだ理由①

Slide 77

Slide 77 text

© Cygames, Inc. / 102 77 77 FlashToUnityとは An Animate(Flash)データを UnityのPrefabに変換する社内ツール 複雑な調整を加えても そのままUnity上で再現ができる

Slide 78

Slide 78 text

© Cygames, Inc. / 102 78 78 プロトタイプ制作 ～高忠実度の弱点解消術～ Flashをそのまま実機にビルドすることができる 高忠実度プロトタイプを実現できるツールが少なかった Animateで高忠実度プロトタイプを高速に開発 Adobe Animateをプロトタイプ制作に選んだ理由②

Slide 79

Slide 79 text

© Cygames, Inc. / 102 79 79 プロトタイプ制作 ～高忠実度の弱点解消術～ 実際のプロトタイプ

Slide 80

Slide 80 text

© Cygames, Inc. / 102 80 80 プロトタイプ制作 ～さらなる高速化～ UIアニメーションプリセット ・専用のキャンバス上にあらかじめよく使うアニメーションを用意 効率化に加え、クォリティの安定化を図ることができる

Slide 81

Slide 81 text

© Cygames, Inc. / 102 81 81 レビュー

Slide 82

Slide 82 text

© Cygames, Inc. / 102 82 82 レビュー 制作したプロトタイプを評価 • 複数の視点により高品質化するために2種類のレビューを実施 プロトタイプ制作 実装 クロスレビュー A/Bテスト

Slide 83

Slide 83 text

© Cygames, Inc. / 102 83 83 クロスレビュー

Slide 84

Slide 84 text

© Cygames, Inc. / 102 84 84 クロスレビューとは？ プロトタイプを職種問わず触り、評価・検証をすること ・さまざまな視点を通すことによって、改善案をより見つけやすくする ・実機で確認することによって精度の高い評価が可能 プロトタイプ制作 実装 クロスレビュー A/Bテスト

Slide 85

Slide 85 text

© Cygames, Inc. / 102 85 85 クロスレビューの流れ 1.デザイナー 2.プランナー・エンジニア 3. 社内スタッフ

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

© Cygames, Inc. / 102 87 87 クロスレビューの流れ 1.デザイナー 2.プランナー・エンジニア 3.社内スタッフ

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

© Cygames, Inc. / 102 89 89 クロスレビューの流れ 1.デザイナー 2.プランナー・エンジニア 3.社内スタッフ

Slide 90

Slide 90 text

© Cygames, Inc. / 102 90 90 3.社内スタッフが評価する点 ☑わかりやすさ ☑操作性 -初見でもどこを操作すればいいか理解できるか。使いづらい部分は無いか -ボタンの位置など、操作しづらい部分は無いか ☑初めて見た印象 -その他、初見で対象の画面を見た際に抱いた感想など

Slide 91

Slide 91 text

© Cygames, Inc. / 102 91 91 クロスレビューを通して 徹底したユーザー目線に立つのが重要

Slide 92

Slide 92 text

© Cygames, Inc. / 102 92 92 A/Bテスト

Slide 93

Slide 93 text

© Cygames, Inc. / 102 93 93 A/Bテストとは？ 社内の無作為のメンバーに対して、アンケートを実施 プロトタイプ制作 実装 クロスレビュー A/Bテスト • クロスレビューを実施したうえで２つの案で悩んだ場合に実施 • A,Bどちらのデザインが最も早く目的を達成できたかを調査 • 軽微なデザインの差に向いている

Slide 94

Slide 94 text

© Cygames, Inc. / 102 94 94 A/Bテストとは？ A案 B案 ・ボタンの組み方をテストした例 ・B案の方が使いやすそうという意見が多かった

Slide 95

Slide 95 text

© Cygames, Inc. / 102 95 95 実装 クロスレビュー、A/Bテストを経て、実装に回る プロトタイプ制作 クロスレビュー 実装 A/Bテスト

Slide 96

Slide 96 text

© Cygames, Inc. / 102 96 96 プロトタイピングの導入で考慮すべき事項 ☑修正、試行錯誤の期間を決める ☑ゴールを明確にする ☑プロトタイプも実機で確認する プロトタイプは試行錯誤の回数を何回重ねられるかが重要。どの画面をいつまでに終わら せるのかという認識を関係者全員でもつことが重要。 プロトタイプの制作前にこの画面はどこまで作り込む必要があるかという認識を関係者 全員でもつことが重要。 ついPC上での確認で済ませてしまいがちですが、本実装したのちに端末で触ってみると 使いづらいということも。

Slide 97

Slide 97 text

© Cygames, Inc. / 102 97 97 プロトタイプ編まとめ

Slide 98

Slide 98 text

© Cygames, Inc. / 102 98 98 プロトタイプ編のまとめ • 手触りを改善するためのプロトタイピングにおいては、 UIデザイナーが最も精度の高い調整ができる高忠実度の プロトタイピングを採用すべき • UIデザインのプロトタイピングは、手触りの改善を早い 段階で行う事で、手戻りを大幅に減らせる • UIデザインのプロトタイピングは、感覚的な部分を言語 化しやすくする効果があり、結果的にユーザー目線での 具体的な改善につながりやすくなる

Slide 99

Slide 99 text

© Cygames, Inc. / 102 99 99 プロトタイプ編のまとめ プロトタイプによって試行錯誤を高速化することで 結果的に高品質なUI開発ができた

Slide 100

Slide 100 text

© Cygames, Inc. / 102 100 100 本作の開発を通じて

Slide 101

Slide 101 text

© Cygames, Inc. / 102 101 101 本作の開発を通じて • 本作ではアニメRPGというコンセプトのもと、全員がその 問いに向かって全力で試行錯誤をした • ユーザーが本当に最も求めているものを実現するために、 UI観点で出来ることは何なのかを常に各々が考えて実行 • ゲーム性、キャラクター、世界観などの魅力を最大限に引 き上げるのがUIデザイナーの仕事

Slide 102

Slide 102 text

© Cygames, Inc. / 102 102 102 最後に 開発スタッフは プリコネが大好きです！