BrandJapanPicked 2026.09.26

TVアニメ『PSYREN -サイレン-』

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

出典: psyren-anime.com

Editor's note — 編集部の視点

ひび割れた黒い壁と赤だけで、不穏さを先に吸わせる。

TVアニメ『PSYREN -サイレン-』の公式サイトは、コンクリート調の黒地に赤いパーツを差し、放送情報とキービジュアルを左右に分けて見せている。

PipTrends & VTuber

え、待って、INTRODUCTIONの横に浮いてる赤いカード、あらすじに出てくる“赤いテレホンカード”っぽくない！？読んでから見返すとゾクッとするやつ…神！！

1FVは左にロゴと放送日とナビ、右に額装したキービジュアル。告知に要る情報が1画面で揃う
2放送時刻の下に、色がずれたグリッチ風の線。デジタルな不穏さを、数字の足元に仕込む
3メニューは四隅に鉤括弧を付けた赤い四角。照準のような意匠で、UIまで作品の緊張感にそろえる

Color

TVアニメ『PSYREN -サイレン-』の配色

Typography

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

ナビ・本文・日付

Aa あア

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

英字の見出し・ボタン

Aa あア

使用: Platypi
代替: Platypi

デジタル表示の数字

Aa あア

使用: digital
代替: Share Tech Mono

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

見出しKatapick 型96px · 1 · 700
本文The quick brown fox — 参考を型にする18px · 1.5 · 400
ボタンKatapick 型16px · 1.5 · 400

Structure

ページ構成（上から順）

01
ファーストビュー
左上に赤い「ENGLISH SITE」タブ。左カラムにロゴ、放送日時と放送・配信の案内、明朝の2列ナビ、原作者のお祝いコメントへのバナー。右カラムに白枠で額装したキービジュアルと、切り替え用のサムネイル。背景はひびの入ったコンクリート調。
02
MOVIE
暗く沈めた場面カットに赤い円形の PLAY ボタンを重ね、「More Movies」のボタンを添える。
03
NEWS
大きな「NEWS」の見出しと、赤い日付ブロック付きのニュース一覧、「Read More」。
04
INTRODUCTION
廃墟の背景に中央揃えのキャッチ「ついにアニメ化決定！」と作品紹介文を置き、左右に赤いカード型のグラフィックを浮かべる。
05
公式X
角を切った赤いボタンで公式Xアカウントへ誘導する。
06
フッター
ロゴ、罫線で区切ったグリッド状のナビ、JP / EN の言語切替。背景には夜の電話ボックスの場面。

Interaction

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

キービジュアルは下のサムネイルで切り替えるスライダー。スタックの Swiper で実装されていると思われる
放送時刻の下の線は、赤・シアンなどの色をずらして重ねたグリッチ表現。複数の線を mix-blend-mode と keyframes の translateX で揺らすと再現できる
メニューボタンと「ENGLISH SITE」タブは固定表示。フッターまでどこからでもナビを開ける
digital という書体とシアンの文字色が検出されており、デジタル時計風の小さな表示に使われていると思われる

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

TVアニメ『PSYREN -サイレン-』をスクロールしたときのフレーム1 — 01

TVアニメ『PSYREN -サイレン-』をスクロールしたときのフレーム2 — 02

TVアニメ『PSYREN -サイレン-』をスクロールしたときのフレーム3 — 03

TVアニメ『PSYREN -サイレン-』をスクロールしたときのフレーム4 — 04

TVアニメ『PSYREN -サイレン-』をスクロールしたときのフレーム5 — 05

TVアニメ『PSYREN -サイレン-』をスクロールしたときのフレーム6 — 06

検出された技術:SwiperWordPressNext.js

Reproduce

再現するときのポイント

01背景はひび割れたコンクリートの写真やテクスチャを暗く落として敷き、色は黒・赤・白にほぼ絞る
02PCのFVは左に情報、右に縦長のビジュアルの2カラムにし、放送日とナビを1画面に収める
03ボタンは赤地に角を切った形や四隅の鉤括弧で統一し、照準やHUDのような緊張感を出す
04キャラクターやキービジュアル、作品ロゴは使わず、オリジナルの写真・イラスト・ロゴに差し替えて構成と質感だけを取り入れる

再現MDに含まれるもの

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

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

psyren-anime.katapick.md

1---
2title: "TVアニメ『PSYREN -サイレン-』 再現用デザイン仕様書"
3source: https://psyren-anime.com/
4katapick: https://katapick.com/sites/psyren-anime
5category: ブランド
6region: 国内 (JP)
7tags: [ダーク, レッド基調, セリフ体, 固定ナビ]
8launched: 2025-12
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# TVアニメ『PSYREN -サイレン-』 — 再現用デザイン仕様書
17 
18> ひび割れた黒い壁と赤だけで、不穏さを先に吸わせる。TVアニメ『PSYREN -サイレン-』の公式サイトは、コンクリート調の黒地に赤いパーツを差し、放送情報とキービジュアルを左右に分けて見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22