# ワンス・アポン・ア・塊魂｜ブランドのWebデザイン参考

> 見出しは全部巻物、背景は章ごとに別世界。ゲーム『ワンス・アポン・ア・塊魂』の公式サイトは、巻物型の見出しを軸に、砂漠・星空・ストライプと章ごとに背景を切り替え、ごちゃまぜの楽しさを章の区切りに使っている。

- URL: https://once-upon-a.katamaridamacy.jp/
- 解説ページ: https://katapick.com/sites/once-upon-a-katamari
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: ゲーム
- テイスト: ビビッド、イラスト、角丸、カルーセル、ロングページ
- 公開・リニューアル: 2025-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

## 編集部のひとこと（Leo）
ムービーのカルーセル、左右のサムネがわざと見切れてて「次もあるぞ！」って予告編みたいに煽ってくる！砂漠の街に巻物の見出しがドンと出るの、映画のオープニングタイトルそのもの！

## デザインの見どころ
- FVは時代をまたぐ道が渦を巻く極彩色の一枚絵。“巻き込む”遊びを、画面の構図で先に見せる
- FV下に角丸のカラフルなボタンを5つ。購入・配信素材・公式Xと、目的の入口がすぐ選べる
- ナビは星形の記号でつなぎ、お知らせは「更新シタヨー！」の口調。細部まで作品の声でそろう

## 配色
- #fef7ef Cream（背景）
- #2a1a12 Cocoa Brown（テキスト）
- #2f4696 Cosmos Navy（ものがたりセクション背景 / ナビ帯）
- #05b3ec Sky Blue（あそびかたセクション背景 / ボタン）
- #ed4290 Prince Pink（ボタン / 見出しの帯）
- #62c500 Leaf Green（見出しの巻物 / カード枠）

## フォント
- 見出し・本文・ナビ: M PLUS Rounded 1c（代替: M PLUS Rounded 1c）

## よくある質問
### ワンス・アポン・ア・塊魂のサイトで使われているフォントは？
見出し・本文・ナビに M PLUS Rounded 1c が使われています。Google Fonts で無料で利用できます。ロゴや巻物の見出しは画像と思われます。

### 章ごとに背景が変わるにぎやかなページをまとめるコツは？
見出しのパーツを1種類に決めて色だけを変える、フォントを1書体に統一する、といった共通ルールを作ることです。背景が大きく変わっても、同じ部品が繰り返されることで1つのサイトとして読めます。

### どんな業種の参考になる？
ゲームやアニメの公式サイト、子ども向けのサービス、ポップなキャンペーンサイトなど、にぎやかさを前に出したいサイトの参考になります。キャラクターや画像は流用せず、構成と演出の考え方だけを取り入れてください。

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