--- version: alpha name: Warm Orange & Green Grain Seasonal Takeout LP description: 朱色がかったオレンジの地に、緑の大きな円弧とぼかし円を重ね、ノイズのような粒子をのせた季節の特集 LP。写真は丸・三角・角丸などの不定形に切り抜き、白い細ゴシックの見出しと緑の筆記風欧文ロゴで、ぬくもりと自然を表現する。 colors: primary: '#EC6D35' secondary: '#549C67' accent-1: '#3E7A3A' tint-1: '#EC8D63' background: '#E7E8EA' on-dark: '#E9EBED' cta: '#E7E2D0' on-cta: '#339130' surface: '#FEFEFD' text: '#303132' accent-2: '#D5C7AE' on-cta-accessible: '#287226' typography: display: fontFamily: Italiana fontSize: 64px fontWeight: 400 lineHeight: 1.1 accent: fontFamily: Klee One fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em label-button: fontFamily: Marcellus fontSize: 15px fontWeight: 600 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 rounded: sm: 8px md: 14px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px heading-frame: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 56px photo-shape: backgroundColor: '{colors.tint-1}' rounded: '{rounded.lg}' height: 130px outline-label: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 30px button-social: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 56px sparkle: textColor: '{colors.on-dark}' height: 24px pc-index: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 160px --- # DESIGN.md — 朱橙×若草のざらつき質感 冬の商業施設 LP（Warm Orange & Green Grain Seasonal Takeout LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、ナチュラル、やさしい・柔らかい - **キーワード**: 朱橙の地・緑の円弧・粒子ノイズ・不定形の写真切り抜き・キラッとした星・季節感 - **地の質感**: 全面にフィルムグレインのような細かいノイズ。面は単色ではなく微妙なグラデーション。 - **形**: 大きな円弧・半円・ぼかした円が背景で重なる。写真は円・角丸・三角・雲形。 - **温度感**: 暖色主体で温かい。緑で自然の涼しさを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC6D35` | メインの朱橙の地 | 45% | 画素の実測 | | `secondary` | `#549C67` | 円弧や後半セクションの若草色 | 22% | 画素の主要色に補正 | | `accent-1` | `#3E7A3A` | ロゴ文字や円弧の深緑 | 6% | 推定 | | `tint-1` | `#EC8D63` | ぼかし円の淡いピーチ | 5% | 画素の実測 | | `background` | `#E7E8EA` | 注釈・フッターの薄グレー | 10% | 画素の実測 | | `on-dark` | `#E9EBED` | 色面上の白文字・細線 | 3% | 画素の主要色に補正 | | `cta` | `#E7E2D0` | View More ボタンの淡い地 | 1% | 画素の主要色に補正 | | `on-cta` | `#339130` | ボタン文字の緑 | 0% | 画素の実測 | | `surface` | `#FEFEFD` | インスタボタンの白 | 1% | 画素の実測 | | `text` | `#303132` | 注釈・住所の黒文字 | 1% | 画素の実測 | | `accent-2` | `#D5C7AE` | ベージュ系の差し色 | 2% | 画素の主要色に補正 | | `on-cta-accessible` | `#287226` | AA を満たす補正値（計算） | | 計算 | - 前半は朱橙の地、後半の施設紹介は若草色の地に切り替える。 - 背景に緑の円弧とピーチのぼかし円を重ね、単調な面を作らない。 - 色面上の文字は白のみ。黒文字は注釈・フッターの灰色地だけ。 - CTA は淡いピーチ地に緑文字と緑の丸＋アイコンで控えめに。 - 全面に細かいノイズを重ねて紙のような質感を出す。 - `button-more` は文字 `#339130` × 背景 `#E7E2D0` のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#287226`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きな欧文タイトル（緑グラデーション＋オレンジの影） | 欧文セリフ | Italiana | 400 | 64px | 1.1 | 0.0em | | `accent` | 白抜き線の手書き風和文や、写真に沿う筆記欧文 | 手書き・筆 | Klee One | 400 | 34px | 1.2 | 0.05em | | `headline-lg` | 施設紹介の大見出し | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.3 | 0.05em | | `headline-md` | 各テーマの見出し（細線枠の中） | ゴシック | Zen Kaku Gothic New | 500 | 17px | 1.4 | 0.05em | | `body-md` | 本文・リード | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `label-button` | View More ボタン | 欧文セリフ | Marcellus | 600 | 15px | 1.0 | 0.0em | | `note` | 注釈・住所 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | - リードは中央揃えで、1 行ごとに大きく行間を空ける。 - 見出しは白・中くらいの太さで、太すぎない。 - 欧文は細いセリフ系で上品に。 - 筆記体の欧文を写真の縁に沿わせて曲げる。 - 施設紹介の本文は左揃え。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。テーマごとに写真 2 枚を左右に並べる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算） - テーマ見出しの上と右に細い白線を描き、端を十字にはみ出させる。 - 写真 2 枚は大きさ・形を変え、少し上下にずらす。 - View More は右寄せ。 - テーマのブロックは同じ型で縦に繰り返す。 ## Elevation & Depth - 影はほぼ使わない。インスタボタンだけ柔らかいドロップシャドウ。 - 写真の背後に、ぼかした淡い同形の影の面を重ねる。 ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 円・角丸四角・角丸三角・雲形をミックスする - **セクション境界**: 大きな円弧・曲線で色面を切り替える - 直線の帯の区切りは使わない。 - FV の写真はアーチ形に大きく切り抜く。 - 装飾には四方に光る細い星を散らす。 ## Components - **View More ボタン**（`button-more`）: 淡いピーチ地のピル型。緑の欧文と、右端に緑の丸＋アイコン - **細線フレーム見出し**（`heading-frame`）: 上辺と右辺の白い細線が交差してはみ出す枠に、白い見出しを入れる - **不定形の写真**（`photo-shape`）: 円・三角・角丸の写真に、ぼかした淡い同形の影 - **白線枠ラベル**（`outline-label`）: 緑の地に白い枠線の角丸ラベルを置く - **SNS 誘導ボタン**（`button-social`）: 白のピル型。アイコン＋ロゴ＋小さい説明文。影つき - **きらめき装飾**（`sparkle`）: 細い白線の四芒星を余白に散らす - **PC 目次カード**（`pc-index`）: PC 左側に固定する白いカード。縦線つきのテーマ一覧 ## Do's and Don'ts **Do** - 地は朱橙で、緑の円弧を大胆に重ねる。 - 全面にノイズの粒子をかける。 - 写真の切り抜き形はテーマごとに変える。 - テーマブロックは同じ型で繰り返し、リズムを作る。 - 色面上の文字は白に統一する。 **Don't** - フラットな単色ベタ塗りだけで構成しない。 - 四角い写真を均等なグリッドで並べない。 - 黒の太ゴシック見出しや赤い強調バッジを使わない。 - 濃い影や光沢のある立体ボタンを使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節感と温かさを一瞬で伝える）: 手元のホットドリンク写真をアーチ形に切り抜き、手書き風の和文と緑グラデーションの欧文タイトルを重ねる 2. **リード**（特集の世界観を語る）: 緑の円弧の上に、白い短文 4 行を中央揃えで広い行間に置く 3. **テーマ別の楽しみ方（繰り返し）**（シーン別に商品と店舗を提案する）: 細線フレーム見出し、不定形の写真 2 枚、右寄せの View More を 7 回ほど繰り返す 4. **施設・公園紹介**（利用する場所の魅力を伝える）: 雲形に切った風景写真で緑の地に切り替え、大見出しを置く 5. **おすすめの過ごし方**（具体的な利用シーンを提示する）: 写真の配置をずらし、筆記欧文を添えて、左揃えの見出しと本文 6. **ペット同伴案内**（利用条件を案内する）: 白線枠ラベルと説明文、下線リンク 7. **SNS 誘導**（公式アカウントへ誘導する）: 白いピル型の大ボタンを中央に置く 8. **注釈・フッター**（注意事項と所在地を示す）: 薄グレーの地に、小さい黒文字の注釈、中央にロゴと住所 ## Imagery - 自然光の柔らかい写真。手元のクローズアップと屋外の芝生・木々。 - ニットや紙カップなど、冬のぬくもりを感じる小物を入れる。 - 犬・花・本などライフスタイルの要素を混ぜる。 - 背景はベクターの大きな円弧とぼかし円。粒子テクスチャを重ねる。 - 白い細線の四芒星で、きらめきを足す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に SP 幅（約 440px）のカラムを白線で囲んで置く。 - PC の左右には、背景の円弧パターンを縦に繰り返して埋める。 - PC の左側にタイトルロゴと白い目次カードを固定する。 - 右端にページ上部へ戻るボタンを固定する。 ## 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-2bbda3aa`（元 LP の URL から採番） - **元 LP**: https://umekita.com/sc/sc-special/takeout2025/ - **解析に使った画像**: 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/）からご連絡ください。