oysk2 lab

紙のカードでは絶対にできない表現を試した記録：良かったものと弱かったもの

に公開

画面のカードならではの表現を十数個試し、評価した記録です。枠から飛び出す、時刻で変わる、傾きで動く、育つ、並べるとつながるなど。良かったもの、弱かったもの、没にしたものと、その理由をまとめます。

目次
  1. 最初に作った5つの実演
  2. 反応を受けて、組み合わせへ
  3. 1ページにまとめすぎて重くなった
  4. 参考にした先行例
  5. 傾き、育つ、なでる、並べる
  6. 罠
  7. 積み上げた「その先」の段と、没になったもの
  8. 検証と、未確認のこと
  9. まとめ

「物理のカードでは絶対にできないカード表現が見たい。限界値が見たい」という依頼から、動く実演を十数個作って評価しました。結論から言うと、効いたのは「写真そのものが豊かになる」決まり（奥行き、枠の外への飛び出し、別の写真への切り替わり）で、物や飾りを足す決まりは外れました。

  • 枠から飛び出す、時間帯で変わる、の2つは強く、評価も安定していた
  • 液体、光で照らす、は静止画では弱く、組み合わせで化けるかどうかが分かれ目だった
  • 飾りを足す案（粒、チャーム、側面の厚み、陰影）は、全部没になった
  • 実演を1ページに詰め込むと重くなるので、1ページ1実演に分けた

最初に作った5つの実演

最初の5つは、紙には物理的に作れないものを思いつくままに並べたものです。

  1. 液体が入っているカード：液面が傾きに合わせて傾き、波立つ。屈折と泡もつけた
  2. ペンライトで照らす：人物の深度から凹凸を作り、光を当て直す
  3. 時刻で変わる：20時に解禁される。つまみで時刻を動かして確かめられる
  4. 枠から飛び出す：人物がカードの外まで出る
  5. 紙吹雪があふれる：ページ全体に紙吹雪が出る

絵を見ての評価（静止画での評価で、動きは未確認）は、④と⑤が「すごい」、③が「まあまあ」、①と②は「まだ弱い」でした。見た目の派手さと評価が一致しなかったのが興味深い点です。液体や光は、仕組みとしては作り込んでいたのに、静止画では見せ場が伝わりませんでした。

反応を受けて、組み合わせへ

実演ページを見た側の反応はこうでした。「枠から飛び出すはめっちゃいい」「誕生日の表現は弱い」「液体は悪くないがあと一声」「光と時刻は組み合わせ次第」。さらに、「20時に解禁される」カードは、時間が経たないと変化が分からない、という指摘もありました。

直しは次のとおりです。

  • 時刻のカードは、開いた瞬間から19:30 → 20:30へ早送りし、20時に「解禁！」と出るようにした
  • 評価の高かった「枠から飛び出す」を土台にして、他の要素と掛け合わせた第2弾を作った

第2弾の4つと評価は次のとおりです。

  • 誕生日カードの作り直し：飛び出す＋風船が浮かんで割れる＋花火＋カードより広い横断幕＋年越しまでの残り日数（本物の日付で計算）。お祝いの実行時は「すごい」〜「まあまあ」
  • 液体×飛び出す：傾けた縁からしずくがページへ落ちてたまり、残量が減る。評価は「まあまあ」。のちに、液体があふれる表現は本編のパックからは外す判断になった（実演ページは検証用として残している）
  • ペンライト×飛び出す：色3種、振る速さで盛り上がりの数字が上がる。光の線が多すぎて「弱い」ので、線を減らした（その後は未目視）
  • 時間帯×飛び出す：19時に色が付いて枠の外へ出て、20時に解禁、23時に枠の中へ戻る。評価は「すごい」

掛け合わせて化けたのは「時間帯×飛び出す」でした。時刻だけでは「まあまあ」だったものが、飛び出しと組むと一番強い表現に変わりました。逆に「ペンライト×飛び出す」は、足した要素（光の線）が多すぎて、飛び出しの良さを消していました。

1ページにまとめすぎて重くなった

実演を全部1ページに載せたところ、「画面がめちゃくちゃ重い」という指摘が来ました。入口の一覧ページと、カード4ページ、実演8ページ（1ページ1実演）に分けました。目安は「実演は1つ、カードは4〜5枚まで」です。

ここで測れなかったことがあります。自動実行の Chrome では、まとめ版も毎秒61コマと出てしまい、分割して軽くなったのかを数字で確かめられませんでした。軽くなったかは、実機の体感で確かめる必要がある、と記録しています。

参考にした先行例

ほかの表現を探すために、先行例を調べました。ポケポケのイマーシブカード（長押しでカードの中に入る）、Pokebox（Webカメラで頭の位置を追い、箱の中を覗く見え方）、MARVEL SNAP（枠割れ → 3D → 動く → 分割とフレア）、Balatro（版の重ねがけ）です。このうち、頭の位置で覗く方法は別の記事 Webカメラで窓を覗くように見せる表現 にまとめました。

「カードの中に入る」表現と、配信や伝票を題材にした表現は、どちらも評価は「まあまあ」でした。後者では、倒れた場面が弱い、という指摘があります。

傾き、育つ、なでる、並べる

