EventJapanPicked 2026.11.09

KAMITSUBAKI WARS 2026 神椿横浜決戦

イベント / ライブのWebデザイン参考 — バーチャルアーティストのライブイベント

サイトを見るyokohamawars2026.kamitsubaki.jp

yokohamawars2026.kamitsubaki.jp開く ↗

KAMITSUBAKI WARS 2026 神椿横浜決戦のPC版ファーストビュー

サイトを開く ↗

KAMITSUBAKI WARS 2026 神椿横浜決戦のスマホ版ファーストビュー

Editor's note — 編集部の視点

トップは、DAY-1とDAY-2の2択だけ。

KAMITSUBAKI STUDIOのライブ「KAMITSUBAKI WARS 2026 神椿横浜決戦」の特設サイトは、黒地に2公演のKVを並べ、見たい日を最初に選ばせる。

LeoMotion & Direction

タイトルの英字、ところどころ切れ目が入ってて、ステンシルで壁に吹き付けた旗印みたい！PCだと選んでない側のKVが白く飛ぶっぽくて、2つのステージに交互にスポットが当たる感じ。どっちの日か迷う！

12公演のKVを左右に並べ、それぞれを入口のボタンにする。説明を読ませる前に、見たい日を選ばせる
2DAY-1のアートには横浜の街並みが入る。「横浜決戦」の舞台を、イラストの背景そのもので示す
3SPでは公演ロゴとDAY表記を半透明の枠にまとめる。縦に積んでも、どこを押せばいいか迷わない

Color

KAMITSUBAKI WARS 2026 神椿横浜決戦の配色

Typography

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

タイトル「KAMITSUBAKI WARS 2026」

Aa あア

使用: タイトルロゴ（ステンシル調の画像）
代替: Big Shoulders Stencil Display

副題「神椿横浜決戦 in ぴあアリーナMM」

Aa あア

使用: 副題の明朝体（画像）
代替: Shippori Mincho B1

「DAY-1」「DAY-2」

Aa あア

使用: DAY表記の太いゴシック（画像）
代替: Montserrat

Structure

ページ構成（上から順）

01
タイトル
黒地の上部に「KAMITSUBAKI WARS 2026」のステンシル調ロゴと「神椿横浜決戦 in ぴあアリーナMM」の副題を中央揃えで置く。
02
DAY-1パネル
V.W.P 4th ONE-MAN LIVE「現象IV」のKVに、公演ロゴと大きな「DAY-1 »」を重ねた入口。
03
DAY-2パネル
花譜の KAF 5th ONEMAN LIVE のKVに、公演ロゴと大きな「DAY-2 »」を重ねた入口。
04
ゲート構成
トップはこの1画面（section#gate）だけで、各公演の特設ページへ振り分ける。
05
SP版
2枚のパネルを縦に積み、公演ロゴと「DAY-1 »」「DAY-2 »」を半透明の枠に収めて下部に置く。

Interaction

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

トップは section#gate の1画面のみで、DAY-1・DAY-2 のパネル全体がそれぞれの公演ページへのリンクになっていると思われる
PCでは DAY-2 側のビジュアルが白っぽく淡く見えるため、選ばれていない側を減光・白飛びさせて選択中のパネルを強調する演出と思われる。filter や半透明のオーバーレイで再現可能
PCは左右2分割、SPは上下に積む。CSS Grid の grid-template-columns をブレークポイントで切り替えるだけで再現可能

スクロールのコマ撮り

KAMITSUBAKI WARS 2026 神椿横浜決戦をスクロールしたときのフレーム1 — 01

検出された技術:WordPress

Reproduce

再現するときのポイント

01背景は純黒にし、色はKVの赤と青だけに任せる
02パネルはKV画像全体をリンクにし、公演ロゴと大きな「DAY-1 »」を下部に重ねる
03タイトルはステンシル調の英字を画面幅いっぱいに置き、副題は太い明朝で締める

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全5セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

kamitsubaki-wars-2026.katapick.md

1---
2title: "KAMITSUBAKI WARS 2026 神椿横浜決戦 デザイン分析書"
3source: https://yokohamawars2026.kamitsubaki.jp/
4katapick: https://katapick.com/sites/kamitsubaki-wars-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, 大胆なタイポ, イラスト, ミニマル]
8launched: 2025-10
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# KAMITSUBAKI WARS 2026 神椿横浜決戦 — デザイン分析書
16 
17> トップは、DAY-1とDAY-2の2択だけ。KAMITSUBAKI STUDIOのライブ「KAMITSUBAKI WARS 2026 神椿横浜決戦」の特設サイトは、黒地に2公演のKVを並べ、見たい日を最初に選ばせる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22