フレン・E・ルスタリオ 1st LIVE “smilE” 〜帝国からハッピーをおとどけ〜

1. 01

   固定ナビ

   上部中央に Rye の赤い英字ナビ（TOP / ABOUT / CAST / TICKET / DISCOGRAPHY / GOODS / ATTENTION / CONTACT）。

2. 02

   ヒーロー

   白馬に乗るフレンのKVを飾り罫の縦長フレームに収め、右にロゴ「smilE」と「2027.2.6 Sat. Kanadevia Hall」。背景に観覧車とメリーゴーラウンドのシルエット。

3. 03

   ABOUT

   跳ね馬と唐草の飾り枠の見出しから、Title / Schedule / Stage を中央揃えで並べる。

4. 04

   CAST

   名前札風の枠にフレン・E・ルスタリオの名前とYouTube・Xのリンク、横にバストアップのイラスト。

5. 05

   TICKET

   チケット料金、入場特典（COMINGSOON）、「FACETS」シリアル先行抽選などの受付期間と、チケット形の申込ボタンを抽選ごとに並べる。

6. 06

   DISCOGRAPHY

   1st Mini Album『FACETS』の形態別ジャケットと価格、発売記念イベント、店舗別の購入特典を縦に長く並べる。

7. 07

   GOODS・ATTENTION・CONTACT

   グッズ、注意事項、お問い合わせを同じ飾り枠の形式で続ける。

8. 08

   フッター

   権利表記で締める。

• 上部の英字ナビはスクロール中も固定表示され、長いページでも各セクションへ移動できる
• 技術スタックに Swiper があり、ジャケットや特典画像の切り替えに使われていると思われる
• 遊園地のシルエットは背景画像を縦に繰り返し敷いていると思われる。background-repeat: repeat-y で再現可能
• チケット形のボタンは clip-path で片側を矢印型に切り、唐草の飾りを擬似要素で重ねると再現できる

スクロールのコマ撮り200–64000ms

検出された技術:SwiperGoogle Fonts

• 01KVのモチーフ（観覧車・メリーゴーラウンド・白馬）を単色のシルエットにして背景に敷く
• 02見出しとナビは Rye のような装飾的な英字書体に絞り、本文は Noto Sans JP で読みやすさを守る
• 03赤1色の飾り罫と唐草で、すべてのセクションを同じ額縁に収める
• 04ボタンはチケット形にして、情報の多いセクションでも押す場所を目立たせる

1---
2title: "フレン・E・ルスタリオ 1st LIVE “smilE” 〜帝国からハッピーをおとどけ〜 再現用デザイン仕様書"
3source: https://www.nijisanji.jp/events/furen_smilE/
4katapick: https://katapick.com/sites/furen-1st-live-smile
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, レトロ, 固定ナビ, ロングページ, レッド基調]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# フレン・E・ルスタリオ 1st LIVE “smilE” 〜帝国からハッピーをおとどけ〜 — 再現用デザイン仕様書
17 
18> 背景がずっと観覧車とメリーゴーラウンド。にじさんじ・フレン・E・ルスタリオの1st LIVE特設サイト「smilE」は、遊園地のシルエットに赤い飾り枠とRyeの見出しを重ね、事務的な情報まで看板のように見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22