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

1. 01

   ファーストビュー

   左上に赤い「ENGLISH SITE」タブ。左カラムにロゴ、放送日時と放送・配信の案内、明朝の2列ナビ、原作者のお祝いコメントへのバナー。右カラムに白枠で額装したキービジュアルと、切り替え用のサムネイル。背景はひびの入ったコンクリート調。

2. 02

   MOVIE

   暗く沈めた場面カットに赤い円形の PLAY ボタンを重ね、「More Movies」のボタンを添える。

3. 03

   NEWS

   大きな「NEWS」の見出しと、赤い日付ブロック付きのニュース一覧、「Read More」。

4. 04

   INTRODUCTION

   廃墟の背景に中央揃えのキャッチ「ついにアニメ化決定！」と作品紹介文を置き、左右に赤いカード型のグラフィックを浮かべる。

5. 05

   公式X

   角を切った赤いボタンで公式Xアカウントへ誘導する。

6. 06

   フッター

   ロゴ、罫線で区切ったグリッド状のナビ、JP / EN の言語切替。背景には夜の電話ボックスの場面。

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

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

検出された技術:SwiperWordPressNext.js

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

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# TVアニメ『PSYREN -サイレン-』 — デザイン分析書
16 
17> ひび割れた黒い壁と赤だけで、不穏さを先に吸わせる。TVアニメ『PSYREN -サイレン-』の公式サイトは、コンクリート調の黒地に赤いパーツを差し、放送情報とキービジュアルを左右に分けて見せている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22