EventOverseas / USPicked 2026.09.26

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”

イベント / ライブのWebデザイン参考 — VTuber・コンサート（hololive English）

出典: drawn-to-dawn.hololivepro.com

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”のPC版ファーストビュー

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”のスマホ版ファーストビュー

Editor's note — 編集部の視点

画面の左右で、朝焼けと夜空に分かれてる。

KiaraとIna'nisの1st Concert特設サイト「Drawn to Dawn」は、背景をオレンジと藍色で二分し、最後に二人の色を白い円へ溶かしていく。

IrisColor & Brand

オレンジ側はあったかい焚き火、藍色側はひんやりした夜の湖みたいで、色の温度差がそのまま二人の性格っぽいのがすき。つなぎ役の金色がどっちにもなじむのもいい。

1背景を中央で縦に割り、左はオレンジ、右は藍色。どのセクションでも二人の並びが崩れない
2オープニングは漆黒に太陽と月の線画。ロゴを暗がりに沈め、二人の象徴を先に見せる
3締めは二人それぞれの詩のあと、白い円に金の斜体で「new story.」。分割がここで一つになる

Color

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”の配色

Typography

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

見出し・詩（斜体）

Aa あア

使用: Playfair Display
代替: Playfair Display

日付・時刻などの数字

Aa あア

使用: Red Rose
代替: Red Rose

本文・ニュース

Aa あア

使用: ヒラギノ角ゴ Pro
代替: Noto Sans JP

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

本文The quick brown fox — 参考を型にする25.9px · 1.5 · 400

Structure

ページ構成（上から順）

01
オープニング
漆黒の画面に、左は銅色の太陽、右は藍色の月の線画オーナメントが放射状に広がり、中央にロゴを暗く沈めて置く。
02
ヒーロー
角丸のKVを左右で二人のイラストに分割し、中央に装飾的なロゴ「DRAWN TO DAWN」。右上に四芒星形のMENU、右下に太陽形の「Ticket」。
03
公演情報
黒地に「DAY1 March 27th」「DAY2 March 28th」「The Wiltern」、会場と配信それぞれのOPEN / STARTを金のラベルで示す。
04
News
オレンジと藍色の分割背景に、アーチ状の見出しと金縁のニュースカード、黄色の「View More」。
05
Merch・Digital Message Board
グッズとデジタルメッセージボードの告知バナーを、分割背景の中央に置く。
06
Music
クリーム色のカードに、二人それぞれのリリースのジャケットと説明文を左右に並べる。
07
Video・Talent
藍色の帯に動画のカルーセル、二人のタレントカードをアーチ型の枠で並べる。
08
Poem
オレンジと藍色のカプセル型ブロックに二人それぞれの英詩を置き、最後は白い円の中で金色の斜体の詩「…new story.」で締める。
09
フッター
権利表記と関連リンク。

Interaction

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

オープニングは太陽と月の線画が先に現れ、ロゴがあとからフェードインする演出と思われる。SVG と CSS の opacity トランジションで再現可能
右端の「MENU」と太陽形の「Ticket」はスクロール中も固定表示され、チケット導線を常に見せる
Video セクションは中央の動画の左右に前後の動画がぼかされて見える構成で、Swiper のカルーセルで実装されていると思われる
左右の分割背景は linear-gradient(90deg, orange 50%, indigo 50%) を body に敷くと再現できる

スクロールのコマ撮り380–1000ms

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”をスクロールしたときのフレーム1 — 01

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”をスクロールしたときのフレーム2 — 02

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”をスクロールしたときのフレーム3 — 03

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”をスクロールしたときのフレーム4 — 04

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”をスクロールしたときのフレーム5 — 05

Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn”をスクロールしたときのフレーム6 — 06

検出された技術:Swiper

Reproduce

再現するときのポイント

01背景を中央で2色に塗り分け、コンテンツは中央1カラムにして両方の色にまたがらせる
02二人の象徴（太陽と月）を線画のオーナメントにし、見出しや区切り線に繰り返し使う
03見出しと詩は Playfair Display の斜体、数字は Red Rose と役割を分ける
04締めは2色を白い円でまとめ、「二人が一つになる」物語をレイアウトで回収する

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

kiara-ina-drawn-to-dawn.katapick.md

1---
2title: "Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn” 再現用デザイン仕様書"
3source: https://drawn-to-dawn.hololivepro.com/
4katapick: https://katapick.com/sites/kiara-ina-drawn-to-dawn
5category: イベント / ライブ
6region: 海外 (US)
7tags: [イラスト, セリフ体, ビビッド, ロングページ, 固定CTA]
8launched: 2025-11
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# Takanashi Kiara / Ninomae Ina’nis 1st Concert “Drawn to Dawn” — 再現用デザイン仕様書
17 
18> 画面の左右で、朝焼けと夜空に分かれてる。KiaraとIna'nisの1st Concert特設サイト「Drawn to Dawn」は、背景をオレンジと藍色で二分し、最後に二人の色を白い円へ溶かしていく。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22