DESIGN.md — クラフト紙×黄×青のアジア雑貨特集 LP（Kraft Paper Asian Bazaar Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 親しみ・手作り感、ナチュラル、レトロ、ポップ・元気
• キーワード: クラフト紙・旅の雑誌・コラージュ・縦書き・手仕事・異国情緒
• 地の質感: 紙の繊維が見える細かなノイズ入りのベージュ地。写真は切り抜きやずらし配置で、スクラップブックのような重なりを作る。
• 形: 角丸の縦長章タイトル枠、ピル型の小ボタン、アーチ型の装飾フレーム、ちぎれたような写真の縁。
• 温度感: 暖かい。砂色の地に黄と青の差し色で、乾いた陽射しの市場を思わせる。

Colors

• 地は全面クラフト紙調のベージュにし、白い地は商品一覧のエリアだけで使う。
• 章の始まりはレモンイエローを全幅で敷き、その面の上に青い欧文の大見出しを置く。
• 青は欧文見出し、価格ラベルの帯、強調段落の文字だけに使う。
• 文字は黒ではなくこげ茶にする。枠線と装飾も同じ茶系でそろえる。
• レシピや告知は薄グレーの全幅帯に置き、ベージュの地と区別する。
• 鮮やかな色は写真の布柄に任せ、UI の色数は増やさない。
• price-label は文字 #FFFFFF × 背景 #0C9BDD のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0A7EB4、4.51:1）を使う。

Typography

• 章タイトルは縦書きにし、角丸の二重線枠で囲む。
• レシピ本文も縦書きで組み、雑誌のような雰囲気を出す。
• 欧文の大見出しは太いスラブセリフにし、2 行で大きく組む。
• リード文は行ごとに字下げを変え、ずらして並べる。
• 商品名は 2 行以内にし、価格は商品名のすぐ下に置く。
• 見出しを太字ゴシックで強くしすぎない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: 特集部分は SP で 1 カラムの自由なコラージュ配置。商品一覧は 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 8px（375px 幅換算）
• 写真は左右交互に寄せ、一部を画面端まで裁ち落とす。
• 商品写真の近くに商品名・価格・BUY ボタンを 1 組で置く。
• 写真同士は少し重ねるか、段差をつけて配置する。
• 章の間には 80px 以上の余白を取る。
• レシピは全幅のグレー帯に、横スクロールのような縦書きで置く。

Elevation & Depth

• 影はほぼ使わず、平面の重なりで奥行きを出す。
• 切り抜き写真は地の上に直接置く。
• ボタンにも影をつけず、細い線だけで表現する。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角の写真に加え、布や籠を輪郭で切り抜いたもの、ちぎった布端のような写真を混ぜる。
• セクション境界: 直線で背景色を切り替える。黄の面は不定形に食い込ませることがある。
• 章タイトルの枠は角丸の縦長の二重線にする。
• 目次は細線のアーチ枠で囲み、上下に小さな装飾をつける。
• BUY ボタンは小さなピル型にし、両脇に菱形の飾りをつける。
• ALL ITEMS は茶色の小さな角丸四角にし、下向きの矢印をつける。

Components

• BUY ピルボタン（button-buy）: 白地に茶の細枠のピル型ボタン。左右に菱形の飾りを入れ、英字はセリフ体にする。
• 縦書き章タイトル枠（chapter-title-vertical）: 角丸の二重線で囲んだ縦長の枠に、章の名前を縦書きで入れる。写真の左上に重ねる。
• 青帯の価格ラベル（price-label）: 商品名と価格を行ごとに青い帯で敷き、白文字で載せる。黄の章で使う。
• アーチ枠の目次（contents-arch）: 細線のアーチ枠に英字見出し、切り抜き写真、縦書きの章リスト（各項目の上にロータス風の印）を入れる。
• レシピ帯（recipe-block）: 大きな欧文見出しと淡い番号を置き、料理の切り抜き写真の下にグレー帯を敷く。帯には材料と作り方を縦書きで入れる。
• 一覧への小ボタン（button-all-items）: 茶色の角丸四角に白い英字 2 行と下向き矢印を入れる。章の終わりの右側に置く。
• 商品一覧カード（product-card）: 白地の 2 カラム。正方形の写真の下に太字の商品名、グレーの補足、価格、ハートアイコン、New ラベルを置く。
• マーカー付きリード文（lead-marker）: 短い詩のような行を、ずらして並べる。前半の行には薄い茶色の行背景を敷く。

Do's and Don'ts

Do - クラフト紙の質感を全体の地にする。 - 写真は切り抜き・重ね・裁ち落としでコラージュにする。 - 章ごとに縦書きの枠タイトルを置く。 - 商品ごとに商品名・価格・BUY ボタンをそろえて置く。 - 線画の花模様や地図を、余白に薄く添える。

Don't - 真っ白や原色の地を特集部分に使わない。 - 大きなベタ塗りの CTA ボタンを置かない。 - 写真を整然としたグリッドだけで並べない。 - 黒の太いゴシックで見出しを強く打たない。 - グラデーションや強い影を使わない。

Page Structure

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

1. ファーストビュー（特集のテーマと限定感を伝える）: 布を詰めた切り抜きコラージュに、縦書きの大きな和文タイトル（円形のコマ）、黄帯の欧文ロゴ、赤い判子風の限定マークを重ねる。
2. リード（暮らしに旅を取り入れる世界観を示す）: 短い行を 4〜5 行、中央付近でずらして並べ、前半にマーカーを敷く。
3. 目次（章の構成を案内する）: アーチ枠の中に切り抜き写真と縦書きの章名を並べ、一覧ボタンを添える。
4. 章1（黄の面）（代表的な産地の商品を紹介する）: 黄の全幅面に青い欧文見出しを置く。地図線と写真のコラージュに、青帯の価格と BUY ボタンを添える。
5. 章2〜5 商品紹介（テーマ別に商品を見せる）: ベージュ地に縦書きの章枠を置き、モデル写真と商品の切り抜きを左右交互に並べ、BUY ボタンをつける。
6. レシピ（食から異国の暮らしを想像させる）: 欧文見出しと番号、料理の切り抜き写真、グレー帯の縦書きレシピで構成する。
7. バイヤーコメント（買い付けの思いで共感を得る）: 青い欧文の大見出しの下に青文字の段落を置き、現地のスナップ写真を重ねる。
8. 販売期間の告知（期間限定で購入を促す）: ベージュ地の中央に、青文字で期限と注記を置く。
9. 商品一覧（全商品を比較して買ってもらう）: 白地の 2 カラムカードグリッドにし、上部に絞り込みと並び替え、下部にページ送りを置く。
10. 関連特集バナー（回遊を促す）: 横長バナーを縦に積み、下部におすすめ特集を 2 カラムで並べる。

Imagery

• 自然光の室内や路上で、民族柄の服を着た女性モデルを素朴に撮る。
• 刺繍布・キルト・籠バッグなどの商品は、輪郭で切り抜いて地に直接置く。
• 職人の手元（版木押し・縫製）をクローズアップで入れ、手仕事感を出す。
• 料理は器ごと真上か斜め上から撮って切り抜き、余白に置く。
• 装飾は青や茶の単色線画で、ボタニカル模様や国の地図の輪郭を描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 1000px 前後の帯を取り、コラージュは写真を横に広げて並べる。
• 縦書きの章タイトルは PC でも縦書きのまま、写真の左に大きめに置く。
• 商品一覧は PC で 4 カラムにする。
• 欧文の大見出しは PC で 56〜64px に拡大する。

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