DESIGN.md — 水色×墨黒の斜め切り邦画コメディ映画 LP（Cyan Accent Indie Film Comedy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、親しみ・手作り感
• キーワード: 映画公式サイト・シアンのアクセント・斜め切りコラージュ・明朝体の見出し・紙のしわテクスチャ・キャストコメント
• 地の質感: 白地にくしゃっとした紙のしわテクスチャをうっすら敷く。淡い水色の面はフラット。
• 形: 写真は平行四辺形・三角に斜めカットする。カードとボタンは角丸をほぼ付けない四角。
• 温度感: 涼しめ。白と水色が主で、墨黒の文字とシアンで引き締める。

Colors

• 地は白→淡いミント灰→白→淡い水色の順に、セクションごとに切り替える。
• シアンは見出しの中の 1〜2 語、罫線、主ボタンだけに使う。
• マゼンタは引用セリフと手書き風の注記だけに使う。ごく小さな面積に抑える。
• 赤は外部チケット購入ボタン専用にする。
• 本文は純黒を避け、墨黒〜グレーにする。
• 写真の上にはベタ面を重ねない。写真の色をそのまま見せる。
• button-info は文字 #FFFFFE × 背景 #1A9FE0 のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#147DB0、4.57:1）を使う。
• button-ticket は文字 #FFF5F2 × 背景 #E51E0E のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E01D0E、4.5:1）を使う。
• badge-event は文字 #FFFFFE × 背景 #1A9FE0 のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#147DB0、4.57:1）を使う。

Typography

• 本文と人名は明朝で統一し、文芸的な印象にする。
• 大きいコピーは明朝と太いゴシックを行ごとに使い分け、キーワードだけシアンにする。
• セクション名は欧文セリフの小文字にし、字間を広く取って中央に置く。
• あらすじは短い行を中央揃えにし、行間を広く取る。
• 役名は人名の横に小さく添える。
• 場面写真の上のセリフは白い明朝で縦書きにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。場面写真のコラージュだけは 2〜3 列の斜めグリッドにする。
• 本文ブロックの幅: 画面幅の約 72%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• コメントカードは左右に約 14% の余白を取り、中央に置く。
• カード同士の間は約 20px 空ける。
• 写真は端までフルブリードにし、斜めに切る。
• あらすじのフローは右寄せの行に、矢印付きの罫線を交互に入れる。
• クレジットは中央揃えにし、役職は小さく・人名は大きく書く。

Elevation & Depth

• 影はほぼ使わない。フラットにする。
• カードは白っぽい水色の面と、ごく薄い枠だけで浮かせる。
• 動画の埋め込みには影を付けない。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 場面写真は平行四辺形・三角に斜めカットする。人物の宣材写真は正方形に近い四角。
• セクション境界: 直線で地の色を切り替える。写真ブロックは斜めの辺で終わらせる。
• ボタンは角丸なしの長方形にする。
• 斜めカットは同じ角度（約 30°）でそろえる。
• コメントカードの人名は、上に太いシアン線・下に細いシアン線を引いて挟む。

Components

• 劇場情報ボタン（button-info）: シアンのベタ面にアイコンと白文字を置く。右寄せに配置する。
• SNS アカウントボタン（button-sns）: 白い面にシアンの枠線を付け、アイコンとアカウント名を小さく入れる。
• 前売券購入ボタン（button-ticket）: 赤いベタ面に白文字を 2 行で入れる。チケット購入ウィジェットの中に置く。
• 欧文セクション名（section-label）: 小文字の欧文セリフを字間広めで中央に置く。色は墨黒かシアン。
• あらすじフロー罫線（story-flow）: 右寄せの短文を並べ、各文の下にシアンの線と下向きの折れ矢印を引く。
• キャストコメントカード（comment-card）: 淡い水色のカードの上部に人物写真を置く。人名はシアンの上下罫で挟み、下に本文を続ける。
• セリフ引用（quote-line）: マゼンタの文字をかぎ括弧型の細い線で囲み、中央に置く。
• イベント告知バッジ（badge-event）: FV の上に、シアンの四角を二重枠付きで重ねる。中は白文字 3 行。

Do's and Don'ts

Do - 見出しのキーワードだけシアンにして、メリハリを付ける。 - 場面写真は斜めに切ってコラージュし、短いセリフを添える。 - 本文は明朝で書き、行間を広く取る。 - セクション名は欧文小文字のラベルにする。 - カードは淡い水色にし、ほぼフラットに保つ。

Don't - ピル型ボタンや大きな角丸は使わない。 - ドロップシャドウやグラデーションの面は使わない。 - シアン以外の強い色を見出しに広く使わない。 - 写真を丸く切り抜かない。 - 本文を太いゴシックにしない。

Page Structure

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

1. ファーストビュー（ポスタービジュアルで作品名・公開日・出演者を伝える）: 人物のアップ写真を全面に敷く。縦書きの明朝タイトルを置き、題名の 1 文字だけシアンにする。下部に場面写真の帯とイベントバッジを重ねる。
2. シェア・劇場情報（SNS 共有と上映館への導線をつくる）: ミント灰の地に、シェアアイコン・シアンボタン・枠線ボタンを右寄せで並べる。
3. 特典・チケット購入（前売券の購入を促す）: 特典バナー 2 枚を横に並べる。その下に、白カードの購入ウィジェットと赤いボタンを置く。
4. 予告編（動画で作品の世界観を見せる）: 欧文ラベルの下に動画を埋め込み、白いタブで別の動画に切り替えられるようにする。
5. あらすじの流れ（物語の展開を段階的に見せる）: 斜めに切った人物写真の横に、シアンの矢印罫線で短文を順に並べる。最後に手書き風のマーカーを添える。
6. キャッチ見出し（主演と監督の組み合わせを打ち出す）: シアンの太い明朝で 2 行の見出しを組み、マゼンタの×印でつなぐ。
7. 場面写真コラージュ（キャラクターとユーモアを伝える）: 斜めカットした写真を 3 列×3 段に組み、白い明朝のセリフを重ねる。
8. ストーリー（あらすじを読ませる）: 白地に、中央揃えの明朝本文を置く。中ほどにマゼンタのセリフ引用を入れる。
9. イントロダクション（作品の背景とキャストを紹介する）: 紙のしわテクスチャを地に敷く。大きなコピーを明朝とゴシックで組み、続けて両端揃えの長文を置く。
10. キャストコメント（出演者の声で期待を高める）: 淡い水色の地に、写真・人名・本文のカードを縦に並べる。
11. クレジット（スタッフ・キャストの一覧を載せる）: 白地に中央揃えで、人名を段階的なサイズで並べる。下部にロゴを並べ、黒帯で締める。

Imagery

• 人物は眼鏡の主人公などのアップを使い、自然光でやや彩度を抑えたシネマ調の色にする。
• 駅のホームなどの日常風景をボケ味のある背景にし、人物を斜めの構図で切り取る。
• コメント用の宣材写真は単色背景のバストアップにし、正方形でそろえる。
• 写真の上には白い縦書きの短いセリフを重ねる。
• 白地に、くしゃっとした紙のテクスチャを薄く敷く。
• 手書き風のマゼンタの注記（丸囲み・矢印）を少しだけ添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では左右に背景色を延ばし、中央に約 750px のコンテンツ列を置く。
• 場面写真のコラージュは PC で 4〜5 列に広げ、斜めの角度は保つ。
• コメントカードは PC でも 1 列のままにし、幅は約 640px までに抑える。
• キャッチ見出しは PC で 1 行に収め、文字を 1.5 倍程度にする。

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 行書くと起動時に読み込まれる。