「ガルパ」における「ユーザーファースト」を尊重したデザインの実践

Craft Eggが開発・運営するスマートフォン向けリズムゲーム「バンドリ！ ガールズバンドパーティ！」（以下、「ガルパ」）では、日々「ユーザーファースト」を意識したアウトプットを行っております。今回は、「ガルパ」のデザイナーが日々どのようにユーザーファーストなモノづくりに向き合っているのか、また、ユーザーファーストな思考がクリエイティブにどのような影響を与えているのかを、実際の制作事例を元にご紹介させていただきます。

https://cadc.cyberagent.co.jp/2023/sessions/prod-thinking/?utm_medium=ca_ex&utm_source=speaker_deck&utm_campaign=official

Transcript

2. 株式会社サイバーエージェント/株式会社Craft Egg
 バンドリ！ ガールズバンドパーティ！
 UIデザイナー
 木山順正 Kazumasa Kiyama

3. はじめに 運用編 6周年アップデート編 まとめ 01 02 03 04 CONTENTS
5. はじめに
 01
41. 株式会社Craft Egg
 バンドリ！ ガールズバンドパーティ！
 UIデザイナー
 二又駿太 Shunta Futamata

44. 6年が経過したデザインを最適化し全盛期を取り戻す UI編：①6周年アップデートにおけるデザイン課題
 02
45. UI編：①6周年アップデートにおけるデザイン課題
 02 ・新規：ガルパの魅力の最大値を届ける
 
 ・復帰：ガルパの進化を実感し、再燃させる
 
 ・既存：今後のガルパの発展への期待感を与える

46. UI編：①6周年アップデートにおけるデザイン課題
 02 ・新規：ガルパの魅力の最大値を届ける
 
 ・復帰：ガルパの進化を実感し、再燃させる
 
 ・既存：今後のガルパの発展への期待感を与える
 
 ➡「ガルパらしさ」はそのままにUIをリニューアルする

47. UIにおける「ガルパらしさ」のアップデート UI編：①6周年アップデートにおけるデザイン課題
 02
48. UI編：①6周年アップデートにおけるデザイン課題
 02 「ガルパらしさ」のアップデート ・かわいい、だがアイドル的なかわいいではない
 ・派手なグラフィックからくるかわいいではない
 ・アップデートで学年が上がることに合わせて幼さを軽減したい
 ・挫折や苦悩を「バンド」を通してのりこえる強さやかっこよさ
 ・男性から見てもかわいく、若干のスタイリッシュさ
 ・3Dの追加により画面上の情報量が増えるのでよりシンプルに　etc…

49. UI編：①6周年アップデートにおけるデザイン課題
 02 UIリニューアルの方向性を決定 ➡情報量ではなくシルエットでかわいいを表現していく
 ➡装飾や質感・立体感は抑え背景とのコントラストで存在感を出す
 ➡強さやかっこよさの要素を表現するために、彩度が高く少し赤みのあるピン ク(#ff3b72)は継続して採用する

50. UI編：①6周年アップデートにおけるデザイン課題
 02
51. UI編：①6周年アップデートにおけるデザイン課題
 02
52. UI編：①6周年アップデートにおけるデザイン課題
 02
53. UI編：①6周年アップデートにおけるデザイン課題
 02
54. UI編：①6周年アップデートにおけるデザイン課題
 02 リニューアルの方向性を明確にしたことで
 デザインチーム全体で同じ質感のリニューアルを行うこと ができた

55. UI編
 02 ①UIリニューアルにおけるデザイン課題整理
 
 ②ユーザーファーストな開発事例

56. UI編：②ユーザーファーストな開発事例
 02 新レアリティの追加
57. UI編：②ユーザーファーストな開発事例
 新レアリティの追加 ・最上位モチーフを選定
 　★2(銀)・★3(金)・★4(虹)・★5( ??? )
 
 ・★5を獲得したときに最もユーザーのUXが高まるものにしたい
 02
58. UI編：②ユーザーファーストな開発事例
 02
59. UI編：②ユーザーファーストな開発事例
 02
60. UI編：②ユーザーファーストな開発事例
 02
61. UI編：②ユーザーファーストな開発事例
 キラキラドキドキ × UO(ウルトラオレンジ) ・バンドリの主人公でもある戸山香澄のキーワード
 
 ・バンドリのライブ会場においてもよく見かける一番目立つサイリウム
 
 
 
 
 
 02
62. UI編：②ユーザーファーストな開発事例
 02
63. ガチャ演出 UI編：②ユーザーファーストな開発事例
 02
64. UI編：②ユーザーファーストな開発事例
 ★5ガチャ演出 ・「ガルパの枠組みの中で」という方針や工数的な問題 ・当初の方針：大幅な変更はせず既存演出の色替えやエフェクトで盛る
 
 02
65. UI編：②ユーザーファーストな開発事例
 02
66. ※開発段階のサンプルです
67. UI編：②ユーザーファーストな開発事例
 02 ・「★5確定演出」がTwitterでトレンド入り
 
 ・各種SNSでも好評の声

68. 楽曲選択 UI編：②ユーザーファーストな開発事例
 02
69. 目次タイトル①
 楽曲選択 01 ・長年の運用で低下してしまった検索性の向上
 
 ・とはいえメインサイクルに関わる重要な機能

71. 目次タイトル①
 01
72. 目次タイトル①
 01
73. 04 まとめ
74. まとめ
 ユーザーファースト=質の高いクリエイティブ 04
75. まとめ
 04 ・技術的な問題とその解消に対するカロリー
 
 ・シンプルに工数の問題
 
 ・方針や要件に沿うとこうなる
 

76. まとめ
 04 ・技術的な問題とその解消に対するカロリー
 
 ・そもそも方針や要件がそうなっている
 
 ・シンプルに工数の問題
 
 ➡判断基準はユーザーファーストか否か

77. ご視聴ありがとうございました