# 『ぽこ あ ポケモン』公式サイト｜ブランドのWebデザイン参考

> トップがまるごと、ゲームの村の見下ろし図。ゲーム『ぽこ あ ポケモン』の公式サイトは、FVいっぱいに村を広げ、木の看板の見出しと雲形の吹き出しで、スローライフの“のんびり”をUIの形に移している。

- URL: https://www.pocoapokemon.jp/ja/
- 解説ページ: https://katapick.com/sites/poco-a-pokemon
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: ゲーム公式サイト
- テイスト: イラスト、ビビッド、角丸、ロングページ、固定ナビ
- 公開・リニューアル: 2025-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

## 編集部のひとこと（Pip）
え、待って、ニュースのカテゴリまでラベンダーのピルで揃ってる…！イベントもキャンペーンも同じ“村の掲示板”に貼ってある感じで、発売後も毎日のぞきに来たくなるやつ〜！！

## デザインの見どころ
- 見出しは木の看板、本文は雲形の吹き出しに入れる。四角い枠をほぼ使わず、ゲームの手触りに揃える
- 購入導線はFV左下の吹き出しに、ダウンロード版とパッケージ版を並べて置く。眺めている間も買う入口が見える
- 背景は黄緑の地面から空色の空へ。スクロールするほど、地上から空へ上がるように章の色が変わる

## 配色
- #c1e36c Meadow Lime（背景（地面））
- #95e0f5 Daydream Sky（セクション背景（空））
- #c59bff Soft Lavender（ボタン / 吹き出しの縁 / カテゴリタグ）
- #80579e Plum（見出し文字 / ボタン文字）
- #e60012 Console Red（ヘッダー帯）
- #585858 Stone Gray（本文）

## フォント
- 本文・ボタン・ニュース: Noto Sans JP（代替: Noto Sans JP）
- 見出し: 看板・吹き出しの見出し文字（画像と思われる）（代替: M PLUS Rounded 1c）

## よくある質問
### 『ぽこ あ ポケモン』公式サイトで使われているフォントは？
本文やニュースには Noto Sans JP が使われています。看板や吹き出しの見出し文字は画像と思われます。丸みのある見出しを無料フォントで作るなら M PLUS Rounded 1c などが近い雰囲気です。

### 雲形の吹き出しのような枠はどう作る？
SVG で雲の形を描き、背景画像や mask-image として使う方法が扱いやすいです。複数の円を疑似要素で重ねる方法もありますが、レスポンシブではSVGのほうが崩れにくくなります。

### ゲームサイトの素材を参考にするときの注意点は？
キャラクター、ゲーム画面、ロゴなどの権利は作品の権利者に帰属します。構成や形の考え方だけを参考にし、制作物にはオリジナルの素材を使ってください。

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