# ポケモンカードゲーム30周年特別サイト｜イベント / ライブのWebデザイン参考

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

- URL: https://www.30th.pokemon-card.com/
- 解説ページ: https://katapick.com/sites/pokemon-card-30th
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: トレーディングカードゲーム
- テイスト: 周年、3D/WebGL、ミニマル、余白
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #e5eaea Silver Foil（オープニング背景）
- #ffffff White（背景 / テキスト）
- #000000 Black（セクション背景）
- #01aaf1 Energy Blue（セクション背景 / アクセント）
- #3a363c Charcoal（テキスト）
- #dde0fc Lavender Mist（補助テキスト）

## フォント
- 本文・案内文: Noto Sans JP（代替: Noto Sans JP）
- 英字本文: Manrope（代替: Manrope）
- 英字見出し: Michroma（代替: Michroma）

## よくある質問
### ポケモンカードゲーム30周年特別サイトで使われているフォントは？
本文に Noto Sans JP、英字に Manrope、英字の見出しに Michroma が使われています。いずれも Google Fonts で無料で利用できます。ロゴは画像です。

### クリックで始まるオープニング演出はどう作る？
オープニングを全画面のレイヤーとして重ね、クリックでアニメーションを再生したあとに非表示にします。3Dの回転を見せるなら Three.js、簡易的には CSS の transform: rotateY と backface-visibility で表裏を切り替えられます。

### 周年サイトの参考にするときの注意点は？
カードやキャラクター、ロゴの権利は権利者に帰属します。参考にするのはオープニングの構成やスキップ導線などの考え方までにとどめ、素材はオリジナルのものを用意してください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/pokemon-card-30th からダウンロードできます。
出典: Katapick（https://katapick.com）