『ちいかわぽけっと』1st Anniversary 特設サイト

1. 01

   ファーストビュー

   PCでは画面の左側に白雪姫テーマのキービジュアルを固定し、右の細いカラムにロゴ「ちいぽけ 1st ANNIVERSARY」と新イベントの告知バナーを置く。右上に金縁の紫の円形メニュー。SPではキービジュアルの上にロゴを重ねる。

2. 02

   CONTENTS

   リボン型の帯に「CONTENTS」を掲げ、以降の告知に入る。

3. 03

   ゲームトピックス

   矢印付きのスライダーで告知画像を見せ、説明文と「もっと見る」ボタンを続ける。

4. 04

   アップデート

   1周年で追加された機能を、額縁付きの画像と説明文で紹介する。

5. 05

   SNSキャンペーン / リアルイベント / スペシャル

   同じ見出しの型で、キャンペーン、グッズ販売などのイベント、特別コンテンツを縦に積む。

6. 06

   シェア

   ベージュの波形の帯に「ちいぽけ1st AnniversaryをSNSでシェアしよう！」と X / LINE のボタン。

7. 07

   フッター

   緑の地にロゴ、目次、公式サイトへのボタン、SNSアイコン、ストアのバッジ。

• PCの左カラムは position: sticky（または fixed）でキービジュアルを固定し、右カラムだけをスクロールさせる
• スタックに Lenis と GSAP があり、慣性スクロールと各ブロックの出現アニメーションに使われていると思われる
• 右下の「好評配信中！」バナーは固定表示で、× で閉じられる。紫の円形メニューも常に右上に残る
• ゲームトピックスは左右の矢印とドットで操作するスライダー

スクロールのコマ撮りLenis · 300–3000ms

検出された技術:GSAPLenisAdobe FontsWebGL

• 01PCは左6割に固定のビジュアル、右4割にスマホ幅のコンテンツカラムという2分割にして、SPとほぼ同じ中身を使い回す
• 02背景はクリーム色にし、見出しの赤・メニューの紫・額縁の金など、差し色をキービジュアルのモチーフから拾う
• 03各セクションの見出しを「和文の飾り文字＋小さな英字＋装飾」の同じ型でそろえる
• 04キャラクターやキービジュアルは使わず、オリジナルのイラストに差し替えて、2分割の構成と額縁の装飾だけを取り入れる

1---
2title: "『ちいかわぽけっと』1st Anniversary 特設サイト 再現用デザイン仕様書"
3source: https://jp.chiikawa-pocket.com/ja/1st/
4katapick: https://katapick.com/sites/chiikawa-pocket-1st
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, 周年, 固定CTA, 固定ナビ, カルーセル]
8launched: 2026-03
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 18
13generator: Katapick
14---
15 
16# 『ちいかわぽけっと』1st Anniversary 特設サイト — 再現用デザイン仕様書
17 
18> 左に絵本の1枚絵を固定して、右だけスクロール。スマホゲーム『ちいかわぽけっと』の1周年特設サイトは、白雪姫の舞台風イラストを据え置き、右の細いカラムに告知を積んでアプリ画面のように読ませる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22