ワンス・アポン・ア・塊魂

1. 01

   ヒーロー

   時代をまたぐ道が渦を巻く一枚絵の中央にロゴ、左下に「好評発売中」、右上に対応機種のロゴと新しい版の告知バナー。下のクリーム色の帯に角丸のボタンを5つ並べる。

2. 02

   グローバルナビ

   紺の市松模様の帯に、TOP・ものがたり・キャラクター・あそびかた・今回の塊魂・製品一覧・スペシャル・購入はこちらを星形の記号で区切って並べる。

3. 03

   お知らせ

   筆のイラストの横に、日付と更新情報を3件並べる。

4. 04

   ムービー

   砂漠の街の背景に巻物型の見出しを置き、YouTube動画のサムネイルを左右の矢印で送るカルーセルで見せる。

5. 05

   ものがたり

   星空の背景に、中央揃えのストーリー文とゲーム画面、宇宙を漂うオブジェクトのイラストを配置する。

6. 06

   キャラクター

   ピンクと水色の斜めストライプの背景に登場キャラクターを一面に散らし、新たな仲間を名前付きで並べる。

7. 07

   あそびかた・今回の塊魂

   水色の背景に「塊を、ころがして、くっつけて、大きくする！」のコピーと巻き込めるモノの素材を並べ、続いてゲーム画面のカルーセル。

8. 08

   アイテム・カスタマイズ・製品情報

   緑の枠のカードでアイテムやカスタマイズ機能を紹介し、製品一覧とスペックへ続く。

9. 09

   フッター

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

• ムービーと「今回の塊魂」は、中央の1枚を大きく見せて左右の画像を見切らせるカルーセル。Swiper の centeredSlides などで再現可能
• 見出しは両端に波の文様が入った巻物型のパーツで、章ごとに色を変えて使い回している
• 紺のナビ帯はスクロール後に固定されると思われる。position: sticky で再現可能

スクロールのコマ撮り200–10000ms

検出された技術:Google Fonts

• 01キャラクター・キービジュアル・ロゴは作品の権利物なので使わず、オリジナルのイラストや素材に置き換える。取り入れるのは“章ごとに背景の世界を変える”構成の考え方だけにする
• 02見出しは巻物型など1つのモチーフに統一し、色だけを章ごとに変えて、にぎやかさの中に秩序を作る
• 03フォントは M PLUS Rounded 1c の太めのウェイトで統一し、丸い字形でポップさをそろえる
• 04FV直下に目的別の角丸ボタンを並べ、一枚絵の世界観と実用の導線を分ける

1---
2title: "ワンス・アポン・ア・塊魂 再現用デザイン仕様書"
3source: https://once-upon-a.katamaridamacy.jp/
4katapick: https://katapick.com/sites/once-upon-a-katamari
5category: ブランド
6region: 国内 (JP)
7tags: [ビビッド, イラスト, 角丸, カルーセル, ロングページ]
8launched: 2025-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# ワンス・アポン・ア・塊魂 — 再現用デザイン仕様書
17 
18> 見出しは全部巻物、背景は章ごとに別世界。ゲーム『ワンス・アポン・ア・塊魂』の公式サイトは、巻物型の見出しを軸に、砂漠・星空・ストライプと章ごとに背景を切り替え、ごちゃまぜの楽しさを章の区切りに使っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22