見出し画像

シャニソンが抱える問題をデザイナーの視点で考察する②チュートリアル・視認性・その他

こんにちは、
皆さんはシャニソン、楽しんでますか?
私は楽しんでいます。

画像
起動画面で周年ライブ映像が流れるのが良い!
画像
オリジナル楽曲が良い!!
画像
告知画像が良い!!!
画像
イベントロゴも良い!!!!
画像
通常のガシャ画面が良い!!!!!
画像
サポカイラストが美しい!!!!!!!
画像
ロード画面のミニアイドルが可愛い!!!!!!!!!!
画像
皆可愛い!!!!!!!!!!
画像
プロデュースカードの絵柄が良い!!!!!!!!!!
画像
アイドル同士の絡みもあっていい!!!!!!!!!!
画像
2Dイラストの再現度が高い!!!!!!!!!!
画像
アニメとの連動企画も面白い!!!!!!!!!!
画像
SNS機能も良い!!!!!!!!!!
画像
原作のイラストを想起させる投稿も良い!!!!!!!!!!
画像
ファンサービスの鬼!!!!!!!!!!
画像
アイドルの配信機能が良い!!!!!!!!!!
画像
YouTubeで見られる所も良い!!!!!!!!!!
画像
アイドルとチャットが出来るのも良い!!!!!!!!!!
画像
背景色がアイドルカラーに対応している所が良い!!!!!!
画像
画像
画像
低レアのガシャ演出が良い!!!!!!!!!!
画像
アイドル毎にポーズが違うのが良い!!!!!!!!!!
画像
体幹の違いを表現している点も細かい!!!!!!!!!!
画像
歌い分け機能が良い!!!!!!!!!!
画像
ステージの反射が美しい!!!!!!!!!!
画像
メモリアルライブが良い!!!!!!!!!!
画像
MV再生にシークバーがついていて便利!!!!!!!!!!
画像
時間に合わせて外の景色が変わるのが良い!!!!!!!
画像
現実の天気が反映されているのも良い!!!!!!!!!!
画像
オーディション前のBGMが良い!!!!!!!!!!!!!!
画像
ユニット毎に違うアレンジがされてて凄く良い!!!!!!!

これまでの衣装が見られるサイトが良い!!!!!!!

ハーフアニバーサリーの広告が良い!!!!!!!!!


ご挨拶

前回のnoteには沢山の方からご感想やいいねをいただきました。本当にありがとうございました。

公式の感想コンテストが終わったタイミングだったので運良く運営の目に止まって使えそうな所だけ吸収して貰えたら良いなと思いnoteを書き始めたのですが、閲覧数が想像の数千倍になっていて正直かなり驚いています。

筆者はこれまでnoteを利用した経験が無く、伸びても閲覧数20くらいがいい所だろうと高を括っていた為、不備がある考察で済ませてしまった箇所があります。

これほど沢山の人に読まれるなら、専門外の事もしっかりと調べてから書くべきだったと非常に後悔しています。

多くの方にデザインについて関心を持っていただけた事は心から嬉しく思うのですが、ここまで閲覧いただけた事は完全に予想外でした。


前編後編にも書きました通り、
私はゲーム制作には携わったことが無い
畑違いのデザイナー
です。


これだけ注目を浴びている状態で畑違いの人間が話を続けると誤った情報の流布に繋がる可能性が高いと思いました。

元々は売上に直結するガシャ画面の考察をつかみにして運営に危機感を持って貰い、ゆっくり回数を重ねてその他諸々のデザインの問題について感想を述べて行く予定で考えておりましたが、今回の記事で「どうかこれだけは…」という点にだけ触れて一連の投稿は終わりにしようと思います。


注意事項

前回は『誰でもわかる説明』を目標に専門用語は使わずに書いていました。前回と同じようにするとどうしても長くなってしまうので、今回の記事では専門用語も使います。


なので、読み物としては
あまり面白くありません。


また、デザインとは非常に奥が深いものですから人によって向き合い方は様々です。ですので筆者が言う事だけが正解とは限りません。

デザイン講座を期待してフォローしてくださった方々のご期待に沿えず申し訳ないのですが、ご理解の程よろしくお願いいたします。

チュートリアルの問題

まずこのnoteを書くためにサブ端末で
最新のチュートリアルを確認しました。

画像
画像

なんと強制カードゲームが無くなっていました!!!

入り口になるチュートリアルのデザインがあまりシャニソンらしくない点は少々引っかかりますが、シャニソンがわかりやすい説明をすること自体凄いのでこれは偉業です。

