Landing PageJapanPicked 2026.09.26

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

LPのWebデザイン参考 — ゲーム

出典: game.shochiku.co.jp

Editor's note — 編集部の視点

FVがまるごと、幕の開いた劇場の舞台。

ゲーム『ムーミン：ムーミン谷の夏まつり』の公式サイトは、赤い幕と額縁で手描きの谷を囲み、見出しも飾り枠に収めて、ページ全体を“舞台を観る”体験に仕立てている。

PipTrends & VTuber

え、待って、右上にミュートボタンあるってことは音も鳴るっぽい…？幕の中の谷を眺めてると、客席で開演を待ってる気分になる。JP / EN の切り替えもあって、海外のファンにも優しいの神すぎる！！

1FVは赤い幕と草花で縁取った舞台。キービジュアルを額縁に入れ、客席から覗くように見せる
2ものがたりは開いた本の見開きで。左に一文と挿絵、右に紹介文。原作小説への入口が自然にできる
3Steamと2つのSwitchのボタンは固定表示。絵本のような画面でも、買う場所は見失わない

Color

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

Typography

使用フォントと無料の代替

見出し・本文・ナビ

Aa あア

使用: Zen Maru Gothic
代替: Zen Maru Gothic

実測タイプスケール1440px幅 · 2026-09-26 計測

小見出しKatapick 型10px · 1 · 400
本文The quick brown fox — 参考を型にする18px · 1.8 · 700
ボタンKatapick 型10px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央に飾り枠の中の「ものがたり / ゲームの特徴 / 商品情報」、右にJP / EN切替と音声のオン/オフボタン。
02
ヒーロー
赤い幕と草花で縁取った舞台の中に手描きのキービジュアルとロゴ。巻物状の帯にSteam・Switch 2・Switchのストアボタンを置き、下に大きな発売日。
03
イントロダクション
飾り枠の見出し「トーベ・ヤンソンの名作」と楕円の額に入ったイラスト。バルコニー越しの舞台装置のような背景に、ラベル状に強調したキャッチコピーを重ねる。
04
ものがたり
緑の背景に開いた本を置き、左ページにキャッチコピーと挿絵、右ページにINTRODUCTIONの本文。下にゲーム画面のサムネイルを4列×2段で並べる。
05
ゲームの特徴
砂色の背景に、冒険・美しい世界観・ミニゲーム・キャラクターの特技の4項目を、色違いのリボン見出し付きカードで2列に並べる。
06
商品情報
緑の背景にロゴと発売日、ストアボタン、タイトル・対応機種・価格などの情報表。
07
特典情報
パッケージ限定版特典や店頭オリジナル特典を、画像付きの枠で紹介する。
08
フッター
権利表記や関連リンクを置いて締める。

Interaction

アニメーション・インタラクション

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

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

ゲーム『ムーミン：ムーミン谷の夏まつり』をスクロールしたときのフレーム1 — 01

ゲーム『ムーミン：ムーミン谷の夏まつり』をスクロールしたときのフレーム2 — 02

ゲーム『ムーミン：ムーミン谷の夏まつり』をスクロールしたときのフレーム3 — 03

ゲーム『ムーミン：ムーミン谷の夏まつり』をスクロールしたときのフレーム4 — 04

ゲーム『ムーミン：ムーミン谷の夏まつり』をスクロールしたときのフレーム5 — 05

ゲーム『ムーミン：ムーミン谷の夏まつり』をスクロールしたときのフレーム6 — 06

検出された技術:GSAPLenisGoogle Fonts

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

moomin-summer-festival.katapick.md

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# ゲーム『ムーミン：ムーミン谷の夏まつり』 — 再現用デザイン仕様書
17 
18> FVがまるごと、幕の開いた劇場の舞台。ゲーム『ムーミン：ムーミン谷の夏まつり』の公式サイトは、赤い幕と額縁で手描きの谷を囲み、見出しも飾り枠に収めて、ページ全体を“舞台を観る”体験に仕立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22