DESIGN.md — 紺×水色リボンの手書きノートアプリ LP（Navy and Sky Ribbon Digital Notes App LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、清潔・爽やか、シンプル・ミニマル
• キーワード: 手書き感・リボン曲線・濃紺の没入面・角丸カード・デバイス訴求・学生向け
• 地の質感: フラットで質感なし。写真とデバイス画像が主役で、太い曲線ストロークで動きを出す
• 形: 大きめ角丸の写真カード、ピル型ボタン、セクションを横切る自由曲線
• 温度感: クール寄り。黄色のリボンで少しだけ温かみを足す

Colors

• 地は白→濃紺→白→ベージュ→淡いブルー→黒の順に大きな帯で切り替える
• 濃紺面では見出しを純白にせず淡いグレーで落ち着かせる
• CTA は水色のピル型に統一し、他の色を使わない
• 水色・黄色はリボン曲線とボタンに限定し、面には塗らない
• フッターはほぼ黒で締め、文字は白とグレー
• button-primary は文字 #FFFFFF × 背景 #45C2E3 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#17809B、4.57:1）を使う。
• email-form は文字 #708195 × 背景 #BBCCE0 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 見出しは太字ゴシックで大きく、2〜3 行に折り返す
• 本文は小さめで行間広め、説明は 2〜3 行に抑える
• 装飾書体は使わず、手書き感は画像とリボンで表現する
• 日付やカテゴリは小さな色付きラベルで添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は特長がテキストと画像の左右交互 2 カラム、記事カードは 3 カラム）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
• FV は角丸の大きな写真パネルに見出しとストアボタンを重ねる
• 特長はテキストと画像を交互に配置する
• リボン曲線は余白とセクション境界をまたいで流す
• CTA 帯は中央寄せで見出し・一文・ボタン列

Elevation & Depth

• 影はほぼ使わずフラット
• デバイス画像のみ柔らかい落ち影
• カードは影なしで角丸写真のみで区切る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 大きめ角丸の矩形。少し傾けた配置も混ぜる
• セクション境界: 直線で色帯を切り替え、曲線リボンが境界をまたぐ
• ボタンはすべてピル型
• 写真は 12〜20px の角丸
• 直角の写真は使わない

Components

• FV 写真パネル（hero-photo-panel）: 人物写真を大きな角丸パネルに入れ、左下に白文字見出しとストアバッジを重ねる
• 水色ピル CTA（button-primary）: OS アイコン付きの水色ピルボタン、横に並べる
• ストアバッジ（store-badge）: 黒地の角丸アプリストアバッジとアイコンボタン列
• リボン曲線（ribbon-stroke）: 水色・黄色の太い自由曲線がページを横断する装飾
• 特長ブロック（feature-row）: 濃紺地に淡色見出し＋短文と角丸写真を左右交互
• 記事カード（article-card）: 角丸サムネイル、色付きカテゴリ、太字タイトル、要約、日付
• メール登録フォーム（email-form）: 淡いブルー地に下線のみの入力欄と小さめピルボタン
• 黒フッター（dark-footer）: SNS アイコン列と多列リンク

Do's and Don'ts

Do - 白と濃紺の大きな帯を交互に置いてリズムを作る - 水色・黄色の太いリボン曲線を画像の背後に通す - 写真とデバイス画像は大きめの角丸で切り抜く - CTA は水色ピルで統一し、OS アイコンを添える - 見出しは大きく太く、本文は短く

Don't - グラデーションや強い影で立体感を出さない - CTA に赤やオレンジなど別の強調色を使わない - 濃紺面に真っ白な大見出しを多用しない - 直角の写真や細い枠線のカードを使わない - 本文を長文で詰め込まない

Page Structure

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

1. ヘッダー（ナビと DL 導線）: 白地にロゴ、メニュー、右端に水色ピルボタン
2. ファーストビュー（価値を一言で伝える）: 角丸の人物写真パネルに白見出し、ストアバッジ、水色リボンが外にはみ出す
3. 製品ビジュアル（画面イメージを見せる）: タブレット画面を中央に大きく、黄色リボンと傾けた角丸写真を周囲に
4. 特長（機能を 3 つ紹介）: 濃紺地でテキストと角丸写真を左右交互、最後に水色ピル CTA
5. 選ばれる理由・記事（活用例で信頼を補強）: 白地に大見出しと記事カード 3 枚
6. CTA（OS 別に試用を促す）: ベージュ帯に中央見出しと水色ピル 3 つ
7. 法人向け案内（ビジネス利用のリード獲得）: 淡いブルー帯、右寄せのグレー大見出しとメールフォーム
8. フッター（リンク網羅）: 黒地に SNS と多列リンク、下部に Cookie バナー

Imagery

• 明るい自然光の室内で、タブレットに手書きする人物写真
• タブレット画面に手書きのイラスト・図解ノートを映す
• ペン先と画面のクローズアップを角丸で切り抜く
• 色付きフォルダアイコンが並ぶ UI のイメージ
• 太い単色の自由曲線（水色・黄色）を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では特長の左右交互を画像→テキストの縦積みにする
• 記事カードは 3 列から横スクロールまたは 1 列に
• FV 写真パネルは縦長にトリミングし、見出しは 30〜34px
• リボン曲線は線幅を細めにして本文に重ねない
• OS 別ボタンは横並びのまま折り返し可

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