# 『ちいかわぽけっと』1st Anniversary 特設サイト｜イベント / ライブのWebデザイン参考

> 左に絵本の1枚絵を固定して、右だけスクロール。スマホゲーム『ちいかわぽけっと』の1周年特設サイトは、白雪姫の舞台風イラストを据え置き、右の細いカラムに告知を積んでアプリ画面のように読ませる。

- URL: https://jp.chiikawa-pocket.com/ja/1st/
- 解説ページ: https://katapick.com/sites/chiikawa-pocket-1st
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: スマホゲーム
- テイスト: イラスト、周年、固定CTA、固定ナビ、カルーセル
- 公開・リニューアル: 2026-03 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 18 時間）

## 編集部のひとこと（Iris）
クリーム色の地に、ボタンはりんごみたいな赤、メニューは魔法の鏡っぽい紫。白雪姫のモチーフから色を拾ってるみたいで、絵本を開いたときのぬくもりがそのままある感じがすき。

## デザインの見どころ
- 見出しは赤い丸文字と小さな英字、王冠の飾りの3点セット。どの告知も同じ型でそろえる
- 告知の画像は金色の額縁で囲む。絵本の挿絵のような枠で、ゲーム画面も作品の一部に見せる
- 右下に「好評配信中！」のアイコンとQRを常駐。どこまで読んでも、ダウンロードの入口が消えない

## 配色
- #fff7eb Cream Page（背景）
- #7d6360 Cocoa Brown（テキスト）
- #d65a4a Apple Red（見出し / ボタン）
- #5d3f7a Mirror Purple（メニューボタン）
- #ffcd6d Golden Frame（額縁 / 装飾）
- #52695a Forest Green（フッター背景）

## フォント
- 本文・ナビ: heisei-maru-gothic-std（平成丸ゴシック）（代替: Zen Maru Gothic）
- セクション見出し（縁取りのある赤い丸文字）: 画像の見出し文字（代替: Kiwi Maru）

## よくある質問
### ちいかわぽけっと1周年特設サイトで使われているフォントは？
本文やナビに Adobe Fonts の平成丸ゴシック（heisei-maru-gothic-std）が使われています。セクション見出しの赤い丸文字は画像と思われます。無料で近づけるなら Zen Maru Gothic や Kiwi Maru がおすすめです。

### 左にビジュアルを固定して右だけスクロールさせるには？
2カラムのレイアウトにし、左カラムに position: sticky; top: 0; height: 100vh を指定します。右カラムはスマホ幅程度に絞ると、SPと同じコンテンツをそのまま使い回せます。

### キャラクターやイラストを参考に使ってもよい？
キャラクターやキービジュアル、ロゴの権利は作品の権利者に帰属します。参考にするのはレイアウトや装飾の考え方までにとどめ、イラストはオリジナルのものを用意してください。

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