ポケモンカードのキラキラ光るホログラフィック効果をCSSで再現したサイトが登場

カードゲームのレアカードには、見る角度を変えると光り方が変わったり独特の質感があったりするものがあるため、カードの「レア感」は、デジタル上ではその魅力を十分に伝えることが難しいもの。ウェブ開発者のサイモン・ゲルナー氏は、ポケモンカードの高レアリティカードの光り方や質感をCSSで再現した様子をサイトで公開し、詳細をGitHubで共有しています。

Pokémon Cards CSS Holographic Effect
https://poke-holo.simey.me/

GitHub - simeydotme/pokemon-cards-css: A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.
https://github.com/simeydotme/pokemon-cards-css

レアカードの魅力は画面上ではなかなか伝えることが難しいことがあります。例えば以下は、ポケモンカード公式サイトの「カード一覧」から、特にレアな「SR」のカードを拡大してみたところ。カード全体にイラストがあるかっこよさや、普通のカードと違う質感なことは分かりますが、レアカード特有の輝きは伝わってきません。

そんなレアカードのホログラフィック効果をCSSで再現したのが、ゲルナー氏の「pokemon-cards-css」です。ゲルナー氏のサイトでは、「ポケモンカードゲーム ソード＆シールド」シリーズのカードを、レアカードの魅力を味わいながらじっくり見ることができます。サイトではレア度別にカードが並んでおり、カードにマウスオンしてぐるぐる動かすことで、角度を変えて光の当たり方を見ることが可能。

また、カードをクリックすることで拡大して観察できます。

実際のカードでも、テキスト部分にホログラフィック効果がほどこされて、角度を変えて光を当てると模様が浮き上がるものがあります。ゲルナー氏のサイトでは、そのようなカードの効果も再現されています。

レア度「R」のカードは、角度を変えるとイラスト部分に光が入っていることが分かります。

「かがやくリザードン」など、色違いのポケモンが描かれたカードは、カード全体が特殊な光り方をしています。

マウスオンして角度を変えてみると、斜線状に入った輝きでレアカードのかっこよさがよく分かりました。

「SR」のカードは、全面に描かれたイラストと美しい光り方が魅力的。

輝き方が異なるレアカードの質感も楽しむことができます。

ポケモンカードはポケモンだけではなくトレーナーキャラのカードも人気です。トレーナーのレアカードは、ポケモンのカードとはまた違う魅力的な光り方をしているため、実際のカードを眺めるようにじっくり観察できます。

さらに、以下は虹色に輝く「HR」のカード。レアカードの中でも特に画面上では実物の魅力が伝わりにくいものですが、角度を変えて美しい輝きを見ることが可能です。

そのほか、検索ウィンドウからカード名を検索することもできます。範囲は「ポケモンカードゲーム ソード＆シールド」の全カードで、英語名で入力する必要があります。「ソード＆シールド」の看板ポケモンである「ザシアン」の英語名「Zacian」を入力。

すると、ザシアンのカード全種類と全レアリティが表示されました。

トレーナー名でも検索が可能ですが、英語版のキャラクター名に合わせる必要があります。

「pokemon-cards-css」はGitHubで詳細が公開されています。