「シャニソンやるやん…見直した!」と思い
ホームに飛んだらこれでした。

画像
画像

シャニソンの悪い所がモロに出ていました
ガシャについて4行も使って説明するゲームは初めて見ました。こんなことするゲーム、シャニソン以外にないのでは…?


いきなり長文は怖い
です。
ユーザーとの距離感がおかしい。
もしこれが興味本位で始めたゲームなら
ここでアンストします。


もしかしてですが、
運営はユーザーの理解力に問題があると思って
チュートリアルを改修していませんか?


シャニソンが分かりにくいと言われる理由はシャニソンにあります。このあと触れますが主に情報の整理が出来ておらず、デザインの基礎力が弱い事が原因です。

基本的にユーザーは早くゲームをやりたい物ですし、ソシャゲをやる人は3行以上の説明は読まないと思ってゲームを作られた方が良いと思います。


シャニソンのチュートリアルでは致死量のスライドを見せられる事になりますが、覚えることが多過ぎるので削れる情報は極力削った方が良いです。

画像

また、このスライド一つ一つに問題があります。

画像
↑イルミネのチュートリアルに紛れ込むアンティーカ
(ユニット毎に攻略方法が違う事を説明したいなら
全てのユニットを入れないと誤解を生みます)
画像
↑『シーズン』が何かを説明する前に始まる育成効率の話
画像
↑画像内の説明と下側テキストの内容が半分重複
ゲージが上昇している事がわかりにくいイメージ図
画像
↑言い回しを変えただけの同じ説明を二回読まされる
画像
↑画像の説明とテキストの説明が完全に一致
『フェスアイドル』が何なのかの説明がない
画像
↑テキストの視認性が非常に悪く説明の要約も出来ていない
画像
↑慣れない単語が7割を占める説明文


情報の取捨選択がされていない為、内容がユーザーに伝わりにくくテキスト量も他と比べて2〜4倍になっています。

画像
画像
画像
画像
画像
他所は情報量が増えるときは要素の比率や
配色で優先順位をつけて読みやすくしています

基本的に他のゲームのチュートリアルは、
見出し→画像→本文か、
画像→本文で作られています。

シャニソンの場合、見出しの文章が長すぎるために
全てが本文化してしまっています。

また、この部分も情報量を無駄に増やしてしまっている
原因の1つになっていると思います。

画像

見出しのようで見出しでない、意味がないのに主張は激しいこの部分、他のゲームにはないですし無くても良いんじゃないかなと思っています。(付けないといけない理由があったらすみません。)

ブルアカには付いていますが、文字が大きく見出しの役目も果たせています。地の色を薄くする事で極力存在感を減らし無駄な情報にならないようになっています。

画像
画像

シャニソンは色の主張が強い割に「遊び方」の文字が本文と変わらないくらい小さく、情報としても必要ないのでどっちつかずの印象です。


チュートリアルのスライドはリリース直前に急いで作られたまま仕方なく放置されているのかとも思っていたのですが、この重複した長文説明は新規イベントでも健在でした。

画像
説明の半分が重複
画像
同じく内容が半分重複

このスライドのまずい点として、『交換所で入手できるピースで★3まで特訓可能』という、ユーザーにとって一番重要な情報が全く目立っていないんです。

12ページもあるスライドの4枚目にこのような置かれ方をしているのですから、普通は気づけません。

イベントをやれば無課金でも特訓出来る事に気が付けないまま、無駄にガシャを回してしまったユーザーも見られました。

デザインが優れていないとこういう事が起こります。

嘘でユーザーを騙して課金させるのは論外ですが、
可読性が低い長文でユーザーを疲れさせ、見落としを引き起こさせるのも良くありません。

※全体的に見辛いので悪意を持って重要な情報だけ目立たなくしたわけでは無いと思います。


お祝いフォトに関してはスライド自体
必要なかったんじゃないかと思っています。

画像
画像

お祝いフォトの画面はUIがしっかりしてるので説明がなくても使い方が分かりますし、ゲームのギミックまでネタバレしてしまうとユーザーが発見して楽しむ体験も奪われてしまうのではないでしょうか。


シャニソンは至れり尽くせりに失敗していて、公式のチュートリアルが指示厨になってしまっている所があります。もう少しユーザーを信用してくれてもいいと思います。


シャニソンのチュートリアルで
個人的に一番しんどいなと思ったのがこれです。

画像

シャニソンのスライドにしては文字量が少なく非常に読みやすいです。ユーザーもこの内容はすんなりと頭に入ったはずです。

