EventJapanPicked 2026.09.28

AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』

イベント / ライブのWebデザイン参考 — 歌い手グループ・ライブツアー

サイトを見るamptak-colors-livetour2026.stpr.com

amptak-colors-livetour2026.stpr.com開く ↗

AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』のPC版ファーストビュー

サイトを開く ↗

AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』のスマホ版ファーストビュー

Editor's note — 編集部の視点

目次とSNSは、左右の星空へ追い出してる。

歌い手グループAMPTAKxCOLORSのホールツアー特設サイトは、約390px幅のカラムを細い帯で額装し、公演日と会場だけを縦に読ませている。

LeoMotion & Direction

右の帯に「RAINBOW LOADING...」と「93」！ツアー名の「ロード中93％」を、読み込み中の画面に見立ててるっぽい。開演前の暗い客席で、幕が上がるのを待ってる気分になる！

1カラムの両脇に細い帯を立て、縦書きのグループ名を刷る。スマホ幅の画面が、PCの中で額装された1枚になる
2右の余白に英字ナビ9項目と、チケット・Q&Aの2ボタン。どこを読んでいても、買う・聞くの入口が横にある
3KVの直下を「WARNING」の警告帯で区切る。侵略計画というツアー名を、日程に入る前のひと呼吸で効かせる

Color

AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』の配色

Typography

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

本文・ニュース見出し

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

会場名などの明朝の見出し

Aa あア

使用: Noto Serif JP
代替: Noto Serif JP

英字ナビ・日付の数字

Aa あア

使用: EB Garamond
代替: EB Garamond

「チケット情報はこちら」などのボタン文字

Aa あア

使用: Zen Old Mincho
代替: Zen Old Mincho

実測タイプスケール1440px幅 · 2026-09-27 計測

小見出しKatapick 型14px · 1.4 · 400
本文The quick brown fox — 参考を型にする10px · 1.4 · 500
ボタンKatapick 型11px · 1.2 · 700

Structure

ページ構成（上から順）

01
カラム外（左）
流れ星を散らした濃紺の星空に、ツアーロゴと「SHARE」の見出し、XとLINEの共有ボタンを置く。下端はオレンジの斜めストライプ帯が横切る。
02
カラム外（右）
地球儀のモチーフの上に TOP・SCHEDULE・TICKETS・NEWS・GOODS・FAN CLUB・MAP・MOVIE・Q&A の英字ナビを縦に並べ、その下に「チケット情報はこちら」「よくあるご質問はこちら」の楕円ボタン2つ。右下に「RAINBOW LOADING...」の文字。
03
カラムの額縁
中央カラムの左に白い帯と縦書きの「AMPTAKxCOLORS」、上下に×印。右は斜線の入った帯に縦書きの「RAINBOW LOADING...」と「93」を刷る。
04
TOP（KV）
6人のメンバーが光る球体に手をかざすイラストの下に、「AMPTAKx侵略計画レインボーロード中93」のツアーロゴを重ねる。
05
WARNING帯・SCHEDULE
「WARNING」を3段に重ねた警告帯で区切り、公演地ごとに「AICHI」のラベル、オレンジの明朝で「愛知県芸術劇場大ホール」、2026/9/12 Sat・9/13 Sun の日付とOPEN/START時刻、開閉式の「会場案内」を積む。
06
NEWS
大阪公演のグッズ当日販売や、有料会員限定企画の告知など、記事の見出しを縦に並べる。
07
GOODS・FAN CLUB・MAP
中央カラムの紺地に、ツアーロゴの紋章を大きく透かし、その上にオレンジのグラデーションの丸いボタンを縦に置いて、各ページへ送り出す。
08
MOVIE・Q&A
MOVIEは「侵略ツアー決定!!!」の動画サムネイルに再生ボタンを重ねた1本。Q&Aは「チケットのお申し込みについて」「ファミリー席について」「アップグレードについて」「ご入場について」の4つのカテゴリボタンの下に、オレンジの帯の「Q」と紺地の「A」を開閉式で積む。

Interaction

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

ブラウザのスクロールバーは動かず、中央カラムの中だけがスクロールする作りと思われる。左右の星空とナビは止まったまま、カラムの中身だけが流れていく
星空の背景・左のSHARE・右のナビは、独自スクロールの外にあるためカラムを読み進めても動かないと思われる
「会場案内」の見出し帯の右端に「−」のアイコンがあり、会場情報を開閉するアコーディオンと思われる
SPでは上部の黒いヘッダーにロゴとMenuボタン、右上に「よくあるご質問」のタブを出し、PCで左右にあった要素をまとめている
Swiper が読み込まれており、グッズや動画などの一覧でスライダーを使っていると思われる。CMSは WordPress

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

AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』をスクロールしたときのフレーム1 — 01

検出された技術:SwiperWordPressGoogle Fonts

Reproduce

再現するときのポイント

01PCでは幅約390pxのカラムを中央に置き、両脇に縦書きのグループ名を入れた細い帯を付けて額縁にする
02左の余白にはツアーロゴとSHARE（X・LINE）、右の余白には英字ナビ9項目とチケット・Q&Aの2ボタンを置く
03背景は流れ星を散らした濃紺の星空にし、アクセントは警告色のオレンジと斜めストライプに絞る
04日付は「9/12」の数字を大きく、年と曜日を小さく添え、OPEN/STARTはオレンジの小さなラベルで時刻の前に置く

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

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

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

amptak-colors-livetour-2026.katapick.md

1---
2title: "AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』 デザイン分析書"
3source: https://amptak-colors-livetour2026.stpr.com/
4katapick: https://katapick.com/sites/amptak-colors-livetour-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, ダーク, セリフ体, 固定ナビ, ロングページ]
8launched: 2026-07
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# AMPTAKxCOLORS ホールツアー『AMPTAKx侵略計画レインボーロード中93％』 — デザイン分析書
16 
17> 目次とSNSは、左右の星空へ追い出してる。歌い手グループAMPTAKxCOLORSのホールツアー特設サイトは、約390px幅のカラムを細い帯で額装し、公演日と会場だけを縦に読ませている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22