EventOverseas / USPicked 2026.09.26

IRyS 1st concert “HOPE ||: Beyond the Stars”

イベント / ライブのWebデザイン参考 — VTuber・ライブイベント

出典: hope-beyond-the-stars.hololivepro.com

IRyS 1st concert “HOPE ||: Beyond the Stars”のPC版ファーストビュー

IRyS 1st concert “HOPE ||: Beyond the Stars”のスマホ版ファーストビュー

Editor's note — 編集部の視点

チケットより先に、夜空に浮かぶ一文を読ませる。

IRySの1stコンサート特設サイト「HOPE ||: Beyond the Stars」は、細いセリフ体の英日の詞を章の合間に挟み、ライブ告知を一篇の詩のように読ませている。

LunaType & Whitespace

Cormorantの細い英字、暗い地だと普通は消える。なのにうっすらホログラムのグラデを差して、夜空から浮かせてる。和訳はぐっと小さく控えめ。主従の付け方、わかってる。……いいね！！

101〜06の章番号を、星のきらめき付きの極細セリフ数字で大きく。目次がそのまま装飾になる
2章の合間に英文と和訳の一行を挟む。闇から光へ進む詞が、スクロールの順番を物語にしている
3TICKETはチケット券面の形、MENUは丸い印。夜空の中で、押せる場所だけがピンクに光る

Color

IRyS 1st concert “HOPE ||: Beyond the Stars”の配色

Typography

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

英文見出し・数字・本文

Aa あア

使用: Cormorant Infant
代替: Cormorant Infant

和文の約物

Aa あア

使用: YakuHanMP
代替: Shippori Mincho

装飾ラベル

Aa あア

使用: Cinzel
代替: Cinzel

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

本文The quick brown fox — 参考を型にする18px · 1.4 · 500

Structure

ページ構成（上から順）

01
オープニング
星空と雲海の中央に、星を円く並べたエンブレムと「I WILL GIFT YOU WITH HOPE MADE OF MIRACLES」、下に和訳の一行。
02
キービジュアル
装飾的な額縁の中にIRySのキービジュアル、背後に「IRyS 1st CONCERT」の大きな文字、下にホログラム調のタイトルロゴ。
03
開催概要
「2026.10.6 {TUE}」を大きなセリフ数字で置き、会場 SGC HALL ARIAKE とアクセス、会場・配信の時刻を縦罫線で区切って並べる。
04
01 NEWS
極細の「01」と波括弧の「{ NEWS }」見出しに、日付と英文タイトルの一覧、楕円の MORE ボタン。
05
詞の挿入
「WHILE MY YESTERDAY’S SELF WAS SHROUDED IN DARKNESS,」など、英文と和訳の一行を各章の間に大きく挟む。
06
02 MERCH・03 DIGITAL MESSAGE BOARD
装飾枠付きの告知画像で事前通販グッズとデジタルメッセージボードを紹介。章番号は左右交互に置く。
07
04 ALBUM
方眼のジャケット枠にアルバム『DANGERyS』のジャケットとディスク、タイトル・形態・紹介文を罫線で区切る。
08
05 VIDEO
左右に前後のサムネイルを覗かせたカルーセルと、星形のページネーション。
09
06 PROFILE
半透明のカードに誕生日・身長・イラストレーター・ファンネームとSNSリンク、右に立ち絵と英文の自己紹介、背後に巨大な「Profile」の文字。

Interaction

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

花びらが画面を舞い、一部はぼけて手前に見える。奥行きごとにぼかしを変えた CSS アニメーションか Canvas のパーティクルと思われる
右端の TICKET（チケット型）と MENU（丸い印）は固定表示。MENU の円周の文字は回転アニメーションと思われる
VIDEO のカルーセルは Swiper。中央のスライドを大きく、左右を暗く見せる
英文の詞は、画面に入ったときにフェードインさせると1行ずつ語りかける演出として再現可能

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

IRyS 1st concert “HOPE ||: Beyond the Stars”をスクロールしたときのフレーム1 — 01

IRyS 1st concert “HOPE ||: Beyond the Stars”をスクロールしたときのフレーム2 — 02

IRyS 1st concert “HOPE ||: Beyond the Stars”をスクロールしたときのフレーム3 — 03

IRyS 1st concert “HOPE ||: Beyond the Stars”をスクロールしたときのフレーム4 — 04

IRyS 1st concert “HOPE ||: Beyond the Stars”をスクロールしたときのフレーム5 — 05

IRyS 1st concert “HOPE ||: Beyond the Stars”をスクロールしたときのフレーム6 — 06

検出された技術:SwiperWordPressGoogle Fonts

Reproduce

再現するときのポイント

01背景は純黒ではなく #000411 の紺黒にし、雲と星の画像で奥行きを出す
02見出し・数字・本文を Cormorant 系の細いセリフ体で統一し、章番号だけ極端に大きくする
03「{ NEWS }」のように見出しを波括弧で括り、章番号と組み合わせてリズムを作る
04押せる要素（TICKET・MENU・MORE）にだけピンクやホログラム調の色を使う

再現MDに含まれるもの

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

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

irys-hope-beyond-the-stars.katapick.md

1---
2title: "IRyS 1st concert “HOPE ||: Beyond the Stars” 再現用デザイン仕様書"
3source: https://hope-beyond-the-stars.hololivepro.com/
4katapick: https://katapick.com/sites/irys-hope-beyond-the-stars
5category: イベント / ライブ
6region: 海外 (US)
7tags: [ダーク, セリフ体, イラスト, 固定CTA, ロングページ]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# IRyS 1st concert “HOPE ||: Beyond the Stars” — 再現用デザイン仕様書
17 
18> チケットより先に、夜空に浮かぶ一文を読ませる。IRySの1stコンサート特設サイト「HOPE ||: Beyond the Stars」は、細いセリフ体の英日の詞を章の合間に挟み、ライブ告知を一篇の詩のように読ませている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22