Katapick

EventJapan

hololive Grand Reception ~感謝を込めた招待状~

イベント / ライブのWebデザイン参考 — VTuber事務所・巡回展示会

出典: hololive-grandreception.hololivepro.com
hololive Grand Reception ~感謝を込めた招待状~のPC版ファーストビュー

Editor's note — 編集部の視点

チケットボタンまで金の封蝋で、招待状になりきってる。

ホロライブの全国巡回展示会「hololive Grand Reception」の特設サイトは、ドレス姿のKVと金の飾り罫、明朝体で“招かれる側”の気分を作る。

BrunoStructure & IA
東京会場の会期は「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

ページ構成(上から順)

  1. 01

    KV

    花と大階段のホールに、ドレス姿のタレントが並ぶイラスト。下部に水色のセリフ体と筆記体を組み合わせたロゴと「感謝を込めた招待状」を置き、金の弧で区切る。右上にハンバーガー、右下に封蝋型の「チケット購入」。

  2. 02

    INTRODUCTION

    金の唐草と青い菱形の飾りで見出しを挟み、会場イメージのカルーセルと、花の線画に囲まれた中央揃えの挨拶文、「詳しくはこちら」ボタンを置く。

  3. 03

    東京会場

    「2026 10.10〜11.23」の会期を大きな数字で見せ、TOKYO DREAM PARK 7階(EX STUDIO7)の会場名と詳細ボタンを続ける。

  4. 04

    巡回予定

    「ほか、大阪・名古屋・福岡にて順次開催予定」と、規模を縮小しての開催である旨の注記。

  5. 05

    NEWS

    金の枠の中に、日付とタイトルをピル型の行で3件並べ、VIEW MORE へつなぐ。

  6. 06

    GOODS

    会場限定受注商品などを中央が大きいカード型カルーセルで紹介し、グッズ詳細とX公式アカウントへの導線を置く。

  7. 07

    SHARE・CONTACT

    「#ホロライブからの招待状」でポストするボタンと、お問い合わせフォームへのボタン。

  8. 08

    フッター

    COVER・hololive・holoplus のロゴボタン、主催・協賛の表記、青いグラデーション帯のコピーライト。

Interaction

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

  • PCとSPのキャプチャでKVのメンバーが異なるため、複数のKVを切り替えるスライドショーと思われる。opacity のクロスフェードで再現可能
  • 封蝋型のチケットボタンとハンバーガーは position: fixed で右端に常駐させている
  • INTRODUCTIONとGOODSのカルーセルは中央のスライドを大きく、左右を小さく見せる。Swiper の centeredSlides と slidesPerView の小数指定で再現可能
  • 背景のシャンパン色の円模様は radial-gradient の繰り返しパターンに、白のグラデーションを重ねると再現可能

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

hololive Grand Reception ~感謝を込めた招待状~をスクロールしたときのフレーム1
01
hololive Grand Reception ~感謝を込めた招待状~をスクロールしたときのフレーム2
02
hololive Grand Reception ~感謝を込めた招待状~をスクロールしたときのフレーム3
03
hololive Grand Reception ~感謝を込めた招待状~をスクロールしたときのフレーム4
04
hololive Grand Reception ~感謝を込めた招待状~をスクロールしたときのフレーム5
05
hololive Grand Reception ~感謝を込めた招待状~をスクロールしたときのフレーム6
06

検出された技術:WordPressGoogle Fonts

Reproduce

再現するときのポイント

  • 01金は単色でなくグラデーションで塗り、飾り罫・ボタン・封蝋に共通させて箔押しの質感を出す
  • 02英字見出しは明朝体の大文字で字間を広めに取り、青のグラデーションで色を付ける
  • 03購入導線は固定の封蝋バッジにまとめ、コンセプトの小道具として見せる
  • 04背景は白一色にせず、淡い円模様を敷いて招待状の紙の質感を出す

再現MDに含まれるもの

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

Katapick の再現MDは何がすごい? →
hololive-grand-reception.katapick.md
1---
2title: "hololive Grand Reception ~感謝を込めた招待状~ 再現用デザイン仕様書"
3source: https://hololive-grandreception.hololivepro.com/
4katapick: https://katapick.com/sites/hololive-grand-reception
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, セリフ体, 固定CTA, カルーセル, 周年]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 20
13generator: Katapick
14---
15
16# hololive Grand Reception ~感謝を込めた招待状~ — 再現用デザイン仕様書
17
18> チケットボタンまで金の封蝋で、招待状になりきってる。ホロライブの全国巡回展示会「hololive Grand Reception」の特設サイトは、ドレス姿のKVと金の飾り罫、明朝体で“招かれる側”の気分を作る。
19
20このファイルは Katapick(https://katapick.com)が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です(2026-09-26 計測)。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22

hololive Grand Reception ~感謝を込めた招待状~についてよくある質問

hololive Grand Receptionのサイトで使われているフォントは?

見出し・本文ともに Zen Old Mincho が使われています。Google Fonts で無料で利用できます。ロゴは画像として作られていると思われます。

hololive Grand Receptionのような招待状風のデザインはどう作る?

金のグラデーションで塗った飾り罫、封蝋型のボタン、明朝体の見出しを組み合わせ、背景に紙の質感を感じる淡い模様を敷くのが基本です。購入ボタンまでコンセプトの小道具に置き換えると統一感が出ます。

hololive Grand Receptionのデザインはどんなサイトの参考になる?

展示会・ポップアップストア・周年記念イベントなど、ファンを“招く”コンセプトの特設サイトや、格式を出したいキャラクターIPのイベントサイトの参考になります。

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