黒×蛍光イエローの緊迫サスペンス映画 LP

Black and Neon Yellow Thriller Movie LP

黒地と蛍光イエローを交互に敷き、極太の縦長欧文見出しで報道番組風の緊迫感を出す映画公式サイト型。赤は強調語だけに絞る。

エンタメ・ゲーム・アプリ力強い・インパクトクール・先進的情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。

COLORS

配色

TYPOGRAPHY

書体

displayセクション英字見出し装飾・ディスプレイ / Oswald 700 / 40px / 行間 1.1
あなたの LP を、もっと伝わる形に。Aa 123
headline-lg日本語キャッチゴシック / Dela Gothic One 400 / 28px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
headline-md人物名・小見出しゴシック / Noto Sans JP 900 / 20px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
headline-sm謎の問い・役柄ゴシック / Noto Sans JP 700 / 13px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
body-mdあらすじ・コメント本文明朝 / Noto Serif JP 500 / 13px / 行間 1.9
あなたの LP を、もっと伝わる形に。Aa 123
noteクレジット・注釈ゴシック / Noto Sans JP 400 / 10px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
accent人物ローマ字・番号欧文サンセリフ / Oswald 600 / 10px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
label-buttonボタンゴシック / Noto Sans JP 700 / 12px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビュー作品と公開情報を伝える黄地に縦長ロゴとキャッチ、右に主役の暗い写真
  2. キャンペーン告知参加導線黒地に黄枠バナーを2〜3枚
  3. チケット導線購入サイトへ誘導白地にロゴバナーを横並び
  4. ビジュアルポスター紹介黒地のカルーセルと丸ドット
  5. 予告動画映像訴求白地に大きなサムネと動画タブ格子
  6. 世界観キービジュアル緊迫感の演出暗い全幅写真に黄テロップ帯とネオン時計
  7. イントロダクション・ストーリー作品概要黒地・グレー地に明朝の本文
  8. 謎の提示興味喚起赤い大見出しと番号付き場面カード7枚
  9. キャラクター出演者紹介黄地に写真グリッド、黄帯の名前
  10. スタッフ・音楽制作陣紹介白地と黒地に人物名とコメント本文
  11. コメント第三者評価黄ノイズ地に中央揃えの声、赤強調と黒ボタン
  12. フッター締めとSNS導線赤字警告帯、夜景写真に巨大黄ロゴ
COMPONENTS

部品

DO

守ること

  • 黒と黄の強い対比を保つ
  • 見出しは縦長極太欧文で統一
  • 写真は暗く高コントラストに補正
  • 強調は赤字に限定
  • 黄面にノイズ質感を足す
DON'T

避けること

  • 角丸やピルボタンを使わない
  • パステル色を入れない
  • 影やグラデーションで飾らない
  • 赤を面で多用しない
  • 細い書体で見出しを組まない
DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×蛍光イエローの緊迫サスペンス映画 LP(Black and Neon Yellow Thriller Movie LP)

AI コーディングツール(Claude Code / Cursor / v0 など)に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML(トークン)が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

  • 業種: エンタメ・ゲーム・アプリ / 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
  • キーワード: 報道テロップ・警告色・縦長コンデンス書体・暗い劇場写真・ノイズ質感
  • 地の質感: 黄色面にザラついたノイズ。写真は暗く高コントラスト
  • 形: 角丸なしの矩形と帯。テロップ風の黄色ボックス
  • 温度感: 高温の警告感と冷たい闇のコントラスト

Colors

Token HEX 役割 面積の目安 値の出どころ
primary #ECE212 警告イエロー(FV・キャラ・コメント地) 20% 画素の実測
background #FFFFFF 白地セクション 20% 画素の実測
dark-section #000000 黒地セクション 30% 画素の実測
on-dark #FFFFFF 黒地上の白文字 2% 画素の実測
text #000000 見出し・本文の黒文字 3% 画素の実測
background-alt #CCCCCC ストーリーのグレー地 4% 画素の実測
accent-1 #D0101A 強調語・数字の赤 1% 推定
cta #020101 もっと読むボタン黒地 0% 画素の実測
on-cta #FFFFFF ボタン文字 0% 画素の主要色に補正
accent-2 #FF2A1A 時計表示のネオン赤 0% 推定
surface #ECE314 キャスト名テロップ黄 3% 画素の実測
accent-1-accessible #C40F19 AA を満たす補正値(計算) 計算
  • 黒・白・黄の地をセクションごとに交互に切り替える
  • 黄地には黒文字、黒地には白か黄文字
  • 赤は強調語・数字・番号だけに使う
  • 写真は暗くし、黄の帯テロップを重ねる
  • グラデーションは使わず、ベタ塗りにノイズを足す
  • warning-line は文字 #D0101A × 背景 #ECE212 のコントラスト比が 4.1:1 で、WCAG AA(4.5:1)に届かない(元 LP の配色)。通常サイズの文字で AA を満たすなら accent-1-accessible(#C40F19、4.51:1)を使う。

Typography

