レア度を「ふつう→ホロ→立体→飛び出す」の4段階で設計した話と、没になった案から分かったこと

ブラウザで動くカードのレア度を、「ふつう → ホロ → 立体 → 飛び出す」の4段階に設計しました。決めた考え方は、驚きは情報量ではなく「思い込みが1つ裏切られること」で生まれる、1枚のカードに足す決まりは1つだけ、操作は傾けるだけ、止まっている間は静か、の4点です。その先を目指して10段以上試した結果、没になった案が大半でした。この記事では、4段階の設計と、没になった案から分かったことを書きます。

4段階の設計

考え方

まず、レア度をどう作るかの方針を決めました。

1. 驚きは、情報量（飾りの多さ）ではなく、「思い込みが1つ裏切られること」で生まれる。写真が平らな板だと思っていたら奥行きがあった、板の中に収まっていると思っていたら枠の外へ人物が出てきた、という種類の驚きです。
2. 1枚のカードに足す決まりは1つだけにする。
3. 操作は傾けるだけ。ボタンも自動の揺れもない。
4. 止まっている間は静か。普通のカードとの落差が、そのままレアの正体になる。

つまり、飾りをたくさん足して派手にするのではなく、「何かが1つだけ、普通と違う」状態を段階的に作る方針です。

4つの段

段	名前	何が変わるか
1	ふつう	絵は変わらない
2	ホロ	光の角度で色が変わる
3	立体	奥行きが動く
4	飛び出す	人物が枠の外へ出る

同じ写真、同じ配置で4枚を並べ、どれか1枚をなぞると4枚が同じ傾きで動くようにしました。段ごとの違いが、並べて見るだけで分かります。

ホロの作り方は ホロ・箔押し・ラメの記事、立体の作り方は 深度マップの記事 にまとめています。人物にかかるホロはシェーダで足しています。CSS の mix-blend-mode をカード直下に置くと、立体の重なりが潰れるためです。

検証は、実ブラウザでエラー0、1枚をなぞると4枚とも同じ角度になること、静止と傾けた画面の目視、色のコントラスト検査の合格でした。4段階の評価は「全部ちゃんといい」でした。

その先を試して、没になった案

4段階の評価が高かったので、「その先」を試すことにしました。ここからは没の連続でした。

光と影：方向が違った

5段目に「光と影」を作りました。光源があり、深度から作った凹凸で明暗が動き、人物の影が枠の外にも落ちます。評価は、フィギュアのような質感が出て「すごい」が、方向性が違うので没、でした。人物の陰影を変える方向は、以後やらないと決めました。

箱：良いが別の方向

6段目の「箱」は、カードの中を CSS の遠近で奥の壁と4面の内壁を持つ箱にしました。人物を元の大きさのまま置くと箱が全部隠れるので、8割、のちに9割の大きさに縮めて箱の中に置きました。評価は「良い、ただし飛び出すとは別の方向」でした。

粒・厚み・チャーム：全部没

続けて、奥の光の粒、手前の金の粒、厚み（側面）、揺れるチャーム（動かした加速で揺れ、止めると静まる）を足しました。10段目まで積み、1ページに4枚並べて比べましたが、評価は「変わり絵は良さそう、それ以外はゴミ」でした。箱、奥の光、手前の粒、厚み、チャームは没です。

この段階で出ていた弱点が、すでに答えを示していました。厚みは傾き最大でも数pxしか見えない、10段分積むと要素が多くなり、合意した「1枚に決まり1つ」から外れてきている、という点です。さらに、10段目では画面が止まるという報告が出ました。手元では再現せず、粒のぼかしと毎コマの描き直しが重かった可能性がある、というところまでしか分かっていません。対策として、傾きが変わらないコマは描き直さないようにしました。

本筋の先、亜種の枝

「変わり絵」は、右へ傾けきると別の写真に切り替わる表現です。顔の位置と大きさを合わせて重ねているだけで、写真は加工していません。これは亜種として残し、4種類（変わり絵、両側、手前から変わる、カードごと変わる）に広げました。

本筋の5〜8段は、「人物がカードを越えてこちらへ来る」という軸で作りました。カードより大きい、深い奥行き、背景がもれる、近づいてくる、の4つです。写真1枚だけで、物は足していません。評価は「亜種進化系。超オーバー表現としてはあり」でした。

最後に、表面とピントの枝を試しました。ラメ、立体に沿うホロ、彫り、ピントの4案です。評価は「表現としては面白いけど今回は合わない」で没になりました。ただし、ラメだけは「ノーマル状態に付けるべき」という指摘を受けて、ふつうのカードの亜種として残しています。

分かったこと

設計を始めるときに「飾りを足さない」と決めていたのに、試すうちに足す案が増えていきました。10段目まで積んだ時点で、自分で決めた約束から外れていることに気づいた、というのが正直なところです。約束を文章で残し、並べて比べる場を作っておいたので、外れたことに早く気づけました。

没になった案を並べると、共通点がありました。

• 効いたのは、「写真そのものが豊かになる」決まりだけでした。奥行き、飛び出す、別の写真に変わる。
• 外れたのは、「物や飾りを足す」決まりでした。粒、チャーム、側面、陰影。

これは私の解釈ですが、写真の中身が変わると、「平らな板だと思っていた」という思い込みが裏切られます。一方、粒やチャームは写真の外から足す飾りで、足せば足すほど、見る人の注意が分散します。最初に決めた「思い込みを1つ裏切る」という考え方は、記録を見返すと、没になった案がすべて外れていた理由をそのまま説明していました。

残っている弱点は2つです。動きの気持ちよさは、画面の目視と値の確認までで、実機の体感での確認は十分ではありません。また、10段目の画面が止まる報告は、原因を特定できていません。

まとめ

レア度を4段階（ふつう、ホロ、立体、飛び出す）にして、1枚につき足す決まりを1つ、操作は傾けるだけ、止まっている間は静か、という約束を守ると、段の差が並べるだけで伝わります。その先で10段以上試して分かったのは、写真そのものが変わる決まりは効き、飾りを足す決まりは効かないことでした。次は、実際のカードゲームがどんな決まりを使っているかを調べました（トレーディングカードのレア表現12種）。