その一方で、先日の生配信で高山プロデューサーが
こんなお話をされていました。

「運営としては難易度EASYでカードゲームに慣れていただく考えで作っておりましたが、『最初からHARDに挑みたい』というプロデューサーさんも多いのでカウントストップ機能を実装します」


↓……?

画像

鬱ゲーか…?というレベルのすれ違いが
起きていませんか?大丈夫でしょうか?

育成効率がアップと言われたら
HARDからやりたくなるのは当然だと思います。


また、はづきさんのフルボイス解説もシャニマスファンからすれば嬉しい事ではあるのですが、新規からしたらはづきさんは『話が長くて喋るのが遅い知らない人』でしかありません。

待ちの時間を長時間作らないようにテキスト量に気を配った方が良いんじゃないかと思っています。

画像
(この量のセリフが数回続く)

どこかの記事でシャニソンはタイパを重視していると見ましたが、同じ内容の長文を何度も読ませるシャニソンのチュートリアルはタイパが最悪です。伝わるスライドという観点でも最悪です。


プロデュースモードの大幅改修の予定などが控えていた場合に二度手間になってしまうので、今直ぐにチュートリアルを作り変えるのは難しいなど色々事情があるかもしれません。

でも今のシャニソンの説明力だと、この先おもしろい新コンテンツを追加したとしてもしっかりしたチュートリアルが作れず面白さがユーザーに伝わらないまま終わってしまいそうです。

練習がてらに今あるプロデュースモードのスライドを作り直して、伝わるスライドを作る能力を先に習得しておくというのもありではないですか?


視認性と可読性の問題

シャニソンでは薄い背景の上に白抜きの文字が置かれている事がよくあるのですが、これは視認性が著しく低下するので避けたほうが良いです。


画像

リリース当初、チュートリアルで説明があったにも関わらず「★がアピールだと気づかなかった」というユーザーが続出しました。このスライドは可読性が悪すぎた為に読み飛ばされてしまったんです。読まないとゲームが出来ないくらいに重要な情報なのにです。

その時はユーザーの1人がこの画面に補足をいれて、要約画像としてXに投稿してくれました。それが拡散された為、他のユーザー達は「★がアピールであること」を理解できました。

ですがもうその解説画像は探しても出てきません。それってかなりまずい状態だと思います。今から始めたユーザーは相当の情熱を持ってプロデュースに挑む人以外『シャニソンって良くわからない』と思ったまま何となくオートで進める事しかできないのです。


カードゲームの画面1つ取っても、回復アイコンが緑なのに通常状態のカードも緑色に光っていたり、バフアイコンはオレンジなのにバフが掛かったカードは青色に光ったりなど情報が整理されていません。


Xの告知画像も同じく情報が錯綜しています。

画像
ピンク色のイメージがあるVo特化カードを
紹介する画像が青
画像
青のイメージがあるDa特化カードを
紹介する画像が緑
画像
オレンジのイメージがあるVi特化カードを
紹介する画像が紫


シャニソンのカードゲームは難しい」と思われているのも主にこういう所が原因です。カウントストップで解決する問題ではないと思います。

また、白地に白抜き文字をいれる方法はホーム画面にも使われています。これが「シャニソンのホーム画面は使いづらい」と感じさせる要因の1つになっています。

画像

他のゲームは白地には黒系の文字を置いています。

画像
画像
画像
画像
画像
画像
画像

白抜き文字を置く際は地を暗くします。地と伝えたい要素のコントラストを強くする為です。

画像


白に限らず地と似ている色で文字に色をつけるのも読みにくくなるので避けた方が良いです。(明朝系のフォントを使う時は特に)

画像


ハーフアニバのUIは暗い色でまとめていますが、ボタンの地とアイコンのコントラストが弱く色相も近い為、要素の判別が難しいデザインになってしまっています。

画像

アイコンが役目を果たせておらず下に沿えてある小さな文字を頼りにボタンの意味を判別する必要があるため、定期的に話題になるデザインの敗北一歩手前になってしまっています。


他にはイベントパック類の可読性もかなり低いです。

画像
思わず目を逸らしたくなるゴチャつき方

細い文字にコントラストが強いフチを3重もつけて小さいサイズで表示したら見えなくなるのは当然です。

シャニソンはPCやiPadでも遊べるゲームですが、スマホサイズで表示された時にどう見えるか確認はしたほうが良いです。「ギリギリ読める」は読めるに入らないので注意したほうが良いと思います。

画像
シャニマスの方は太いフォントを使っていて
フチの数も控えめなのでまだ読みやすいです。

