EventJapanPicked 2026.09.26

無原唱レコードフェス2026「RE;GAIN」

イベント / ライブのWebデザイン参考 — 音楽レーベル・ライブイベント

出典: riot-music.com

Editor's note — 編集部の視点

集合絵に、筆で殴り書いたロゴをドンと重ねてる。

無原唱レコードフェス2026「RE;GAIN」の特設サイトは、黄色地のキービジュアルに太字と筆致の混ざったロゴを置き、横スクロールで公演情報まで一気に運ぶ。

PipTrends & VTuber

え、待って、FVの次がいきなり「Official Report」なの神すぎる！！行けなかった勢も写真スライダーで当日の空気を浴びられるし、終演後も特設サイトがちゃんと生きてるのうれしい！

1ロゴは「RE」が太いゴシック、「GAIN」がかすれた筆致。整いと崩しの対比がフェスの熱を立ち上げる
2PCは横スクロールの一本道。レポート→公演情報→出演者→チケットと、迷わせずに購入まで運ぶ
3見出しは「ABOUT; 公演情報」とセミコロン区切り。タイトルの「;」が、ページ全体の書式になっている

Color

無原唱レコードフェス2026「RE;GAIN」の配色

Typography

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

英字見出し・本文・ナビ

Aa あア

使用: Satoshi Variable
代替: Manrope

補助ラベル

Aa あア

使用: IBM Plex Mono
代替: IBM Plex Mono

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

小見出しKatapick 型11.7px · 1.8 · 700
本文The quick brown fox — 参考を型にする15px · 1.8 · 400
ボタンKatapick 型10px · 1.8 · 400
注釈The quick brown fox — 参考を型にする11.5px · 1 · 500

Structure

ページ構成（上から順）

01
メニューボタン
左上（SPでは右下）に黒い正方形のハンバーガーボタンを固定。メニューには REPORT〜CONTACT を英語と日本語の2段で並べる。
02
ヒーロー
上端に白い帯を残し、黄色地にアーティスト集合のキービジュアルを敷く。右下に「RE;GAIN」ロゴ、左下に英文のサブコピー、右端に「SCROLL →」。
03
Official Report
ダークな地に「2026.07.26 “RE;GAIN” at The Garden Hall / Official Report」の見出しと、ライブ写真のスライダー（矢印とドット）。
04
ABOUT; 公演情報
主催・運営、公演名、日時、会場、アクセス、Google Map を表組みで整理。
05
Artist / Guest Lineup
出演アーティストとゲストを、日本語名と英字名の2段で並べる。
06
TICKET; チケット情報
現地・配信の券種と価格、特典内容、購入ボタンをカードで比較できるように並べる。
07
GOODS; 物販情報
ライブTシャツやアクリルスタンドなどのグッズを価格付きで一覧にし、会場物販とECへの導線を置く。
08
ATTENTION / CONTACT
番号付きの注意事項リストと、お問い合わせ・協賛の窓口で締める。

Interaction

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

PCはページ全体を横一列に並べ、縦ホイールを横移動に変換する横スクロール構成。Lenis の慣性スクロールに、GSAP ScrollTrigger の pin + translateX を組み合わせると再現可能
レポート写真は Swiper のスライダーで、左右の矢印とドットのページネーションを持つ
SPでは縦1カラムに組み替え、メニューボタンを右下に固定して親指で開けるようにしている
注意事項は番号付きの見出しをクリックで開閉するアコーディオンと思われる（details / summary で再現可能）

スクロールのコマ撮りLenis · 200–3500ms

無原唱レコードフェス2026「RE;GAIN」をスクロールしたときのフレーム1 — 01

検出された技術:LenisSwiper

Reproduce

再現するときのポイント

01キャラクター・キービジュアル・ロゴは権利物。再現時はオリジナルのイラストや写真に差し替え、構成と演出の考え方だけを取り入れる
02FVは #fefa10 の黄色を地にし、差し色は #0021ff の青1色に絞る。上端に白い帯を残して紙面のような余白を作る
03ロゴは太いサンセリフと筆で描いたSVGを組み合わせ、同じ単語の中で質感を切り替える
04見出しは「英字; 日本語」の書式で統一し、英字は Satoshi（代替 Manrope）、補助ラベルは IBM Plex Mono

再現MDに含まれるもの

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

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

mugensho-fes-2026-regain.katapick.md

1---
2title: "無原唱レコードフェス2026「RE;GAIN」 再現用デザイン仕様書"
3source: https://riot-music.com/mugensho-record/mgsfes2026-regain/
4katapick: https://katapick.com/sites/mugensho-fes-2026-regain
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [横スクロール, ビビッド, イラスト, 大胆なタイポ, カルーセル, 周年]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# 無原唱レコードフェス2026「RE;GAIN」 — 再現用デザイン仕様書
17 
18> 集合絵に、筆で殴り書いたロゴをドンと重ねてる。無原唱レコードフェス2026「RE;GAIN」の特設サイトは、黄色地のキービジュアルに太字と筆致の混ざったロゴを置き、横スクロールで公演情報まで一気に運ぶ。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22