DESIGN.md — 山吹×焼き色の絵本アニメ公式 LP（Warm Bakery Picture-Book Anime LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、親しみ・手作り感、ポップ・元気、やさしい・柔らかい
• キーワード: 焼きたてパン・絵本・手書き文字・食パン形・ギンガムチェック・ひらがな多め
• 地の質感: 紙っぽいざらつきとギンガムチェックの地。リアルなパン写真の切り抜きを周りに散らしている
• 形: 食パンのシルエット枠、吹き出し、波形の区切り、角丸カード、ピル型ラベル
• 温度感: 暖色だけでまとめた、焼きたてのような温かい色調

Colors

• 地は山吹色とクリーム色のギンガムチェックを交互に使い、フッターだけ焼き色ブラウンにする
• ボタン・ラベル・矢印・日付など、操作や強調には朱色だけを使う
• 文字はこげ茶が基本。黒は使わない
• 青は放送告知の吹き出しなど、1〜2か所の目立たせたい所だけに使う
• 寒色やグレーの面は作らず、暖色でまとめる
• speech-bubble は文字 #FFF3E9 × 背景 #1C7CCA のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1A74BD、4.5:1）を使う。
• pill-label は文字 #FFF3E9 × 背景 #E84711 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CB3E0F、4.54:1）を使う。
• sns-tab は文字 #1C7CCA × 背景 #FEEAC5 のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1A74BD、4.53:1）を使う。

Typography

• 見出しは日本語の手書き丸文字を大きく置き、その下に朱色の英字を小さく添える
• 見出しの左右か肩に、手描きの集中線（3本線）を付ける
• 本文はひらがなを多めにし、漢字にはふりがなを付ける
• 紹介文は文節ごとに空白を入れ、絵本のように分かち書きする
• 文字はすべて太め。細い書体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。絵本カードとナビは 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えが基本。動画とお知らせは左揃えでも可
• セクションの周りに切り抜いたパンの素材を散らし、画面の端にはみ出させる
• お知らせはリングノート型の大きなパネルの中に並べる
• スタッフ紹介は、朱色のピル型の役職ラベルの下に名前を置く
• フッターは、ナビカード・SNSの丸ボタン・バナーの順に縦へ積む

Elevation & Depth

• 影はほとんど付けず、平らに仕上げる
• カードには濃いクリームの太い縁取りで段差を出す
• 切り抜いたパン写真には、ごく淡い落ち影だけ付ける

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 食パンのシルエット形のマスクと角丸の四角。キャラクターは切り抜き
• セクション境界: クリームと山吹の間は波形、フッター上はスカラップ形
• メインビジュアルと動画は食パン形の枠に入れる
• 告知は吹き出し形にする
• 丸い朱色のボタンに白い矢印を入れたアイコンを、カードの右下に重ねる
• ナビカードの左上に、丸いアイコンバッジを半分はみ出させる

Components

• 手書き見出し＋英字ラベル（heading-handwritten）: こげ茶の手書き丸文字の下に朱色の英字を添え、左右に手描きの集中線を付ける
• 食パン形フレーム（bread-frame）: 焼き色の太い縁取りがある食パンのシルエット。中に動画やビジュアルを入れ、中央に朱色の再生ボタンを置く
• 告知の吹き出し（speech-bubble）: 青い吹き出しに白い太文字で日付と告知を書き、ふりがなを付ける
• リングノート風のお知らせ（notebook-panel）: 生成りの面の左端に茶色のリングを並べる。日付は朱色、項目の間は点線で区切り、右端に丸い矢印を置く
• 役職ピルラベル（pill-label）: 朱色のピル型に白い太字の役職名を入れ、下にこげ茶で名前を置く
• 絵本カード（book-card）: 白地の角丸の表紙画像の右下に朱色の丸い矢印を重ね、下に中央揃えでタイトルを置く
• フッターナビカード（footer-nav-card）: 淡いクリームのカードに太い縁取りを付け、左上に朱色の丸アイコンを重ねる
• SNSタブ（sns-tab）: 左端に青か黒の色帯がある白いタグ形のボタン。少し傾ける

Do's and Don'ts

Do - 見出しは手書き風の丸文字にし、英字ラベルと集中線を添える - パンや動物パンの切り抜き素材を、画面の端からはみ出すように散らす - 地の色は山吹とクリームのチェックを交互に切り替え、間を波線でつなぐ - 朱色の丸い矢印をリンクの目印として統一する - ふりがなとひらがなを使い、子どもでも読める表記にする

Don't - 黒い文字や寒色の大きな面は使わない - 細い明朝体や、角の立ったシャープなデザインにしない - 影の強いカードやグラデーションのボタンを使わない - 四角い直線の区切りで硬い印象にしない - 文字を詰め込みすぎず、行間は広めにとる

Page Structure

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

1. ファーストビュー（作品の世界観と放送の告知を伝える）: 中央にロゴ、右上に丸いメニューボタン。食パン形の枠にキービジュアルを入れ、青い吹き出しで告知し、縦書きのキャッチを添える
2. 最新映像（すぐに映像を見てもらう）: 朱色の手書き見出しの下に、食パン形のサムネイルと朱色の再生ボタンを置く
3. トピックス（注目の話題を横に流して見せる）: 食パン形のカードを横スライドで並べ、右下に＋ボタン、下にキャプションを置く
4. お知らせ（更新情報を一覧で見せる）: リングノート風のパネルに、日付・タイトル・矢印を点線で区切って並べる。最後にもっとみるリンクとSNSタブを置く
5. 作品紹介（キャラクターとあらすじを紹介する）: ギンガムチェックの地にキャラクターの切り抜きを大きく置き、分かち書きの手書き文を続ける
6. スタッフ（制作陣を見せる）: 朱色のピル型の役職ラベルと名前を、2 カラムのグリッドに並べる
7. 原作絵本（関連書籍への導線を作る）: 山吹色の地に、角丸の表紙カードを 2 カラムで並べる
8. 映像（PVを見せる）: トングでつまんだ食パン形の枠に動画を入れ、墨色のラベルを付ける
9. 放送告知（放送情報を改めて伝える）: スカラップ形の境界で焼き色ブラウンの地に切り替え、ロゴとクリーム色の大きな文字を中央に置く
10. フッター（サイト内のナビと関連サイトへの導線）: 2 カラムのナビカード、丸いSNSボタン、横長の関連バナー、コピーライト、ページトップボタンの順に並べる

Imagery

• 焼きたてパンの写真を切り抜き、少しイラストっぽく加工して散らす
• 動物の形のパン（うさぎ・パンダ・かめ）をアクセントに使う
• キャラクターは色鉛筆や水彩のような、手描き絵本のタッチにする
• 見出しの周りに手描きの集中線やきらめきを添える
• 地にはギンガムチェックや紙のざらつきを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長にし、ロゴを左上、キービジュアルを中央、パン素材を周りに散らす
• PC はお知らせを横長のノートにし、日付とタイトルを 1 行で並べる
• PC はスタッフを 3 カラム、絵本を 4 カラムにする
• PC はフッターのナビを横 4 列、バナーを横 4 列に小さく並べる
• 装飾素材はどちらでも画面の端にはみ出させる

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