シバリサバイバーの武器グラフィックを作り直した

シバリサバイバーの武器グラフィックを作り直した。
経緯や感想、失敗談などを書いておく。

絵文字が武器アイコンだった

前提として、シバリサバイバーは直近まで、端末に入っているデフォルトの絵文字を武器アイコンとして使っていた。

絵文字アイコンの種類には限りがあるため、武器が増えると、だんだん同じ絵文字がかぶるようになっていた。

以下、旧絵文字の対応表。（タップすると拡大できます）

さて、絵文字が武器アイコン（しかも被ってるものもあり）なのは、なんだかかっこ悪いし、判別性も悪く、どんな武器かもアイコンから想像がつかない。

正直言って、アイコンとしての役目が果たせていない状態だ。

そこで、アイコンを、武器ごとに見分けがつき、絵を見ただけで攻撃の特徴も想像できるようなものに変えることにした。

Claudeに94個のアイコンを作ってもらった

まずClaudeでアイコンを生成した。武器の特徴がわかりやすいように、94個の武器の絵文字を独自アイコンへ置き換えてもらった。

うわ、めっちゃかっこいい、わかりやすいと思った。
武器の挙動がアイコンに落とし込まれていて、アイコンを見るだけで、どんな挙動をする武器か分かりやすく仕上がっている。

以前使っていた絵文字と比べると視認性は劣るが、そこはUI調整、つまり進化カードの選択画面で大きく表示すれば問題ないだろうと思った。

これでアイコンクオリティもアップし、okかと思って、そのまま公開した。

ところが、長くプレイしてくれているユーザーから、「見づらい」「前の方が良かった」「判別しづらい」といったフィードバックが多数あった。

自分でも実際に、いつものスマホで遊んでみた。
なるほど、たしかに、絵の細部や名前を読まないと何の武器かパッと分からない。

なんだろう、少しごちゃごちゃしている。
パソコンのアイコン一覧では気づけなかった欠点が、実際にスマホで遊ぶと分かってきた。
アイコンは大きく表示されているのに、なぜか、ぱっと見でその武器だと認識できないのだ。目がごちゃごちゃして不快。

とりあえずゲームに支障があるため、ChatGPTに、カードの名前の横へ旧絵文字を併記してもらった。
（この時点でClaudeは2日ぶっ続けの作業のため、今週の利用制限に達していた）

並行して作っていた武器にも違和感

アイコンの作成と並行して、Claudeに武器のグラフィックも作り直してもらっていた。

丸二日にわたって製作を回していたのだが、Claudeが出力した完成品をみると、こちらもやっぱり違和感がある。

ダサい。なんかダサい。なにがダサいんだろう。

実際にテスト環境で、新アイコンと新武器を並べて見て、ようやく原因に気づいた。

シバリサバイバーのグラフィックの特徴は、グロー主体の光やエネルギーの集まりのような武器エフェクトだった。

ところが、新しいバージョンでは、これに強い黒の縁取りが付き、まるでアニメやイラストのようになっていた。

従来のぼんやりと光るような感じから一転して、まったく別のものに見えてしまっていた。

これがゲーム全体の世界観とマッチせず、ダサさ、気持ち悪さ、違和感を生んでいた。

アイコンを作り直す

当初目指していたのは、ぱっと見でその武器だと分かるアイコンを作ること。

アイコンは、まず視認性・判別性が大事だったのだ。
「見やすさ」は妥協してはいけない要素だった。

情報を詰め込んで「よく見れば情報がたっぷりでわかりやすい」アイコンは、アイコンの役割を果たさない。ではない。

シバリサバイバーのプレイヤーは、１ゲーム中、多い時は数百回もアイコンを目にした上で選択する。

プレイヤーにとって必要なのは、第一に、一瞬見ただけでどの武器かを判別できることだったのだ。

アイコンから武器の見た目が想像しやすいことや、アイコンのかっこよさなどは、判別性に比べれば、全然重要なことではなかった。

そこで、ChatGPTで、全部のアイコンの縁取りを整理し、視認性重視＋世界観にマッチしたアイコンを再作成してもらった。

かっこよさや情報量は二の次、まずは見やすさを重視。

余計な縁取りやごちゃついた要素を削除し、あくまで見分けがつくことが第一に。その制約のなかで、武器の特徴を示せるようなアイコンに作り変えた。

アイコンの修正に合わせて、枠線がついてしまったことで世界観に合っていなかった武器の新エフェクトも、全て修正を行った。
以下、いくつか修正例を紹介する。

プラズマサイクロン

アニメっぽい刀をシンプルな光の刃に修正。

リアクターコア

ごちゃごちゃした境界線やエフェクトを削除し、シンプルなグロー円に修正。

プラズマリッパー

縁取りや余計な書き込みを整理し、シンプルなグローの刃に修正。

インフェルノパス

調整前は謎の炎エフェクトが配置されていて、世界観を崩していた。
これはちょっとホワホワしすぎている気がするので、もうちょっと主張を強くする予定。

全件レビュー

このように、Claudeに全部の武器を目視チェックし、一つ一つ修正指示を出し、シバリサバイバーの世界観にマッチする武器として組み上げていった。
「このトゲは要らない」「後ろの帯の位置が変」「炎がダサいので丸ごと削除」などと、一個ずつ調整を重ねていった。

92件全件の目視チェックを終え、無事にアイコン・武器ともにグラフィックが完成。6.2βとしてリリースが行えた。

終わりに

今回の反省は、「可読性が低いアイコンでも、読みやすいくらいに大きく表示すればOKだろう」と思っていたこと。
可読性が低いアイコンは、大きくてもごちゃごちゃしているので見づらい。これが今回の学び。

アイコンは1秒以下で判別できるようにする必要がある。小さな画面で見分けがつくアイコンは、大きな画面でもぱっと見で判別でき、目にストレスがかからない。

いい勉強になったと思う。

アイコンのメンテナンスについて

今回のアップデートの地味な利点は、アイコンをコード生成で作成できたこと。

今後はClaudeやChatGPTで武器の見た目を修正した際、アイコンも合わせて修正できるようになった。
進化した際に選んだ武器のアイコンデザインが、そのままのデザインでフィールドに登場すれば、納得感・しっくり感が得やすいのではないかと思う。