2020年9月2日～4日までの3日間、CEDEC公式サイトのオンライン上にて開催された、日本最大のコンピュータエンターテインメント開発者向けのカンファレンスCEDEC 2020。本稿では、会期初日の9月2日に行われたセッション“デザイン視点から見た『バンドリ！ ガールズバンドパーティ！』～開発初期から現在まで～”の模様をお届けする。
本セッションでは、Craft Eggが開発、運営を行うスマートフォン向けアプリ『バンドリ！ ガールズバンドパーティ！』（以下、『ガルパ』）をよりよいコンテンツにするために行ったことを、リリース前の新規開発、リリース後の運用開発、運用グラフィックの3つの時期、業務内容にパート分けし、順に解説をおこなった。
Craft Eggでは、さまざまなプラスの感情を生み出し、“人生を豊かにするコンテンツ”ということを、“よりよいコンテンツ”として定義。そして、"ユーザーの人生が豊かになっているか"という目標を設定し、それが実現できるかどうかを意思決定において重視したという。
以上の理由より、『ガルパ』では“ユーザーの人生を豊かにする”という目標に対して、“バンドライフの体感”を通して叶える、というコンセプトで開発・運用されている。
セッションではまず、Craft Eggのデザイナーである千葉百枝氏より、新規開発パートにおいて、メンバー（『ガルパ』に登場するバンドメンバーたちを指す）をとことん“大切にする”ということをデザインに落とし込むとどうなるのか、といったことへの工夫やこだわりについて紹介された。
『ガルパ』では、メンバーたちが実際にライブをしているようなリズムゲームパートと、メンバーたちによる、“青春のバンドストーリー”が見られるアドベンチャーパートの行き来がメインサイクルとして構成され、バンドライフの体感を形作っている。
千葉氏によれば、そのサイクルの中で、なるべく多くのポイントでメンバーに触れられるような仕組みとなっているという。それはたとえば、リズムゲームパートではつねにメンバーどうしの掛け合いボイスが入っていたり、メンバーのデフォルト衣装のパーツをイベントのロゴに組み込んでいることだったりする。
そうしてメンバーたちに触れるうちに、彼女たちへの理解や愛情が深まっていくことで、よりよいバンドライフの体感が得られるのではないか、と千葉氏は語る。また『ガルパ』は、『バンドリ！』というひとつのメディアミックスプロジェクトの一端を担っているため、ユーザーがメンバーを好きになることで、それぞれのプロジェクトを繋ぐことができるのではないか、と考えているそうだ。
これらのことから千葉氏は、メンバーへの愛情がコンテンツへの没入を高めており、その愛情を損わせてはならない、との理由から、メンバーを大切にしていると語った。
続いて、メンバーを大切にする、ということをデザインに落とし込んだ具体例が紹介された。
ひとつ目は、“画面設計における表示割合、優先度が上がる”ということ。『ガルパ』のUIは、白、グレー、強調色のピンクを中心に構成されており、UIアイコンのアニメーションなどはほとんどないため、メンバーの立ち絵やイラストなどがもっとも映えるようなデザインとなっている。
ふたつ目は、“平等性を担保するデザイン”ということ。『ガルパ』に登場している35人のメンバーは、ひとりひとりが個性的で大切な存在であるという考えのもと、メンバーに優劣がついているように見える表現はなるべく避けられている。しかしながら、コラボイベントなどの告知のときに、彼女たちの中から何名かを選ぶ必要がある場合には、バンドの象徴であるボーカルのメンバーや、アニメで“主人公”として扱われた実績のあるバンド“Poppin' Party”のメンバーが使用されている。
3点目は、“現実と『ガルパ』の混同はNG”ということ。『ガルパ』においては、どうしても避けられない場合を除き、運営側の都合で、彼女たちが“知るはずのないこと”は言わせたりしないよう心がけている。また、メンバーの生きている世界を表現するために、一般的に“カード”と呼ばれている、ガチャで手に入れられるゲーム内資産を、『ガルパ』ではメンバーたちの日々の場面を切り取った“シチュエーション”と表現したりなど、扱う文言も意識しているそうだ。
これらのほかにも、シナリオを読む会を定期的に開催し、メンバー愛を深める取り組みを行ったり、メンバーを大切にしているキャストを知るためにリアルイベントへの参加や、収録の見学も推奨するなど、メンバーを大切にするための文化づくりにも注力しているという。
続いて、新規開発パートにおいて、約4ヵ月で60画面超のデザインを行う必要があった際の、対策手法について紹介。千葉氏いわく、上記の物量は、前半2名、後半3名のデザイナーで制作がおこなわれたそう。少人数での制作となったわけだが、これに対してデザインチームは、たとえば、注力すべき画面のクオリティーアップには時間をかけるが、それ以外の画面は必要最低限のデザインで進める、という方向性で対策したのだという。
制作期間は、2017年3月のアニメ放送に合わせ、2016年8月から11月のあいだ。この期間に、すべての画面を作り切るという目標が立てられた。
少ない期間と人員のため 当時の機能一覧から、リリース時には必要不可欠ではないと判断したものを取り除き、最小の画面数をピックアップし、制作をおこなうという方法をとったが、それでも工数が足りない状況に。しかしながら、これ以上削れないため、その中身を仕分けしていったという。その際にさまざまな工夫が凝らされたが、とくに効果のあったのは3つあるそうだ。
ひとつ目は、“注力すべき画面に全振り”するということ。ライブとストーリーという、バンドライフの体感に重要な画面に優先してUI検証。ライブ画面では、各要素の配置、色、アニメーション、使用するリソースの組み合わせなど、時間が許す限りパターン検証が実施された。
そのほかの画面については、こだわりすぎず、通常プレイに“不自由がない”レベルに留めることを意識し、テンプレートの活用や既存素材の組み合わせのみでUIが制作されている。
ふたつ目は、“汎用には慎重に”ということ。汎用は、“工数のかからないデザイン”に見えがちだが、どんなデザイン、どんな要素にも合うという、難易度の高いデザインであるとも言える。そのことをしっかりと伝え、工数をかけるべきだと強く交渉し、セクション間の認識のギャップを埋めることで、不要なリスクの削減が図られた。
3つ目は、“コミュニケーションコストの圧縮”。セクション内外を問わず、“なくせるやりとりは、なるべくなくす”ことを意識。デザインセクションでは、タスクごとに担当を決め、それぞれの担当範囲で、それぞれに決定権がある状態を作ることで、タスクごとの引継ぎもなくなり、コミュニケーションコストの圧縮へと繋がったそうだ。
ほかにも例として、セクション外の最適化において、ダイアログなどの優先度が低い画面は、要素だけをエンジニアに置いてもらい、最終的にデザイナーが直接Unityで配置やサイズの調整をおこなうなどの手法をとることで、UIの全体クオリティーの大幅な向上の実現もできたという。
ここから、デザイナーの竹内千佳氏が登壇し、リリース後の運用開発におけるこだわりについての解説へ。
ひとつ目に紹介されたのは、“意見交換を前提とした開発フロー”について。『ガルパ』の運用開発は 新規機能開発と既存機能改修のふたつにわけられている。開発フローは全16もの工程があり、ロードマップ作成からリリースまでの一連の流れを網羅したうえで、“みんなで意見を言い合う”ということが意識付けされている。その中で、とくに注力されている3項目において、その目的や留意していることについて説明された。
最初に紹介されたのは。事前相談会の工程。この工程は、開発メンバーを集め、意見や懸念を洗って仕様の精度を高めるというのが目的。企画から仕様を詰める前の状態、概念レベルの状態での仕様についてや、「ここをこうしたい」などの情報を共有をし、それに対して、集まったメンバーで感想・意見交換をおこなう。デザイナーは仕様に対して、見た目や体験に関することを重点的に意見し、仕様を詰めていく。
ふたつ目の工程は、遷移図制作、カンプ制作、共有会。遷移図制作は、施策の認識のすり合わせ、影響画面の抜け漏れの防止などをおこなうのが目的。カンプ制作では、UI見本の役割があるため、パーツや余白まで細部を詰めていく。共有会では、制作したカンプをもとに、エンジニアと実装のすり合わせをする。ここで、どういうアニメーションをつけるか、効果音はどうするか、といった意見交換も実施される。
最後は、動作確認会の工程について紹介。この工程は、実装した施策を開発メンバー目線で確認することが目的。「仕様どおりか」、「動きは問題ないか」、「テンポ感は大丈夫か」など、多角的に意見交換が行われる。デザイナーは、体験が意図通りか、UIカンプ通り実装されているかなどについて重点的に確認をしているそうだ。
以上、3点の項目を説明したところで竹内氏は、デザイナーは見た目や体験に責任を持ち、疑うことを忘れず、思ったことは「いまさら」でも言うことで、意見交換が活発になり、施策の精度も上がる、と語った。
続いて、ストレスなく触れるUIの裏側について、実際の新規機能開発の事例をもとに、デザイナーの立ち回りや留意している点について紹介。ここでのポイントは、ストレスなく触れるようにするには、問題や現状把握が必要であるということ。その理由は、問題によってUIの構成や 見せかたが大きく変わるからだ。
題材となった事例は、2020年3月に実装された“リハーサルモード”。本モードは、ライフが0になってもリズムゲームを最後までプレイでき、設定よりお手本のプレイを確認できる練習機能のこと。
“リハーサルモード”が実装されることとなった発端は、音ゲーが上達しない、ある程度の難易度まで行くとクリアーができず上達しにくい、という意見がユーザーより継続的に届いていたことに起因する。
では、なぜそういった意見が届くのか。開発チームで議論が交わされた結果、ふたつの問題点が仮説として立てられた。ひとつ目は、フリーライブにおいては、低い判定を一定数取るとライフが0になり、リズムゲームが中断し、再開するにはゲーム内通貨を消費する必要があるため、リズムゲームを継続しない、あるいは継続できないという問題。ふたつ目は、協力ライブでは、リズムゲームを最後までプレイすることはできるが、ライフが0になるとイベントポイントや報酬 経験値が激減するため、イベントポイント獲得のために高難易度に挑戦するより、クリアーできる難易度を選んでしまうという問題だ。そして、このふたつの共通の課題として、“練習をする場所がない”という答えにたどり着く。
問題と現状把握ができたところで、遷移図制作へと移る。ここでは、ストレスなく触れるようにするため、懸念をとことん拭うことがポイントとなる。そのため、各画面の構成をこのタイミングで決めることで、以降の工程でデザインの修正が少なくなるため、留意しているとのこと。
遷移図の初稿では、仕様をもとに影響ある画面を洗い出し、線で繋いでいく。各画面の左上にはアイコンを配置し、画面ごとに変更なし、既存改修、新規追加のラベルをつけ、ひと目でどこを触るのかがわかるように工夫がされている。調整や制作が必要な画面は、ラフの状態で遷移図に落とし込みが行われる。
遷移図は認識のすり合わせができ、画面の抜け漏れがなく、エンジニアが見積もれる状態になっていればよいため、作り込まない、ということが重要であるそうだ。
またラフ遷移図の段階で、画面の構成や要素をざっくり決めることで 今後のデザイン制作の戻しを減らせるため、パーツ単位で要素や配置の検討を何回もおこない、テンポよく作っては調整をくり返せるようにしているそう。
さらに、遷移図制作のタイミングで、体験も考慮されるという。“リハーサルモード”の実装においては、リズムゲームに移るまでの導線で、“リハーサルモード”をおこなうためのボタンはどこに置くのが適切なのか、という検討がされたそう。これは、最終的にリズムゲーム直前の画面に配置することとなったそうだ。
続いて、カンプ制作への工程に移行。ここでは、トーン＆マナーを揃えることが大切であるという。その理由は、ゲームの中で要素を揃えることで、不要な違和感や使いにくさをなくし、直感的に操作できるからだとのこと。またカンプは、エンジニアが実装する際の見本となるものであるため、パーツの作り込みや余白の調整などを丁寧におこなう必要があるという。
パーツには、できるだけ少ない要素で表現。一方で、ボタンパーツにおいては“押せる”とユーザーに認識してもらう必要があるため、立体的に見えるよう、ハイライトを入れたり、影をつけたりなどの工夫がされている。また、メンバーの立ち絵を表示する際にも、“メンバーを大切にする”という基本思想のもと、しっかりと映えるように立体的な表現が施されいる。そのほかはできるだけフラットにすることで、全体のトンマナを揃えているのだそう。
余白については、できるだけ既存の画面と揃えることが意識付けられている。これは、余白が異なることで起こる違和感など、余計なストレスをかけないためだという。
ここまで説明されたところで、竹内氏に変わり、デザイナーの白崎みき氏（※）が登壇。白崎氏からは、最後のパートであるリリース後の運用グラフィックにおいて、よりよいキャラクターコンテンツを作るためのグラフィック面でのこだわりや工夫について語られた。
※崎はたつさき
まずは、デザインの継承と定着について、ゲーム内ロゴ制作の事例とともに紹介された。『ガルパ』では、月に3回イベントが開催されているが、その際に制作されたイベントロゴは、累計120個以上にも及ぶという。数多くのロゴが制作されているが、その中で、ユーザーにバンドやメンバーについて愛着を持ってもらうため、さまざまな工夫がおこなわれているそうだ。
バンド"Afterglow"のメンバー全員が出演するイベントを例に、工夫したポイントについて解説された。“Afterglow”は、幼なじみ5人によって結成されたバンド。バンド名の“夕焼け”を意味しているが、これはメンバーたちがバンド名を考えていた際に、校舎の屋上から綺麗な夕焼けが見えたことが由来となっている。また、“たとえ喧嘩しても、5人でいっしょにバンド名を考えた日のことを思い出せますように”という願いも込められている。
そんな“Afterglow”のメンバー全員が初めて登場するイベントでは、夕焼けや学校の屋上からの景色などを取り込んだロゴを制作。その後の、Afterglow全員が登場するイベントのロゴ制作時にも、夕焼けや学校の屋上からの景色といった、同バンドを象徴するモチーフがくり返し取り入れられているそう。
象徴するモチーフを継承し、くり返すことで、過去のイベントの記憶が頭の中で繋がり、自然と呼び起こされる仕組みとなっているという。また、象徴的なモチーフをくり返し使用することで、バンドやメンバーへの理解がだんだんと深まっていき、タイトルやロゴに関するユーザーの感度が上がり、考察されるようになる。
そうして、モチーフやデザインの認識の定着が成功することで、その後の制作物に込めた小さな仕掛けやこだわりにも注目してもらいやすくなり、ロゴを見たときに、つぎのイベントの予想を単身でもらうという状況をも作り出しているそう。また、ユーザーにこだわりに気づいてもらうことで、デザイナーの制作へのモチベーションの向上というメリットもあるそうだ。
セッションで紹介されたイベントロゴの制作は、すべて別のデザイナーが手掛けている。いずれもトーン＆マナーは似ているが、明確なガイドラインがあるわけではないそう。ではなぜ、デザインやモチーフを継承して作れているのか。それは、デザインチームで何度もチェックし、フラットに意見を出す環境で制作しているからだという。
また、制作する本人やほかのデザイナーがシナリオをきちんと読み込み、デザインチームの全員で意見を出すということを心がけているからだそう。
続いて、メディアミックスな世界観の表現における工夫やこだわりが紹介。取り上げられた事例は、メディアミックスプロジェクトである『バンドリ！』のリアルライブ“BanG Dream! Special LIVE Girls Band Party! 2020”（以下、“Girls Band Party! 2020”）の連動企画。
連動企画では、ライブ会場に行く人、行かない人問わず、ゲーム内でライブを体感でき、『バンドリ！』の世界観を楽しめるということが目的であったが、新型コロナウイルス感染症の影響により、リアルライブは中止。
それに伴い、連動企画の目的も、ライブ会場に行けなくなってもゲーム内でライブを体感でき、『バンドリ！』の世界観を楽しめるものにシフトチェンジ。そこで、ゲーム内のおいてもリアルライブとの一体感を感じてもらうため、さまざまな工夫が施された。
ひとつは、実際のライブでキャストがおこなう決めポーズなどをイラストに反映し、リアルとメンバーがリンクするような体験を生み出し、イラストと同じステージセットでプレイできるライブ画面を制作することで、リアルライブとの一体感を高めるよう表現。
ゲーム内にて実装したガチャのロゴについては、ドームライブを感じさせるライブステージのモチーフ、出演予定だった5バンドのカラーのサイリウムをロゴに取り入れたそう。
ゲーム内イベントのロゴは、リアルライブのロゴにゲーム内ロゴを寄せるよう制作。ロゴにはモーションもつけて、ゲーム内でイベントの冒頭に流れるような試みが行われた。
さらに、ドームにボーカルの5人で遊びに行くという“Girls Band Party! 2020”連動の特別なシナリオを考慮し、イベントのトップ画面に5人全員を載せるよう提案し、変更。
そのほか、期間限定ミッションとして、出演予定だったバンドの楽曲プレイ時の報酬を用意し、少しでもリアルライブを感じてもらえるため工夫をおこなった。
以上のことにより、これらのさまざまな工夫により、リアルライブは中止となったが、メディアミックスな世界観を体感してもらうため、さまざまな工夫とこだわりでライブ体験をユーザーに届けることができたと白崎氏より語られ、最後に全体のまとめがおこなわれたところで、セッションは終了となった。