細い文字にコントラストの強いフチを多重につける加工は流行からも外れています。

参考までに有名なソシャゲの告知画像をサービス開始順に並べました。画像自体は最近作られたものです。(一番上はモバマスとグリマスのUI)

画像

時代の変化とともに、文字は太く大きく読みやすく、加工も同系色のグラデをいれたり、白抜きに色フチ一色程度のシンプルな物に変わりました。
(………シャニソン以外)


シャニソンの文字加工だとデレステやFGOが始まった頃、下手したらGREEやMobage時代にあってもおかしくない見た目になっています。また、その時代の加工と並べても色が暗く沈んでいて可読性が低いです。


ソシャゲはリリース日が新しいだけである程度の箔がつきます。シャニソンはまだ最新のゲームなのに告知のデザインが古いせいで『シャニソンって昔のゲームなんだ』と誤認されてしまったら損ではないですか?


また、他のゲームはキービジュアル等と並べて見た時に強い違和感が出ないよう、デザインにある程度の統一性を持たせています。これは作品のブランドイメージを大切にしているからだと思われます。

画像
色相、トーン、飾りなど何処かしらが統一されていて
キャラクターのイラストが無かったとしてもある程度
何の作品か想像が付くようになっています。
画像
シャニソンは『シャニソンと言えばこれ!』
というデザインがありません

最初のうちはキービジュアルに合わせた淡いグラデにプリズムの背景を使い、今風な透明感のあるデザインを目指していたように見えます。

しかし最近増築した部分でギラギラした強めの色を使っていたり、全体的にベタッとしたポップ系の児童向けなあしらいを入れてたりとブランドイメージがかなり煩雑になって来てしまいました。

新しく追加されたチュートリアルの画面もシャニソンというよりシャニマスっぽい古めのデザインでしたし、収集がつかなくなる前に自分達の作品をどうしたいのか、運営は一旦話し合った方が良いのではないでしょうか……?(学マスのように外のデザイナーさんに頼ってもいいんじゃないかと思います)


可読性の話に戻りますが石の販売画面もかなり厳しいです。ハーフアニバーサリー以降は得に厳しい。

画像
思わず目をそらしたくなるようなゴチャつきよう


また勝手に手を加えて大変申し訳ないのですが、
少し読みやすくしました。

画像
修正前
画像
修正後

なんとなく読みやすくなったと思いませんか?
これ、フォントも色も変えていません。

文字の隙間に見えていた後ろのイラストを
白で塗りつぶしただけです。

画像
画像

地味ですが、これもデザインです。
前回デザインの重要性について熱弁し過ぎてしまい
誤解を生んでしまったかもしれないのですが

優れたデザインを作ろうというのは、嘘を付けとか過剰な演出でユーザーを騙せという話ではないんです。こういう地道な気遣いの積み重ねで『商品の良さが正しく伝わる優れたデザイン』は作られます。


(※一通りこのnoteを書ききってから気付いたのですが、リリース初期の72時間限定ガシャはしっかりと隙間が埋まっていました。何故半年前より悪化しているんだ……)

画像



 
学マスとシャニソンはチュートリアルで同じフォントを使っています。シャニソンのテキストが打ちっぱなしなのに対して学マスは伝える為のこだわりに溢れています。

画像

下記は学マスのこだわりの一部です。

①ユーザーが初めて対面する重要な単語を
 最も大きく、作品のテーマカラーである
 オレンジで目立たせて覚えやすくしている

②1行の文字数が長くなりすぎないように、
 ちょうどいい所で改行している

③元フォントの「!」の形が美しくない為、
 ここだけ別のフォントに変えている

④助詞を周りの単語よりも少し小さくする事で
 単語を認識しやすくさせている

令和を代表するアイマスは覚悟が違う。
こだわりが凄いです。
これが本当の至れり尽くせり、
長文を何度も読ませる事は親切ではありません。


凄いと言いつつ、学マスがやっている工夫はデザインの世界では普通に行われている事です。(一度見たら終わりのチュートリアルでここまで拘るのは珍しい)

勿論強調する文字の色味や大小の比率はデザイナーさんの経験とセンスが光り輝いています。
ですが①〜④で述べたこと自体は学マスが開発したものでは無いので誰でも参考にして良いと思います。 

また、今挙げた点はAdobe Illustratorで作成されている場合はある程度作業の自動化もできます。(最後は手作業ですが)


その他の問題

ここからはその他の気になる点について
ざっくり語っていきます。

