# アソビ★まわり隊！ デビュー特設ページ｜VTuber / 配信者のWebデザイン参考

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

- URL: https://hololive.hololivepro.com/special/22482/
- 解説ページ: https://katapick.com/sites/hololive-asobi-mawaritai
- カテゴリ: VTuber / 配信者 / 地域: 国内（JP）/ 業種: VTuber事務所・新ユニットデビュー告知
- テイスト: ライト、イラスト、角丸、ビビッド、ブルー基調
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 8 時間）

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

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

## 配色
- #ffffff White（背景）
- #43c5f5 Sky Blue（フッター背景 / SPメニューボタン）
- #063f5c Deep Navy（本文テキスト）
- #116e9b Cerulean（リンク・補助テキスト）
- #fe6700 Vivid Orange（CTAボタン（スクショから採色））
- #fffd08 Lemon Yellow（CTAの縁取り（スクショから採色））

## フォント
- 和文本文・見出し・ボタン: Yu Gothic Medium（代替: Noto Sans JP）
- 英字グローバルナビ: Brandon Grotesque（代替: Josefin Sans）

## よくある質問
### アソビ★まわり隊！特設ページで使われているフォントは？
本文や見出しは游ゴシック Medium、グローバルナビの英字は Adobe Fonts の Brandon Grotesque です。無料で近づけるなら Noto Sans JP と Josefin Sans の組み合わせが使えます。

### このページのCTAボタンはどう作る？
オレンジの背景に黄色の太い border、blur なしで右下にずらしたグレーの box-shadow を重ね、border-radius を大きめにとります。ロゴの配色と合わせるのがポイントです。

### イラストやロゴを参考に使ってもよい？
キャラクターとロゴの権利は事務所に帰属します。参考にするのはページ構成や配色、CTAの作り方までにとどめ、素材自体は使わないでください。

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