# NIJISANJI 8th Anniversary 特設サイト｜イベント / ライブのWebデザイン参考

> PCで開いても、スマホ幅のまま読ませてくる。にじさんじ8周年キャンペーンLPは、約400pxの中央列を左右の固定パネルで挟み、どの端末でも同じ読み心地を守っている。

- URL: https://lp.shop.nijisanji.jp/nijisanji_8th_Anniversary/
- 解説ページ: https://katapick.com/sites/nijisanji-8th-anniversary
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuber事務所・周年キャンペーン / グッズ販売
- テイスト: 周年、イラスト、固定ナビ、カルーセル、セリフ体、ロングページ
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Pip）
え、待って、商品スライダーが「1 / 32」って枚数まで出してくれるの親切すぎる！！サムネ列もあるから、推しのグッズだけ狙い撃ちできそう。ボタンにちょこんといるミニキャラも地味に神。

## デザインの見どころ
- 中央列は約400px、左右にロゴと目次を固定。SP前提の設計を崩さず、PCの余白を額縁に変える
- 目次は濃紺に金の二重枠と四隅の飾り。招待状のような佇まいが、周年の格を静かに上げる
- 商品一覧はシリーズごとに金の放射線の帯で区切る。約5600pxの長さでも、いまどのシリーズかが分かる

## 配色
- #fff9f2 Paper Cream（背景（左右の余白・FV））
- #021849 Royal Navy（商品一覧セクション背景 / SPメニューボタン）
- #2f2d3f Dusk Plum（目次パネル・キャンペーン欄の背景）
- #cda652 Antique Gold（飾り枠・見出し帯の装飾）
- #cf7e21 Amber（目次の英字見出し）
- #231f1f Ink Black（テキスト）

## フォント
- 英字見出し・目次・日付: Hepta Slab（代替: Hepta Slab）
- 和文の強調・リード: BIZ UDPMincho（代替: BIZ UDPMincho）
- 和文本文・注意書き: Noto Sans JP（代替: Noto Sans JP）
- 欧文本文: Helvetica Neue（代替: Inter）

## よくある質問
### にじさんじ8周年特設サイトで使われているフォントは？
英字見出しや目次に Hepta Slab、和文のリードに BIZ UDPMincho、本文に Noto Sans JP と Helvetica Neue が使われています。Helvetica Neue 以外は Google Fonts で無料で使えます。

### PCでスマホ幅のまま見せるレイアウトの利点は？
SPとPCで同じ画像・同じ縦長の構成を使い回せるため、制作と更新の手間を抑えられます。左右の余白には固定のロゴや目次を置き、PCでも間延びしないようにしています。

### キャラクターのイラストを参考資料に使ってもよい？
キャラクターの権利は事務所に帰属します。参考にするのはレイアウトや飾り枠の作り方、配色までにとどめ、イラストやロゴは使わないでください。

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