画像
リンクがどこにも無い(?)為
検索からしか辿り着けない攻略ガイド
目次の役目を果たせていないトップページ
画像
ユニットカラー、アイドルカラー、作品のテーマカラーと
色を欲張りすぎた為に画面全体で不調和を
起こしてしまったプロデュースアイドル選択画面
画像
学マスはこの問題を完全に克服しています
画像
背景に溶けすぎて存在が消えている左右の矢印、
衣装のテイストが変わった時に違和感がでる事を
想定せずに設定されたアイドルカラー、
異様に存在感が強い謎のコスト表記
画像
凸アイテムの交換ミスを誘発する間違い探しのようなUI
画像
長押ししないと確認できない必須情報
画像
文法的に難解なカード説明
画像
学マスはタップでカード性能が見られる上に
性能の説明もシンプルでわかりやすいです



勉強になるデザインの本

筆者の周りでも評判が良いおすすめの
デザインの本を置いておきます。

高評価レビューが2000を超える名著中の名著。この本に書かれている事をすればシャニソンが抱えるデザイン面の問題は7割解決するはずです。

学マスのチュートリアルが大好評で、シャニソンのチュートリアルが不評だった理由もこの本の14ページから書かれています。

プロデュースカード性能の説明がわかりにくい理由や、その他諸々のデザインに必須な知識が全ページに渡り解説されています。税込み2,200円です。読破に3時間も掛からないのでデザイナーに限らずデザインの決定権を持つ人達にも読んで欲しい一冊です。

シャニソンのチュートリアルがわかりにくかった理由がこの本の前半にギュッッッと詰まっています。そこだけでも読んで欲しい一冊です。
※10年前に発売された為一部古い情報あり(特に後半)

おわりに

このnoteにシャニソンのデザイナーさんを傷付けたい、シャニソンの悪評を広めたいといった意図は全くありません。

運営がユーザー達の要望に応えようと頑張ってくれているのも感じます。『アンケート読んでくれてるんだな』と思える事も多々あります。

ただ問題に対する改善策があまりにも変というか、リリース初期より良くない方向に進んでいる点があったのでもっと直接的に意見を伝えたいと思いこのnoteを書きました。

デザインは難しい仕事ですが、
ソシャゲ、steam、switch、アニメの公式サイトや雑誌等なんでもいいので流行りのジャンル+シャニソンに系統が近い作品の資料を最低でも30以上は集めて、優れたデザインの共通点を洗い出してから改善策を立てればもっと楽にちゃんとした物が作れる筈です。


デザインの仕事をしていると本当に様々なトラブルと対峙する事になります。シャニソンがこうなっているのにも何か特別な理由があると思います。


しかし結果だけ他社と比べてしまうと、一部ですが品質が劣ってしまっているかなと思ってしまいます。


でもそれは今この時の話です、
人は成長出来ますし、
このnoteの最初にも書きましたが
シャニソンには良い所が沢山あります。
本当に沢山あります。


シャニソンはもっとずっと多くの人に愛されていい作品です。大変だと思いますが運営には頑張ってほしい。(もう頑張ってると思いますが…)

音ゲーがあって、カードゲームも出来て、アイドルが魅力的で、きせかえも出来て、作中のBGMや楽曲も良くて、カードイラストも綺麗で、その他にも沢山良い所がある。そんなゲームが面白くないわけ無いんです。伝え方さえしっかりすればもっと評価される筈です。シャニソンは面白いゲームです。



自分で書いておいてなんですが、シャニソンの問題を指摘する記事が #シャニソン の検索上位に居続けるのは正直ちょっとヤバイと思うので、このnoteを含めて6月の何処かで全て非公開にしようと考えています。

『昔のシャニソンはこんなnoteを書かれてた時もあったんだよな』と笑い話に出来る日が来るのを心から願っています。

星の声のMV、本当に綺麗です。
シャニソンが生まれてきてくれて良かった。
これからも応援しています。

画像


この記事が気に入ったらサポートをしてみませんか?

ピックアップされています

何度か読む

  • 17本

コメント

shimaguru
内容も良かったけど、記事構成が好みでした。
別のテーマでも良いので、是非また機会があれば記事を書いてくれると嬉しいです。
fumi
学マスをやってみたくなりました
よう
私も過去にデザイン業をしていたので、ひっかかった部分が同じでした。可読性や視線誘導など、基本的なデザインが良くなればと思います。同じように感じていた方がいて安心しました。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。
シャニソンが抱える問題をデザイナーの視点で考察する②チュートリアル・視認性・その他|noteさん