EventJapan
hololive Grand Reception ~感謝を込めた招待状~
イベント / ライブのWebデザイン参考 — VTuber事務所・巡回展示会
Editor's note — 編集部の視点
チケットボタンまで金の封蝋で、招待状になりきってる。
ホロライブの全国巡回展示会「hololive Grand Reception」の特設サイトは、ドレス姿のKVと金の飾り罫、明朝体で“招かれる側”の気分を作る。

東京会場の会期は「10.10〜11.23」と特大で、大阪・名古屋・福岡は一行で添えるだけ。まず行ける日程を決めさせる順番。最後がハッシュタグ投稿のボタンなのも、行った後まで考えてある。
- 1KVは大階段の前にドレス姿のタレントが並ぶ一枚。ロゴの下を金の弧で締め、式典の幕開けにする
- 2右端に封蝋型の「チケット購入」を常に浮かべる。どこまで読んでも購入口を見失わない
- 3INTRODUCTION・NEWS・GOODSの見出しを金の唐草で挟む。章の区切りが招待状の飾り枠になる
Color
hololive Grand Reception ~感謝を込めた招待状~の配色
Typography
使用フォントと無料の代替
見出し・本文・日付
Aa あア
- 使用
- Zen Old Mincho
- 代替
- Zen Old Mincho
実測タイプスケール1440px幅 · 2026-09-26 計測
- 小見出しKatapick 型50px · 1.7 · 700
- 本文The quick brown fox — 参考を型にする16px · 1.7 · 500
Structure
ページ構成(上から順)
- 01
KV
花と大階段のホールに、ドレス姿のタレントが並ぶイラスト。下部に水色のセリフ体と筆記体を組み合わせたロゴと「感謝を込めた招待状」を置き、金の弧で区切る。右上にハンバーガー、右下に封蝋型の「チケット購入」。
- 02
INTRODUCTION
金の唐草と青い菱形の飾りで見出しを挟み、会場イメージのカルーセルと、花の線画に囲まれた中央揃えの挨拶文、「詳しくはこちら」ボタンを置く。
- 03
東京会場
「2026 10.10〜11.23」の会期を大きな数字で見せ、TOKYO DREAM PARK 7階(EX STUDIO7)の会場名と詳細ボタンを続ける。
- 04
巡回予定
「ほか、大阪・名古屋・福岡にて順次開催予定」と、規模を縮小しての開催である旨の注記。
- 05
NEWS
金の枠の中に、日付とタイトルをピル型の行で3件並べ、VIEW MORE へつなぐ。
- 06
GOODS
会場限定受注商品などを中央が大きいカード型カルーセルで紹介し、グッズ詳細とX公式アカウントへの導線を置く。
- 07
SHARE・CONTACT
「#ホロライブからの招待状」でポストするボタンと、お問い合わせフォームへのボタン。
- 08
フッター
COVER・hololive・holoplus のロゴボタン、主催・協賛の表記、青いグラデーション帯のコピーライト。
Interaction
アニメーション・インタラクション
- PCとSPのキャプチャでKVのメンバーが異なるため、複数のKVを切り替えるスライドショーと思われる。opacity のクロスフェードで再現可能
- 封蝋型のチケットボタンとハンバーガーは position: fixed で右端に常駐させている
- INTRODUCTIONとGOODSのカルーセルは中央のスライドを大きく、左右を小さく見せる。Swiper の centeredSlides と slidesPerView の小数指定で再現可能
- 背景のシャンパン色の円模様は radial-gradient の繰り返しパターンに、白のグラデーションを重ねると再現可能
スクロールのコマ撮り300–1200ms
検出された技術:WordPressGoogle Fonts
Reproduce
再現するときのポイント
- 01金は単色でなくグラデーションで塗り、飾り罫・ボタン・封蝋に共通させて箔押しの質感を出す
- 02英字見出しは明朝体の大文字で字間を広めに取り、青のグラデーションで色を付ける
- 03購入導線は固定の封蝋バッジにまとめ、コンセプトの小道具として見せる
- 04背景は白一色にせず、淡い円模様を敷いて招待状の紙の質感を出す
デザイン分析MDに含まれるもの
実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト
Katapick のデザイン分析MDは何がすごい? →1---2title: "hololive Grand Reception ~感謝を込めた招待状~ デザイン分析書"3source: https://hololive-grandreception.hololivepro.com/4katapick: https://katapick.com/sites/hololive-grand-reception5category: イベント / ライブ6region: 国内 (JP)7tags: [イラスト, セリフ体, 固定CTA, カルーセル, 周年]8launched: 2026-079verified: 2026-10-2610measured: 2026-09-26 (Chromium 1440x900)11difficulty: 2/512generator: Katapick13---1415# hololive Grand Reception ~感謝を込めた招待状~ — デザイン分析書1617> チケットボタンまで金の封蝋で、招待状になりきってる。ホロライブの全国巡回展示会「hololive Grand Reception」の特設サイトは、ドレス姿のKVと金の飾り罫、明朝体で“招かれる側”の気分を作る。1819このファイルは Katapick(https://katapick.com)が作成した、デザインを学び・参考にするための仕様書です。20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です(2026-09-26 計測)。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。21AIっぽさ(紫のグラデーション、同じ形の3列カードなど)を消すルールと、盗作を避けるための指示も入っています。22
hololive Grand Reception ~感謝を込めた招待状~についてよくある質問
hololive Grand Receptionのサイトで使われているフォントは?
見出し・本文ともに Zen Old Mincho が使われています。Google Fonts で無料で利用できます。ロゴは画像として作られていると思われます。
hololive Grand Receptionのような招待状風のデザインはどう作る?
金のグラデーションで塗った飾り罫、封蝋型のボタン、明朝体の見出しを組み合わせ、背景に紙の質感を感じる淡い模様を敷くのが基本です。購入ボタンまでコンセプトの小道具に置き換えると統一感が出ます。
hololive Grand Receptionのデザインはどんなサイトの参考になる?
展示会・ポップアップストア・周年記念イベントなど、ファンを“招く”コンセプトの特設サイトや、格式を出したいキャラクターIPのイベントサイトの参考になります。
安心してお使いいただくために
- 引用の範囲で掲載
- ファーストビューなどの画面を縮小して、解説と実測値に添えています。出典と元サイトへのリンクを必ず表示します。
- コードや素材は配布しません
- 元サイトのコード・画像・文章は提供していません。
- MDは数値と構造だけ
- デザイン分析MDに、元サイトの文章・画像・コードは含みません。差し替え必須のものも明記しています。
- 公開されたページだけ
- ログインが必要なページや非公開のページは扱いません。robots.txt に従って取得しています。
著作権・商標は各権利者に帰属します。権利者の方からの取り下げ・修正のご依頼は、原則2営業日以内に対応します。取り下げ・修正を依頼する
hololive Grand Reception ~感謝を込めた招待状~に似た参考サイト
出典: Katapick編集部(2026年10月26日 確認)。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 権利者・制作者の方からの 掲載の取り下げ・修正のご依頼は、原則2営業日以内に対応します。AI・LLM 向けの要約は Markdown 版 を参照してください。











