--- version: alpha name: Sky Blue Handwritten Memory Contest LP description: 雲の浮かぶ空色の背景に、黒い手書き風見出しと線画イラスト、黄色のアクセントを組み合わせた、やわらかく親しみやすい投稿キャンペーン LP。丸写真のコラージュ、雲形の吹き出し見出し、線で縁取ったカードで「思い出」の温かさを伝える。 colors: background: '#C7E8FB' primary: '#2E7BC4' surface: '#FEFEFE' cta: '#FDF201' on-cta: '#222222' background-alt: '#FEF69A' accent-1: '#FEF254' secondary: '#A2D2F3' text: '#222222' line: '#222222' text-muted: '#47606C' marker: '#FEF69B' accent-2: '#1F6FB0' typography: display: fontFamily: Yomogi fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Klee One fontSize: 28px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Klee One fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 2.4 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Yomogi fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 38px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 38px heading-underline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px heading-cloud: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 340px prize-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 40px arrow-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 70px illust-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px --- # DESIGN.md — 空色×手書き線画のエピソード募集 LP（Sky Blue Handwritten Memory Contest LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、清潔・爽やか、かわいい - **キーワード**: 空色・雲・手書き見出し・線画イラスト・黄色アクセント・丸写真コラージュ - **地の質感**: 水彩風の空と白い雲を全面に敷いたやわらかい質感。最下部は黄色と白の斜めストライプ。 - **形**: 雲形の吹き出し、角丸の黒線カード、円形の写真、手書きの下線。 - **温度感**: 明るく爽やかで温かい。夏空のような軽さ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#C7E8FB` | 空色の全面背景 | 55% | 画素の実測 | | `primary` | `#2E7BC4` | ロゴ・キャッチの青 | 2% | 推定 | | `surface` | `#FEFEFE` | カード・雲の白 | 7% | 画素の実測 | | `cta` | `#FDF201` | 応募ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#222222` | 応募ボタンの文字 | 0% | 推定 | | `background-alt` | `#FEF69A` | 大賞カードの淡黄 | 6% | 画素の実測 | | `accent-1` | `#FEF254` | 最下部ストライプの黄 | 5% | 画素の実測 | | `secondary` | `#A2D2F3` | 年度ボタン・帯の水色 | 2% | 画素の実測 | | `text` | `#222222` | 見出し・本文の黒 | 3% | 推定 | | `line` | `#222222` | カードの黒枠線 | 0% | 推定 | | `text-muted` | `#47606C` | 注意事項の灰文字 | 3% | 画素の主要色に補正 | | `marker` | `#FEF69B` | テーマ見出しの黄マーカー | 0% | 画素の実測 | | `accent-2` | `#1F6FB0` | リンク文字の青 | 0% | 推定 | - 地は常に空色＋白い雲で、セクションごとに色を切り替えない。 - 強調は黄色系に限定し、CTA・大賞・マーカーに使う。 - 通常カードは白地に黒線、特別なカードは淡黄地に黒線。 - 文字は黒が基本、長い注意事項は灰青で弱める。 - ブランドの青はロゴとキャッチコピーだけに使う。 - 最下部の紹介セクションだけ黄色の斜めストライプにする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風タイトル・手書きキャッチ | 手書き・筆 | Yomogi | 700 | 22px | 1.5 | 0.05em | | `headline-lg` | 下線付きの手書きセクション見出し | 手書き・筆 | Klee One | 600 | 28px | 1.3 | 0.05em | | `headline-md` | 雲形吹き出し内の小見出し | 手書き・筆 | Klee One | 600 | 18px | 1.4 | 0.1em | | `headline-sm` | カードの中の見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.05em | | `body-md` | 中央揃えのリード文・本文 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 2.4 | 0.05em | | `note` | 注意事項・注釈 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.9 | 0.03em | | `accent` | イラストの吹き出し内セリフ | 手書き・筆 | Yomogi | 400 | 10px | 1.5 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.2 | 0.05em | - 大見出しは手書き書体にし、手書きの太い黒い下線を引く。 - 本文は細めのゴシックで中央揃え、行間をとても広く(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 ```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-2b2b44b2`（元 LP の URL から採番） - **元 LP**: https://sunshinecity.jp/file/official/andcity/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。