ゲーム『ムーミン：ムーミン谷の夏まつり』

1. 01

   ヘッダー

   左にロゴ、中央に飾り枠の中の「ものがたり / ゲームの特徴 / 商品情報」、右にJP / EN切替と音声のオン/オフボタン。

2. 02

   ヒーロー

   赤い幕と草花で縁取った舞台の中に手描きのキービジュアルとロゴ。巻物状の帯にSteam・Switch 2・Switchのストアボタンを置き、下に大きな発売日。

3. 03

   イントロダクション

   飾り枠の見出し「トーベ・ヤンソンの名作」と楕円の額に入ったイラスト。バルコニー越しの舞台装置のような背景に、ラベル状に強調したキャッチコピーを重ねる。

4. 04

   ものがたり

   緑の背景に開いた本を置き、左ページにキャッチコピーと挿絵、右ページにINTRODUCTIONの本文。下にゲーム画面のサムネイルを4列×2段で並べる。

5. 05

   ゲームの特徴

   砂色の背景に、冒険・美しい世界観・ミニゲーム・キャラクターの特技の4項目を、色違いのリボン見出し付きカードで2列に並べる。

6. 06

   商品情報

   緑の背景にロゴと発売日、ストアボタン、タイトル・対応機種・価格などの情報表。

7. 07

   特典情報

   パッケージ限定版特典や店頭オリジナル特典を、画像付きの枠で紹介する。

8. 08

   フッター

   権利表記や関連リンクを置いて締める。

• ストアボタン（Steam / Switch 2 / Switch）と音声ボタンはスクロール中も固定表示される
• 音声のオン/オフボタンがあり、BGM を再生する仕組みと思われる。ユーザー操作後に Audio を再生する形で実装する
• GSAP と Lenis による慣性スクロールと、見出しや額縁のフェードイン演出と思われる
• ゲーム画面のサムネイルは「＋」ボタンから拡大表示するモーダルと思われる

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

検出された技術:GSAPLenisGoogle Fonts

• 01キャラクター・キービジュアル・ロゴは作品の権利物なので流用せず、オリジナルのイラストや素材に置き換える。取り入れるのは幕・額縁・本といった“舞台装置”の考え方だけにする
• 02見出しを収める飾り枠（リボンやカルトゥーシュ）を1つ部品化し、全章で使い回して統一感を出す
• 03背景は章ごとに緑・砂色と面の色を切り替え、境目を手描き風のギザギザの線でつなぐ
• 04本文は Zen Maru Gothic で字間を広めに取り、絵本のようなやわらかさを出す

1---
2title: "ゲーム『ムーミン：ムーミン谷の夏まつり』 デザイン分析書"
3source: https://game.shochiku.co.jp/lp/moomin-mm/
4katapick: https://katapick.com/sites/moomin-summer-festival
5category: LP
6region: 国内 (JP)
7tags: [イラスト, レトロ, 固定CTA, ロングページ, くすみカラー]
8launched: 2026-08
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# ゲーム『ムーミン：ムーミン谷の夏まつり』 — デザイン分析書
16 
17> FVがまるごと、幕の開いた劇場の舞台。ゲーム『ムーミン：ムーミン谷の夏まつり』の公式サイトは、赤い幕と額縁で手描きの谷を囲み、見出しも飾り枠に収めて、ページ全体を“舞台を観る”体験に仕立てている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22