--- version: alpha name: Ocean Wave Blue Cycling Rail Guide LP description: 鮮やかな青地と淡い水色の地が波形の境界で交互に入れ替わる、海辺の観光列車の案内 LP。黄色の大きなボタンとオレンジのアクセントで動線をはっきり示す。白いカードに STEP 番号を付けて、利用手順を多めの情報で順に案内する。 colors: primary: '#0089DA' dark-section: '#01327F' on-dark: '#F4FDFF' background: '#FEFEFE' background-alt: '#EAF7FF' tint-1: '#C2DFC1' cta: '#FEF13A' on-cta: '#0E2E69' accent-1: '#F38202' accent-2: '#E60012' text: '#0E2E69' text-body: '#333333' line: '#B8D8EE' tint-2: '#EAF7FF' primary-accessible: '#0079C0' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Montserrat fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.md}' height: 60px button-direction: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' rounded: '{rounded.md}' height: 56px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 400px tab-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px label-chip: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px pictogram-rule: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 64px station-grid: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px wave-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px alert-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px --- # DESIGN.md — 波線と青の爽やかサイクル列車案内 LP（Ocean Wave Blue Cycling Rail Guide LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ポップ・元気 - **キーワード**: 海の青・波線の区切り・STEP カード・ピクトグラム・黄色ボタン・路線図 - **地の質感**: グラデーションや質感は使わない。フラットな単色の面だけで組む - **形**: 波形のセクション境界、角丸のカード、片側だけ丸いタブ見出し、円形の STEP 番号 - **温度感**: 涼しく明るい。黄色とオレンジで温かみを少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0089DA` | ブランドの青。セクション地と見出し文字に使う | 21% | 画素の実測 | | `dark-section` | `#01327F` | 運行日など重要情報の濃紺セクション | 5% | 画素の実測 | | `on-dark` | `#F4FDFF` | 青地・濃紺地に置く白文字 | 3% | 画素の実測 | | `background` | `#FEFEFE` | カード内部と基本の白地 | 26% | 画素の実測 | | `background-alt` | `#EAF7FF` | 淡い水色のセクション地 | 17% | 画素の実測 | | `tint-1` | `#C2DFC1` | 路線図の陸地に使う淡い緑 | 6% | 画素の実測 | | `cta` | `#FEF13A` | 主ボタンの黄色 | 2% | 画素の実測 | | `on-cta` | `#0E2E69` | 黄色ボタン上の濃紺文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#F38202` | 路線名ラベルや上り予約ボタンのオレンジ | 1% | 画素の実測 | | `accent-2` | `#E60012` | 注意書きや枠囲みの警告の赤 | 0% | 推定 | | `text` | `#0E2E69` | 白地に置く見出しと本文の濃紺 | 3% | 画素の主要色に補正 | | `text-body` | `#333333` | 注釈と細かい本文のグレー | 2% | 推定 | | `line` | `#B8D8EE` | 表の罫線と区切り線の淡い青 | 0% | 推定 | | `tint-2` | `#EAF7FF` | 表のヘッダーや手順画像の背景に使う薄い青 | 2% | 画素の実測 | | `primary-accessible` | `#0079C0` | AA を満たす補正値（計算） | | 計算 | - 地の色は青→濃紺→水色→白カードの順で切り替え、境界は必ず波線にする - 黄色は主 CTA だけに使う。上りと下りのように 2 方向を分けるボタンは青とオレンジで塗り分ける - 濃紺は運行日などの最重要情報セクションと、文字色に使う - 赤は注意文と枠囲みの警告だけに使い、面には使わない - 青地には白文字だけを置く。黒文字は置かない - `button-direction` は文字 `#F4FDFF` × 背景 `#0089DA` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0079C0`、4.52:1）を使う。 - `tab-heading` は文字 `#F4FDFF` × 背景 `#0089DA` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0079C0`、4.52:1）を使う。 - `station-grid` は文字 `#0089DA` × 背景 `#FEFEFE` のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0079C0`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 運行日など大きな数字・語の強調 | ゴシック | Noto Sans JP | 500 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し（青い太字） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.4 | 0.05em | | `headline-md` | STEP カードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | タブ見出しとラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `body-lg` | 導入文の強調行 | ゴシック | Noto Sans JP | 500 | 17px | 1.8 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | ※ で始まる注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `accent` | STEP の英字ラベル | 欧文サンセリフ | Montserrat | 800 | 14px | 1.2 | 0.05em | - 導入文は中央揃えにし、重要な行だけ 1 段大きくする - セクション見出しは中央揃えの太字にし、下に小さな波線の飾りを付ける - STEP 内の本文は左揃え。項目ラベルと値を 2 列で並べる - 注釈は小さい文字にし、行頭に ※ か ● を付ける - 見出しにはサイズの大きいジャンプ率を使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ピクトグラムの注意事項だけ 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - STEP カードは白地で、左に番号・右に内容を置く。カード同士の間隔は 24px - 幅の広い表や路線図は横スクロールで見せる - 駅ボタンはグリッド状に並べる（SP は 3 列） - セクションの上下には波線の境界を置き、余白を広めにとる ## Elevation & Depth - 影はほぼ付けない。面の色の差で階層を表す - CTA ボタンは下側だけに濃い色の段差影を付ける（2〜4px） ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸の四角、ファーストビューは全幅の写真 - **セクション境界**: 不規則な波形（海の波） - ボタンは角丸 8px の長方形にし、右端に矢印 > を置く - STEP 番号は塗りつぶした青い円に白い数字を入れる - タブ見出しは左右の端を大きく丸めた帯にする - ピクトグラムは濃紺の枠を付けた正方形にする ## Components - **黄色 CTA ボタン**（`button-primary`）: 黄色地に濃紺の太字。右に矢印、下側に段差影を付ける - **方向別予約ボタン**（`button-direction`）: 青とオレンジで塗り分けた 2 つのボタン。下に時刻の一覧を置く - **STEP カード**（`step-card`）: 白い角丸カード。左上に STEP の英字と円形の番号を置く - **帯タブ見出し**（`tab-heading`）: 青い帯の両端を丸めた中見出し。白文字で書く - **項目ラベル**（`label-chip`）: 濃紺地に白文字の小さな四角ラベル。値と左右に並べる - **ピクトグラムの注意事項**（`pictogram-rule`）: 濃紺枠の正方形アイコンと太字の短文を横に並べる - **駅選択グリッド**（`station-grid`）: 白地に青枠の小さなボタンを格子状に並べる - **波線の飾り付き見出し**（`wave-heading`）: 青い太字の見出しの下に小さな波線アイコンを置く - **赤枠の注意**（`alert-box`）: 白地を赤い枠で囲み、赤い太字で必須事項を書く ## Do's and Don'ts **Do** - セクションの境界は必ず波形にして、海の雰囲気を出す - 手順は STEP 番号付きのカードに分けて、上から順に並べる - 主ボタンは黄色にし、ページ内で目立つ位置に置く - 時刻や料金などの情報は、ラベルと値を 2 列にした表で整理する **Don't** - グラデーションや強い影を使わない - 青地に黒や灰色の文字を置かない - 赤を装飾目的で使わない - 直線の境界や斜めの区切りを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（列車と自転車の旅をイメージさせる）: 全幅の写真を置き、下端を波形にして青地へつなぐ 2. **導入・概要**（サービスの魅力を説明する）: 青地に白文字で中央揃えの文章。最後に黄色 CTA を置く 3. **運行日**（運行する日を伝える）: 濃紺地に大きな白文字で示し、下に注釈を添える 4. **ルートと発着駅**（路線と駅を地図で示す）: 水色地に簡略化した地図を置き、駅を点とラベルで描く。凡例を付ける 5. **対象列車・料金リンク**（時刻表と料金へ誘導する）: 帯タブの見出しの下に黄色ボタンを 2 つ並べる 6. **注意事項**（安全ルールを伝える）: ピクトグラムと短文を 2 列に並べ、下に箇条書きの注釈を置く 7. **利用方法 STEP**（予約から降車までの手順を案内する）: 青地の上に白い STEP カードを 6 枚縦に並べる。表・スマホ画面・写真を入れる 8. **乗降駅の案内**（駅ごとの状況を確認させる）: 水色地に駅ボタンをグリッド状に並べる 9. **フッター**（運営主体を示す）: 白地に団体のロゴと一文を横に並べる ## Imagery - 写真は明るい自然光で撮った、自転車と列車が一緒に写る旅の場面にする - ピクトグラムは濃紺の単色。シンプルな人物と自転車を描く - 地図は陸地を淡い緑、海を水色で塗り、路線はオレンジの線で描く - スマホの操作画面は、押す場所を赤い枠で囲んで示す - ゆるいマスコットのイラストを小さく添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に最大幅 約 760px のカードを置き、両脇は青地にする - SP では注意事項のピクトグラムを 1 列にしてもよい - 表や車両図は SP では横スクロールにする - PC で 2 つ並べているボタンは、SP では縦に積む - スマホ画面のスクリーンショットは SP では 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-0487c6ba`（元 LP の URL から採番） - **元 LP**: https://www.jr-odekake.net/railroad/uminami/cycletrain/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。