シャニソンが抱える問題をデザイナーの視点で考察する①ガシャ画面編【前編】
はじめまして、
デザインでご飯を食べている人です。
皆さんはシャニソン、楽しんでますか？
私は楽しんでいます。
映像のレベルが高い！！！！！！！！！
神ゲーになれるポテンシャルを持て余している
シャニソンが抱える問題とは一体何でしょうか？
それは……
デザインが優れていない
これに尽きます。
当たり前過ぎて誰も触れませんが、セルラン上位の人気ゲームはデザインが優れています。ＸでもHoYoverseの新作やペルソナ3リロードのUIが素晴らしいと話題になりましたよね。
シャニソンのデザインは……
現状良いとは言えないと思います。
デザインが原因でサ終したら死んでも死にきれないので、大きなお世話だと理解しつつこのnoteを書きます。ごめん、俺、シャニソンの力になりたい。
はじめに
このnoteでは、セルラン上位＆直近でリリースされたソシャゲと比較しながらシャニソンのデザインが抱える問題点について考察していきます。
※筆者は漫画や映像のデザインをやってきた人なのでUIデザインは畑違いです。プログラミングの難易度などを考慮出来ない事をご容赦ください。
Sガシャ画面の話
シャニソンのデザインで今、
一番まずい所はガシャ画面だと断言できます。
ガシャ画面はクオリティが売り上げに直結する最も重要な画面と言っても過言ではありません、ここでユーザーに「このガシャ引きたい！！」と思わせなければ駄目なのです。
ですがシャニソンのガシャ画面は全くと言っていいほど訴求力がありません。一般的なデザイン会社ならOKは出ないはず。デザインの基礎本で悪い方のお手本に掲載されてもおかしくない。それがこちらです。
いずれもサポカイラストの繊細な塗りが死んでしまっています。サポカを売りたいのにサポカイラストが死ぬなんて大事件です。
イラストは何故死んでしまったのか？
原因は面積が広い背景と強い色にあります。
では他のゲームはどのようにしているのでしょうか？
改善策①イラストを大きく入れる
ウマ娘はメインのイラストを
左右いっぱいまで広げて
無駄な余白を無くしていますね。
縦画面なので上下が余っていますが、ぼかしとグラデーションで情報量を減らし、主役のイラストがぱっと目に入るようになっています。
横画面のいい例はこんな感じ。
横画面だとプロセカのように上下を断ち切って空きを無くしたほうがしっくりきますね。
絵を揺らしてリズムをつけてるのも良いです。
各イラストの周りにつけたぼかしの幅と色味も絶妙。細部へのこだわりが感じられます。
作業量という点ではシャニソンも星を散らしたり
囲みを作ったりと健闘しているのですが、そのせいでサポカイラストが見にくくなっていますし、何ならその頑張りは必要ないかもしれません。
改善策②要素の優先度を考える
サポカガシャ画面ではカードイラストが最優先です。何故ならサポカを売りたいから。
背景を売りたいわけではありません。
なんとかしてサポカが一番最初に目に入るようにしなければいけません。そこで「色」を使って優先度を考えてみましょう。
突然ですが皆さんが一番作品に集中できる空間は
どこですか？
……美術館か映画館ではないでしょうか？
美術館は作品に集中させる為に
壁を白くしています。
映画館のスクリーンの周りは黒いです。
作品に集中させる為には周りの情報量を減らす必要があり、最も情報量を減らせる色が無地の白と黒なんです。
ゲームのUIでもこの仕組みを利用して
主役のイラストを目立たせる事ができます。
ただ、ガシャ画面で背景がまっ白・まっ黒だと流石に華やかさが足りません。
ですので画面の情報量を程よく増やす方法として
カードイラストやライブ会場の画像をぼかして
背景に敷く手法が多用されています。
（先に上げた３つの画像もそうです。）
背景を半透明にして白っぽくしたり、強めにぼかしを入れて重要な所にピントが合うようにしてるんですね。
シャニソンのガシャ画面のように、無理に星などを散らしてカラフルに盛り上げようとしなくても、サポカイラストの持っている魅力があれば、画面は勝手に盛り上がります。
背景は手助けをする程度でかまいません。ぼかした背景に半透明にした白いモチーフ（羽とか星）を散らすだけでそれっぽくなるのです。
イラストの入れ方については横に並べる以外にもトリミングをしてタイル状に並べてしまう手もあります。
主役の数が増えるのでにぎやかな印象を受けますね。カタログっぽさが出るので高レアリティ確定系やセレクションチケット付きの画面によく使われているようです。
ちなみに「最後の画像音符が入ってるじゃん、これがOKならシャニソンの星もOKなんじゃないの？」と思われるかもしれませんが、白抜きのモチーフはそこまで存在感が出ないのでイラストに悪影響を与えません。
ぼかしの色も周りと馴染んでますしね。
また、この画像はレイアウトで正解を出した上で飾り要素の五線譜を視線の流れを意識してレイアウトしています。
ひし形は画面に対して傾いて入ってる分
正方形と比べて安定感が弱くなります。
そこで五線譜で四隅を囲うことで、画面が安定し
さらに中央の「好きな★４メンバーを～」が
目に入りやすくなっているんですね。
改善策③効果のつけ方を変える
レイアウトの他に、もう一つ重要な事があります。
例に上げた他のソシャゲは出来ていて
シャニソンだけ出来ていない大事なセオリーがあります。
何だと思いますか？
正解は効果の順番です。
シャニソン以外のガシャ画面を見ると
共通して下記のように効果がついています。
イラスト→シャープな境界→ぼかし
理由はボヤッとしている物よりも、くっきりしている物の方が目に止まりやすいからです。写真でも主役の被写体にピントを合わせますよね。
ではシャニソンの方はどうでしょうか？
イラスト→広範囲のぼかし→シャープな背景
アカン（あかん）
これでは先に背景の方が目に入ってしまいます。
『主役にピントを合わせる』
これだけは絶対に守ってもらいたいセオリーです。
改善策④テキストの位置を変える
違和感の原因が大分明確になってきましたね。
最後は文字の位置です。
例によって大事なのはサポカイラストなので
画面中央のテキスト回りはなるべく
イラストの上にのせない方が良いです。
そのまま位置を下げて｢提供割合」か「283Sキャラガシャ」の下側に揃えましょう。それでテキストを110〜120%くらい大きくすれば良いバランスになると思います。
揃えることのメリットは
こちらのサイトが説明してくれています。
どうしても画面の中央にテキストを置きたい場合は、プロセカのようにタイリングにしてしまったほうがスッキリまとまりますね。
今回のまとめ
いかがでしたでしょうか？
このようにSガシャ画面は無理に作り込もうとしなくてもセオリーに沿って作ればそれなりに良いものが出来る筈です。シャニソン開発のデザイナーさんには頑張ってほしい。
売上を伸ばすためには限定連打をする以外にも出来ることはある。それがガシャ画面の見栄えを良くすること。シャニマスのように限定まみれのゲームにはならないでくれ。シャニソンの石の配布量で限定連打をしたら人がいなくなってしまう。
変に炎上したりしなければ後編も書きたいと思っています。後編ではPアイドルガシャの画面についてとデザインの必要性について話したい。
よければ次回もお付き合い下さい。
この記事が気に入ったらサポートをしてみませんか？