トレーディングカードのレア表現12種を調べてブラウザで再現した記録と、別の目での評価

実際のトレーディングカードゲームには、ノーマルからゴールドレアまで、何段階ものレア表現があります。これを12種類調べてブラウザで再現しました。調べて分かった作りは、「名前の箔の色」「絵の光り方」「カード全体の加工」の3つの組み合わせです。この記事では、その整理のしかたと、シェーダでの再現、別の目（自分以外の評価者）に見てもらって分かった弱点を書きます。

きっかけ

自作のカードで、紙の加工を10段作ったところ（ホロ・箔押し・ラメの記事）、柄ホロ、割れホロ、全面箔が「地味すぎる」という評価を受けました。自分で考えた加工は、実物のカードが持っている豊富さに届いていません。そこで、既存のカードゲーム（遊戯王）のレア表現を一通り洗い出し、同じことをやってみることにしました。

調べて分かった作り

調べた情報（トレカの情報サイトなど）を読んで、レア表現は次の3つの要素の組み合わせで説明できることが分かりました。

1. 名前の箔の色：銀、金、虹など。
2. 絵の光り方：ホロ、格子状、浮き彫り、立体のホログラムなど。
3. カード全体の加工：全体に粒、波紋、格子、金の照りなど。

この3つを軸に、12種類を整理しました。

略称	名前	作り
N	ノーマル	加工なし
R	レア	名前だけ銀の箔
SR	スーパーレア	絵だけがホロ。名前は加工なし
UR	ウルトラレア	名前が金の箔、絵がホロ
SE	シークレットレア	名前が虹色の箔、絵が斜めの格子
P	パラレルレア	カード全体に細かい粒、名前は金
UL	アルティメットレア	名前が金、絵と枠が浮き彫り
HR	ホログラフィックレア	絵が白っぽい立体のホログラム、名前は銀
CR	コレクターズレア	全体に波紋のような模様、名前は虹色
PSE	プリズマティックシークレット	全体が縦横の格子、名前は銀
QCSE	クォーターセンチュリーシークレット	全体が斜めの格子、文字の欄に記念の透かし
GR	ゴールドレア	枠も名前も金、全体に金の照り

クォーターセンチュリーの透かしは、実物の図柄を使えないので、この試作では肉球の形で代用しました。

再現の仕組み

名前の箔は CSS

名前の箔は、グラデーションの背景を文字に見せる CSS です。銀は色の変数だけ変え、虹は6色のグラデーションを横に引き伸ばして、傾きの値で背景の位置を動かします。

.rar.ns .name { --f1:#6f7682; --f4:#a9b2c0; --f2:#e9eef5; --f3:#ffffff; }
.rar.nr .name {
  background-image: linear-gradient(112deg,
    #ff5d8f, #ffd666, #7dffb2, #6ec8ff, #c58bff, #ff5d8f, #ffd666, #7dffb2);
  background-size: 260% 100%;
  background-position: calc(100% - var(--mx) * 1%) 0;
}

--mx は、指やマウスの横位置（0〜100）です。傾けると虹の帯が横に流れます。

絵とカード全体の加工は1つのシェーダ

絵の光り方とカード全体の加工は、カードの一番上に重ねる1枚の層を描く FS.ygo というシェーダで作りました。uMode が13〜22の値で分岐し、傾きの値から作った光の筋 sw を共通で使います。

斜めの格子（シークレットレア）は、座標を斜めに回転して格子に区切り、格子ごとに乱数で光るタイミングを変えます。

vec2 d = vec2(v.x*30. + v.y*42., v.x*30. - v.y*42.) * sc;
vec2 id = floor(d);
vec2 f = abs(fract(d) - .5);
float cell = smoothstep(.5, .43, max(f.x, f.y));
float fl = pow(.5 + .5*sin(hs(id)*6.283 + uHl.x*9. + uHl.y*6.), 2.);
c  = mix(vec3(1.), rbw(hs(id + 7.) + sw*.6), .6) * .8;
al = A * cell * (.16 + tl*.48) * (.25 + .75*fl);

cell は格子の四角い面を作り、fl は格子ごとに光る時機をずらします。色は、白と虹色を混ぜています。縦横の格子（プリズマティック）は同じ考え方で別の分岐として書き、波紋（コレクターズ）は中心からの距離の sin で作りました。透かしは、文字の欄の位置に肉球の形のマスクを置き、そこだけ金色に寄せて明るさを上げています。

color-dodge で派手さを出す

層は、mix-blend-mode: color-dodge で下の絵に合成しました。派手さを出すためです。この方法は、立体のカードに重ねると重なりが潰れる罠があるのですが（別の記事で書きました）、この12種類は平らなカードなので問題ありません。

アルティメットだけは別物

アルティメットレアは、絵と枠が浮き彫りに見える加工で、他の11種類とは作りが違います。シェーダの中に、奥行きの画像と、写真そのものの明るさの細かい差から彫りの明暗を作る処理を入れました。この加工は、評価で最も苦戦したため、別の記事にまとめました（浮き彫り加工の再現）。

別の目での評価

作った12種類は、作業していた環境で画像を見られる枚数に上限があったため、別の評価者に画像を見てもらいました。結果は次のとおりです。

• 良好：パラレル（P）、ゴールド（GR）、コレクターズ（CR）。
• 弱い：シークレット（SE）とクォーターセンチュリー（QCSE）は、格子が粒状のモザイクに見える。QCSE の肉球の透かしは弱い。
• 弱い：ホログラフィック（HR）は、銀より虹の強さのほうが目立つ。
• 弱い：アルティメット（UL）は、髪の輪郭と枠が中心で、浮き彫りの感じが弱い。
• 弱い：R と UR の差が小さい。

「粒状のモザイクに見える」という指摘から、格子の表現は、細かくすると模様ではなく粒のざらつきに見えてしまうのではないか、と考えています（これは推測で、格子の大きさを変えた比較はまだしていません）。

まとめ

トレカのレア表現は、名前の箔の色、絵の光り方、カード全体の加工の3軸で整理でき、12種類は1つのシェーダと CSS の組み合わせで再現できました。評価では、粒やゴールドの表現は良く、格子や浮き彫りはうまく見えない、という差が出ました。レア度の設計全体の考え方は レア度を4段階で設計した話 にあります。