DESIGN.md — 藤色地×イラスト重ねのコラボ雑貨 LP（Pastel Periwinkle Illustrated Collab Goods LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: シンプル・ミニマル、上品・高級、かわいい、やさしい・柔らかい
• キーワード: 藤色の単色地・線画→彩色の重ね・階段状のパネル・細い欧文セリフ・ピンクのアクセント・余白多め
• 地の質感: フラットな単色の面。紙のような質感はイラストの側だけに持たせる。
• 形: 角丸なしの長方形パネルを、左上から右下へ階段状にずらして 3 枚重ねる。
• 温度感: クールな藤色の地に、ピーチ・ピンク・水色の暖かいパネルを差して温度差をつける。

Colors

• 地は全編を藤色の 1 色で通し、セクションは面の色ではなく余白で区切る。
• イラストパネルは商品ごとにピーチ・ピンク・水色・白のどれかを地にし、隣り合う商品で色を変える。
• ピンクの文字は、ロゴ・作家紹介・イベント告知・締めの導線だけに使う。
• 商品名・価格・本文は濃いグレーにし、純黒は使わない。
• ボタンの面は塗らず、文字と矢印だけで導線を示す。

Typography

• 見出しは英字だけにし、太字は使わない。
• 商品名は大文字の英字を単語ごとに改行し、2〜3 行に積む。
• 商品ごとに番号を [01] のように角括弧付きの小さい文字で上に置く。
• 本文は小さめのゴシックで、行間を 2.0 前後と広くとる。
• ロゴの横には英字を縦書きで並べ、ピンクで右端に配置する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品ブロックは左寄せと右寄せを交互にし、2 商品を段違いに並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 120px、基本単位 8px、カード内 0px（375px 幅換算）
• パネル 3 枚は横に約 15%、縦に約 60px ずつずらして重ねる。
• パネルは左右どちらかの画面端に接しさせ、裁ち落としにする。
• 商品の情報はパネルの直下か、パネル横の余白に小さく置く。
• セクションの間に 100〜150px の大きな空白をとる。
• テキストの左余白は約 20px でそろえる。

Elevation & Depth

• 影は一切使わない。奥行きはパネルの重なりだけで出す。
• 前面ほど彩色が濃くなり、後ろのパネルは線画にする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物は膝から上か全身で、パネルの端で切る
• セクション境界: 線や形は使わず、空白と、階段状に重なるパネルの輪郭で区切る
• 角丸はどこにも使わない。
• パネルの重なりは常に 3 枚を基本にする。
• 枠線や区切り線は使わず、細線は会期の表示だけに使う。

Components

• 段階重ねイラストパネル（stacked-art-panels）: 線画 2 枚と彩色 1 枚を階段状に重ね、商品のビジュアルを見せる。
• 商品キャプション（product-caption）: 番号、英字の商品名、プロデュース者、税込価格、詳細リンクを縦に並べる。
• 詳細テキストリンク（text-link-detail）: 大文字の英字だけで作る小さなリンク。装飾は付けない。
• ロゴと縦書き英字（logo-vertical-tags）: 左上にピンクの細いロゴと号数、右端に名前を縦書きで並べる。
• 角括弧ラベル（bracket-label）: 見出しの前に置く、角括弧で囲んだ小さな英字ラベル。
• ピンクの情報ブロック（pink-info-block）: 作家紹介やイベント告知を、ピンクの英字見出しと本文で組む。
• 締めの導線（cta-closing-link）: 大きな細い英字と斜めの矢印を置き、下に会期を細線でつないで示す。

Do's and Don'ts

Do - 地は藤色 1 色で通し、余白をたっぷりとる。 - 商品ごとにパネルの地色を変えて、リズムを出す。 - パネルは線画から彩色へ、段階的に重ねて見せる。 - 文字は細く小さくし、イラストを主役にする。 - ピンクは要所だけに使う。

Don't - 塗りのボタンや角丸ボタンを使わない。 - 影・グラデーション・枠線を加えない。 - 太いゴシックの大見出しや、訴求調の装飾を入れない。 - 原色や黒の面を使わない。 - パネルを均等なグリッドに並べない。

Page Structure

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

1. ファーストビュー（企画の世界観を一目で伝える）: 左上にロゴ、右端に縦書きの英字を置き、中央に縦長のイラストを大きく見せる。
2. メッセージ（企画の概要と販売情報を伝える）: 角括弧ラベルの下に、小さな本文を広い行間で組む。上下に大きな余白をとる。
3. メインビジュアル（キャラクター全員の印象を伝える）: ピーチ地のイラストを画面幅いっぱいに裁ち落としで置く。
4. 監修者コメント（作り手の思いを伝える）: 中央ぞろえの短いコメントを 2 件並べ、それぞれ下に小さく名前を添える。
5. 商品一覧（商品を 1 点ずつ紹介する）: 英字の見出しの後、商品ごとに 3 枚重ねのパネルとキャプションを、左右交互・地色替えで並べる。
6. イラストレーター紹介（ビジュアル制作者の紹介）: 白地の線画パネルを重ね、ピンクの文字で名前・紹介文・SNS リンクを載せる。
7. イベント告知（ポップアップ会場の案内）: ピンク単色に加工した会場写真を階段状に重ね、その下にピンクの告知文を置く。
8. 締めの導線・フッター（詳細ページへ誘導し、会期を示す）: 中央に大きな英字のリンクと矢印、会期を細線でつないだ表示、小さなロゴとコピーライトを置く。

Imagery

• アニメ調のキャラクターイラスト。主線ははっきりさせ、塗りは淡いパステル系にする。
• 同じ絵の線画版と彩色版を用意し、重ねて完成までの過程を見せる。
• キャラクターが商品を持つか身に着けたポーズにし、商品がはっきり見えるようにする。
• パネルの背景は無地のパステル単色にする。
• 会場の写真は、ピンクのモノトーンに加工する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も 1 カラムを基本にし、パネルをより大きく左右に振る。
• PC ではキャプションを、パネル右横の余白に置く。
• PC の作家紹介は、左に画像・右に文字の 2 カラムにする。
• PC のイベント告知は、写真の後に文字を右に寄せて置く。
• 余白の比率は SP と PC でそろえる。

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