# TVアニメ『PSYREN -サイレン-』｜ブランドのWebデザイン参考

> ひび割れた黒い壁と赤だけで、不穏さを先に吸わせる。TVアニメ『PSYREN -サイレン-』の公式サイトは、コンクリート調の黒地に赤いパーツを差し、放送情報とキービジュアルを左右に分けて見せている。

- URL: https://psyren-anime.com/
- 解説ページ: https://katapick.com/sites/psyren-anime
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: TVアニメ
- テイスト: ダーク、レッド基調、セリフ体、固定ナビ
- 公開・リニューアル: 2025-12 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

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

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

## 配色
- #000000 Void Black（背景）
- #111111 Concrete Charcoal（セクション背景）
- #ac000e Blood Crimson（帯 / ボタン）
- #e30012 Siren Red（アクセント / 現在地）
- #ffffff White（テキスト）
- #00f3ff Glitch Cyan（グリッチの差し色）

## フォント
- ナビ・本文・日付: Noto Serif JP（代替: Noto Serif JP）
- 英字の見出し・ボタン: Platypi（代替: Platypi）
- デジタル表示の数字: digital（代替: Share Tech Mono）

## よくある質問
### PSYRENのアニメ公式サイトで使われているフォントは？
ナビや本文、日付に Noto Serif JP、英字の見出しやボタンに Platypi が使われています。どちらも Google Fonts で無料で利用できます。作品ロゴは画像です。

### ひび割れた質感のダークなサイトはどう作る？
ひび割れたコンクリートのテクスチャ画像を背景に敷き、グラデーションで暗く落としたうえで、赤いボタンや帯だけをフラットに重ねます。グリッチ風の線は色違いの線を少しずつずらして重ねると表現できます。

### キャラクターやキービジュアルを参考に使ってもよい？
キャラクター、キービジュアル、作品ロゴの権利は作品の権利者に帰属します。参考にするのはレイアウトや配色、UIの意匠までにとどめ、素材はオリジナルのものに差し替えてください。

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