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

by CyberAgent

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

はじめに運用編 6周年アップデート編まとめ 01 02 03 04 CONTENTS

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

はじめに  01

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

株式会社Craft Egg  バンドリ！ガールズバンドパーティ！  UIデザイナー  二又駿太 Shunta Futamata 

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

6年が経過したデザインを最適化し全盛期を取り戻す UI編：①6周年アップデートにおけるデザイン課題  02

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

UIにおける「ガルパらしさ」のアップデート UI編：①6周年アップデートにおけるデザイン課題  02

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

UI編：①6周年アップデートにおけるデザイン課題  02

Slide 51

Slide 51 text

UI編：①6周年アップデートにおけるデザイン課題  02

Slide 52

Slide 52 text

UI編：①6周年アップデートにおけるデザイン課題  02

Slide 53

Slide 53 text

UI編：①6周年アップデートにおけるデザイン課題  02

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

UI編：②ユーザーファーストな開発事例  02 新レアリティの追加

Slide 57

Slide 57 text

UI編：②ユーザーファーストな開発事例  新レアリティの追加・最上位モチーフを選定  　★2(銀)・★3(金)・★4(虹)・★5( ??? )    ・★5を獲得したときに最もユーザーのUXが高まるものにしたい  02

Slide 58

Slide 58 text

UI編：②ユーザーファーストな開発事例  02

Slide 59

Slide 59 text

UI編：②ユーザーファーストな開発事例  02

Slide 60

Slide 60 text

UI編：②ユーザーファーストな開発事例  02

Slide 61

Slide 61 text

UI編：②ユーザーファーストな開発事例  キラキラドキドキ × UO(ウルトラオレンジ) ・バンドリの主人公でもある戸山香澄のキーワード    ・バンドリのライブ会場においてもよく見かける一番目立つサイリウム            02

Slide 62

Slide 62 text

UI編：②ユーザーファーストな開発事例  02

Slide 63

Slide 63 text

ガチャ演出 UI編：②ユーザーファーストな開発事例  02

Slide 64

Slide 64 text

UI編：②ユーザーファーストな開発事例  ★5ガチャ演出・「ガルパの枠組みの中で」という方針や工数的な問題・当初の方針：大幅な変更はせず既存演出の色替えやエフェクトで盛る    02

Slide 65

Slide 65 text

UI編：②ユーザーファーストな開発事例  02

Slide 66

Slide 66 text

※開発段階のサンプルです

Slide 67

Slide 67 text

UI編：②ユーザーファーストな開発事例  02 ・「★5確定演出」がTwitterでトレンド入り    ・各種SNSでも好評の声 

Slide 68

Slide 68 text

楽曲選択 UI編：②ユーザーファーストな開発事例  02

Slide 69

Slide 69 text

目次タイトル①  楽曲選択 01 ・長年の運用で低下してしまった検索性の向上    ・とはいえメインサイクルに関わる重要な機能 

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

目次タイトル①  01

Slide 72

Slide 72 text

目次タイトル①  01

Slide 73

Slide 73 text

04 まとめ

Slide 74

Slide 74 text

まとめ  ユーザーファースト=質の高いクリエイティブ 04

Slide 75

Slide 75 text

まとめ  04 ・技術的な問題とその解消に対するカロリー    ・シンプルに工数の問題    ・方針や要件に沿うとこうなる   

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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