--- version: alpha name: Arthouse Film Editorial Off-White LP description: 生成りの地に細身で縦長のセリフ欧文見出しと、黒字のゴシック本文を合わせた映画公式サイトの型。ボタンや装飾はほぼ使わず、フィルム調の写真と余白で見せる。レビューとコメントは暗い写真を敷いた面に黄色の文字で載せ、不穏で静かな空気を出す。 colors: background: '#F6F7F2' primary: '#060608' text-body: '#322B25' text-muted: '#878884' surface: '#FFFFFF' line: '#E3DED6' dark-section: '#595D5D' on-dark: '#F8F7F2' accent-1: '#F1EC65' secondary: '#301A18' accent-2: '#5FB0BE' typography: display: fontFamily: Bodoni Moda fontSize: 64px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Gloock fontSize: 32px fontWeight: 400 lineHeight: 1.2 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Gloock fontSize: 16px fontWeight: 400 lineHeight: 1.4 body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 26px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Gloock fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-title-overlay: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 560px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 48px link-more: textColor: '{colors.primary}' typography: '{typography.label-button}' height: 28px news-item: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 80px press-quote: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 140px profile-block: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 700px theater-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 60px comment-entry: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 160px --- # DESIGN.md — 生成り地×細身セリフのミニシアター映画 LP（Arthouse Film Editorial Off-White LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: シンプル・ミニマル、上品・高級、ラグジュアリー・ダーク - **キーワード**: エディトリアル・細身セリフ・生成り・フィルム写真・不穏・余白 - **地の質感**: 生成りの紙のような平らな地。暗い面だけ写真をぼかし、ノイズを重ねる - **形**: 角丸なしの長方形が基本。写真は四角でそのまま置き、線は細い罫線だけ - **温度感**: やや冷たく静か。暗い面で温度を下げ、黄色の文字だけが光る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F7F2` | ページの地（生成り） | 55% | 画素の実測 | | `primary` | `#060608` | 見出し・ロゴタイプの墨色 | 3% | 画素の実測 | | `text-body` | `#322B25` | 本文の濃いグレー | 6% | 画素の主要色に補正 | | `text-muted` | `#878884` | 日付・注記・肩書き | 1% | 画素の実測 | | `surface` | `#FFFFFF` | 劇場リストの白い面 | 4% | 画素の実測 | | `line` | `#E3DED6` | 表の罫線・MOREの下線 | 0% | 画素の主要色に補正 | | `dark-section` | `#595D5D` | コメント欄の暗い面（ぼかし写真） | 20% | 画素の実測 | | `on-dark` | `#F8F7F2` | 暗い面の上の本文 | 2% | 画素の主要色に補正 | | `accent-1` | `#F1EC65` | 暗い面の名前・レビュー文の黄色 | 0% | 画素の実測 | | `secondary` | `#301A18` | レビュー欄の暗い臙脂 | 7% | 推定 | | `accent-2` | `#5FB0BE` | 写真の主色・水色の背景紙 | 3% | 推定 | - ページの 7 割は生成り地にし、文字は墨色と濃いグレーの 2 段階で書く - 色を出すのは写真に任せ、UI に彩度の高い色は使わない - レビューとコメントだけは暗い写真を敷いた面にし、名前と引用は黄色にする - 劇場リストは白の面に変えて、情報のブロックだと分かるようにする - 購入用の色付きボタンは置かない。リンクは墨色の文字に下線を引くだけにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの欧文タイトル | 欧文セリフ | Bodoni Moda | 400 | 64px | 1.0 | -0.02em | | `headline-lg` | セクション見出し（欧文一語） | 欧文セリフ | Gloock | 400 | 32px | 1.2 | 0.0em | | `headline-md` | リード文・人名の和文 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.04em | | `headline-sm` | 人名の欧文表記・媒体名 | 欧文セリフ | Gloock | 400 | 16px | 1.4 | 0.0em | | `body-md` | あらすじ・プロフィールの本文 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 2.0 | 0.03em | | `note` | クレジット・表のセル・肩書き | ゴシック | Zen Kaku Gothic New | 400 | 10px | 1.8 | 0.03em | | `accent` | フッターの手書き風タイトル | 手書き・筆 | Klee One | 400 | 26px | 1.6 | 0.05em | | `label-button` | MORE リンク・公開日 | 欧文セリフ | Gloock | 400 | 14px | 1.4 | 0.05em | - 見出しは欧文一語の細身セリフだけにし、和文の見出しは添えない - 人名は和文ゴシックの太字と欧文セリフを 2 行で重ねる - 本文は小さめにして行間を 2.0 前後まで広げ、余白で読ませる - 和文のタイトルはファーストビューで縦書きにする - 役名は細い斜線のあとに小さく書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は人物を左に写真、右に本文の 2 カラムにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は 14px 程度と狭くし、見出しは左揃えにする - 人物写真は画面幅の約 70% で中央に置く - 写真の帯は左右いっぱいに広げて、セクションの区切りにする - ファーストビューでは巨大な欧文タイトルを写真に重ねる - コメントはカードにせず、名前・肩書き・本文を縦に流す ## Elevation & Depth - 影は使わない。平らな面だけで構成する - 暗い面はぼかした写真に暗いオーバーレイを重ねて奥行きを出す - 埋め込みプレイヤーだけ角丸の暗いカードになる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。人物は縦長か正方形で切る - **セクション境界**: 直線で切り替える。左右いっぱいの写真帯と、暗い写真面の切り替えで区切る - ボタンの形は作らず、文字に下線を引くリンクにする - 罫線は 1px の淡いグレーだけにする - 動画と音楽の埋め込み以外では角丸を使わない ## Components - **重ね文字のファーストビュー**（`hero-title-overlay`）: 縦長の写真に巨大な細身セリフの欧文タイトルを重ね、右端に和文の縦書きを置く - **欧文一語の見出し**（`section-heading`）: 装飾なしで左に揃えた細身セリフの見出し - **下線付きの MORE リンク**（`link-more`）: 中央か左に置いた欧文セリフの文字と、その下に引いた 1px の線 - **ニュースの行**（`news-item`）: グレーの日付の下に 2 行までの本文を置く - **レビューの引用**（`press-quote`）: 暗い写真の上に黄色の明朝寄りの引用を置き、その下に短い線と媒体名を添える - **人物プロフィール**（`profile-block`）: 写真、和文の名前、欧文の名前、斜線付きの役名、長い本文の順に縦に並べる - **劇場リスト**（`theater-table`）: 白い面に地域・劇場・電話・公開日の 4 列を置き、行を細い罫線で区切る - **コメントの項目**（`comment-entry`）: 暗い面に黄色の名前を置き、横にグレーの肩書き、下に白の本文を書く ## Do's and Don'ts **Do** - 生成り地と細身セリフの欧文で上質な余白をつくる - 写真はフィルム調で、少し色あせた階調にする - 暗い面ではアクセントを黄色だけにする - 人名は和文と欧文の 2 段で書く - クレジットは小さな文字で縦線区切りにして詰めて並べる **Don't** - 角丸のカードや影を多用しない - 彩度の高い CTA ボタンや装飾バッジを置かない - 太いゴシックで大きな見出しを作らない - アイコンやイラストの装飾を足しすぎない - 白一色の地にしない（生成りを保つ） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開日を伝える）: 写真に巨大な欧文タイトルを重ね、縦書きの和題、公開日、監督とキャストの欧文、映画祭のロゴ、SNS アイコンを置く 2. **イントロダクション**（作品の評価と概要を伝える）: 左右いっぱいの写真に見出しを重ねる。その下に受賞の注記、3 行の太字リード、長い本文、写真帯を続ける 3. **ストーリー**（あらすじを伝える）: 太字の短い詩的なリードを 4 行置き、その下に本文を続ける 4. **予告編**（動画で引き込む）: 動画の埋め込みを 2 本縦に並べ、それぞれにセリフ体のキャプションを付ける 5. **ニュース**（最新情報を伝える）: 日付と本文の行を 2 件並べ、下に MORE リンクを置く 6. **海外レビュー**（第三者の評価を見せる）: 暗い写真の面に黄色の引用を 3 件、媒体名を添えて縦に並べる 7. **プレイリスト**（作品の音の世界を広げる）: 音楽サービスの埋め込みカード 8. **監督・原作**（作り手を紹介する）: 中央に縦長のポートレートを置き、プロフィールを続ける。原作は表紙画像と書誌情報、MORE リンクで見せる 9. **キャスト・スタッフ**（出演者を紹介する）: 写真、名前、役名、本文の並びを繰り返す。写真のない人物は文字だけにする 10. **劇場情報**（どこで観られるかを伝える）: 白い面に罫線の 4 列の表を置く 11. **著名人コメント**（共感と期待を高める）: 暗いぼかし写真の面に、黄色の名前と白い本文を長く縦に流す。途中にイラストを 1 枚挟む 12. **フッター**（クレジットと配給を示す）: 手書き風のタイトル、小さなスタッフクレジット、作品データ、配給ロゴを置く ## Imagery - 35mm フィルム風で、少し粒子が出て色があせた写真にする - 人物は水色の背景紙の前で真正面に立たせ、無表情か少しおどけたポーズにする - 場面写真は狭い室内やタイル壁、ロッカーなど閉塞感のある場所を選ぶ - 暗い面の背景には場面写真を強くぼかして暗く沈めたものを使う - 絵画風の手描きイラストは 1 点だけ、アクセントとして入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横に広げ、左に巨大タイトル、中央に写真、右に縦書きとクレジットを置く - PC の人物紹介は、左に写真、右に本文の 2 カラムにする - PC の予告編は 2 本を横に並べる - PC のコメントは 2 カラムの石組みのように並べる - PC は本文の幅を約 70% に絞り、左右に大きな余白を取る ## 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-cf42df0e`（元 LP の URL から採番） - **元 LP**: https://sundae-films.com/september-says/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。