その後に作った5つです。

  • スマホの傾きで見る：端末の傾きセンサーでカードが動く
  • 育つ：回数が 0・3・6・10・15 に達するたびに5段階に変わる
  • なでると猫になる：しっぽは絵で、耳は写真の猫耳をずらしているだけ
  • 顔文字が流れる
  • 並べるとつながる：2枚並べると、片方のカードの量がもう片方へ流れ込む。量の合計は変わらない

傾きの処理は、実際にはこれだけで動きます。

const clamp = v => Math.max(-1, Math.min(1, v));
let base = null;
const onOri = e => {
  if (e.gamma == null || e.beta == null) return;
  if (!base) base = { g: e.gamma, b: e.beta };   // 最初の持ち方を正面にする
  const x = clamp((e.gamma - base.g) / 22);
  const y = clamp((e.beta  - base.b) / 22);
  apply(card, x, y);
};
btn.addEventListener('click', async () => {
  if (DeviceOrientationEvent.requestPermission) {   // iOS は許可が要る
    const r = await DeviceOrientationEvent.requestPermission();
    if (r !== 'granted') return;
  }
  addEventListener('deviceorientation', onOri);
});

最初の持ち方を「正面」として記録し、そこからの角度の差を ±22度で -1〜1 に丸めます。端末の絶対的な角度ではなく、持ち始めからの差を使う形です。許可の画面は iOS だけに出る仕組みで、許可されなかった場合も、指でなぞれば動くようにしています。

「育つ」は、回数のしきい値を並べておいて、何段階目かを数えるだけの作りです。

const TH = [0, 3, 6, 10, 15];
const NAME = ['ふつうのカード', '枠の外に出る', '立体になる', '動く', '枠が光る'];
const lvOf = v => TH.filter(t => v >= t).length;   // 1〜5 段階

回数はブラウザの localStorage に残すので、再読み込みしても続きます。

罠

実装で踏んだ地雷を2つ書いておきます。

  • 輪（人物を囲む円）は切り抜きなので、drop-shadow で光らせようとしても光が出ない。光は、クリップした箱の box-shadow で出す
  • 液体のカードは、カードの暗い被せ（.shade）が濃いと、液体そのものが見えなくなる

別の罠もあります。実演ごとの JS を guard() で「その実演のあるページだけ」に包む時、終端を指定しないと、後ろに足した別のブロックまで巻き込みました。新しい実演が動かなかった原因は、これでした。

積み上げた「その先」の段と、没になったもの

レアの4段階（ふつう → ホロ → 立体 → 飛び出す）は、評価が「全部ちゃんといい」でした。その先を目指して、段を足していきました。

  • 5段目「光と影」：光源を置き、人物の影をカードの外に落とす。フィギュアのような印象になり、方向性が違うので没
  • 「箱」：カードの中を箱にする。良いが、飛び出しとは別の方向
  • 6〜10段目：奥の光の粒、手前の金の粒、厚み（側面）、揺れるチャーム、変わり絵

評価は「変わり絵は良さそう、それ以外はゴミ」でした。箱・奥の光・手前の粒・厚み・揺れるチャームは没にして、ページは別名で保管しました。弱点として、厚みは、傾き最大でも数pxしか見えませんでした。10段積むと要素が多くなり、「1枚に決まり1つ」という最初の合意からも外れていました。10段目で「止まる」という報告もありましたが、こちらでは再現しませんでした。

ここで得た学びを、記録からそのまま引きます。「効いたのは、写真そのものが豊かになる決まり（奥行き・飛び出す・別の写真）。物や飾りを足す決まり（粒・チャーム・側面・陰影）は全部外れた」。

変わり絵は、亜種の枝として残しました。右へ傾けきると別の写真に切り替わります。さらに、左で別の写真に変わる「両側」、深度の順に入れ替わる「手前から変わる」、衣装に合わせてワザや背景ごと変わる「カードごと変わる」も作りました。顔の位置と大きさを合わせて重ねているだけで、写真は加工していません。

本筋は、「人物がカードを越えてこちらへ来る」を軸に伸ばしました。5段目は人物を1.2倍にして頭と腕をカードの外へ出す、6段目は奥行きを深く（ずれを2倍）、7段目は背景がカードの外へぼけて続く、8段目は傾けるほど人物が寄る、です。写真1枚だけで、物は足していません。

検証と、未確認のこと

実Chromeで全ページのエラー0を確認し、傾きは合成したセンサーの値で確かめました。「育つ」は再読み込みしても続くこと、「つながる」は量の合計が保たれることも確認しています。配色の自動検査も全ページ合格です。

未確認なのは、スマホ実機での傾きです。傾きセンサーは https のページでしか使えず、手元のファイルをスマホで開く経路がありませんでした。動きの気持ちよさ全般も、数字では測れていません。

まとめ

紙にできない表現を十数個試して、残ったのは「写真そのものを豊かにする」方向でした。組み合わせで化けるものがあり、足して派手にするほど外れる、というのが私の得た結論です。ただし、これは私の好みと少数の評価に基づくもので、一般論ではありません。

表現の土台になっている切り抜きは 切り抜きの記事 に書きました。

記事一覧へ戻る