ポケモン30周年（30th）

1. 01

   グローバルヘッダー

   ポケモン公式サイト共通のロゴとナビ（30th / NEWS / GAME / APP / CARD…）、図鑑・サポート・検索のアイコン。

2. 02

   ヒーロー

   パステルの正方形タイルに円弧・星形・ポケモンのシルエットを敷き詰め、中央に「30 Pokémon: Since 1996」のロゴ。

3. 03

   イントロ

   黄色の地に、1996年の『赤・緑』発売から30周年であること、毎月テーマが発表されることを中央揃えで案内。

4. 04

   ピックアップテーマ

   「今のピックアップテーマは ポケモン×ねむる！」を、1文字ずつ色の違うタイルに載せて見せ、ニュースまとめへのボタンを置く。

5. 05

   テーマ別フィルター

   すべて / はじまる / うたう / たべる / あう / でかける / みる / ねむる / つながる / グッズ のピルボタン。

6. 06

   ニュースカード一覧

   黄色の地に、サムネイル付きの白いカードを4列のグリッドで並べ、日付と NEW ラベル、ページネーションを添える。

7. 07

   フッター

   公式サイト共通のナビ、公式SNS、関連サイトへのバナー。

• フィルターのピルで記事一覧を絞り込み、選択中のピルは赤地に白文字で示す
• 記事一覧は「前へ / 1〜5 / 次へ」のページネーションで切り替える
• ピックアップテーマの文字タイルは、月替わりで文言と色を差し替えられる作りと思われる

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

検出された技術:Google Fonts

• 01キャラクター・ロゴ・シルエットは権利物。再現時はオリジナルの図形や自作イラストに差し替え、構成の考え方だけを取り入れる
• 02FVのタイルは #c5e69a・#b4dce0・コーラル・黄色などのパステルを正方形グリッドに敷き、円弧や星形を重ねてリズムを作る
• 03黄色 #fee12a の地に、文字は黒ではなく #404248 のチャコールで柔らかくまとめる
• 04情報の分類軸を「動詞」にして、ピルボタンで切り替えられるようにする

1---
2title: "ポケモン30周年（30th） 再現用デザイン仕様書"
3source: https://www.pokemon.co.jp/30th/
4katapick: https://katapick.com/sites/pokemon-30th
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ビビッド, グリッド, 角丸, イラスト, 周年]
8launched: 2026-01
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# ポケモン30周年（30th） — 再現用デザイン仕様書
17 
18> 周年サイトなのに、毎月テーマが替わって育っていく。ポケモン30周年の特設ページは、ピカチュウ入りの「30」ロゴを色のタイルで囲み、「うたう」「ねむる」などの動詞で情報を仕分けて、1年分の祝祭を1ページに束ねている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22