VTuberJapanPicked 2026.09.26

アソビ★まわり隊！デビュー特設ページ

VTuber / 配信者のWebデザイン参考 — VTuber事務所・新ユニットデビュー告知

出典: hololive.hololivepro.com

Editor's note — 編集部の視点

押せるボタンはオレンジの1個だけで、迷いようがない。

ホロライブの新ユニット「アソビ★まわり隊！」のデビュー特設ページは、1枚絵の直下にオレンジのCTAを1つだけ据え、はじめて知る人を迷わせずプロフィールへ送り出す。

IrisColor & Brand

フッターとSPの丸いメニューボタン、同じ水色でおそろいなのがすき。ラムネの瓶みたいな、すっきり冷たい青。オレンジの熱さを、この水色がちゃんと冷ましてくれてる感じ。

1CTAはオレンジ地に黄色の縁、ずらしたグレーの影。ロゴと同じ色のノリで、押したくなる手応えを出す
2ヘッダーとパンくずは公式サイトのまま。特設でも公式の一部だと伝えつつ、視線は1000px幅のKVへ集める
3本文は純黒でなく紺、背景は淡い水色の三角線。脇役を静かに引かせ、色の主張をKVとCTAに絞る

Color

アソビ★まわり隊！デビュー特設ページの配色

Typography

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

和文本文・見出し・ボタン

Aa あア

使用: Yu Gothic Medium
代替: Noto Sans JP

英字グローバルナビ

Aa あア

使用: Brandon Grotesque
代替: Josefin Sans

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

小見出しKatapick 型20px · 1.5 · 700
本文The quick brown fox — 参考を型にする16px · 1.7 · 500
注釈The quick brown fox — 参考を型にする12.5px · 1.8 · 500

Structure

ページ構成（上から順）

01
グローバルヘッダー
左にhololiveロゴ、右にTOP〜SPECIALの英字ナビと言語切替（EN）。その下に家アイコンから始まるパンくずを置く。SPでは水色の円形ハンバーガーボタンに格納する。
02
キービジュアル
中央に幅1000px程度のデビュービジュアルを配置。4人の集合イラストの右下にユニットロゴと「Debut」の文字を重ねた1枚絵。
03
ユニットプロフィールCTA
ビジュアル直下に、オレンジ地・黄色の縁・右下にずらしたグレー影の角丸ボタンを中央揃えで1つだけ置く。
04
ユニット紹介文
紺色の和文でユニットのコンセプトとモットーを数行で説明し、YouTubeとXのURLをテキストリンクで並べる（SPキャプチャで確認）。
05
デビュー動画
YouTubeの埋め込みプレイヤーを本文幅いっぱいに配置する（SPキャプチャで確認）。
06
メンバー紹介
抽出データの見出しでは、4人のメンバー名（和名 / ローマ字表記）がh3で続く。PCのフルページキャプチャが1画面分（900px）しか取得できておらず、表示形式は未確認。
07
ユニット拠点紹介
見出し「ユニット拠点地「アソ★ビバ」」のh3が続く。内容はキャプチャ範囲外のため見出しのみ確認。
08
フッター
抽出データでは高さ約420pxのフッターに水色（#43c5f5）の背景が敷かれている。

Interaction

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

抽出データに Swiper があり、メンバー立ち絵や拠点画像の切り替えに使われていると思われる（キャプチャ範囲外のため未確認）
CTAは border と box-shadow（blur なしのオフセット影）で立体感を出す静的な表現。押下時に影を消して沈ませる :active の演出を足すと再現しやすい
背景の三角形パターンは薄い水色の線画を background-image でリピートしていると思われる
フルページ取得が900pxで止まっていることから、ページ本体が内側のスクロール領域で描画されている可能性がある

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

検出された技術:SwiperWordPressGoogle FontsAdobe Fonts

Reproduce

再現するときのポイント

01キービジュアルは1枚絵で完成させ、HTML側はビジュアル＋CTA1つ＋紹介文とシンプルに積む
02CTAはロゴの配色から取ったオレンジ×黄色で、背景の水色・紺と補色関係をつくる
03本文は紺（#063f5c）にして純黒を避け、水色ベースの公式サイトのトーンに合わせる
04既存の公式サイトのヘッダー・フッターを流用し、特設ページ部分だけを差し替えられる構造にする

再現MDに含まれるもの

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

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

hololive-asobi-mawaritai.katapick.md

1---
2title: "アソビ★まわり隊！ デビュー特設ページ 再現用デザイン仕様書"
3source: https://hololive.hololivepro.com/special/22482/
4katapick: https://katapick.com/sites/hololive-asobi-mawaritai
5category: VTuber / 配信者
6region: 国内 (JP)
7tags: [ライト, イラスト, 角丸, ビビッド, ブルー基調]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 8
13generator: Katapick
14---
15 
16# アソビ★まわり隊！ デビュー特設ページ — 再現用デザイン仕様書
17 
18> 押せるボタンはオレンジの1個だけで、迷いようがない。ホロライブの新ユニット「アソビ★まわり隊！」のデビュー特設ページは、1枚絵の直下にオレンジのCTAを1つだけ据え、はじめて知る人を迷わせずプロフィールへ送り出す。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22