DESIGN.md — 深緑×黄緑の手描きキャラクター紹介 LP（Teal and Lime Character Introduction LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: かわいい、親しみ・手作り感、ポップ・元気、やさしい・柔らかい
• キーワード: キャラクター・手描き線・円形パネル・ティール×黄緑・クリーム地・方眼ノート
• 地の質感: クリーム地にうっすら水彩のむらと足あとの模様。HISTORY は方眼紙のテクスチャ、SNS カードはドット柄
• 形: 大きな円形パネル、角丸カード、ピル型ボタン、ゆるい弧のセクション境界
• 温度感: あたたかく明るい。清潔感もある

Colors

• 地はクリームと白の 2 種。キャラ紹介はクリーム、沿革以降は白にする
• 円形パネルはティールと黄緑を交互に並べる
• 濃い色の面の上の文字は白。白い下線を行ごとに引く
• ティールの帯はページの最初と最後に置いて全体をはさむ
• 黄緑はボタンの影・ページトップ・アイコンの縁に少しだけ使う
• 赤や青などの強い原色は、小さなイラスト装飾にだけ使う
• page-top は文字 #EDFEFE × 背景 #BBC20B のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#737707、4.62:1）を使う。

Typography

• 全体を太めの丸ゴシックでそろえて、やわらかい印象にする
• 英字見出しは極太にし、白い面＋ティールの縁取り 2 重で立体的に見せる
• 英字見出しの左上に、帽子をかぶった吹き出しラベルを小さく重ねる
• 円形パネル内の文は 1 行を短くして、行ごとに白い下線を引く
• 本文の行間は 2.0 以上でゆったりとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形パネルは左右に少しずらしてジグザグに配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• キャラの小円と文章の大円を重ねて 1 組にする
• 組と組の間は足あとの模様と小物イラストでつなぐ
• 沿革カードは画面幅いっぱい近くまで広げ、片側をリング綴じ風にする
• ティールの帯の上に白い角丸カードを縦に積む
• 見出しは中央ぞろえ、本文は左ぞろえ

Elevation & Depth

• 影はほとんど使わず、フラットな面と線で見せる
• ボタンやアイコンの下に黄緑のずらし影（ベタ塗り）を敷く
• 円形パネルの中にキャラの影シルエットを同系の濃い色で薄く入れる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: キャラは白い円の中に入れ、円の縁にはティールか黄緑の太い枠をつける
• セクション境界: ゆるい上向きの弧で地の色を切り替える
• 主役の形は正円にする
• カードは角丸 16〜24px
• リボン型ラベルは片側を矢羽根にカットする
• 線は少しラフな手描きのにじみ線にする

Components

• 縁取り英字見出し（section-title）: 極太の英字を白抜き＋ティールの太い縁で描き、左上に帽子つき吹き出しラベルを重ねる
• 円形テキストパネル（circle-panel）: 直径 300px 前後の円。白文字の短文を下線つきで並べ、キャラの小円と重ねる
• キャラ円バッジ（character-badge）: 白い円に太い色枠。中にポーズ違いのキャラを入れる
• 方眼ノートカード（history-card）: 方眼紙の地にティールの細い枠。左右どちらかをリング綴じ風に波打たせ、イラストとリボン見出し・本文を入れる
• リボン見出し（ribbon-label）: ティールの帯に白文字。右端を矢羽根にカットする
• ピル型ボタン（button-primary）: 白地にティールの枠と文字。下に黄緑のずらし影、右端に外部リンクの小アイコン
• SNS 丸アイコン（sns-circle）: ティールの正円に白いロゴ。下に黄緑の影
• 誘導カード（info-card）: 白い角丸カード。上部は黄緑の地に「？」の模様、キャラとボタンを入れる
• ページトップ（page-top）: 黄緑の正円に白い三角。上に英字を弧状に並べる

Do's and Don'ts

Do - 色はティール・黄緑・クリーム・白の 4 色を軸にする - 情報は円や角丸の中に短い文で入れる - 余白には薬・実験器具・花などの小さな手描きイラストを散らす - ボタンとアイコンには黄緑のずらし影をつける - キャラは毎回ちがうポーズで登場させる

Don't - 写真や、リアルな質感の画像を使わない - 角ばった四角の箱だけでレイアウトを組まない - 細い明朝体や硬い書体を使わない - 円形パネルに長い段落を詰め込まない - グラデーションやぼかし影を多用しない

Page Structure

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

1. ファーストビュー（キャラクターとタイトルを印象づける）: ティールの幕が開いた舞台のイラスト。中央にキャラ、上に手描きのロゴ、紙吹雪を散らす
2. ナビゲーションボード（SNS と解説ページへ誘導する）: 看板風の白い枠の中に SNS 丸アイコンとピル型ボタンを横に並べる
3. プロフィール（キャラの設定と性格を伝える）: クリーム地に縁取りの英字見出し。円形パネルとキャラ円をティールと黄緑で交互に重ね、ジグザグに 6 組ほど並べる
4. 沿革（キャラの代替わりの歴史を見せる）: 弧で白地に切り替え、方眼ノートのカードを世代ごとに縦に並べる
5. メッセージ（企業の思いをまとめる）: 白地の中央に、集中線つきのティール見出しと太字のリードを置く
6. 誘導カード（解説ページへ送る）: ティールの帯の上に、黄緑の上部・キャラ・ピル型ボタンを入れた白カードを置く
7. SNS（フォローを促す）: ドット柄の白カードに吹き出しラベル、縁取りの英字、丸アイコン 2 つを入れる
8. フッター（企業情報と規約へのリンク）: 白地の中央にロゴ、リンクを縦に並べ、最後に著作権表記

Imagery

• キャラは太い黒の手描き線にフラットな塗り。少しラフな線にする
• 小物（試験管・錠剤・本・アメ・花・音符）は少しだけ傾けて散らす
• 背景は淡いクリームの水彩むらに、くすんだ黄緑の足あとの点線を描く
• 白地には錠剤やカプセルの線画を薄いミント色で透かして入れる
• 円形パネルの中には、キャラの影を同系の濃い色で大きく入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央に幅 900px ほどの帯を置き、円の組をジグザグに大きく振る
• PC のファーストビューは横長の舞台にし、ナビは右上の小さな看板にまとめる
• PC の沿革カードは横長にし、イラストと本文を左右に並べる
• PC の誘導カードは横長にし、文字・ボタンを左、キャラを右に置く
• SP は円パネルを幅の 80% ほどにして縦に積む

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