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

Transcript

1. View Slide

2. 株式会社サイバーエージェント/株式会社Craft Egg

   バンドリ！ ガールズバンドパーティ！

   UIデザイナー

   木山順正 Kazumasa Kiyama

   

   View Slide

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

   View Slide

4. View Slide

5. はじめに

   01
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. 株式会社Craft Egg

    バンドリ！ ガールズバンドパーティ！

    UIデザイナー

    二又駿太 Shunta Futamata

    

    View Slide

42. View Slide

43. View Slide

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

    02
    

    View Slide

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

    02
    ・新規：ガルパの魅力の最大値を届ける

    

    ・復帰：ガルパの進化を実感し、再燃させる

    

    ・既存：今後のガルパの発展への期待感を与える

    

    View Slide

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

    02
    ・新規：ガルパの魅力の最大値を届ける

    

    ・復帰：ガルパの進化を実感し、再燃させる

    

    ・既存：今後のガルパの発展への期待感を与える

    

    ➡「ガルパらしさ」はそのままにUIをリニューアルする

    

    View Slide

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

    02
    

    View Slide

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

    02
    「ガルパらしさ」のアップデート
    ・かわいい、だがアイドル的なかわいいではない

    ・派手なグラフィックからくるかわいいではない

    ・アップデートで学年が上がることに合わせて幼さを軽減したい

    ・挫折や苦悩を「バンド」を通してのりこえる強さやかっこよさ

    ・男性から見てもかわいく、若干のスタイリッシュさ

    ・3Dの追加により画面上の情報量が増えるのでよりシンプルに　etc…

    

    View Slide

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

    02
    UIリニューアルの方向性を決定
    ➡情報量ではなくシルエットでかわいいを表現していく

    ➡装飾や質感・立体感は抑え背景とのコントラストで存在感を出す

    ➡強さやかっこよさの要素を表現するために、彩度が高く少し赤みのあるピン
    ク(#ff3b72)は継続して採用する

    

    View Slide

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

    02
    

    View Slide

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

    02
    

    View Slide

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

    02
    

    View Slide

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

    02
    

    View Slide

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

    02
    リニューアルの方向性を明確にしたことで

    デザインチーム全体で同じ質感のリニューアルを行うこと
    ができた

    

    View Slide

55. UI編

    02
    ①UIリニューアルにおけるデザイン課題整理

    

    ②ユーザーファーストな開発事例

    

    View Slide

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

    02
    新レアリティの追加
    

    View Slide

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

    新レアリティの追加
    ・最上位モチーフを選定

    　★2(銀)・★3(金)・★4(虹)・★5( ??? )

    

    ・★5を獲得したときに最もユーザーのUXが高まるものにしたい

    02
    

    View Slide

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

    02
    

    View Slide

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

    02
    

    View Slide

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

    02
    

    View Slide

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

    キラキラドキドキ × UO(ウルトラオレンジ)
    ・バンドリの主人公でもある戸山香澄のキーワード

    

    ・バンドリのライブ会場においてもよく見かける一番目立つサイリウム

    

    

    

    

    

    02
    

    View Slide

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

    02
    

    View Slide

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

    02
    

    View Slide

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

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

    

    02
    

    View Slide

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

    02
    

    View Slide

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

    View Slide

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

    02
    ・「★5確定演出」がTwitterでトレンド入り

    

    ・各種SNSでも好評の声

    

    View Slide

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

    02
    

    View Slide

69. 目次タイトル①

    楽曲選択
    01
    ・長年の運用で低下してしまった検索性の向上

    

    ・とはいえメインサイクルに関わる重要な機能

    

    View Slide

70. View Slide

71. 目次タイトル①

    01
    

    View Slide

72. 目次タイトル①

    01
    

    View Slide

73. 04 まとめ
    

    View Slide

74. まとめ

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

    View Slide

75. まとめ

    04
    ・技術的な問題とその解消に対するカロリー

    

    ・シンプルに工数の問題

    

    ・方針や要件に沿うとこうなる

    

    

    View Slide

76. まとめ

    04
    ・技術的な問題とその解消に対するカロリー

    

    ・そもそも方針や要件がそうなっている

    

    ・シンプルに工数の問題

    

    ➡判断基準はユーザーファーストか否か

    

    View Slide

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

    View Slide