MECHATU-A 1st LIVE “Over Drive!”

1. 01

   ナビ

   上端中央に白い台形の帯を固定し、TOP から CONTACT までの10項目を赤い英字で並べる。SPではハンバーガーメニュー。

2. 02

   ヒーロー

   左に「Over Drive!」ロゴと「2026.10.10 Sat. K-Arena Yokohama」、右にメンバーが折り重なる縦長のKV。SPではKVの下にロゴを重ねる。

3. 03

   ABOUT

   白いパネルに TITLE・SCHEDULE・STAGE を字間の広い赤ラベルで区切って表示する。

4. 04

   CAST

   ユニットロゴの下に、8人のアイコンを名前と YouTube・X のリンク付きで4列2段に並べる。

5. 05

   TICKET・LIVE VIEWING

   券種と価格、先行抽選ごとの受付期間を枠付きのブロックで縦に並べ、黒い斜めカットのボタンで申し込みへ。公開劇場リストや注意事項はアコーディオン。

6. 06

   DISCOGRAPHY

   1st Mini Album「On-Deck!」の各形態を、ジャケット・商品画像・スペック表・購入ボタンで紹介し、収録曲のクレジットを2カラムで載せる。

7. 07

   GOODS・FAN CLUB

   グッズ情報と、にじさんじ FAN CLUB 特典の配布内容。

8. 08

   ATTENTION・CONTACT・フッター

   注意事項と問い合わせ先で締める。

• 上部のナビは全画面キャプチャの各位置に写っており、position: fixed の固定ナビ。台形の形は clip-path: polygon() で作れる
• 見出しタブや黒いボタンの斜めの角も clip-path で切り欠いていると思われる
• スタックに Swiper があり、グッズや商品画像のスライダーに使われていると思われる
• 劇場リストや注意事項は開閉式のアコーディオン。details / summary 要素で再現可能

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

検出された技術:SwiperGoogle Fonts

• 01背景は #f20124 の赤に、トラス・スピーカー・照明の線画を淡い色で散らしたパターン画像を敷く
• 02情報はすべて中央の白パネルに入れ、赤地との対比で読みやすさを確保する
• 03項目名は赤い帯に letter-spacing を大きく取った白文字で統一する
• 04見出しは白パネルの上端に重なる赤い台形タブにし、英字は Poppins の太字で組む

1---
2title: "MECHATU-A 1st LIVE “Over Drive!” デザイン分析書"
3source: https://www.nijisanji.jp/events/mechatu-a_1stlive/
4katapick: https://katapick.com/sites/mechatu-a-over-drive
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [レッド基調, ビビッド, 固定ナビ, イラスト, ロングページ]
8launched: 2026-04
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# MECHATU-A 1st LIVE “Over Drive!” — デザイン分析書
16 
17> 背景は真っ赤、柄はステージのトラスとスピーカー。にじさんじのMECHATU-Aの1st LIVE「Over Drive!」特設サイトは、赤地に機材の線画を敷き、白いパネルに情報を集めて熱と読みやすさを両立している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22