DESIGN.md — 青緑地×若草色のホテルアプリ案内LP（Teal and Leaf Green Hotel App Guide LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、信頼・誠実
• キーワード: 青緑の全面背景・白カード積み・番号ステップ・マスコット・黄色の吹き出し・斜線ストライプ
• 地の質感: フラットな単色面。見出し下に細かい斜線ストライプの帯を敷く
• 形: 角の立った白カード。番号は黄色の丸、吹き出しは雲形
• 温度感: 明るく爽やかで、親しみやすい

Colors

• 地は全面青緑で固定し、内容は白カードで載せる
• 見出し帯・FAQ行・強調語は若草色に統一する
• 黄色は番号丸・吹き出し・青緑地上のキャッチだけに使う
• 見出し文字は濃い紺青、本文はダークグレー
• 注意事項は白カードにせず、青緑地に細い白枠と白文字で置く
• CTAは黒の公式ストアバッジを並べる
• heading-band は文字 #FFFFFF × 背景 #8CC66C のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4F8233、4.59:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #8CC66C のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4F8233、4.59:1）を使う。
• notice-box は文字 #FFFFFF × 背景 #05A5C5 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#048098、4.62:1）を使う。

Typography

• キャッチは字間を広く取り、太字ゴシックで組む
• 強調語だけ若草色に変える
• ステップ番号は細めの欧文数字を大きく置き、上に小さな英字ラベルを添える
• 本文は中央揃えか左揃えの短い行にする
• FAQの質問文は若草色の上に白の太字で書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順は SP で縦積み、PC は 3 列横並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードを青緑地の上に縦に重ね、カード間は24〜32px
• 手順の間に若草色の「>」矢印を入れる
• 見出しの直下に斜線ストライプの帯を敷く
• マスコットはカード右上にはみ出させて置く
• FAQは行間8pxで若草色の行を縦に並べる

Elevation & Depth

• 影は基本使わず、フラットな面のみで組む
• 画面写真には細いグレーの枠線を付ける

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: アプリ画面は角を立てた長方形で切り抜く。キャラクターは背景を抜く
• セクション境界: 白カードと青緑地の直線の境界
• カードとFAQ行は角丸なしか、ごく小さい角丸
• 番号は黄色の正円
• 特長は黄色の雲形吹き出しで見せる
• ストアバッジは公式の角丸形状を使う

Components

• アプリストアバッジ（button-store）: 黒い公式ストアバッジを2つ横に並べる。カード内では薄グレー枠の中に置く
• 若草色キャッチ帯（heading-band）: カード上端にかかる若草色の帯。白文字を鉤括弧でくくり、字間を広く取る
• 番号付きステップ見出し（step-heading）: 英字ラベル付きの大きな番号と紺青の見出しを並べ、下に斜線ストライプを敷く
• 黄色の番号丸（step-number）: 手順ごとに黄色の円に数字を入れ、画面写真の左上に配置する
• 雲形の特長吹き出し（feature-bubble）: 黄色の雲形の中に大きな1文字と短い説明を入れ、2つ並べる
• FAQアコーディオン（faq-item）: 若草色の行の左にQ、右に黄色の＋を置き、間を縦線で区切る
• 注意事項ボックス（notice-box）: 青緑地に細い白枠を引き、アイコン付きの見出しと四角い箇条書きを白文字で載せる
• 電車型3ステップ図（flow-banner）: 黄色の車体の窓に3手順のアイコンを並べ、マスコットを横に添える

Do's and Don'ts

Do - 地は全面青緑にして、白カードで区切る - 手順は番号・画面写真・短い説明の3点セットで見せる - マスコットを各セクション見出しの右上に繰り返し登場させる - 強調は若草色と黄色の2色だけで行う - 見出し下には斜線ストライプを入れて統一感を出す

Don't - 写真の背景やグラデーションを地に使わない - 赤やピンクなど系統の違う強調色を足さない - カードに強い影や大きな角丸を付けない - 長い文章を一段落に詰め込まない - FAQを白地のテキスト羅列にしない

Page Structure

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

1. ファーストビュー（サービス名と価値を一目で伝える）: 青緑地にロゴ風の極太文字とマスコット、黄色のサブコピー、電車型の3ステップ図を置く
2. サービス概要（何ができるかを説明する）: 白カードの上部に若草色のキャッチ帯。2つの雲形吹き出しと行列を描いたイラスト、中央揃えの説明文を続ける
3. 導入告知（対象施設と提供開始を知らせる）: 白カードに若草色の太字で施設名を3行ほど中央揃えにし、小さな注釈を添える
4. 手順1（アプリのダウンロードを促す）: 番号見出し、アプリアイコン、薄グレー枠に入れたストアバッジ2つ
5. 手順2（事前登録の流れを示す）: 説明文のあと、黄色の番号丸付きの画面写真3枚を矢印でつなぐ
6. 手順3（当日の操作を示す）: 見出しの一部を若草色にし、機械と画面の写真3枚を並べる
7. 締めのメッセージ（体験の価値を情緒的に伝える）: 青緑地に黄色の字間広めのキャッチと、マスコットのペアのイラスト
8. 対応施設一覧（使える場所を示す）: 白カードに建物アイコン付きの見出しと、若草色のリンクリスト
9. 注意事項（利用条件を伝える）: 白枠線のボックスに白文字の箇条書き
10. よくある質問（疑問を解消する）: 若草色のアコーディオン行を10行以上縦に並べる
11. CTA（アプリのダウンロードを促す）: 小見出しと黄色の集中線を添えたキャッチ、黒いストアバッジ2つを中央に置く

Imagery

• 鳥モチーフのマスコットを、太い線と平塗りで描いたゆるいイラストにする
• 人物は線画にくすんだ色を少しだけ塗るフラットなイラストにする
• アプリ画面は実際の画面キャプチャを枠付きで載せ、タップする指アイコンを重ねる
• 機械の操作写真は正面から寄って明るく撮る
• 青緑・若草色・黄に合わせた単純なアイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは白カードを中央幅約760pxで組み、左右に青緑地を見せる
• SPはカードを画面幅の92%にし、左右の余白は約14px
• 手順の画面写真はPCで3列横並び、SPでは縦積みにして矢印を下向きにする
• 特長の吹き出しはSPでも2列のまま縮小する
• FAQの文字はSPで14px程度にし、＋アイコンは右端に残す

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 行書くと起動時に読み込まれる。