--- version: alpha name: Autumn Paper Cutout Family Event LP description: オレンジ・朱・マゼンタ・黄土・若草の紅葉色を、ちぎり紙のような不定形の面で重ねた季節イベント LP。写真は手で切ったような多角形に切り抜き、ゆるいキャラクターの吹き出しを添える。見出しは手書き風の太い文字。後半は淡いピンクの振り返りセクション、紺から紫へのグラデーションの夜空セクションへ切り替わる。 colors: primary: '#F08012' secondary: '#C85370' accent-1: '#D09B01' accent-2: '#7EAB2A' accent-3: '#D25D4B' background: '#FEFEF4' background-alt: '#F1D9E7' marker: '#FFF473' cta: '#FEF69D' on-cta: '#7D992A' on-primary: '#FEFEFA' dark-section: '#1C2850' tint-1: '#906DA7' text: '#3C3645' accent-1-text-alt: '#C80F4F' on-cta-accessible: '#617721' secondary-accessible: '#C64B6A' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Yusei Magic fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Kiwi Maru fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Kiwi Maru fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Fredoka fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.06em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.06em rounded: sm: 0px md: 4px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-tile: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-outline-dark: typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px character-bubble: backgroundColor: '{colors.background}' height: 90px info-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.note}' height: 28px torn-photo: height: 260px callout-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 160px season-heading: textColor: '{colors.accent-1-text-alt}' typography: '{typography.accent}' height: 40px --- # DESIGN.md — 紅葉色の切り絵風ファミリーイベント LP（Autumn Paper Cutout Family Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型 - **キーワード**: 紅葉色・ちぎり紙・切り絵・ゆるキャラ・手書き見出し・家族向け - **地の質感**: マットな色紙を手でちぎって重ねたような、フラットで不定形な面。光沢やグラデーションは夜空セクションだけに使う - **形**: ギザギザの多角形で写真を切り抜き、背景には葉っぱ形の大きな色面を重ねる。ボタンはピル型 - **温度感**: 暖色が中心で温かく、にぎやか。後半は紺と紫で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F08012` | ブランド地色（オレンジ） | 14% | 画素の実測 | | `secondary` | `#C85370` | メニュー章の地色（マゼンタ） | 10% | 画素の実測 | | `accent-1` | `#D09B01` | イベント章の地色（黄土） | 16% | 画素の実測 | | `accent-2` | `#7EAB2A` | ワークショップ章の地色（若草） | 7% | 画素の実測 | | `accent-3` | `#D25D4B` | 重ねる葉の色面（朱） | 9% | 画素の実測 | | `background` | `#FEFEF4` | FV・吹き出しの生成り | 8% | 画素の実測 | | `background-alt` | `#F1D9E7` | 四季振り返り章の淡ピンク | 13% | 画素の実測 | | `marker` | `#FFF473` | 見出し文字・ラベル・ボタンの淡黄 | 3% | 画素の実測 | | `cta` | `#FEF69D` | 主ボタンの淡黄 | 1% | 画素の実測 | | `on-cta` | `#7D992A` | ボタン文字の若草・黄土 | 0% | 画素の実測 | | `on-primary` | `#FEFEFA` | 色面上の本文（白） | 1% | 画素の主要色に補正 | | `dark-section` | `#1C2850` | 夜空章の紺（下で紫へ） | 7% | 画素の実測 | | `tint-1` | `#906DA7` | 夜空章下部の紫 | 4% | 画素の実測 | | `text` | `#3C3645` | 淡色地の本文（濃グレー） | 2% | 画素の主要色に補正 | | `accent-1-text-alt` | `#C80F4F` | 四季章の見出し（ローズ） | 0% | 画素の実測 | | `on-cta-accessible` | `#617721` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#C64B6A` | AA を満たす補正値（計算） | | 計算 | - 章ごとに地色を変える。オレンジ→マゼンタ→黄土→若草の順に紅葉が深まるイメージ - 地色の上には、隣り合う紅葉色の葉形の面を 2〜3 色重ねてちぎり紙にする - 暖色の地では見出しを淡黄、本文を白にする - 表の項目ラベルは淡黄の面に濃い文字、値は淡黄の文字 - 振り返り章だけは淡ピンクの地に、ローズの見出しと濃グレーの本文で静かに見せる - 夜空章は紺から紫へのグラデーション。月とアクセントは黄にする - `button-primary` は文字 `#7D992A` × 背景 `#FEF69D` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#617721`、4.53:1）を使う。 - `callout-panel` は文字 `#FEFEFA` × 背景 `#C85370` のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#C64B6A`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインロゴ文字（多色） | 装飾・ディスプレイ | Dela Gothic One | 400 | 64px | 1.1 | 0.05em | | `headline-lg` | 章見出し（手書き風の太字、淡黄） | 手書き・筆 | Yusei Magic | 400 | 44px | 1.2 | 0.08em | | `headline-md` | イベント名・メニュー名 | 丸ゴシック | Kiwi Maru | 500 | 20px | 1.4 | 0.05em | | `headline-sm` | 日付・価格 | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.4 | 0.02em | | `body-md` | 本文・リード | 丸ゴシック | Kiwi Maru | 400 | 14px | 1.8 | 0.04em | | `accent` | 季節名の英字小見出し | 欧文サンセリフ | Fredoka | 600 | 20px | 1.3 | 0.06em | | `note` | 表の値・注釈・フッター | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.6 | 0.02em | | `label-button` | ピル型ボタンの文字 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.3 | 0.06em | - 章見出しは手書き風の太字でガタガタさせ、字間を広めにとる - リードは 2 行の中央揃えにする - 本文は丸みのある書体で、やわらかく読みやすくする - FV のロゴ文字は 1 文字ずつ赤・緑・橙・黄に塗り分ける - 日付は数字を太く、曜日は括弧付きの小さめの文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。目次ボタンだけ 3 列 × 2 段 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は幅の約 85% で、左右へ少しずらして配置する - 写真の角にキャラクターの吹き出しを重ねる - イベントは「写真→名前→日付→本文→項目表」の順で縦に積む - 項目表は左に淡黄のラベル、右に値を置く - ワークショップの月別リストは、横線つき月見出しと○印の行で並べる ## Elevation & Depth - 影は使わずフラットにし、重なりは色面の前後関係だけで表す - 吹き出しは生成りの不定形の面で、影なし ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: ちぎったような不規則な多角形。四季章だけは角丸なしの長方形を 2 枚並べる - **セクション境界**: ちぎり紙のギザギザした波形の境界。夜空章・振り返り章は直線で切り替える - 目次ボタンは、少し歪んだ白い四角形 - 吹き出しは歪んだ六角形に小さな尻尾をつける - 背景には葉っぱやしずく形の大きな色面を斜めに置く - アイテム展示章は、朱の地に濃い朱の水玉 ## Components - **目次タイル**（`nav-tile`）: 歪んだ白い四角に章名を書き、3 列 × 2 段で並べる - **詳細ボタン**（`button-primary`）: 淡黄のピル型ボタン。文字は章の地色と同系色 - **夜空章のアウトラインボタン**（`button-outline-dark`）: 白枠・白文字のピル型ボタン - **キャラ吹き出し**（`character-bubble`）: 生成りの不定形な吹き出しにゆるキャラを入れ、写真の角に重ねる - **項目ラベル表**（`info-label`）: 淡黄のラベル（時間・場所・料金など）と、淡黄文字の値を左右に並べる - **切り絵写真**（`torn-photo`）: ギザギザの多角形で切り抜いた写真 - **告知パネル**（`callout-panel`）: マゼンタの歪んだ面に、淡黄の英字見出しと白文字の告知を載せる - **季節の英字見出し**（`season-heading`）: 左右に細い線をつけた、ローズ色の英字見出し ## Do's and Don'ts **Do** - 章ごとに地色を変え、紅葉の色を順に巡らせる - 写真は必ず手切り風の多角形で切り抜く - 各写真にキャラ吹き出しを 1 つ添える - 見出しは淡黄の手書き風文字にする - イベント情報はラベル表で整理する - ボタンは淡黄のピル型にする **Don't** - 写真を長方形のまま置かない（四季章を除く） - 影・光沢・グラデーションを暖色章で使わない - 寒色を暖色章に入れない - 細い明朝体を見出しに使わない - 葉形の色面を規則正しく並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節イベントの名前と会期を伝える）: 多角形写真のコラージュの中央に生成りの不定形の面を置き、多色ロゴとキャラ、旗形の会期表示を載せる 2. **目次**（各章へ案内する）: オレンジの地に、歪んだ白いタイルを 3 × 2 で並べる 3. **フォトスポット**（撮影スポットを見せる）: オレンジの地にちぎり紙の色面を重ね、切り抜き写真 4 枚とキャラ吹き出しを置く。最後に告知パネル 4. **限定メニュー**（飲食メニューの紹介）: マゼンタの地に切り抜きの料理写真を置き、名前・価格・説明を続ける 5. **イベント**（子ども向け催しの詳細）: 黄土の地に「写真→名前→日付→本文→ラベル表」を繰り返し、最後に詳細ボタン 6. **ワークショップ**（工作体験の案内）: 若草の地に写真、月見出し付きのリスト、ラベル表、ボタンを置く 7. **アイテム展示**（関連物販の告知）: 朱の地に水玉を敷き、キャンプ道具のイラストと明朝風の淡黄見出しを置く 8. **四季の振り返り**（通年の魅力を伝える）: 淡ピンクの地に、季節ごとの英字見出し、写真 2 枚の横並び、短文を並べ、上下線つきの締めの一文で終える 9. **夜空イベント**（天体観賞の案内）: 紺から紫へのグラデーションに月とキャラのイラスト。黄色の見出しを置き、アウトラインボタンと黄色ボタンを配置 10. **フッター**（アクセスと注意事項）: 白地にロゴ・アクセス・注釈を中央揃えで置く ## Imagery - 写真は明るく、紅葉の装飾や子どもが体験する様子を写す - 写真の縁を手切り風の多角形にトリミングする - キャラクターは芋や木の実をモチーフにした、ゆるい手描き風。帽子をかぶっている - 落ち葉・銀杏の小さなイラストを散らす - 夜空章は線の細い可愛いキャラと黄色の月のフラットなイラストにする - 背景は不定形な葉やちぎり紙の色面で構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 70% にし、写真やイベントは 2 列で互い違いに並べる - PC の FV はロゴ面を中央に小さく置き、周りを写真コラージュで囲む - 目次は PC では 1 行 6 個で、ややジグザグに並べる - 背景の色面は全幅に広げる - 四季章は PC でも写真 2 枚を横に並べ、本文は中央揃えにする ## 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-a3b835be`（元 LP の URL から採番） - **元 LP**: https://sunshinecity.jp/file/observatory/kisetsusousyoku/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。