「パタパタ」で作ったら「チカチカしてるだけ」と言われて、仕組みごと作り直した話
音楽シェアアプリ「Wavelength」のマイページには、「よく聴くアーティスト」「一番リアクションをくれた人」「共有した曲の数」といった統計を並べたカードがある。これをただ表示するだけでなく、値が確定するまで少し気持ちよく見せたいと思ったのが始まりだった。
「パタパタ」を作った
「昔の駅にあった、パタパタ切り替わる発車標みたいにしたい」という、わりと具体的なイメージが最初に出てきた。京急品川駅で見た、あの黒い板がガシャンガシャン切り替わるやつだ。
これなら実装イメージが湧きやすい。1文字ずつのマスを用意して、ランダムな文字を高速に切り替えながら、最後に正解の文字で止める。文字が反転するタイミングで中身を差し替えれば、それらしい「パタッ」というフリップ感が出せる。ネイティブアプリのビルドは1回ごとに時間がかかるので、まずブラウザで動くモックアップを作って速度感を先に詰めてから、アプリ側に移植した。実機で確認すると「背景のカードや区切り線はいらない、単純にパラパラしてほしかっただけ」という感想をもらったので、装飾を削ってシンプルにした。ここまでで一通り完成し、一度は「良いと思う」というOKも出た。
完成したのに、イメージと違った
ところが一通り仕上がったあとで、こう言われた。「よく考えたら最初のイメージは、数字がカウントアップしていく感じ、つまりスロットマシーンで下から上にぐるぐる回るイメージだった。今のパラパラは、ただチカチカしてるだけに見える」。
同じ「パタパタ」という言葉から、自分は「その場で反転を繰り返す」ものを思い浮かべていたのに、相手が実際にイメージしていたのは「連続的にスクロールして、だんだん減速しながら止まる」という、動きの原理からして別物だった。京急品川という具体的な参照元まであったのに、それでも解釈がズレた。擬音語や比喩だけでアニメーションを発注/受注するときは、頭の中で再生されている映像が実は全然違う、ということが起こりうる。参照元があるなら、動画や具体的な用語まで踏み込んで確認しておいた方が、結局は手戻りが少ない。
仕組みごと作り直す
というわけで、フリップ方式は一旦捨てて、スロットリール方式でゼロから書き直すことにした。文字ごとに、候補の文字を縦一列に並べた帯(リール)を用意し、それを1文字分の高さの窓の中で下から上にスクロールさせて、最後の要素(正解の文字)のところで止める。動きの前半は勢いよく、終盤にすっと減速するようなカーブを使うと、スロットマシーンらしい「回転して着地する」感覚に近づいた。文字ごとに開始タイミングを少しずつずらせば、実際のスロット台のリールが順番に止まっていくような連鎖的な着地も再現できた。
おまけ: 日本語と英語で文字の幅が全然違う
リール方式に切り替えたあと、今度は日本語の名前を表示させたら「一文字一文字の右側が切れている」という報告が来た。原因は単純で、英字を基準に決め打ちした狭い幅のマスに、それより幅が必要な日本語の文字を押し込んでいたからだった。
最初は「英字なら狭い幅、日本語なら広い幅」という2択の応急処置で直した。これでほとんどのケースは解決したが、しばらくして今度は英語の名前で「iとjの間が広く感じる」という、逆方向の指摘が来た。細い文字と太い文字を同じ幅のマスに押し込んでいる限り、どちらかの余白は必ず目立つ。2〜3段階に幅を分けるような対症療法では、いずれ別の例外にぶつかる。
最終的には、1文字ごとに実際のフォントの描画幅を測定して、その文字専用の幅を割り当てる方式に切り替えた。これでようやく、英語も日本語も、混在した名前も、細い文字は狭く太い文字は広く、という自然な見た目になった。
持ち帰ったこと
- 「パタパタ」「ぐるぐる」のような擬音語だけでアニメーションを発注/受注すると、想像している動きが全然違うことがある。参照元がある場合はできるだけ具体的に(動画や用語まで)特定してから作り始めた方が良い
- 「窓の中をコンテンツがスクロールする」ような表現は、位置をずらす・表示領域を固定する・はみ出た部分を切り取る、という処理の順番が結果を左右する
- 文字の横幅が体験に直結する場面では、「文字の種類でマスの幅を何段階かに分ける」対症療法はいずれ限界に当たる。最初から実際のフォント描画幅を測る方式にする方が、結局は近道になることが多い