--- version: alpha name: Cool Blue Regional Workation Portal LP description: 雪山写真のファーストビューから始まる、淡いブルーグレーの地に白カードを並べた地域ワーケーションのポータル型 LP。細い欧文見出しの下に小さな和文ラベルを添え、ロイヤルブルーのピル型ボタンと、横に伸びる細い線を繰り返して全体のリズムを作る。 colors: primary: '#4476E3' background: '#F3F4F9' surface: '#FEFEFE' secondary: '#5A8EC9' accent-1: '#66BAE2' tint-1: '#5A8EC9' text: '#222631' accent-2: '#5A8EC9' line: '#8497BD' accent-3: '#63C48E' marker: '#FEDC03' on-primary: '#FFFFFF' text-muted: '#8B97AF' primary-accessible: '#3D71E2' secondary-accessible: '#3D78BB' typography: display: fontFamily: Raleway fontSize: 34px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em accent: fontFamily: Oswald fontSize: 28px fontWeight: 600 lineHeight: 1.05 rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 32px section-heading: textColor: '{colors.accent-2}' typography: '{typography.display}' height: 64px card-article: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 260px badge-category: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px news-date: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 22px search-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 400px connector-line: textColor: '{colors.text}' height: 1px --- # DESIGN.md — 淡青グレー×ロイヤルブルーの地域ワーケーション LP（Cool Blue Regional Workation Portal LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、クール・先進的 - **キーワード**: 淡いブルーグレー地・白カード・細い欧文見出し・ピル型ブルーボタン・接続線・雪山と自然写真 - **地の質感**: フラットで質感はない。白カードはごく薄い影で浮かせる - **形**: 写真とカードは角丸が中くらい、ボタンは完全なピル型、ラベルは四角 - **温度感**: 寒色寄りで、涼しく澄んだ印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4476E3` | ブランド青・主ボタン | 4% | 画素の実測 | | `background` | `#F3F4F9` | ページ地の淡いブルーグレー | 45% | 画素の実測 | | `surface` | `#FEFEFE` | カード・検索パネル | 15% | 画素の実測 | | `secondary` | `#5A8EC9` | 検索パネル見出し帯・日付ラベル | 3% | 画素の主要色に補正 | | `accent-1` | `#66BAE2` | 地図の水色・FVの空色 | 5% | 画素の実測 | | `tint-1` | `#5A8EC9` | フォーム項目見出しのセル | 1% | 画素の主要色に補正 | | `text` | `#222631` | 見出し・本文 | 2% | 推定 | | `accent-2` | `#5A8EC9` | 欧文セクション見出し | 1% | 画素の主要色に補正 | | `line` | `#8497BD` | アウトラインボタンの枠・入力欄の枠 | 1% | 画素の実測 | | `accent-3` | `#63C48E` | イベントバナー用の緑グラデーション | 1% | 画素の実測 | | `marker` | `#FEDC03` | 言語切替ボタンの黄色 | 0% | 画素の実測 | | `on-primary` | `#FFFFFF` | 青ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#8B97AF` | 地図の路線凡例などの補助グレー | 1% | 画素の主要色に補正 | | `primary-accessible` | `#3D71E2` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#3D78BB` | AA を満たす補正値（計算） | | 計算 | - 地は常に淡いブルーグレー。情報ブロックは白カードに入れて分ける - ボタン・欧文見出し・ラベルなど、操作と強調の箇所はロイヤルブルー 1 色に絞る - 検索パネルの見出し帯や日付ラベルは、やや明るい中間の青のベタ塗りにする - 緑や黄はイベントバナーや言語切替など、ごく限られた場所だけに使う - 写真は寒色寄りで明るいトーンにそろえる - `button-primary` は文字 `#FFFFFF` × 背景 `#4476E3` のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3D71E2`、4.51:1）を使う。 - `button-outline` は文字 `#4476E3` × 背景 `#FEFEFE` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3D71E2`、4.52:1）を使う。 - `badge-category` は文字 `#FFFFFF` × 背景 `#4476E3` のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3D71E2`、4.51:1）を使う。 - `news-date` は文字 `#FFFFFF` × 背景 `#5A8EC9` のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3D78BB`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文見出し | 欧文サンセリフ | Raleway | 300 | 34px | 1.1 | 0.02em | | `headline-sm` | 欧文見出しの下に添える和文ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `headline-md` | カードのタイトル・リード文 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 日付・チェック項目・注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | 欧文サンセリフ | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | | `accent` | ファーストビュー右下の縦積み英字 | 装飾・ディスプレイ | Oswald | 600 | 28px | 1.05 | 0.0em | - セクション見出しは、細い欧文の大見出しの下に、太い和文の小ラベルを中央揃えで置く 2 段構成にする - 欧文見出しは青、和文ラベルは黒にする - 本文は 14px 前後で行間を広めにとる - カードタイトルは 2〜3 行に収め、あふれた分は省略記号で切る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はカードを 2 カラムにし、写真とテキストを左右交互に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは欧文見出し→和文ラベル→短い説明文→コンテンツ→View more ボタンの順に並べる - View more ボタンの上に短い縦線を引き、上のブロックとつなぐ - 後半の紹介ブロックは写真を画面端まで寄せ、ボタンから横線を伸ばして写真につなげる - 検索系は白パネルにまとめ、左上か右上に青い見出し帯をはみ出させる ## Elevation & Depth - 白カードには、ごく薄くぼかした影を付ける - ボタンには弱い落ち影を付ける - それ以外は影を付けずフラットにする ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。片側を画面端まで寄せて裁ち落とす - **セクション境界**: 区切りの装飾はなく、余白と地色だけで区切る - 主ボタン・アウトラインボタン・タグはすべてピル型にする - 日付ラベルとパネル見出し帯は角丸なしの四角にする - ファーストビューにはひし形のモチーフを重ねる ## Components - **青のピル型ボタン**（`button-primary`）: 幅は広め。中央に白文字を置き、右端に小さな矢印を付ける - **アウトラインのピル型ボタン**（`button-outline`）: 白地に青枠と青文字。絞り込みやカテゴリの切替に使い、横に並べる - **欧文と和文の 2 段見出し**（`section-heading`）: 細い欧文の大見出しの下に、和文の太い小ラベルを置く - **記事カード**（`card-article`）: 上に写真、下に青ラベルとタイトルを置いた白カード - **カテゴリタグ**（`badge-category`）: 青地に白文字の小さなピル型タグ - **日付ラベル**（`news-date`）: 青のグラデーションを敷いた四角い帯に白文字で日付を入れる。右側に見出しを 1〜2 行置く - **検索パネル**（`search-panel`）: 白パネルの上辺に青い見出し帯を付け、チェックボックスや入力欄を並べる - **接続線**（`connector-line`）: 1px の濃いグレーの線。ボタンと写真、またはブロック同士をつなぐ ## Do's and Don'ts **Do** - 地は淡いブルーグレーで統一し、情報は白カードに入れる - 見出しは必ず欧文と和文の 2 段構成にする - セクションの最後に、青いピル型の View more ボタンを置く - 写真は明るく寒色寄りの自然や建物を選ぶ - 余白は広くとり、1 セクションに入れる情報は絞る **Don't** - 暖色の大きな面を使わない - 見出しに太い明朝や手書き書体を使わない - ボタンを角張った形にしない - 濃い影や立体的な装飾を付けない - 地色をセクションごとにばらばらに変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（地域の魅力と事業名を一目で伝える）: 全面に雪山の写真を敷き、中央にひし形と山型のロゴを置く。右下に英字を縦に積み、上部に白文字のナビを並べる 2. **イベント告知バナー**（注目のイベントを知らせる）: 緑グラデーションの枠で囲んだ白いバナーを中央に置く 3. **イベント情報**（最新のイベントを一覧で見せる）: 2 カラムのカードに地域ラベルと日付を付け、下に View more ボタンを置く 4. **施設検索**（エリア・キーワード・条件から施設を探してもらう）: アウトラインボタンで検索方法を切り替える。地図とチェックリストを白パネルに並べ、下に青ボタンを置く 5. **最新情報**（お知らせや掲載情報を伝える）: 日付ラベルとテキストを横に並べた行を 4 件ほど縦に並べる 6. **事業紹介**（取り組みの理念を説明する）: 左に建物の写真、右に見出しと、左に青線を引いたリード文と本文を置いた白カード 7. **記事一覧**（事例やレポートを見せる）: 2×2 の記事カードを並べ、下にカテゴリボタンと全記事ボタンを置く 8. **コーディネーター・エリア紹介**（相談先や地域へ誘導する）: 写真とテキストを左右交互に並べ、ボタンと写真を横線でつなぐ 9. **リンク集・お問い合わせ**（関連サイトや問い合わせへ誘導する）: 同じく左右交互のレイアウトにし、View more ボタンを置く ## Imagery - 雪山や高原など、青空の下の明るい風景写真を使う - 木造やガラス張りのモダンな建物、ワークスペースの写真を使う - PC やスマホを操作する手元を、やや青みのある色調で写す - ファーストビューには半透明の青いひし形を重ねる - 地図は水色のベタ塗りに、路線や道路を線で描いたフラットなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではカードを 1 カラムにする - 写真とテキストの左右交互の並びは、SP では写真を上、テキストを下に縦に積む - 地図とチェックリストは SP では縦に並べ、チェック項目は 2 列にする - ナビは SP ではハンバーガーメニューにまとめる - 欧文見出しは PC で約 40px、SP では 30〜34px に縮める ## 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-5d09288f`（元 LP の URL から採番） - **元 LP**: https://shinshu-resorttelework.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。