『ぽこ あ ポケモン』公式サイト

1. 01

   ヘッダー

   赤い帯の中央にゲーム機のロゴ、右上に紫の丸いメニューボタン。

2. 02

   ヒーロー

   画面いっぱいにゲームの村を見下ろしたビジュアル。中央上にタイトルロゴ、左下に「好評発売中！」の購入吹き出し、右下に動画を開くボタン、左に有料追加コンテンツのバッジ。

3. 03

   最新情報

   黄緑の地面に木の看板の見出し、無料アップデートのバナー、カテゴリタグ付きの4枚のニュースカード、「もっと見る」ボタン。

4. 04

   ストーリー導入

   暗い洞窟のシーンに「すこしずつ、すこしずつ。作ろう、みんなで暮らす」のコピーを重ね、物語に入る。

5. 05

   新生活の紹介

   看板見出しの下に雲形の吹き出しの説明、主人公の2つの姿を矢印でつなぐ図、傾けて重ねたゲーム画面の写真。

6. 06

   のんびり生活

   空色の背景に切り替わり、ゲーム画面のスライダーと説明の吹き出し、「街でののんびり生活」のボタン。

7. 07

   ポケモン紹介・特典

   キャラクターの集合イラストと「くわしくはこちら」、早期購入特典への2つのボタン。

8. 08

   商品情報・フッター

   黄色いタイルの枠でパッケージ画像と仕様の表を並べ、フッターへ。

• ゲーム画面のスライダーは Swiper。左右の矢印とドットで切り替える
• 有料追加コンテンツのバッジとメニューボタンは、スクロール中も画面の端に固定表示される（バッジは×で閉じられる）
• 看板や雲形の吹き出しは画像またはSVGと思われる。CSS の mask-image や SVG の clipPath でも近い形を作れる

スクロールのコマ撮り150–6000ms

検出された技術:SwiperGoogle Fonts

• 01キャラクター・ゲーム画面・キービジュアル・ロゴは使わず、オリジナルのイラストや素材に置き換えたうえで、構成と形の考え方だけを取り入れる
• 02見出しは木目の看板パーツ、本文は雲形の白い吹き出し、と“入れ物の形”でトンマナを作る
• 03背景は黄緑に小さな点を散らした地面柄から、空色へとセクションごとに切り替える
• 04ボタンはラベンダーの角丸ピルに矢印を付けて全ページで統一し、購入導線はFVの中に入れる

1---
2title: "『ぽこ あ ポケモン』公式サイト 再現用デザイン仕様書"
3source: https://www.pocoapokemon.jp/ja/
4katapick: https://katapick.com/sites/poco-a-pokemon
5category: ブランド
6region: 国内 (JP)
7tags: [イラスト, ビビッド, 角丸, ロングページ, 固定ナビ]
8launched: 2025-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# 『ぽこ あ ポケモン』公式サイト — 再現用デザイン仕様書
17 
18> トップがまるごと、ゲームの村の見下ろし図。ゲーム『ぽこ あ ポケモン』の公式サイトは、FVいっぱいに村を広げ、木の看板の見出しと雲形の吹き出しで、スローライフの“のんびり”をUIの形に移している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22