--- version: alpha name: Sea Breeze Indie Film LP description: 淡いグレー白の地に水色の帯とカード、見出しは赤の太い欧文サンセリフで揃えた映画公式サイト型。全幅の場面写真をセクション間に挟み、本文は小さめのゴシックで静かに読ませる。 colors: background: '#F5F6FA' primary: '#E0141E' secondary: '#96DEF6' surface: '#C9E3EC' background-alt: '#F5F6F1' text: '#20292E' text-muted: '#6B7378' accent-1: '#2F6E86' line: '#E0141E' on-primary: '#FCFEFD' primary-accessible: '#B81019' typography: display: fontFamily: Archivo fontSize: 30px fontWeight: 800 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Archivo fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.01em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.3em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 32px comment-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px banner-band: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' height: 48px cast-card: textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px award-badge: textColor: '{colors.primary}' typography: '{typography.note}' height: 40px info-tile: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.note}' height: 40px lead-copy: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 56px --- # DESIGN.md — 水色と赤見出しの夏映画 LP（Sea Breeze Indie Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 清潔・爽やか、シンプル・ミニマル、やさしい・柔らかい - **キーワード**: 夏の海・淡い水色・赤い見出し・全幅スチール・余白の多い本文・映画公式 - **地の質感**: フラットな単色面。質感は写真で出し、装飾は付けない - **形**: 角丸のない長方形。カードとボタンも角を立てる - **温度感**: 涼しく明るい。赤の見出しだけ少し温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F6FA` | ページの地 | 40% | 画素の実測 | | `primary` | `#E0141E` | セクション見出しの赤 | 1% | 推定 | | `secondary` | `#96DEF6` | 水色の帯 | 8% | 画素の実測 | | `surface` | `#C9E3EC` | コメントカードの面 | 13% | 画素の実測 | | `background-alt` | `#F5F6F1` | 生成り寄りの白地 | 8% | 画素の実測 | | `text` | `#20292E` | 本文と人名の文字 | 3% | 画素の主要色に補正 | | `text-muted` | `#6B7378` | クレジットなど補足文字 | 1% | 推定 | | `accent-1` | `#2F6E86` | コピーの深い青緑 | 1% | 推定 | | `line` | `#E0141E` | バナー枠線 | 0% | 推定 | | `on-primary` | `#FCFEFD` | 赤背景上の白文字 | 1% | 画素の実測 | | `primary-accessible` | `#B81019` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ白の淡いグレーで、全体の 6 割以上を占める - 水色はバナーの帯とコメントカードの面だけに使う - 赤はセクション見出し・人名・コメントの署名に限る - 本文は濃い墨色。真っ黒にはしない - 写真の青と空色に合わせて寒色でまとめ、暖色を増やさない - `banner-band` は文字 `#E0141E` × 背景 `#96DEF6` のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B81019`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 作品タイトルの欧文ロゴ | 欧文サンセリフ | Archivo | 800 | 30px | 1.1 | -0.02em | | `headline-lg` | Introduction などセクション見出し | 欧文サンセリフ | Archivo | 700 | 24px | 1.2 | -0.01em | | `headline-md` | 導入のリードコピー | ゴシック | Noto Sans JP | 700 | 17px | 1.7 | 0.1em | | `headline-sm` | 人名と読みがな | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | あらすじ・プロフィールの本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em | | `note` | クレジット・注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 縦書きの短い詩的なコピー | 明朝 | Shippori Mincho | 500 | 18px | 1.6 | 0.3em | - セクション見出しは英語にし、赤い太字サンセリフで左寄せにする - 日本語本文は 13px 前後で行間を広く取る - 人名は「漢字｜ひらがな」の形で赤字にする - コメントの署名は右寄せの赤い太字にする - 装飾フォントは使わず、情緒は縦書き明朝の一行だけで出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャストは PC で 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - テキストのセクションの間に全幅の場面写真を挟む - 本文ブロックは左寄せで中央に置く - コメントカードは縦に並べ、間を 16px 空ける - 見出しから本文までは 16〜24px ## Elevation & Depth - 影は使わずフラットにする - 奥行きは色面の差と写真だけで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。全幅か 2 分割で裁ち落とす - **セクション境界**: 直線。写真と色の帯で切り替える - 角丸は付けない - 写真に枠線は付けない - バナーは細い枠線の長方形にする ## Components - **英字セクション見出し**（`section-title`）: 赤い太字の英語見出し。下線などの装飾は付けない - **コメントカード**（`comment-card`）: 水色の面に本文を左寄せで置き、右下に赤字で署名を入れる - **水色バナー帯**（`banner-band`）: 全幅の水色帯の中央に、配信サービスなどの小さなバナーを置く - **キャストプロフィール**（`cast-card`）: 横長の写真、赤い人名、小さな本文の順に縦に積む - **受賞の月桂樹バッジ**（`award-badge`）: 映画祭名を赤い細字の月桂樹で囲み、横に並べる - **白い告知タイル**（`info-tile`）: FV 下部に白い長方形を 3 つ並べ、ロゴやランキングを入れる - **リードコピー**（`lead-copy`）: 深い青緑の太字 2 行。強調語は引用符で大きく見せる ## Do's and Don'ts **Do** - 写真は海・空・リゾートホテルの明るく抜けた場面を選ぶ - 見出しの赤は一つの色に統一する - 本文は短い段落に分け、十分な行間を取る - 水色カードを反復して軽いリズムを作る - FV は人物写真の上に、タイトル・キャスト・告知タイルを重ねる **Don't** - 角丸・影・グラデーションのボタンを使わない - 赤を面で広く塗らない - 濃い背景色のセクションを増やさない - 販促系の太いバッジや吹き出しを入れない - 写真を小さなサムネイルで並べすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とタイトル・受賞歴を一目で伝える）: 全面の海と人物の写真に、縦書きの明朝コピー、赤い欧文タイトル、月桂樹、キャスト名、白い告知タイルを重ねる 2. **告知バナー帯**（配信や関連サービスへ誘導する）: 水色の全幅帯の中央に、赤枠の小さなバナーを置く 3. **場面写真**（空気感を伝える）: 全幅の横長スチールを 1 枚置く 4. **イントロダクション**（作品の概要と評価を伝える）: 赤い英字見出し、青緑のリードコピー、小さな本文の順に並べる 5. **場面写真 2 分割**（テキストの区切り）: 2 枚を左右に並べて全幅で裁ち落とす 6. **あらすじ**（物語を紹介する）: 英字見出しの下に本文を 1 段落置く 7. **キャストプロフィール**（出演者を紹介する）: 空と雲の写真を背景に見出しを置き、写真・赤い人名・本文のカードを 2 列で並べる 8. **監督プロフィール**（作り手を紹介する）: キャストと同じ書式で、写真を省いてテキストだけにする 9. **コメント**（著名人や海外メディアの評価で信頼を得る）: 中央に赤い見出しを置き、水色カードを縦に十数枚並べて署名を赤字の右寄せにする 10. **クレジット**（公式情報を締めくくる）: 赤いタイトルロゴの下に、キャストとスタッフを小さな文字で中央揃えにする ## Imagery - 自然光で撮った明るい映画スチール。水色と白が多い色調にする - 海辺、リゾートホテルの客室や廊下、カフェなど夏の旅の場面を使う - 人物は引きの構図で、カメラを見ない自然な姿にする - 空と雲の写真をセクション背景に使う - イラストやアイコンは使わない - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央のコンテンツ幅を約 600px にし、写真は全幅にする - SP ではキャストを 1 列に並べる - SP の FV は写真を縦長にトリミングし、タイトルを写真の下に置く - 告知タイルは SP で縦に積むか横にスクロールさせる - コメントカードは SP では左右の余白を 16px にする ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-fab145a1`（元 LP の URL から採番） - **元 LP**: https://shf2024.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（5/10 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。