project

幅広い層に受け入れられるビジュアルを目指して。ブルーロックUIデザインの軌跡

ブルーロック Project: World Champion / 2022

#UI
#UX
#アニメーション
#アートディレクション
#ブルーロック

※この記事の掲載素材に関して 開発参考用にアニメイラスト・原作イラストをアタリとして使用し、トンマナを調整。 アニメイラスト・原作イラストはゲーム内では使用していません。

OVERVIEW

アニメ化する前から女性ファンも多い人気作品。そのため、女性ユーザーもターゲットと想定し、幅広いユーザー層を視野に入れた上で制作がスタートしました。RUDELは男性向けタイトルのイメージが強いため、そのイメージに左右されず、且つRUDELらしいデザインを求められました。

CONCEPT

パッと見た時の印象が“格好良い!”と思ってもらえる画面を目指しました。海外のスポーツブランドから着想を得て、既存のスマートフォンゲームであるようなゲーム感が強いデザインよりも、今までにないようなスタイリッシュさを感じる表現を目指しています。普段ゲームをしない女性ユーザーにも興味を持ってもらえるようなデザインを意識しました。

ビジュアルガイドライン
CREATIVE
PROCESS
BEFORE
BEFORE
AFTER
AFTER

1.トーン&マナーの制作

ゲーム感の強いデザインや既存のRUDELらしいデザインなど、数パターン制作した上で、最終的にスタイリッシュさの強いデザインに決定。
ここから従来のゲームらしい表現も加えた上でゲームとしてのバランスを取るためのブラッシュアップを進めました。(AD)

機能設計とワイヤー制作
機能設計とワイヤー制作

2.機能設計とワイヤー制作

企画をヒアリングしながら、ワイヤーを0から制作しました。
キャラクターをどうゲームで魅力的に伝えるかを試行錯誤し、育成ゲームでキャラクター同士の掛け合いを多く取り入れるなど、原作と同じ世界観を楽しめるように工夫しました。(UI/UX Designer)

BEFORE
BEFORE
AFTER
AFTER

3.UIデザイン制作

約200個の画面デザインを今回はほぼ1人のデザイナーで制作しました。キャラによって背景が変わるなど、キャラらしさを取り入れつつ飽きのこないデザインを目指しました。既存ゲームのようなデコラティブな表現よりも、ユーザーの体験設計の部分に注力しました。(UI/UX Designer)

4.モックの制作(演出)

ゲーム内の演出はAfter Effectsでデザイナーが見本を作り、テクニカルアーティスト(TA)にUnityで再現してもらいます。モーダルが出現する際の動きなど、世界観を表現する上で細かく調整をして制作しました。画面の遷移などちょっとした演出はTAの方にお任せしています。(UI/UX Designer)

5.デザインの実装

モックをもとにイメージを崩さないように再現します。データとして実装する時に、できるだけ印象を変えずになるべく軽量化できるよう工夫しました。
細かいアニメーションや、画面を盛り上げる演出はTAのアイデアで実装するなど、デザイナーと協力しながら仕上げていきます。(Technical Artist)

POINT

試合のオートアニメーション。ゲーム内のキモになるメイン機能のため、あらゆる可能性をデザインで試しました。ステータス表示を変えたりミニマップをつけてみたりなど表現を試行錯誤し、何十稿も繰り返した結果、今のデザインが出来上がっています。
メイン機能は特に色々な表現を試した上で、より楽しんでもらえる見せ方は何かを考えて決定しました。

スマートフォンの画面
スマートフォンの画面
スマートフォンの画面
スマートフォンの画面
Art Director
Tsujimoto
UI/UX Designer
Ishizaka
Technical Artist
Nomura
Appのアイコン
  • タイトルブルーロック Project: World Champion
  • ジャンル新感覚サッカー育成シミュレーション
  • 価格基本無料(アイテム課金あり)
  • 対応機種スマートフォン(iOS / Android)
サイトURL
https://bluelock-pwc.com/
  • ※App Store, iTunesは米国およびその他の国々で登録されているApple Inc.の商標です。
  • ※Google Play および Google Play ロゴは Google LLC の商標です。