Katapick

BrandJapan

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』

ブランドのWebデザイン参考 — TVアニメ公式サイト

出典: growupshow.com
TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』のPC版ファーストビュー

Editor's note — 編集部の視点

サイト全体が、まるごとサーカス小屋。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』の公式サイトは、吊り看板のメニューや紅白の幕、テント形の映像枠で、見世物の高揚感をページの隅々まで持ち込んでいる。

PipTrends & VTuber
え、待って、キャラ一覧のアイコンが全部スカラップ縁のメダルなの可愛すぎる！！推しを選ぶ操作がサーカスの入場券を選ぶみたいで上がる〜！縦書きのセリフも名乗り口上っぽくて神！
  • 1メニューは吊り下げ看板、Xへの導線はリボン型の旗。UIの部品までサーカスの小道具にしている
  • 2映像枠はテントの幕の形、スタッフ欄はアーチ形の舞台。セクションごとに“演目”が切り替わる
  • 3文字色は黒ではなく深い臙脂。黄色の地でも強すぎず、古い興行ポスターの温度が残る

Color

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』の配色

Typography

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

英字見出し

Aa あア

使用
Prompt
代替
Prompt

和文見出し・本文

Aa あア

使用
Noto Sans JP
代替
Noto Sans JP

装飾英字

Aa あア

使用
Ultra
代替
Ultra

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

  • 見出しKatapick 型16px · 1.8 · 400
  • 小見出しKatapick 型16px · 1.8 · 400
  • 本文The quick brown fox — 参考を型にする16px · 1.8 · 400
  • ボタンKatapick 型15.8px · — · 400

Structure

ページ構成（上から順）

  1. 01

    FV

    黄〜橙のグラデーションにキャラクターが宙を舞うキービジュアルとロゴ。右上に吊り看板型のMENU、左上にリボン型の「OFFICIAL X」、右端に丸いキャラクターバッジ。

  2. 02

    放送告知

    テントを思わせる橙と空色の背景に、監督・キャラクター原案・シリーズ構成・制作の布陣と放送開始日時。

  3. 03

    NEWS

    円弧に沿った小さな「GROW UP SHOW」と大きな英字見出し、日付をリボン型のタグにしたニュース一覧。

  4. 04

    MOVIE

    テントの幕のシルエットで切り抜いた動画枠と、黄色の丸い再生ボタン。

  5. 05

    INTRODUCTION

    左右に紅白の幕を配し、中央寄せであらすじを語る。下端に波打つ巨大な英字の帯。

  6. 06

    STAFF & CAST

    アーチ形の黄色い面に、丸いメダル状の文字で「STAFF」「CAST」を掲げ、4列でクレジットを並べる。

  7. 07

    CHARACTER

    左にスカラップ縁のアイコン一覧、中央に立ち絵、縦書きのセリフと名前、右にキャラクターペアビジュアルへの導線。

Interaction

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

  • ジャグリングのピンや輪、鳩などの小道具がページ上に浮かび、GSAP でスクロールに合わせて動かしていると思われる
  • INTRODUCTION 下端の巨大な英字は波打つ形の帯で、SVG の textPath か1文字ずつの translateY でマーキーとして流すと再現可能
  • 見出し上の「GROW UP SHOW」は円弧に沿った文字（SVG textPath）。メニューと OFFICIAL X は固定表示
  • キャラクターは Swiper のスライダーで、左のアイコン一覧から切り替える

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

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』をスクロールしたときのフレーム1
01
TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』をスクロールしたときのフレーム2
02
TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』をスクロールしたときのフレーム3
03
TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』をスクロールしたときのフレーム4
04
TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』をスクロールしたときのフレーム5
05
TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』をスクロールしたときのフレーム6
06

検出された技術:GSAPLenisSwiperGoogle Fonts

Reproduce

再現するときのポイント

  • 01キャラクターやキービジュアルは作品の権利物。再現時はオリジナルのイラストや写真に差し替え、構成と演出の考え方だけを取り入れる
  • 02文字色に臙脂 #6e1e23、面に #ffba15 と #ff9d00 の黄〜橙を使い、黒を使わずに画面を締める
  • 03英字見出しは Prompt の極太、小見出しは円弧に沿わせ、興行ポスターの見出しのように2段で組む
  • 04幕・テント・アーチなど、セクションの輪郭そのものを clip-path や SVG で舞台装置に仕立てる

再現MDに含まれるもの

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

Katapick の再現MDは何がすごい？ →
grow-up-show.katapick.md
1---
2title: "TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 再現用デザイン仕様書"
3source: https://growupshow.com/
4katapick: https://katapick.com/sites/grow-up-show
5category: ブランド
6region: 国内 (JP)
7tags: [ビビッド, イラスト, 大胆なタイポ, マーキー, 固定ナビ, ロングページ]
8launched: 2025-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 — 再現用デザイン仕様書
17 
18> サイト全体が、まるごとサーカス小屋。TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』の公式サイトは、吊り看板のメニューや紅白の幕、テント形の映像枠で、見世物の高揚感をページの隅々まで持ち込んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPROtokens.jsonFigma / Tokens StudioPROTailwind @themev4 にそのまま貼れるPRO

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』についてよくある質問

グロウアップショウの公式サイトで使われているフォントは？

英字見出しに Prompt、和文に Noto Sans JP、装飾的な英字に Ultra が使われています。いずれも Google Fonts で無料で利用できます。

作品の世界観をサイトのUIに持ち込むには？

このサイトは、メニューを吊り看板、SNS導線をリボン、映像枠をテント、クレジット欄をアーチ形の舞台にしています。作品に出てくる道具や建物の形を、ボタンや枠の形に置き換えるのがポイントです。

どんなサイトの参考になる？

アニメ・ゲームの公式サイトや舞台・イベントの特設サイトなど、作品のモチーフをUIの細部まで一貫させたいIPサイトの参考になります。素材は流用せず、構成と演出の考え方だけを取り入れてください。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』に似た参考サイト

出典: Katapick編集部（2026年9月26日 確認）。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。