Token 用途 書体の分類 代替 Web フォント ウェイト サイズ(375px 幅) 行間 字間
display セクション英字見出し 装飾・ディスプレイ Oswald 700 40px 1.1 -0.01em
headline-lg 日本語キャッチ ゴシック Dela Gothic One 400 28px 1.2 0.0em
headline-md 人物名・小見出し ゴシック Noto Sans JP 900 20px 1.3 0.0em
headline-sm 謎の問い・役柄 ゴシック Noto Sans JP 700 13px 1.4 0.0em
body-md あらすじ・コメント本文 明朝 Noto Serif JP 500 13px 1.9 0.02em
note クレジット・注釈 ゴシック Noto Sans JP 400 10px 1.5 0.0em
accent 人物ローマ字・番号 欧文サンセリフ Oswald 600 10px 1.2 0.03em
label-button ボタン ゴシック Noto Sans JP 700 12px 1.0 0.05em
  • 英字見出しは縦長コンデンスの極太大文字
  • 日本語キャッチは極太ゴシックをテロップ風に詰める
  • 本文は中央揃えも可、長文は左揃え
  • 強調語は赤+太字
  • 番号は赤の大きな数字
  • 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

  • カラム: SP は 1 カラム、キャストは 2 列グリッド
  • 本文ブロックの幅: 画面幅の約 90%
  • 余白: セクション間 64px、基本単位 8px、カード内 12px(375px 幅換算)
  • セクション見出しは中央配置
  • 写真グリッドは隙間なしで敷き詰める
  • セクション背景は全幅
  • 本文は狭めの幅で読みやすく

Elevation & Depth

  • 影は使わずフラット
  • 奥行きは写真の暗さと黄帯の重ねで出す

Shapes

  • 角丸: 小 0px / 中 0px / 大 0px。ボタンは角丸の長方形。
  • 写真の切り抜き: 矩形トリミング、人物は寄りの縦長
  • セクション境界: 直線で背景色を切替
  • 角丸は使わない
  • 黄色の帯ボックスで文字を囲む
  • バナーは黄の太枠つき

Components

  • 英字セクション見出し(section-title): 縦長極太の大文字を中央に置く
  • テロップ帯(telop-band): 黄地に黒極太文字、写真上に重ねる
  • キャストカード(cast-card): 暗い人物写真の下部に黄帯で名前と役柄
  • 番号付き謎カード(mystery-card): 赤い大数字と場面写真、上に問い文
  • もっと読むボタン(button-primary): 黒い矩形に白文字と矢印
  • キャンペーンバナー(campaign-banner): 黒地に黄枠・黄地の告知バナー
  • 予告動画タブ表(trailer-tabs): 黒枠の格子に動画タイトル、選択中は黄
  • 警告テロップ(warning-line): 黄地に赤字の注意文を一行で

Do's and Don'ts

Do - 黒と黄の強い対比を保つ - 見出しは縦長極太欧文で統一 - 写真は暗く高コントラストに補正 - 強調は赤字に限定 - 黄面にノイズ質感を足す

Don't - 角丸やピルボタンを使わない - パステル色を入れない - 影やグラデーションで飾らない - 赤を面で多用しない - 細い書体で見出しを組まない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

  1. ファーストビュー(作品と公開情報を伝える): 黄地に縦長ロゴとキャッチ、右に主役の暗い写真
  2. キャンペーン告知(参加導線): 黒地に黄枠バナーを2〜3枚
  3. チケット導線(購入サイトへ誘導): 白地にロゴバナーを横並び
  4. ビジュアル(ポスター紹介): 黒地のカルーセルと丸ドット
  5. 予告動画(映像訴求): 白地に大きなサムネと動画タブ格子
  6. 世界観キービジュアル(緊迫感の演出): 暗い全幅写真に黄テロップ帯とネオン時計
  7. イントロダクション・ストーリー(作品概要): 黒地・グレー地に明朝の本文
  8. 謎の提示(興味喚起): 赤い大見出しと番号付き場面カード7枚
  9. キャラクター(出演者紹介): 黄地に写真グリッド、黄帯の名前
  10. スタッフ・音楽(制作陣紹介): 白地と黒地に人物名とコメント本文
  11. コメント(第三者評価): 黄ノイズ地に中央揃えの声、赤強調と黒ボタン
  12. フッター(締めとSNS導線): 赤字警告帯、夜景写真に巨大黄ロゴ

Imagery

  • 暗いスタジオや夜景で人物を寄りで撮る
  • スーツ姿の緊張した表情を高コントラストで
  • 炎・モニター・時計などの小物で緊迫感を出す
  • 写真に黄テロップを重ねて報道番組風に
  • 黄面には紙ノイズテクスチャ
  • 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

  • PC はグローバルナビを右上に横並び、SP はハンバーガーに
  • キャストは PC 3 列、SP 2 列
  • 謎カードは PC 4 列、SP 2 列
  • FV は PC 左右分割、SP は写真の上にロゴを重ねる縦積み
  • 見出しサイズは SP で約6割に縮小

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う(CSS 変数に展開してよい)
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP(375px)で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

SOURCE

出典と注意

似た LP の design.md