# MECHATU-A 1st LIVE “Over Drive!”｜イベント / ライブのWebデザイン参考

> 背景は真っ赤、柄はステージのトラスとスピーカー。にじさんじのMECHATU-Aの1st LIVE「Over Drive!」特設サイトは、赤地に機材の線画を敷き、白いパネルに情報を集めて熱と読みやすさを両立している。

- URL: https://www.nijisanji.jp/events/mechatu-a_1stlive/
- 解説ページ: https://katapick.com/sites/mechatu-a-over-drive
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuberユニットのライブ
- テイスト: レッド基調、ビビッド、固定ナビ、イラスト、ロングページ
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 20 時間）

## 編集部のひとこと（Leo）
背景のトラスとスピーカー、どこまでスクロールしても左右に見えてるから、開演前の会場をずっと歩いてる気分！チケットの細かい表を読んでる間も熱が冷めないの、最高！！

## デザインの見どころ
- 8人が折り重なるKVを縦長に据え、左にはロゴと日程だけ。メンバーの勢いを1枚で先に浴びせる
- 見出しは白パネルの上端から飛び出す赤い台形タブ。長い告知ページでも、章の頭がすぐ見つかる
- 「T I T L E」のように字間を空けた赤ラベルで項目名を統一。日程や価格の表が硬くなりすぎない

## 配色
- #f20124 Over Drive Red（背景 / 見出しタブ / ラベル）
- #ffffff Stage White（情報パネル / ナビ）
- #000000 Amp Black（本文 / ボタン）
- #d66a7d Truss Rose（背景のトラス柄）
- #090c31 Midnight Navy（ロゴ）

## フォント
- 和文の本文・表: Noto Sans JP（代替: Noto Sans JP）
- 英字の見出し・ナビ・日程: Poppins（代替: Poppins）
- アイコン: Material Symbols Outlined（代替: Material Symbols Outlined）

## よくある質問
### MECHATU-A 1st LIVE特設サイトで使われているフォントは？
和文に Noto Sans JP、英字の見出しや日程に Poppins、アイコンに Material Symbols Outlined が使われています。いずれも Google Fonts で無料で利用できます。

### 台形の見出しや斜めカットのボタンはどう作る？
要素に clip-path: polygon() を指定し、四隅の座標をずらして台形や角の切り欠きを作ります。疑似要素に同じ形を重ねると、枠線付きのデザインにもできます。

### どんな業種の参考になる？
VTuberユニットやアイドルグループのライブ、音楽フェス、アルバム発売と連動したイベントの特設サイトの参考になります。

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