--- version: alpha name: Pastel Section Outdoor Project Portal description: 深緑をブランド色にしたアウトドア地域連携プロジェクトのポータル型 LP。セクションごとに淡いパステル地（クリーム・淡ピンク・淡緑・淡ミント）を切り替える。各セクションの左上には黒い四角に白い漢字1文字の見出しを置く。線画イラストと路線図モチーフで親しみやすさを出す。 colors: primary: '#2F9266' background: '#FFFFFF' background-alt: '#FBF7DE' tint-1: '#90D09C' tint-2: '#FFF5F4' surface: '#DAECD4' secondary: '#DEFEF9' dark-section: '#020102' text: '#1F272B' on-primary: '#FFFFFF' accent-1: '#4A6094' accent-2: '#E0434F' accent-3: '#A4916E' line: '#1F272B' primary-accessible: '#2B845D' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Lilita One fontSize: 20px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Montserrat fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 20px full: 999px spacing: unit: 8px card: 12px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 64px section-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 75px heading-underline: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px pickup-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 260px line-tag: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 24px logo-grid: backgroundColor: '{colors.background}' height: 40px footer: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 500px --- # DESIGN.md — 若草緑×パステル地のアウトドア連携 LP（Pastel Section Outdoor Project Portal） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: ナチュラル、親しみ・手作り感、ポップ・元気、信頼・誠実 - **キーワード**: パステル地の切替・黒ラベル見出し・線画イラスト・路線図モチーフ・白カード・深緑フッター - **地の質感**: フラットな単色面。線画イラストと路線図のラインを背景に重ねて、地図のような遊び心を出す。 - **形**: 角丸 16px 前後の白カード、ピル型ボタン、黒い正方形ラベル、駅名の角丸タグ - **温度感**: やや暖かく爽やか。緑と生成りが基調 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2F9266` | ブランド深緑（ボタン・フッター） | 8% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地・カード | 31% | 画素の実測 | | `background-alt` | `#FBF7DE` | SNS 投稿エリアの生成り地 | 10% | 画素の実測 | | `tint-1` | `#90D09C` | ファーストビューの若草緑地 | 6% | 画素の実測 | | `tint-2` | `#FFF5F4` | コース紹介セクションの淡ピンク地 | 10% | 画素の実測 | | `surface` | `#DAECD4` | イベントセクションの淡緑地 | 9% | 画素の実測 | | `secondary` | `#DEFEF9` | 協賛セクションの淡ミント地 | 10% | 画素の実測 | | `dark-section` | `#020102` | セクションラベルの黒・ラベル帯 | 3% | 画素の実測 | | `text` | `#1F272B` | 見出しと本文の濃紺黒 | 3% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 緑ボタン・フッター上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#4A6094` | 路線タグの青 | 1% | 画素の実測 | | `accent-2` | `#E0434F` | 路線タグの赤 | 1% | 推定 | | `accent-3` | `#A4916E` | 路線タグの金茶 | 1% | 画素の実測 | | `line` | `#1F272B` | 見出し下の細い区切り線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#2B845D` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地の色を変える。生成り→白→淡ピンク→淡緑→淡ミントのパステル系で揃える - ブランド緑は主ボタン・フッター・イラスト背景の帯だけに使う - 黒はセクションラベルとカードのタイトル帯に限る - 路線やカテゴリの区別には青・赤・緑・金茶の線色を使い、塗りにはしない - コンテンツは基本的に白カードに載せ、パステル地との対比で見せる - `button-primary` は文字 `#FFFFFF` × 背景 `#2F9266` のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B845D`、4.6:1）を使う。 - `footer` は文字 `#FFFFFF` × 背景 `#2F9266` のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B845D`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションラベルの漢字1文字 | ゴシック | Noto Sans JP | 900 | 30px | 1.1 | 0.0em | | `headline-lg` | ファーストビューの見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-md` | セクション見出し（下線付き中央揃え） | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `headline-sm` | リード文や小見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.8 | 0.03em | | `note` | カードの説明文・リンク | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em | | `accent` | 路線名などの手描き風欧文見出し | 装飾・ディスプレイ | Lilita One | 400 | 20px | 1.2 | 0.0em | | `label-button` | ボタン文字・欧文の見出し | 欧文サンセリフ | Montserrat | 700 | 14px | 1.2 | 0.02em | - 見出しは太字ゴシックで中央に揃え、下に幅 60% の細線を引く - セクションラベルは、大きい漢字1文字の後ろに小さいかなを続ける - 本文は小さめ（11px）にし、行間を 1.8 と広めに取る - 欧文見出しはボールドのサンセリフにする - 装飾的な欧文は路線名などのカテゴリ見出しだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列、ロゴは 4 列のグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算） - 各セクションの左上端に、黒い正方形ラベルを余白なしで置く - 見出しはラベルの下に中央揃えで置き、区切り線を添える - カードは画面端から 8〜12px 内側に配置する - スライダーにはドットインジケーターと前後リンクを付ける - 協賛ロゴは白い矩形に入れ、グリッドで等間隔に並べる ## Elevation & Depth - カードには影をほぼ付けず、白と地色の対比で浮かせる - ファーストビューのカードには淡いドロップシャドウを付ける - SNS 埋め込みカードは細い灰色の枠線で囲む ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの矩形で、カード内に収める - **セクション境界**: 直線で地色を切り替える。ファーストビューだけは曲線の路線図ラインで境界をぼかす - 主ボタンは緑のピル型 - サブボタンは白地に黒の太枠、角丸 16px - カードのタイトルは黒いピル帯に入れる - 駅名タグは角丸 8px の線囲み ## Components - **緑のピルボタン**（`button-primary`）: 詳細へ進む主ボタン。横幅いっぱいに近い - **黒枠の大ボタン**（`button-outline`）: 一覧ページへ誘導する白地・黒太枠のボタン - **黒ラベル見出し**（`section-label`）: 左上に置く黒い正方形。大きい漢字1文字＋小さいかな - **下線付き見出し**（`heading-underline`）: 中央揃えの太字見出しと、その下の細線 - **ピックアップカード**（`pickup-card`）: 白カードに黒ピル帯のタイトル、写真、短い説明、右下のリンクを入れる - **駅名タグ**（`line-tag`）: 路線色の線で囲む小さな角丸タグ。折り返して並べる - **協賛ロゴグリッド**（`logo-grid`）: 白い矩形に入れたロゴを 4 列で並べる - **緑フッター**（`footer`）: 深緑の地にロゴ、2 列のサイトマップ、白箱に入れた運営ロゴを並べる ## Do's and Don'ts **Do** - セクションごとにパステル地を切り替え、ページにリズムを作る - 黒ラベル見出しは全セクションで同じ形・同じ位置に置く - 人物や電車は太い線画のフラットイラストで描く - 路線図のような曲線ラインを背景装飾に使う - カード類は白で統一し、角丸を大きめにする **Don't** - 濃い色を背景の全面に使わない（フッターは例外） - グラデーションや光沢を入れない - 見出しに明朝体を使わない - 路線色をボタンの塗りに転用しない - 写真に強い角丸や影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（プロジェクトの概要と最初の導線を示す）: 若草緑の地に、左上へ吊り下げ型のロゴ旗、右上へ黒いメニューボタン。白カードに見出し・説明・緑ボタンを入れ、右側の緑帯に線画の人物を置く 2. **ピックアップ**（主要コンテンツ 2 つへ誘導する）: 2 列の白カード。黒ピル帯のタイトルと写真、短い説明文を入れる 3. **最新情報（SNS）**（活動の鮮度を見せる）: 生成り地。左に欧文の見出し、右に吹き出し型のサブ見出しを置き、SNS 投稿の埋め込みを縦に並べる 4. **プロジェクト紹介**（連携の目的を説明する）: 白地に黒ラベルと下線付き見出しを置く。2 つの吹き出しを＋でつなぐ図解イラストと中央揃えの本文。スライダー形式 5. **コース紹介**（ハイキングコースの一覧を見せる）: 淡ピンク地。看板型のイラストの後、路線ごとに色分けした駅名タグを並べる 6. **イベント案内**（開催イベントを紹介する）: 淡緑地。リード文を置き、写真付きのカードを 2 列のスライダーで見せる。最後に黒枠の大ボタン 7. **協賛・パートナー**（信頼性を示す）: 淡ミント地。協賛の格ごとに小見出しを付け、ロゴを白い矩形に入れてグリッドで並べる 8. **フッター**（サイトマップと運営者の表示）: 深緑地に白いロゴ、2 列のリンク、白箱に入れた運営ロゴ 3 つ、コピーライト ## Imagery - 人物は黒い太線のフラットイラストで描き、髪や服は少ない色数のパステルで塗る - 電車・山・街並みを線画のアイコン風に描いて装飾にする - 路線図のような太い曲線と駅の丸印を背景に流す - 写真は自然や街歩きの風景を、明るい日中に撮った素直な写真にする - ハートや吹き出しなど、アイソメトリック風の SNS アイコンを差し色に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では上部に 5 項目のグローバルナビ（日本語＋英字の小ラベル）を出す - PC のファーストビューは、メインカードを左、ピックアップ 2 枚を右に縦積みで置く - SNS 投稿は PC で 3 列に並べる - コース紹介は、PC ではタグ一覧ではなく路線図そのものを大きく見せる - PC のフッターはロゴ・リンク・運営ロゴの 3 カラムにする ## 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-0fde27ea`（元 LP の URL から採番） - **元 LP**: https://kobe-krt.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。