プロジェクトセカイ カラフルステージ！feat.初音ミク デザイン考察

今回は「プロジェクトセカイ カラフルステージ！feat.初音ミク」（以下、プロセカ）について記載します。

このゲームの特徴は以下。

プロセカのデザインの特徴

フラットデザインのベースに小技が光る

プロセカのビジュアルをみて一番印象として入ってくるのがやはりUIのフラットデザイン。

白ベタを使いつつも、ライトグリーンとネイビーの組み合わせがとってもバランスが良いです。

そこに赤に近いピンクの配色が画面に彩りを与えます。

また、フラットデザインに見えつつも小技が聞いているのが画面下部のグローバルメニュー。

アイコンとライブボタンにはグラデーションが使われているんですね。

これによって、他のUIよりもほんの少しだけプライオリティが上がっています。

そうすることにより、他のUI要素よりもちょっとだけ目に入りやすくなり（マジでほんの少し）、悪目立ちせずに画面優先度をあげることができています。

※ごめんなさい、ちょっとイジりました

ちなみにphotoshopでちょっとだけいじらせてもらって、グローバルメニューのボタンもフラットにしてみたのですが他のUI要素と同一のトーンになってしまいました。これは良調整です。

フラットなトーンの中にも盛り上がる要素を盛り込む

UIは前述したとおりフラットデザインをベースに小技を忍ばせた隠れたクオリティの高さを見せてますが、インゲームの3D空間を感じさせる音ゲーパートはしっかりとエモーショナルな光の表現を取り入れています。

また、ガチャの画面もアニメ調のキャラ絵を画面いっぱいに配置し、これまた熱量高めのビジュアルに仕上げています。

これにより、フラットなUIに引っ張られて単調なビジュアルばかりになることなく、要所でしっかりとゲーム的な感情を揺さぶる表現を取り入れているバランスの良さがさすがです。

インゲームに遷移する際のトランジションに注目

音ゲーのインゲームに遷移する際に表示されるトランジション（画面切り替えの演出）ですが、こちらが奥行きを感じさせる3Dっぽい演出かつフラットなパーティクル表現を用いていて、フラットデザインから3D空間への移動としてクッションの役割を果たしているなと感じました。

これにより相反する表現手法も違和感なく遷移することができ、自然な体験につなげることができます。

ちなみにセカイ移動やゲームログイン時にも用いていますね。

各セカイのビジュアル表現にも仕掛けが

SDキャラの会話を楽しむことができるセカイと現実世界。

それぞれの背景にはアニメーションや奥行き表現、光の演出が盛り込まれていて、いろんなロケーションを一つずつみて行きたくなる仕掛けが盛り込まれています。

例えばセカイの教室のセカイ。

黒板には流星群っぽい光の筋、煌めきがアニメーションしていて夢の中のよう。

こうしたちょっとした仕掛けが固定ファンを作ったりする一要素かもしれません。

プロセカの各画面を見てみる

ホーム画面

前述したとおり、UIはフラットデザイン。

SDキャラも3Dキャラも、Live2Dのキャラもセルルックというかアニメ調な表現のため、フラットデザインと相性が良いです。

背景はややテイストが違いますが、現実のロケーションを思わせる描き込みと、キャラとの差別化のためには効果的です。

楽曲選択の画面

解放されている楽曲をみるに、楽曲ごとにデザインを変えたアートワークを用意しており、音ゲーのこだわりを感じます。

この辺りは各社頑張りどころとなっており、音ゲーの表現手法としては基準値的な表現になっていますね。

ただ、しっかりとこの辺りも踏まえつつ、温度感を高めがちな楽曲選択画面もフラットデザインに落とし込まれており、かつ細かいアニメーションを加えている点が楽しませようとする意気を感じます。

インゲーム

音ゲーのビジュアル的な心地よさはしっかりと表現されています。

美しいグラデーションと、徐々に近づいてくるバー、上手くプレイできたときのリアクションも心地よい。

3Dの奥行きの感じられる表現がまたリッチさを増しており、2Dキャラのさりげないカットインも嬉しい演出。

ちなみにうまくバーをタップできたときのバイブレーションが小気味よくて心地よいです。

ユニット編成画面

複雑になりがちなユニット編成画面も、フラットデザインで見やすくシンプルに仕上げています。

かなりしっかりとしたUIデザインの統一感的な強い意志を感じる反面、汎用的な背景の演出はグラデーションやパターン、パーティクルを用いていてゲーム的な見せ方も忘れない。

ポイントであしらっているドットのグラデーションやストライプなども地味にデザインが効いています。

背面のパターン、所々▲を間引いていてこれまた小技が効いています。

これによってパターン背景の単調さを回避してますね。

まとめ：フラットデザインのお手本のようなデザイン

UIのフラットデザインの統一感と、外すところはしっかり外してゲーム的な表現を追求。

細かいあしらいが効いているのと要所での小技の効かせ方が見事なデザインでした。

フラットデザインを用いる場合は是非参考にしたいデザインです。