BrandJapanPicked 2026.09.26

TVアニメ『キルアオ』

ブランドのWebデザイン参考 — TVアニメ

出典: kill-blue.jp

Editor's note — 編集部の視点

黄色一面に網点で、まるで少年マンガの誌面。

TVアニメ『キルアオ』の公式サイトは、蛍光イエローの地に網点とかすれを散らし、ピンクとシアンのロゴで“殺し屋×青春”のギャップをポップな配色のまま押し切っている。

PipTrends & VTuber

え、待って、KVの下の丸サムネでビジュアルを切り替えられるの神すぎる！！推しの絵を選んで眺められるやつ、ファンはずっと居座っちゃう。何度でも見に来る理由ができてる！

1ロゴの「キ」はピンク、「オ」はシアン。2色の対比だけで、物騒さと青春を同じ画面に並べる
2FVは左にロゴ・放送日・大きな目次、右にKV。最初の一画面で、知りたいことを全部渡す
3ニュースの区切りは、先端に弾丸のような形を付けた点線。題材を小さなUIにまで仕込む

Color

TVアニメ『キルアオ』の配色

Typography

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

英字見出し・目次

Aa あア

使用: vdl-logona
代替: Dela Gothic One

日付・スタッフ／キャスト名

Aa あア

使用: vdl-logojrblack
代替: Dela Gothic One

英字ラベル

Aa あア

使用: korolev-rounded
代替: M PLUS Rounded 1c

本文

Aa あア

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

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

特大見出しKatapick 型57.6px · 1 · 900
見出しKatapick 型12.8px · 1 · 700
小見出しKatapick 型19.2px · 1 · 700
本文The quick brown fox — 参考を型にする16.8px · 1.8 · 400

Structure

ページ構成（上から順）

01
オープニング
黒いかすれ模様の地の中央に「KILL BLUE キルアオ」のロゴだけを置いたローディング画面。
02
ヒーロー
左に蛍光イエローの地でロゴ・放送日・NEWS／STORY／CHARACTER などの大きな目次と SNS、右にキービジュアルと縦書きのキャッチ。下に VISUAL CHANGE の丸いサムネイル3つ。
03
NEWS
小さな英字ロゴを重ねた見出しと、大きな日付＋タイトルの一覧を点線で区切り、MORE へつなぐ。
04
MOVIE
全幅の動画プレイヤーと、左右の PREV / NEXT の丸ボタン。
05
STORY
薄いグレーの地に斜めに走るピンク・水色の帯と巨大な英字を敷き、あらすじを配置する。
06
CHARACTER
顔アイコンを円形に切り抜いて並べたグリッドと、選んだキャラクターの名前・キャストを見せる詳細エリア。
07
STAFF&CAST
斜めの帯と巨大な英字を背景に、スタッフとキャストの名前を太い書体で中央揃えに列挙する。
08
COMIC
水色の背景に原作コミックスの書影と説明、試し読みボタン。
09
フッター
権利表記とリンクで締める。

Interaction

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

Webflow 製で、GSAP と Swiper を使用。KV下の丸サムネ（VISUAL CHANGE）でキービジュアルを切り替えられる
左上のロゴ、右上の黄色い円形 MENU ボタン、右端の縦書き PAGE TOP を固定表示している
網点・かすれ・斜めの帯などマンガ的な質感は、背景画像と radial-gradient のドットパターンを重ねると再現可能
各見出しは大きな英字の上に小さな「KILL BLUE」ロゴを重ねる構成。セクションの入口を同じ型でそろえている

スクロールのコマ撮り150–23000ms

検出された技術:GSAPSwiperWebflowAdobe Fonts

Reproduce

再現するときのポイント

01キャラクターやキービジュアルは権利物なので流用しない。オリジナルのイラストや素材に差し替え、構成と配色の考え方だけを参考にする
02背景を #f2f50b の蛍光イエロー1色で押し切り、アクセントはピンクとシアンの2色だけにする
03見出しは極太のディスプレイ書体に小さな英字ロゴを重ねる。日付も同じ書体で大きくし、数字を絵として見せる
04網点・かすれ・放射線のテクスチャを背景に敷き、印刷物のような手触りを出す

再現MDに含まれるもの

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

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

kill-blue.katapick.md

1---
2title: "TVアニメ『キルアオ』 再現用デザイン仕様書"
3source: https://kill-blue.jp/
4katapick: https://katapick.com/sites/kill-blue
5category: ブランド
6region: 国内 (JP)
7tags: [ビビッド, 大胆なタイポ, イラスト, 固定ナビ, ロングページ]
8launched: 2025-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# TVアニメ『キルアオ』 — 再現用デザイン仕様書
17 
18> 黄色一面に網点で、まるで少年マンガの誌面。TVアニメ『キルアオ』の公式サイトは、蛍光イエローの地に網点とかすれを散らし、ピンクとシアンのロゴで“殺し屋×青春”のギャップをポップな配色のまま押し切っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22