EventJapanPicked 2026.09.26

ポケモンカードゲーム30周年特別サイト

イベント / ライブのWebデザイン参考 — トレーディングカードゲーム

出典: 30th.pokemon-card.com

Editor's note — 編集部の視点

入口はカードの裏面1枚で、まずクリックさせる。

ポケモンカードゲーム30周年特別サイトは、銀色のグラデーションにカードの裏面だけを置いたオープニングで、1枚を手に取る感覚から周年の体験を始めさせる。

PipTrends & VTuber

え、待って、PCだと「クリックしてね」、スマホだと「タップしてね」って文言まで変えてる！！こういう細かい気づかい、ずっと遊んできたファンほど刺さるやつ…神！

1オープニングはロゴとカード裏面、「カードをクリックしてね」だけ。説明ゼロで、手が勝手に動く
2下に「すぐにサイトを見たい方はこちら」を小さく残す。演出を楽しむ人にも、急ぐ人にも出口がある
3背景は銀のグラデーションで、カードの黄色い縁だけが浮く。特別な1枚を手にする気分を質感で作る

Color

ポケモンカードゲーム30周年特別サイトの配色

Typography

使用フォントと無料の代替

本文・案内文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字本文

Aa あア

使用: Manrope
代替: Manrope

英字見出し

Aa あア

使用: Michroma
代替: Michroma

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型56px · 1 · 400
本文The quick brown fox — 参考を型にする12px · 1.4 · 500
ボタンKatapick 型13px · 1.4 · 500

Structure

ページ構成（上から順）

01
オープニング
銀色のグラデーション地に、ロゴ、「30周年特別サイト」、カードの裏面、「カードをクリックしてね」（SPでは「タップしてね」）、スキップ用の「すぐにサイトを見たい方はこちら」を中央1列に並べる。
02
メインビジュアル
h1「POKÉMON CARD GAME 30th」を掲げるメインのセクション。続いてヘッダーのナビゲーションが現れる。
03
NEWS
30周年に関するお知らせの一覧。
04
PRODUCT
30周年の記念商品を紹介するセクション。ページ内で最も縦に長い。
05
EVENT
記念イベントの情報。
06
SPECIAL
特別企画への入口。
07
MOVIE
映像コンテンツのセクション。
08
締めのセクション
再び「POKÉMON CARD GAME 30th」を掲げてページを締める。
09
フッター
関連リンクと権利表記。

Interaction

アニメーション・インタラクション

スタックに Three.js と WebGL があり、カードのクリックで3Dの回転や反転の演出が入ると思われる。PlaneGeometry の表裏に別テクスチャを貼り、rotation.y をアニメーションさせると再現可能
案内文はPCで「クリックしてね」、SPで「タップしてね」と切り替わる。@media (pointer: coarse) で出し分けると実装できる
スキップリンクで演出を飛ばせる。2回目以降の訪問では localStorage のフラグでオープニングを省略する設計も考えられる

スクロールのコマ撮り300–600ms

ポケモンカードゲーム30周年特別サイトをスクロールしたときのフレーム1 — 01

検出された技術:Three.jsNext.jsWebGL

Reproduce

再現するときのポイント

01オープニングは要素を5つ程度に絞り、中央1列に並べて「押す場所」を迷わせない
02背景は左右が暗く中央が明るい銀のグラデーションにし、カードの縁の色だけを浮かせる
03演出をクリックで始めさせる場合は、必ずスキップの導線を同じ画面に置く
04カードやキャラクター、ロゴは使わず、オリジナルのカード・シンボルに差し替えて“1枚を手に取る”体験の構造だけを取り入れる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

pokemon-card-30th.katapick.md

1---
2title: "ポケモンカードゲーム30周年特別サイト 再現用デザイン仕様書"
3source: https://www.30th.pokemon-card.com/
4katapick: https://katapick.com/sites/pokemon-card-30th
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [周年, 3D/WebGL, ミニマル, 余白]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# ポケモンカードゲーム30周年特別サイト — 再現用デザイン仕様書
17 
18> 入口はカードの裏面1枚で、まずクリックさせる。ポケモンカードゲーム30周年特別サイトは、銀色のグラデーションにカードの裏面だけを置いたオープニングで、1枚を手に取る感覚から周年の体験を始めさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22