BrandJapanPicked 2026.11.10

TVアニメ『キルアオ』

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

サイトを見るkill-blue.jp

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セクションの仕様 / AIっぽさを消すルール / 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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# TVアニメ『キルアオ』 — デザイン分析書
16 
17> 黄色一面に網点で、まるで少年マンガの誌面。TVアニメ『キルアオ』の公式サイトは、蛍光イエローの地に網点とかすれを散らし、ピンクとシアンのロゴで“殺し屋×青春”のギャップをポップな配色のまま押し切っている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22