DESIGN.md — 濃紺×水色の波形ライン 船旅・観光 LP（Ocean Navy Wave Ferry Travel LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 清潔・爽やか、信頼・誠実、親しみ・手作り感、ポップ・元気
• キーワード: 海・波形・濃紺・空色・島旅・実用情報
• 地の質感: フラットな単色面に水彩調の淡い青グラデーションと手描き風イラストを重ねる
• 形: 波打つ有機的な境界線と、角丸カード・ピル型ボタン・円形写真
• 温度感: 爽やかでやや涼しく、親しみのある温度感

Colors

• 地色は白・空色・淡水色・生成りグレー・濃紺を交互にし、境界は波形で切り替える
• 見出し・ボタン枠・タグ・本文まで文字色は濃紺系で統一し黒は使わない
• 濃紺セクションでは白文字と白の角丸ボタンに反転する
• 黄緑は運航予報など1か所の強調ボタンだけに使う
• 黄色は数字や語の下線マーカーのみに使う
• 固定の予約バーはシアンで他と区別する
• button-cta-pill は文字 #FFFFFF × 背景 #84BB3C のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5B8129、4.55:1）を使う。
• sticky-reserve-bar は文字 #FAFCFE × 背景 #1596BD のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#127E9F、4.53:1）を使う。

Typography

• 各観光セクションは極太の欧文大見出しと和文キャッチの2段構成にする
• 実用セクションは線画アイコンを上に置き、中央揃えの和文見出しにする
• 日付は細めの縦長欧文書体で記事より目立たせる
• 本文は左揃え・行間広めにし、紺色で柔らかく見せる
• 数字は大きく斜めに配置し黄色の下線で強調してよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ボタンやサムネは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px で統一
• ショートカットボタンは 2×2 グリッドで並べる
• ニュースは点線で区切る縦リスト（日付→タグ→タイトル）
• 記事・おすすめはカルーセルで左右の矢印を付ける
• 各セクションの最後に中央寄せのピル型の詳細ボタンを置く

Elevation & Depth

• 影はほぼ使わず、色面の切り替えで階層をつける
• 運航情報カードは白の角丸面で空色地から浮かせる
• 固定の上戻るボタンだけ濃灰の円で軽い影をつける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 観光写真は円形で重ね、船・記事写真は角丸長方形
• セクション境界: ゆるやかな波形曲線。水面のように上下に揺らす
• セクション境界は直線にせず波形にする
• サブボタンは白地に濃紺の細枠のピル型で、右に>を付ける
• タグは角丸小さめの濃紺ベタ
• 港の選択ボタンは角なしの白い長方形

Components

• 枠線ピルボタン（button-outline-pill）: 白地に濃紺の2px枠、中央ラベルと右に矢印。各セクションの詳細へ誘導する
• 強調ピルボタン（button-cta-pill）: 黄緑のベタ塗りに白い太字と矢印
• 運航状況カード（status-card）: 濃紺のピル型見出しバーの下に白地で状況文を出すカード
• 航路切替タブ（route-tab）: 円形の状態アイコン・小ラベル・航路名を縦に並べ、選択中は白、それ以外は灰
• アイコン付きショートカット（icon-shortcut）: 淡灰の角丸ボタンに線画アイコンとラベルを並べ、2×2 で配置
• カテゴリタグ（tag-label）: 濃紺ベタに白の小さな太字。記事の分類を表す
• ニュース行（news-item）: 上下を点線で区切り、日付・タグ・紺文字の見出しを縦に積む
• アイコン見出し（section-icon-heading）: 濃紺の線画アイコンと和文見出しを中央に縦に並べる
• 固定予約バー（sticky-reserve-bar）: 画面下に固定したシアンの帯。タップするアイコンと白文字で予約・ログインへ導く

Do's and Don'ts

Do - セクションの切り替わりは必ず波形で入れ、海らしさを出す - 文字色は濃紺系でそろえ、濃色帯では白に反転する - 観光セクションは欧文の極太見出しと円形写真を組み合わせる - 実用情報はアイコン付き2列グリッドで、タップしやすく大きくする - ボタンはピル型・右矢印付きに統一する

Don't - 真っ黒の文字や暗いグレーの地を使わない - 直線の境界ばかり並べない - 黄緑や黄色を広い面に使わない - 影の強いカードや立体的な装飾を入れない - 明朝体の見出しを混ぜて格式張らせない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー・ファーストビュー（ブランドと行き先を一目で伝える）: 濃紺の波形ロゴ領域、言語切替、SNS丸アイコン。海の写真に島と航路の白い地図を重ね、下端は波形
2. 運航情報（当日の運航状況と主要機能へすぐ案内する）: 空色地に状況カード、航路タブ、2×2のショートカット、黄緑の予報ボタン
3. おすすめ情報（キャンペーンや企画を紹介する）: 星アイコン見出し、角丸画像のカルーセル、タグ・日付・タイトル
4. 動画バナー（旅情を喚起する）: 夕景の写真に再生アイコンと円弧状の欧文を重ねる
5. アクセス（所要時間と行きやすさを示す）: 濃紺地に白線の日本地図と点線の経路。斜めの大きな数字に黄色の下線、白いピルボタン
6. 旅行紹介（島の自然と文化の魅力を伝える）: 円形の写真と花の切り抜き、極太の欧文見出し、本文、写真の角丸バナー
7. 船の紹介（船の種類を比べて選ばせる）: 水彩の青い地、欧文見出しと問いかけ、2×2 の船写真、枠線ボタン
8. ショッピング（お土産の通販へ誘導する）: 円形の料理写真を重ね、欧文見出しと濃紺のストアバナー
9. ターミナル案内（各港の情報へ案内する）: 濃紺の波形の帯に航路名、点線の区切り、白い港ボタンを2列
10. 読み物メディア（社員目線の旅情報を届ける）: マスコットのロゴ、中央揃えの紹介文、記事カルーセル、黒いタグ
11. ニュース（お知らせを一覧で見せる）: 生成りグレー地、ベルのアイコン見出し、点線で区切ったリスト、もっと見るボタン
12. 関連施設・リンク集（周辺施設や関連サイトへ送客する）: 細枠の白いロゴ枠を2列、その下に水彩の地にバナーを2列。下端は里山のイラスト
13. フッター（会社情報とSNS、固定予約導線）: 枠線ピルのリンク2本、濃紺地に白ロゴ・住所・SNS丸アイコン、下にシアンの固定バー

Imagery

• 青い空と海が広がる明るい晴天の風景写真を使う
• 観光写真は円形に切り抜き、花や料理を切り抜いて縁からはみ出させる
• 水彩風の手描きイラスト（里山・人物・カモメ）を背景や角に添える
• 地図は濃紺地に白い線画と点線の航路で描く
• アイコンは濃紺の細い線画で、一部に水色の差し色を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにアイコン付きのグローバルナビを横に並べる
• PC はおすすめや記事のカードを3列にし、リンク集は5列にする
• PC は欧文見出しと写真を左右に並べる2カラム
• PC は運航ステータスを横長の1行バーにする
• PC は余白にカモメや人物のイラストを散らす
• 予約バーは PC では右端に固定した縦長のタブにする

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。