--- version: alpha name: Ocean Blue Character Collab Travel LP description: 青から水色へ段階的に移る海色の地に、白い波線で区切ったセクションを重ねたキャラクターコラボの旅行 LP。手描きキャラ・白抜きの丸い文字・黄色の強調見出しで、やさしくワクワクする空気を作る。予約エリアは白地にし、航路ごとにピンクと黄緑のピル型ボタンで色分けする。 colors: primary: '#009CE6' secondary: '#46BCEE' background-alt: '#58DFE3' tint-1: '#98E7EE' background: '#FEFFFE' dark-section: '#0186D9' surface: '#113B91' text: '#0E347E' accent-1: '#FFF27A' cta: '#FDABD5' accent-2: '#95E502' on-cta: '#3E4185' on-dark: '#FFFFFF' text-body: '#333F55' secondary-accessible: '#107EAC' typography: display: fontFamily: Zen Maru Gothic fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.06em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em accent: fontFamily: Varela Round fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 0px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-route-a: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-route-b: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-sns: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px heading-outlined: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px route-label: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px photo-trio: height: 300px coming-soon-box: backgroundColor: '{colors.surface}' textColor: '{colors.tint-1}' typography: '{typography.accent}' height: 260px map-callout: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 480px note-text: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 50px --- # DESIGN.md — 海色グラデと波線のキャラコラボ船旅 LP（Ocean Blue Character Collab Travel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: かわいい、ポップ・元気、清潔・爽やか、やさしい・柔らかい - **キーワード**: 海色グラデーション・波線の区切り・手描きキャラクター・泡の装飾・丸みのある文字・航路で色分け - **地の質感**: フラットなベタ塗りに、空と雲・泡をイラストで重ねる。ノイズや陰影はほとんど使わない - **形**: 波線のセクション境界、ピル型のボタン、丸い泡、四角い写真 - **温度感**: 爽やかな寒色が主役。黄色とピンクで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#009CE6` | メインの海色の地 | 20% | 画素の実測 | | `secondary` | `#46BCEE` | 地図セクションの水色の地 | 13% | 画素の実測 | | `background-alt` | `#58DFE3` | 写真セクションのターコイズの地 | 9% | 画素の実測 | | `tint-1` | `#98E7EE` | 企画セクションの淡い水色の地 | 11% | 画素の実測 | | `background` | `#FEFFFE` | 予約エリアの白地・雲 | 14% | 画素の実測 | | `dark-section` | `#0186D9` | ファーストビュー下部の深い海の地 | 9% | 画素の実測 | | `surface` | `#113B91` | 準備中プレースホルダーの紺の面 | 3% | 画素の実測 | | `text` | `#0E347E` | 見出し・ラベルの紺色の文字 | 1% | 画素の実測 | | `accent-1` | `#FFF27A` | タイトルや強調見出しの黄色 | 1% | 推定 | | `cta` | `#FDABD5` | 航路 A の予約ボタン（ピンク） | 1% | 画素の実測 | | `accent-2` | `#95E502` | 航路 B の予約ボタン（黄緑） | 1% | 画素の実測 | | `on-cta` | `#3E4185` | ボタン上の紺の文字 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 青地の上の白い本文 | 1% | 画素の主要色に補正 | | `text-body` | `#333F55` | 白地の注釈の文字 | 0% | 推定 | | `secondary-accessible` | `#107EAC` | AA を満たす補正値（計算） | | 計算 | - 地色は上から濃い青→水色→ターコイズ→淡い水色→白と、海が浅くなるように段階的に変える - セクションの境界は前後の地色同士の白っぽい波線でつなぐ - 青地の本文は白、白地の本文は紺。黒は使わない - 黄色はタイトルや強調見出しだけに使い、紺の縁取りか影を付ける - 予約ボタンは航路ごとにピンクと黄緑で色分けし、見出しの文字色もそろえる - 準備中の箇所は紺のベタ面に水色の文字で置く - `map-callout` は文字 `#FFFFFF` × 背景 `#46BCEE` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#107EAC`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのロゴ風タイトル | 丸ゴシック | Zen Maru Gothic | 900 | 44px | 1.1 | 0.02em | | `headline-lg` | 黄色に紺の縁取りを付けた強調見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.25 | 0.04em | | `headline-md` | 航路名のラベル・予約エリアの見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.06em | | `body-lg` | 青地に白で中央揃えにした導入文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 2.2 | 0.08em | | `note` | 予約に関する注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.02em | | `label-button` | ピル型ボタンのラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.3 | 0.08em | | `accent` | 日付や準備中表示の欧文 | 欧文サンセリフ | Varela Round | 700 | 22px | 1.2 | 0.04em | - 全体を太めの丸ゴシックでそろえ、角のある明朝体は使わない - 導入文は中央揃えにし、行間を 2 倍以上と広く取る - 強調見出しは黄色の文字に紺の縁取りを付け、少し傾けたり跳ねさせたりして動きを出す - 小見出しの上に、両側を斜線ではさんだ短い前置きの一言を添える - 字間はやや広め（0.04〜0.08em）にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。予約エリアだけ縦線で区切った 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - キャラクターを左右の端に寄せて置き、セクション境界からはみ出させる - 写真は大きい 1 枚の下に 2 枚を並べる 3 枚組にし、左右どちらかに寄せる - 導入文の前後に大きな余白を取り、泡の装飾で縦方向の流れを作る - 予約エリアは航路ごとに左右の列に分け、中央に縦線を引く - ページ最後にファーストビューと同じビジュアルを置いて締める ## Elevation & Depth - 影はほとんど使わず、フラットな面で構成する - 奥行きは雲・波・キャラクターを重ねて出す - ボタンにも影を付けない ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの四角。キャラクターは切り抜きで配置する - **セクション境界**: 白っぽい波線（ゆるいサイン波）。下部は雲の形 - ボタンは完全なピル型にする - 写真は角丸なしの四角のままにする - 泡は白い丸を大・中・小と組み合わせる - セクション境界に直線は使わず、波か雲の形にする ## Components - **航路 A のピンク予約ボタン**（`button-route-a`）: ピンクのピル型。紺の太字ラベルの右に外部リンクのアイコンを付ける - **航路 B の黄緑予約ボタン**（`button-route-b`）: 黄緑のピル型。予約開始日などの補足を 2 行目に入れられる - **SNS リンクボタン**（`button-sns`）: 航路色のピル型。右端に白い丸のアイコンを入れる - **縁取りの強調見出し**（`heading-outlined`）: 黄色の文字に紺の縁取りを付けた、2 行の跳ねる見出し - **船イラスト付きの航路ラベル**（`route-label`）: 船のイラストの横に、紺の太字で航路名を置く。波線の上に配置する - **写真の 3 枚組**（`photo-trio`）: 大きい写真 1 枚の下に小さい写真 2 枚を並べ、すき間を 8px 取る - **準備中の紺パネル**（`coming-soon-box`）: 正方形の紺の面に、水色の欧文で準備中と表示する - **地図と航路線**（`map-callout`）: 黄緑の日本地図に色付きの点と線で航路を描き、白抜きの文字で説明を添える - **注釈**（`note-text`）: 白地に置く小さい紺系の文字で、予約に関する条件を書く ## Do's and Don'ts **Do** - 地色を海の深さに合わせて段階的に変える - セクション境界は波線か雲の形にする - キャラクターや泡を境界にまたがるように置く - 強調色は黄色・ピンク・黄緑の 3 色に絞る - ボタンは航路ごとに色分けする **Don't** - 黒や灰色の重い地は使わない - 角張った直線の区切りや鋭い角は使わない - 明朝体や細い書体で見出しを書かない - 写真に濃い影や装飾の枠を付けない - 赤い強調ボタンなど、強い訴求色は使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と開催期間を一目で伝える）: 空色の地に、ロゴを並べた行・丸いタイトル・日付を置く。キャラクターを散らし、雲と船のイラストを入れ、下端を深い海の青にする 2. **導入文**（企画の概要を説明する）: 濃い青の地に泡の装飾とタイトルを置き、白い文字を中央揃えにする。下にキャラクターを 1 体置く 3. **航路の紹介**（2 つの航路で同時開催することを示す）: 波線の下を水色の地にし、黄緑の地図と航路線、縁取りの強調見出しを置く 4. **船内の紹介（航路 A）**（客室や設備を写真で見せる）: 船イラストに航路ラベルを添え、写真の 3 枚組を置く 5. **船内の紹介（航路 B）**（もう一方の船の設備を見せる）: ターコイズの地にし、写真の 3 枚組を左右反対に寄せる 6. **企画の告知**（船内企画を予告する）: 淡い水色の地に、キャラクター・強調見出し・準備中の紺パネルを置き、下端を雲の形にする 7. **予約・問い合わせ**（航路別の予約と公式サイトへ誘導する）: 白地を縦線で 2 列に分け、船イラスト・航路名・色分けしたピル型ボタンを置く。下に注釈を入れる 8. **SNS 誘導**（最新情報をフォローしてもらう）: 前置きの一言を添えた見出しの下に、ピンクと黄緑の SNS ボタンを並べる 9. **締めのビジュアル・フッター**（世界観を余韻として残す）: ファーストビューのイラストを繰り返し、深い青の地にタイトル・日付・権利表記を置く ## Imagery - キャラクターはやわらかい紺の線と淡い色の塗りの手描きで描く。頬に赤みを入れ、制服などの衣装で役割を表す - 空はうすい水色から青へのグラデーションにし、白い雲をもこもこと重ねる - 船は白い船体に赤と黄色の太陽マークを入れ、太い線のフラットなイラストにする - 泡は白い丸を大・中・小と縦に連ねる - 施設の写真は明るい自然光のインテリア写真にし、加工は控えめにする - 地図は黄緑のシルエットに、色付きの点と細い曲線で航路を描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP と同じ縦長のカラム（幅約 30%）を中央に固定する - PC の左右の余白には、紺〜紫の星空と夜の海の背景を敷く - PC の左側にタイトルのロゴ、右側にコラボのロゴと丸いナビボタンを置く - 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-58ca5423`（元 LP の URL から採番） - **元 LP**: https://www.sunflower.co.jp/lp/chiikawa/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。