# hololive English 4th Concert -Serendipity-｜イベント / ライブのWebデザイン参考

> ライブ告知を、斜体のセリフ体でしっとり組む。hololive Englishの公演特設サイト「4th Concert -Serendipity-」は、斜体のセリフ体とライムグリーンを軸に、高揚を軽やかな余韻へ仕立て直している。

- URL: https://serendipity.hololivepro.com/
- 解説ページ: https://katapick.com/sites/hololive-en-serendipity
- カテゴリ: イベント / ライブ / 地域: 海外（US）/ 業種: VTuber事務所・ライブイベント
- テイスト: イラスト、セリフ体、ビビッド、固定ナビ、固定CTA、カルーセル
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Pip）
え、待って、最後のPoemで短い英文が1行ずつ積まれていくの、エモすぎる！！ライブ前にこれ読んだら泣いちゃうって。締めまで推しからのラブレターっぽくて、神。

## デザインの見どころ
- Day1とDay2の日付を斜体セリフで大きく並べ、間に×印。2日間の公演が、一行の見出しとして読める
- 右端のピンクのTicketバッジは常駐。どこまで読み進めても、買う入口が視界から消えない
- メンバーはカプセル型の立ち絵に、名前を弧に沿わせて配置。横一列に並べても名簿の堅さが出ない

## 配色
- #ffffff White（背景）
- #cbff96 Pale Lime（グラデーション背景・パネル）
- #91ff00 Neon Lime（メインカラー / 固定ナビ・言語ボタン）
- #000000 Black（テキスト・Unitタブ）
- #ff55de Hot Pink（アクセント / Ticketバッジ（スクショから採色））

## フォント
- 本文・日時・ポエム（斜体を多用）: Lora（代替: Lora）
- ナビ・ボタン・英字見出し: Bigshot One（代替: Bigshot One）

## よくある質問
### Serendipityのサイトで使われているフォントは？
本文や日付に Lora（斜体を多用）、ナビやボタンに Bigshot One が使われています。どちらも Google Fonts で無料で利用できます。

### チケット導線を常に見せるにはどうする？
目立つ色の円形バッジを position: fixed で画面の端に置く方法が参考になります。このサイトではピンクの Ticket バッジを右側に常駐させ、ページのどこからでも購入ページへ進めるようにしています。

### 海外向けのVTuberイベントサイトのデザインの特徴は？
英語のセリフ体を見出しに使い、日時・会場を大きく明示している点が特徴です。時刻にタイムゾーン（PDT）のラベルを付けているのも海外公演らしい配慮です。

### メンバーのイラストを参考資料として使ってもいい？
キャラクターの権利はカバー株式会社（ホロライブプロダクション）に帰属します。参考にするのは構成・配色・導線にとどめてください。

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