# TVアニメ『キルアオ』｜ブランドのWebデザイン参考

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

- URL: https://kill-blue.jp/
- 解説ページ: https://katapick.com/sites/kill-blue
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: TVアニメ
- テイスト: ビビッド、大胆なタイポ、イラスト、固定ナビ、ロングページ
- 公開・リニューアル: 2025-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #f2f50b Highlighter Yellow（背景）
- #000000 Ink Black（テキスト / 見出し）
- #fe4b7c Hitman Pink（ロゴ「キ」 / アクセント）
- #00c0c2 Spring Cyan（ロゴ「オ」 / アクセント）
- #86d7da Pool Cyan（COMIC セクション背景）
- #f2f2f2 Paper Gray（STORY・STAFF&CAST の背景）

## フォント
- 英字見出し・目次: vdl-logona（代替: Dela Gothic One）
- 日付・スタッフ／キャスト名: vdl-logojrblack（代替: Dela Gothic One）
- 英字ラベル: korolev-rounded（代替: M PLUS Rounded 1c）
- 本文: Noto Sans JP（代替: Noto Sans JP）

## よくある質問
### キルアオの公式サイトで使われているフォントは？
Adobe Fonts の VDL ロゴナ、VDL ロゴJrブラック、Korolev Rounded と、本文の Noto Sans JP が使われています。無料で近づけるなら、見出しに Dela Gothic One、英字ラベルに M PLUS Rounded 1c がおすすめです。

### キルアオの公式サイトは何で作られている？
Webflow で構築され、アニメーションに GSAP、スライダーに Swiper が使われています。

### アニメ公式サイトを参考にするときの注意点は？
キャラクターやキービジュアルの権利は作品の権利者に帰属します。素材は流用せず、配色・レイアウト・見出しの型など構成の考え方だけを取り入れ、画像はオリジナルのものを用意してください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/kill-blue からダウンロードできます。
出典: Katapick（https://katapick.com）