DESIGN.md — 空色×手書き線画のエピソード募集 LP（Sky Blue Handwritten Memory Contest LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、清潔・爽やか、かわいい
• キーワード: 空色・雲・手書き見出し・線画イラスト・黄色アクセント・丸写真コラージュ
• 地の質感: 水彩風の空と白い雲を全面に敷いたやわらかい質感。最下部は黄色と白の斜めストライプ。
• 形: 雲形の吹き出し、角丸の黒線カード、円形の写真、手書きの下線。
• 温度感: 明るく爽やかで温かい。夏空のような軽さ。

Colors

• 地は常に空色＋白い雲で、セクションごとに色を切り替えない。
• 強調は黄色系に限定し、CTA・大賞・マーカーに使う。
• 通常カードは白地に黒線、特別なカードは淡黄地に黒線。
• 文字は黒が基本、長い注意事項は灰青で弱める。
• ブランドの青はロゴとキャッチコピーだけに使う。
• 最下部の紹介セクションだけ黄色の斜めストライプにする。

Typography

• 大見出しは手書き書体にし、手書きの太い黒い下線を引く。
• 本文は細めのゴシックで中央揃え、行間をとても広く(2.4)とる。
• キャッチコピーは青い手書き書体で少し右上がりに傾け、行ごとに下線を引く。
• カード内の見出しは太めのゴシックを中央揃えにする。
• 注意事項は左揃えにし、黒丸の箇条書きで並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。例示イラストだけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し・本文・カードはすべて中央軸にそろえる。
• セクション間は雲の背景だけで区切り、余白を広くとる。
• フローはアイコン→見出し→説明→下矢印の順で縦に並べる。
• 賞品カードの間には下向き矢印の帯を入れてつなぐ。
• 注意事項の後の個人情報欄は上下を細い罫線で区切る。

Elevation & Depth

• 影はほぼ使わない。カードは黒線＋右下に白いずらし面を置いた疑似立体にする。
• ボタンは下に水色の薄い帯を敷き、浮いて見せる。
• 雲は半透明の白で、奥行きを出す。

Shapes

• 角丸: 小 2px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: FV は円形の写真コラージュ、紹介セクションは正方形に近い角型写真
• セクション境界: 境界線は引かず雲の背景で連続させる。最下部だけ黄色ストライプの面に切り替える
• カードは角丸 20px で黒の 1.5px 線を引く。
• 小見出しは手描きの雲形吹き出しで囲む。
• ボタンは角丸なしの長方形で、右端に「>」を付ける。
• 賞のラベルは角丸の小さなタグをカード上辺に重ねる。

Components

• 応募ボタン（button-primary）: 黄色の長方形で、文字は中央、右に矢印。下に水色の影帯を付ける
• 年度リンクボタン（button-secondary）: 水色の長方形を 2 つ横に並べ、右に矢印を付ける
• 手書き下線見出し（heading-underline）: 手書き書体の大見出しに、太い黒の手描き下線を斜めに引く
• 雲形吹き出し見出し（heading-cloud）: 白い雲形を黒の手描き線で縁取り、中に小見出しを置く
• 賞品カード（prize-card）: 白または淡黄の角丸カードに黒線を引き、上辺にラベルのタグを重ね、中に線画を置く
• 賞ラベルタグ（prize-tag）: アイコン付きの小さな角丸タグ。賞の種類で水色と黄色を使い分ける
• 下向き矢印帯（arrow-band）: カードの間に置く水色の五角形矢印。中につなぎの一言を入れる
• イラスト＋吹き出し（illust-bubble）: 人物の線画の上に、白い雲形吹き出しで手書きのセリフを添える
• 黄マーカー見出し（marker-heading）: かぎ括弧付きの太字テーマに、下半分だけ黄マーカーを引く

Do's and Don'ts

Do - 背景には雲の浮かぶ空色を全体に敷きつめる。 - 見出しは手書き書体と手描きの下線・雲枠で作る。 - イラストは黒線に黄・オレンジ・白の少ない色を入れる。 - 本文は中央揃えにして行間を広くとり、余白を多めにする。 - 強調とCTAは黄色だけで目立たせる。

Don't - 濃い単色のベタ面や暗い背景を使わない。 - 強いドロップシャドウやグラデーションのボタンを使わない。 - 見出しを硬い太ゴシックだけで作らない。 - 赤などの強い警告色で煽らない。 - セクションごとに背景色を変えて、流れを途切れさせない。

Page Structure

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

1. ファーストビュー（企画名と募集期間を印象づける）: 中央に大きな雲形を置いて青いロゴを載せ、周りに円形写真を散らす。右上に黄色の丸バッジで期間を示す
2. キャッチ・リード（参加を呼びかける）: 青い手書きキャッチを 3 行、下線付きで傾けて置く。その下に中央揃えの本文
3. 募集テーマ（何を投稿するかを示す）: 手書き下線の大見出し、雲形の小見出し、黄マーカーのテーマ、説明文の順
4. 投稿例（投稿のイメージを広げる）: 線画の人物シーンを 2 列×3 段で並べ、それぞれに手書きの吹き出しを付ける
5. 賞品（特典の魅力を伝える）: 白カード→矢印帯→淡黄カードの順で、賞の格が上がるように見せる
6. 過去作品リンク（実績を見せる）: 白い枠カードに年度別の水色ボタンを 2 つ並べる
7. 募集期間（締切を明示）: 雲形見出しの下に日付を 1 行で大きめに置く
8. 応募の流れ（手順を理解させる）: 線画アイコン・見出し・説明を縦に並べて矢印でつなぐ。1 段目に黄色の応募ボタン
9. 注意事項（規約を伝える）: 黒丸の箇条書きを灰文字で並べ、個人情報欄を罫線で囲む
10. お問合せ（連絡先を示す）: 手書き見出しの下に、中央揃えで連絡先と下線リンク
11. 企画紹介（活動の背景を伝える）: 黄色の斜めストライプ地に街の写真を置き、白マーカー付きの手書き見出しと本文を続ける

Imagery

• 人物イラストは均一な黒の細い線で描き、黄・オレンジ・ベージュを少しだけ塗る。
• アイコンはスマホ・メダル・筆・拍手などを手描きの一筆書き風にする。
• 写真は明るい日中の街・水族館・展望台など。円形に切り抜いてランダムな大きさで散らす。
• 背景の雲は水彩風の白で、ページ全体に不規則に配置する。
• キラキラや汗マークなどの手描き記号を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも 1 カラム中央寄せのままにし、コンテンツ幅は約 60% に抑える。
• PC の投稿例イラストは 3 列×2 段にする。
• PC の応募の流れは、左にアイコン・右に説明の横並びにする。
• PC の企画紹介は写真左・テキスト右の 2 カラムにする。
• PC の FV は円形写真を左右に広く散らし、中央の雲ロゴを主役にする。

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