【CEDEC 2020】Craft Egg、『ガルパ』をより良いコンテンツにするために実施したデザイン視点でのこだわりと工夫

コンピュータエンターテインメント協会（CESA）は、9月2日～4日の期間、オンラインにて、国内最大のゲーム開発者向けカンファレンス「コンピュータ・エンターテインメント・デベロッパーズ・カンファレンス 2020」（CEDEC 2020）を開催している。

本稿では、9月2日に実施された、Craft Eggによるセッション「デザイン視点から見た『バンドリ！ ガールズバンドパーティ！』～開発初期から現在まで～」の模様をお届け。

本セッションでは、『ガルパ』をより良いコンテンツにするために実施した事を、リリースまでの新規開発、リリース後の運用開発、運用グラフィックという3つの時期、業務内容にパート分けし、デザイン視点で紹介された。

Craft Eggが考える"より良いコンテンツ"とは、様々なプラスの感情を生み出し、人生を豊かにするコンテンツの事を指し、ユーザーの人生が豊かになっているか、実現できるかどうかを意思決定において重視しているという。

従って『ガルパ』では、バンドライフの体感を通してユーザーの人生を豊かにすることを目指す、というコンセプトのもと開発、運営が行われているという。

■新規開発パート

まず新規開発パートに登壇したのは、デザイナーの千葉百枝氏。メンバー（ガルパに登場するバンドメンバー）をとことん大切にすること、そして大切にするということをデザインに落とし込むとどうなるかなど、その工夫やこだわりを紹介した。

『ガルパ』はメンバーたちが実際ライブをしているようなリズムパートと、個性豊かなメンバーたちによる青春のバンドストーリーが見みられるアドベンチャーパートの行き来がバンドライフの体感を作るメイン要素。「そのサイクルの中の、なるべく多くのポイントでメンバーに触れてもらえるよう意識している」と千葉氏。



さらに『ガルパ』は「バンドリ！」というメディアミックスプロジェクトの一端を担っており、「メンバーを好きになってもらうことで、それぞれのメディアを強く繋げられる」（千葉）と加えた。

次に、"大切にする"をデザインに落とし込む具体例について、以下の3点が挙げられた。

・画面設計における表示割合、優先度が上がる
『ガルパ』のUIはメンバーの立ち絵、イラストが映えるよう、白、グレー、強調色のピンクで構成。UIアイコンのアニメーションもほとんどない等、イラストがもっとも生えるデザインにする工夫されている。

