AIで知識ゼロからアプリ開発1000時間 #9

＃9：派手すぎず、目立たせたい – エフェクトとUIのせめぎ合い

アプリ内で毎日レベルが上がるたびに、ペルソナ5っぽいかっこいい演出を入れたくて試行錯誤したけど、派手すぎると逆に邪魔。鉄格子の扉とかいろいろ試した末に、最終的には赤と黒のグラデーション枠＋細いラインが上がるだけの「さりげないエフェクト」に落ち着いた、って話。CSSやReactの状態管理のちょっとした罠にもぶつかりながら、UIの“引き算”を学んだ。

きょうもアプリ開発の続きばやってだんず。今回のテーマは「レベルアップ演出」だじゃ。毎日レベルが上がる仕様にしとるもんで、なんかしら“おぉ、上がったぞ！”って感覚をユーザーさ感じでほしいべさ。

最初はな、どうせやるなら派手にしちまえって、ペルソナ5みてぇな鉄格子の扉がガシャーンって開くようなエフェクト試してみだんず。CSSで左右の鉄棒をズズズって動かしてな、網目の鉄格子もがっちり再現してみだんだども……

結果：ダサい。

「牢獄っぽい」はいいけど、見た目がちょっと“やりすぎ感”あるし、なにより毎日このアニメーション見せられるユーザーがたまったもんでねぇ。しかも、アニメーションのせいでステータス枠が一瞬消えて、画面の左端に謎のミニ四角い枠が一瞬ピカって出てすぐ消えるとかいう怪奇現象まで発生してまったじゃ。完全に「ホラー」だべさ。

そんで気づいた。「これはアニメーションで感動させるんでねぇ。雰囲気で魅せるやつだ」って。

次に試したのは、「赤と黒のグラデーション枠がふわっと光る」だけのシンプルな演出。.status-box に level-up クラスつけて、CSSアニメーションで枠が一瞬だけ光るようにしたんず。その上で、setTimeout() 使ってクラス自動で消して、毎日自動でついたり消えたりするように。

さらにもう一工夫。枠だけでなく、細長い赤と黒のラインが「ススーッ」と下から上に流れるアニメーションを追加してみだんず。これが思ったよりええ感じに決まって、まさに“さりげないけど印象に残る”演出になったじゃ。

ただ、途中でエラーも出たべ。「levelUp is not defined」とか、「setShowDoor が見つからん」とかで、ReactのuseState忘れてて怒られたり、そもそもJSXの書き方間違えてたり。おら、コロン抜けて「鰓（エラ）」って赤い波線出た時はほんとに笑ったぞ。

そんでもこういう失敗繰り返しながら、だんだん「UIって“足し算”じゃねぇ、“引き算”だな」って気づいてきたんず。ペルソナ5のかっこよさも、派手な動きじゃなくて“統一感あるデザインと間の取り方”がうまさの秘密だべな。

次からはもっと慎重に、でも手は抜かず、“世界観を壊さない”演出づくりを続けていぐべ。