Event日本Japan

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

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

サイトを見る30th.pokemon-card.com
www.30th.pokemon-card.com開く ↗
ポケモンカードゲーム30周年特別サイトのPC版ファーストビューサイトを開く ↗

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

ページ構成（上から順）

  1. 01

    オープニング

    銀色のグラデーション地に、ロゴ、「30周年特別サイト」、カードの裏面、「カードをクリックしてね」（SPでは「タップしてね」）、スキップ用の「すぐにサイトを見たい方はこちら」を中央1列に並べる。

  2. 02

    メインビジュアル

    h1「POKÉMON CARD GAME 30th」を掲げるメインのセクション。続いてヘッダーのナビゲーションが現れる。

  3. 03

    NEWS

    30周年に関するお知らせの一覧。

  4. 04

    PRODUCT

    30周年の記念商品を紹介するセクション。ページ内で最も縦に長い。

  5. 05

    EVENT

    記念イベントの情報。

  6. 06

    SPECIAL

    特別企画への入口。

  7. 07

    MOVIE

    映像コンテンツのセクション。

  8. 08

    締めのセクション

    再び「POKÉMON CARD GAME 30th」を掲げてページを締める。

  9. 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セクションの仕様 / AIっぽさを消すルール / 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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# ポケモンカードゲーム30周年特別サイト — デザイン分析書
16 
17> 入口はカードの裏面1枚で、まずクリックさせる。ポケモンカードゲーム30周年特別サイトは、銀色のグラデーションにカードの裏面だけを置いたオープニングで、1枚を手に取る感覚から周年の体験を始めさせる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPROtokens.jsonFigma / Tokens StudioPROTailwind @themev4 にそのまま貼れるPRO

ポケモンカードゲーム30周年特別サイトについてよくある質問

ポケモンカードゲーム30周年特別サイトで使われているフォントは？

本文に Noto Sans JP、英字に Manrope、英字の見出しに Michroma が使われています。いずれも Google Fonts で無料で利用できます。ロゴは画像です。

クリックで始まるオープニング演出はどう作る？

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

周年サイトの参考にするときの注意点は？

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

安心してお使いいただくために

引用の範囲で掲載
ファーストビューなどの画面を縮小して、解説と実測値に添えています。出典と元サイトへのリンクを必ず表示します。
コードや素材は配布しません
元サイトのコード・画像・文章は提供していません。
MDは数値と構造だけ
デザイン分析MDに、元サイトの文章・画像・コードは含みません。差し替え必須のものも明記しています。
公開されたページだけ
ログインが必要なページや非公開のページは扱いません。robots.txt に従って取得しています。

著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する

ポケモンカードゲーム30周年特別サイトに似た参考サイト

出典: Katapick編集部（2026年10月26日 確認）。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 権利者・制作者の方からの 掲載の取り下げ・修正のご依頼は、原則2営業日以内に対応します。AI・LLM 向けの要約は Markdown 版 を参照してください。

サイトを見る30th.pokemon-card.com