・平等性を担保するデザイン
35人のメンバーは、1人1人個性的で大切な存在という考えから、優劣が付いて見える表現をなるべく避けている。抜き出さないといけない場合、バンドの象徴としてボーカルメンバー、またはアニメで主人公として扱われた実績のあるPoppin`Partyのメンバーを使用。

・現実とガルパの混同NG
どうしても避けられない場合を除き、メンバーが言うはずのない事を言わせないことを心掛ける。

上記に加え、一般的にカードと呼ばれていたガチャで手に入るゲーム内資産をシチュエーションと呼ぶなど、メンバーの生きている世界を表現するために扱う文言も意識したり、シナリオを読む会の定期開催などでメンバー愛を深める取り組みや、キャストを知るためにリアルイベントの参加や収録見学の推奨など文化作りにも注力しているとした。

続いて紹介されたのは、やる・やら+最適化で物量に対応する、という手法。



千葉氏は、物量と期間、関わっていたメンバーについて、「およそ4ヶ月、16機能、60超の画面を前半2名、後半3名のデザイナーで制作した」と振り返った。

当時、機能一覧から、リリース時には必要不可欠ではないと判断したものを取り除き、最小の画面数にしてもなお工数が足りない状況だったが、画面数はこれ以上削れないため、中身を仕分けしていったという。その際に効果のあった3つの工夫が以下となる。

・注力すべき画面に全振り
ライブとストーリーという重要な画面を優先し、UI検証。ライブ画面では、各要素の配置、色、アニメーション、使用するリソースの組み合わせなど時間が許す限りパターン検証を行いベストを探った。その他の画面は通常プレイに不自由がないレベルに留めることを意識し、テンプレートの活用、既存素材の組み合わせのみでUIを制作。

・汎用には慎重に
汎用は工数のかからないデザインに見えがちだが、どんなデザイン・要素にも合う難易度の高いデザイン。その事を伝え、工数をかけるべきだと交渉するなどセクション間の認識のギャップを埋めることで不要なリスクを削減した。

・コミュニケーションコストを圧縮
セクション内外問わず無くせるやりとりはなるべく無くすことを意識。デザインセクションでは、タスクごとに担当を決め、それぞれの担当範囲でそれぞれの決定権があるように作るなどし、タスクごとの引継ぎもなくなり、コミュニケーションコストが圧縮できた。

その他、セクション外での最適化では、ダイヤログなどの優先度の低い画面は、まず要素だけをエンジニアに置いてもらい、最終的にデザイナーが直接unityで配置やサイズの調整を行うなどして、UI全体クオリティが大きく向上したとのこと。

■運用開発パート

続いて登壇したデザイナーの竹内千佳氏は、運用開発にまつわるこだわりについて紹介した。



『ガルパ』の開発は、新規機能開発と既存機能改修に大きく分けられ、現在は新規機能開発に比重を置いているという。開発フローについては、ロードマップ制作からリリースまでの一連の流れを網羅し、16ある工程の全てにおいて意見を出し合っているそうだ。

その中で特に注力しているのが以下の項目。

・事前相談会
開発メンバーを集め、意見や懸念を洗い出して仕様の精度を高める。企画から仕様を詰める前、概念レベルの仕様について情報共有し、それに対して意見交換。デザイナーは仕様に対し、見た目や体験に関する事を重点的に意見し、仕様を詰る。

・遷移図制作、カンプ制作、共有会
遷移図制作は実装できる状態にするよう仕様の認識を擦り合わせ、影響画面の抜け漏れ防止等が目的。カンプ制作はUIの見本という役割があり、パーツや要素まで細部を詰める。共有会は、制作したカンプを元にエンジニアと実装の擦り合わせをし、どういうアニメーションを付けるかなどを意見交換。

・動作確認会
実装した施策を開発メンバー目線で仕様通りか、テンポ感は大丈夫かなど、多角的に意見交換する会。デザイナーは体験が意図通りか、UIカンプ通り実装されているかなどを重点的に確認する。

これらを踏まえ、「デザイナーは見た目や体験に責任を持ち、疑う事を忘れず、思ったことは今更でも言うことで、意見交換が活発になり施策の精度が上がる」と竹内氏は語った。



次に、ストレスなく触れるUIの裏側について、新規機能開発での立ち回りや留意点について触れられた。ポイントは、ストレスなく触れるようにするには問題や現状把握が大切ということ。

なぜなら問題によって、UIの構造や見せ方が大きく変わるからだ。

続いて遷移図制作。遷移図制作をするにあたり、「ストレスなく触れるようにするには懸念をとことんぬぐう事がポイント」と竹内氏。

各画面の構成をこのタイミングで決めることで、以降の工程でデザインの修正が少なくなるためとても留意している点と語った。

遷移図の初稿では、仕様を元に影響のある画面を洗い出し線で繋げ、調整や制作が必要な画面は細かく作るのではなくラフの状態で遷移図に落とし込んでいる。

つまり遷移図は、認識の擦り合わせができて画面の抜け漏れなく、エンジニアが見積れる状態になっていれば良いため、作り込まないことが大切とした。

また、ラフ遷移図の段階で画面の構成や要素をざっくり決めることで、今後のデザイン制作の戻しを減らせるため、パーツ単体で要素や配置の検討を何度も重ね、テンポよく作っては調整を繰り返せるようにしているという。

竹内氏は、「ストレスなく触れるUIにするためには遷移図制作では、パターンを出して懸念をとことん拭うことがポイント。そうすることで各画面のデザイン変更が減り、開発の進行がスムーズになる」とした。

次にカンプ制作。ここではストレスなく触れるようにするため「トーン＆マナーを揃えることが大切」と竹内氏。

ゲームの中で要素を揃えることで、不要な違和感や使い難さを無くし、直感的に操作できると考えているという。

そしてカンプ制作の工程では、細かい所まで作り込むとし、「カンプはエンジニアが実装する際の見本になるため、パーツの作り込みや余白の調整など丁寧に行うことが重要となる」と竹内氏。

「問題や目的を把握し、作り込み過ぎず懸念を拭い、画面のトーン＆マナーを統一するのが大切。そうすることでストレスの少ないUIになる」と続けた。

■運用グラフィックパート



最後のパートで登壇したデザイナーの白﨑みき氏からは、リリース後運用グラフィックでの、より良いキャラクターコンテンツを作るための具体的なグラフィック面でのこだわりや工夫について語られた。

まずはデザインの継承と定着。ゲーム内のロゴ制作について、『ガルパ』は月に3回イベントを開催し、累計120以上のイベントロゴが制作。多くのロゴがある中で、ユーザーにバンドやメンバーに愛着を持ってもらうために工夫しているそうだ。

『ガルパ』に登場するAfterglowは、幼馴染5人によって結成されたバンドで、バンド名を意味する"夕焼け"は、彼女たちがバンド名を考えていた際に高所の屋上から綺麗な夕焼けが見えたことに由来。

また、たとえ喧嘩しても5人でバンド名を考えた日のことを思い出せるように、という願いが込められているという。そのAfterglow、シナリオでの大切なシーンでは夕焼けや屋上からの景色がよく出てくる。



それを踏まえ、白﨑氏は「Afterglowといえばという、印象的な夕焼けや学校の屋上からの景色などを取り込んでいる」と、モチーフに沿った雰囲気やイメージが近いロゴが制作されていると説明した。

こうして象徴となるモチーフを検証し、繰り返すことにより、ユーザーの中で過去のイベントの記憶が繋がり、自然と呼び起こされる仕組みとなっている。

では実際に、どのように制作しているのか？　これらのロゴは全て別のデザイナーが制作しているそうで、いずれもトーン＆マナーは似ているが、明確なガイドラインがあるわけではないという。

なぜデザインやモチーフを継承して作ることができるのか？　白﨑氏は「デザインチームで何度もチェックし、フラットに意見を出す環境でクリエイティブを制作。

加えて制作する本人も他のデザイナーも、シナリオを読み込み、デザインチーム全体で意見を出すということを大切にしているから」とし、「開発当初からのメンバーを大切にすると言う思想が運用にも活きている」と加えた。

続いてメディアミックスな世界観の表現について。事例として挙げられたのは、メディアミックスプロジェクトである「バンドリ！」のリアルライブ「BanG Dream! Special☆LIVE Girls Band Party! 2020」(以下、ガールズバンドパーティ2020)の連動企画。



連動企画では、ライブ会場に行く人も行かない人も、ゲーム内でライブを体感することができ、「バンドリ！」の世界観を楽しめる、という目的だったが、コロナ禍でリアルライブは中止に。

それに伴い連動企画の目的も、ライブ会場に行けなくなってもゲーム内でライブを体感でき、「バンドリ！」の世界観を楽しめるものにシフトチェンジしたという。

では、ゲーム内でもとことんリアルライブとの一体感を感じてもらうために、どうしたのか？

実際のライブでのキャストの決めポーズなどをイラストに反映し、リアルとメンバーがリンクするような体験を生み出し、イラストと同じステージセットでプレイできるライブ画面を制作することで、リアルライブとの一体感を高めるようにしたという。

また、背景のステージセットとの親和性を高く保ちながら、操作性を阻害しないレーン、判定ラインのデザインも複数用意し、比較・検討するなどこだわったそうだ。

その他、ライブステージのモチーフ、出演予定だった5バンドのカラーのサイリウムをロゴに取り入れたり、ドームにボーカル5人で遊びに行く、というガールズバンドパーティ2020連動企画の特別なシナリオに合わせてトップ画面に5人を登場させるよう提案、変更。

さらに期間限定ミッションとして出演予定だったバンドの楽曲をプレイしてもらい、少しでもリアルライブを感じてもらえるようにするなどのこだわり、工夫を見せたという。

白﨑氏は、「ガールズバンドパーティ2020連動企画では、リアルライブの中止はあったものの、メディアミックスの世界観を体感してもらうため様々なクリエイティブの工夫とこだわりでライブ体験をユーザーに届けることができました」と語った。




   

公式サイト

App Store

Google Play

©バンドリ! プロジェクト ©BanG Dream! Project © Craft Egg Inc.