# DESIGN.md — 灯火の実直 / tanpin-lp > **使い方**: このファイルをプロジェクトに置き、AIに > 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。 > ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト） ## 1. コンセプト 単品通販の縦長ランディングページ——最もAI slopが噴出する領域を、規律で作り直す。 「熱」と「誠実さ」を両立させる。煽らない。誇張しない。だが商品の魅力は はっきり語る。ざくろの暖色を主役に、和文の太いゴシックと明朝のニュアンスを 混ぜ、数字は静止したまま大きく置く。動きは最小限、装飾は写真と余白で作る。 **キーワード**: 実直 / 温かさ / 静かな熱量 / 具体性 / 縦の物語 **この見た目が向く場面**: D2C単品通販・健康食品・化粧品・サブスクリプション訴求LP ## 2. タイポグラフィ - 和文見出し: Zen Kaku Gothic New / ウェイト 900（大見出し）・700（節見出し） - 和文見出しのニュアンス混植: Shippori Mincho / ウェイト 600〜800。**キャッチコピーの 中で1〜2語だけ**明朝に切り替え、"手作りの手紙"のような温度を作る （例: 「一本に、巡りをたたむ。」）。全文を明朝にしない。 多用すると装飾になり効果が薄れるため、1見出しにつき最大1箇所 - 和文本文: Zen Kaku Gothic New / ウェイト 400 / サイズ 16px / 行間 1.9 / 字間 0.02em （通販LPは長文になりやすいので行間を広めにとり、詰まって見えても読みやすくする） - 欧文・数字（成分量・価格・型番）: Archivo / ウェイト 700〜800。**必ずArchivoで組む。 和文フォントの数字をそのまま使わない**（桁の存在感が出ない） - 見出しスケール: h1 44px（モバイル 32px）/ h2 30px（モバイル 24px）/ h3 20px / 価格などの巨大数字 56px（Archivo 800） - 特記: キャッチコピーは断定・具体語で短く。「〜を、もっと。」「シームレスな体験」等の 空虚コピーを書かない。数字・固有名詞・分量を必ず入れる ## 3. カラー 温かい生成り地に、ざくろ・芥子・深緑の3色を**役割固定**で使う「信号色トリオ回避」設計。 3色とも暖色〜中間色でまとめ、赤黄緑を装飾として無意味に共存させない。 | 役割 | 値 | 使用比率の目安 | |---|---|---| | 背景（ベース） | #faf3ea | 55% | | 背景（節替え・芥子） | #f6e9cf | — | | 背景（節替え・緑） | #e9efe4 | — | | テキスト（主・茶墨） | #2e2620 | 30% | | テキスト（弱） | #6b5c4f | — | | ざくろ（CTA・情熱） | #b5322f | 8% | | ざくろ（ホバー・濃） | #9c2b28 | — | | 芥子（数値強調の装飾のみ） | #d99a2b | 4% | | 深緑（成分・安心） | #40613f | 3% | | 罫線（装飾・非機能） | #e3d5bd | — | | 罫線（機能・input/button境界） | #8a7960 | — | - **色の役割固定（排他）**: ざくろ＝CTAボタン・見出し中の1語・価格の強調のみ。 芥子＝成分数値のチップ背景・小さな下線マーカーのみ（**文字色として生成り地に 直接使わない**——芥子 #d99a2b は生成り #faf3ea 上で実測 2.22:1 しかなくAA未達。 芥子を文字として使う場合は必ず濃い地（#2e2620 等）の上に置く。詳細は§8直前の 実測表を参照）。深緑＝成分・安心に関わる語のみ。3色を同一パーツに同時に使わない - 純白 #ffffff・純黒 #000000 を地色に使わない。紫〜青を一切足さない - **信号色トリオの装飾利用を避ける**: 赤黄緑がすべて画面内に存在するが、 それぞれ「CTA」「数値チップ」「成分」という機能に固定されているため、 無意味な装飾トリオ（バッジの色分け等）としては使わない ### コントラスト実測一覧（WCAG 2.1・両方向） すべて実装前に計算済み。新しい組み合わせを追加する場合は必ず同様に実測し、 本表を更新すること。4.5:1未満は本文に使用禁止（見出し級の大きい文字でも3:1未満は不可）。 ``` ink #2e2620 on bg #faf3ea → 13.49:1 OK（本文） ink-weak #6b5c4f on bg #faf3ea → 5.83:1 OK（弱文字） ink-weak #6b5c4f on bg-karashi #f6e9cf → 5.35:1 OK ink-weak #6b5c4f on bg-midori #e9efe4 → 5.49:1 OK zakuro #b5322f on bg #faf3ea → 5.51:1 OK（本文中の強調語として可） zakuro #b5322f on bg-karashi #f6e9cf → 5.05:1 OK zakuro #b5322f on bg-midori #e9efe4 → 5.18:1 OK fukamidori #40613f on bg #faf3ea → 6.36:1 OK fukamidori #40613f on bg-karashi #f6e9cf → 5.83:1 OK fukamidori #40613f on bg-midori #e9efe4 → 5.98:1 OK cream #faf3ea on zakuro #b5322f → 5.51:1 OK（CTAボタン文字） cream #faf3ea on zakuro-deep #9c2b28 → 6.84:1 OK（ボタンhover文字） cream #faf3ea on ink #2e2620 → 13.49:1 OK（申込セクション・フッター文字） ink #2e2620 on karashi #d99a2b → 6.09:1 OK（芥子チップの上の文字はこの向きのみ許可） karashi #d99a2b on ink #2e2620 → 6.09:1 OK（濃地の上でのみ芥子を文字色にできる） cream #faf3ea on zakuro-field(全面) #b5322f → 5.51:1 OK（申込セクションの本文文字。 このセクションでは弱文字色を使わず、 階層は級数のみで作る。理由は下記NGの通り） --- 不可（使用しない組み合わせ）--- karashi #d99a2b on bg #faf3ea → 2.22:1 NG（生成り地に芥子文字は禁止） zakuro #b5322f on fukamidori #40613f → 1.15:1 NG（ざくろ×深緑を隣接同時使用しない） ink-weak #6b5c4f on zakuro-field #b5322f → 1.06:1 NG（ざくろ全面の上に弱文字色を 使わない。ざくろ地の上は必ず cream #faf3ea を使う） ``` ## 4. レイアウト・余白 - コンテンツ最大幅（テキスト計測）: 680px / **一本道の縦積み（single-column）**。 ヒーロー・写真ブロックのみフルブリード（画面幅いっぱい）にしてよい - セクション間余白: 上下 88px 基準（モバイル 56px）/ 要素間は 8px の倍数。 「dense」を狙うため段落・数値行の行間は詰めるが、**節と節の切れ目だけは はっきり空ける**（地色の切り替えで区切りを作るため、余白よりも色替えで リズムを出す） - 節ごとに地色を替える: 生成り → 淡芥子 → 淡緑 → 生成り …の順で反復し、 「今どの話をしているか」を色で示す（悩み＝淡芥子、成分＝淡緑、等の対応は §5参照） - **最終の申込セクションのみ、ざくろ #b5322f を全面（フルブリード）の地色に使う。** これは§3で許可した「ビビッド色を面のベタで使う」用法の唯一の適用箇所（他の節では ざくろを点・CTAにしか使わない）。文字はすべて cream #faf3ea を使い、弱文字色 （#6b5c4f）はざくろ地の上では使わない（実測1.06:1でNG。§3実測表参照）。 階層は文字サイズのみで作る - ヒーローの構成: **中央特大見出し＋ボタン2つの定型を作らない。** 非対称2カラム（モバイルは縦積み）: 左＝商品ビジュアル（SVGボトル線画）、 右＝見出し・一番の便益一文・価格要点・CTA1つ。ボタンは常に1つだけ - 「3つの選ばれる理由」角丸カード横並びは**使わない**（§8参照）。代替として ①番号付き縦の物語（悩みへの共感・成分セクションで使用）②左右交互の図解 （飲用シーンセクションで使用）の2型を使い分ける ## 5. コンポーネントの質感 - ヘッダー・ナビゲーション: 地色と同じ生成り・下部1px罫線（#e3d5bd）のみで区切る。 ナビリンクは本文と同じ茶墨色、ホバーでざくろ色に変化＋下線（下線は常時ではなく ホバー時のみ）。ロゴ「灯」は Shippori Mincho 800・22px - 角丸: ボタンのみ 4px（角丸カードは作らない）/ 影: 使わない （box-shadow は一切使用しない。立体感は罫線と地色替えのみで作る）/ 境界線: 機能的境界（input・button・アコーディオン）は 1px solid #8a7960、 装飾的な区切り線は 1px solid #e3d5bd - ボタン（主CTA）: ざくろ地 #b5322f・生成り文字・角丸4px・太字。 ホバーで #9c2b28 に沈む（0.15s ease、拡大や影は付けない）。**グラデーションを 絶対に使わない**。1画面に主CTAは常に1個（フォーム直前を除く） - 成分の数値表示: **カウントアップさせない。** 静止した大きな級数（Archivo 800・ 40〜56px）＋単位＋根拠一文、を1行として縦に積む（詳細コードは§9） - 「実際の声」: 顔写真アバター＋星5の均質な羅列を**使わない**。3人それぞれ 文字量・インデント・引用符の大きさを変え、属性（年代・職業カテゴリのみの 概略表記）を明朝の小さな添え書きで示す。星評価コンポーネントを作らない - 飲用シーン（左右交互パネル）: 写真/イラストと文章を交互に配置。カード化せず、 1px罫線で節を区切るのみ（角丸・影なし） - FAQ: `
` のネイティブ・アコーディオンで実装（JS不要）。 開閉インジケータは自作の「＋/－」ではなく、回転する短い罫線（線画）で表現 - フォーム/申込ボタン: 入力欄は使わず、外部フォームへの遷移CTAのみを置く （デモではリンク先を `#` とする）。ボタン仕様はCTAと同一 - 画像の扱い: 角丸なし・枠なし・影なし。フルブリード（100vw）または テキストカラム幅ぴったりのどちらか。フィルタは彩度を落とさない （商品の「素材そのままの誠実さ」を守るため補正しすぎない） - アクセント色の適用範囲: §3の役割固定表に限定。ざくろをナビ通常リンクや 本文の地に使わない。芥子を地の背景（面）に使わない（チップの小面積のみ） ## 6. モーション - 量: subtle。**役割差フェードのみ**（主役の見出しは 0.5s・遅延あり、 脇役の本文/写真は 0.3s・遅延なし、という具合に「間」で差をつける） - 実装: `IntersectionObserver` でクラス付与→CSS `opacity`/`translateY(12px)` の フェードのみ。`requestAnimationFrame` や `setInterval` を使った数値の 書き換えは一切行わない - CTAボタンはホバーで背景色が沈む（0.15s）のみ。拡大・浮き上がり・影の出現は させない - 下部固定の申込バー（スティッキーCTA）は、ヒーローを過ぎたら**フェードで 現れる**（0.25s、位置は動かさない。スライドインさせない） - `prefers-reduced-motion: reduce` で全フェードを無効化し、要素は初期状態から 即座に final 状態で表示する - **禁止**: カウントアップ、自動カルーセル、点滅する限定バッジ/タイマー、 マーキー、パララックス、バウンス、拡大縮小するホバー ## 7. 写真・イラスト・図版 **本文中に実写の原料写真を最低1点、必ず含めること。** 全ページを自作SVG線画のみで 構成することを許可しない（許可されるのは「商品写真」＝ボトル/パッケージのみ実写禁止、 という限定的な禁止である。原料・素材の写真までSVGに置き換えてはならない）。 - 商品写真: 実写を使わず、**自作インラインSVGのボトル線画**で表現する （罫線幅を統一、ざくろ色の液面のみ着色、他は線画）。ラベルに「灯 TOMOSHI」 の文字を配置してよい - 原料写真: （**必須要素**。商品カテゴリに応じた主要原料の写真を最低1点配置する） Wikimedia CommonsのCC0/Public Domain写真のみを使用し、 data URIでHTMLに埋め込む。出典はHTMLコメントと`meta.json`の `photo_sourcing`に記録する。写真には「※写真はイメージです」の注記を添える （実在商品ではなく架空デモのため、誠実な通販表示の作法として明記する） - アイコン: 絵文字・既製アイコンセットを使わない。自作インラインSVG線画 （線幅 1.5px、角は丸めすぎない）のみ。時計・湯船・洗面台などは簡易な線画で表現 ## 8. 禁止事項（must not）— このテイスト最厳格セクション ### 汎用の禁止（全パターン共通） 1. Inter / Roboto / Arial / system-ui をデフォルトで使わない （Zen Kaku Gothic New / Shippori Mincho / Archivo で組む） 2. 紫〜青のグラデーションを含む、あらゆるグラデーションを使わない （背景・文字・ボタンすべて単色の面で構成する） 3. グラスモーフィズム（`backdrop-filter: blur`＋半透明白）を使わない 4. 絵文字をアイコンとして使わない（自作インラインSVG線画のみ） 5. 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない ### tanpin-lp固有の禁止（通販LPのslop罠。全て名指しで禁止） 6. **統計数字のカウントアップ**（0→数値がカタカタ上がる演出）を使わない。 → 一手: 成分量は静止の大きな級数（Archivo 800）＋単位＋根拠一文で置く（§5） 7. **before/afterのビジュアル比較**（写真の左右比較スライダー・並置）を使わない。 → 一手: 体験を言葉で語る（「悩みへの共感」セクションの具体的な情景描写と、 「実際の声」の一人称の言葉で変化を示す。画像の加工比較は行わない） 8. **「3つの選ばれる理由」角丸カード横並び**を使わない。 → 一手: 番号付きの縦の物語（悩みへの共感・成分）、または左右交互の図解 （飲用シーン）に置換する（§4・§9のコード例参照） 9. **顔写真アバター＋星5の均質な「お客様の声」**を使わない。 → 一手: 3人の声を文字量・インデント・引用符の大きさで意図的に不揃いにし、 年代・職業カテゴリのみを明朝の小さな添え書きで示す。星コンポーネントを 一切実装しない 10. **赤い煽りバッジ・蛍光の「限定」「今だけ」バッジ**を使わない。 → 一手: 価格の条件（初回価格・2回目以降価格・お届け周期・解約条件）を 表形式の静止テキストで明快に書く。緊急性は言葉でも煽らない （「今すぐ」「急いで」等の煽り語を使わない） 11. **点滅・カウントダウンする「限定タイマー」**を一切使わない。 → 一手: 在庫や期限を煽らない。申込の障壁（回数縛りの有無・解約方法）を 先回りして明記することで安心を作る、という逆方向の説得力で置換する 12. **「＼今だけ／」的な吹き出し・強調記号の乱発**を使わない。 → 一手: 強調は級数（文字サイズ）とざくろ色の1語適用のみで行う。 記号装飾（★☆♪＼／等）を一切使わない 13. **グラデーションのCTAボタン**（発光・虹色・光沢ハイライト）を使わない。 → 一手: ざくろ単色の塗り＋生成り文字。ホバーで単色のまま暗く沈むのみ（§5・§6） 14. **ダミー統計の無出典表示**（"10,000人が選んだ" 等を根拠なく）を使わない。 → 一手: 数字を出す場合は必ず条件・出典を隣接する1文で添える （§7成分セクションの実装が該当。本デモでは実在の販売実績数値を持たないため、 購入者数のような検証不能な統計そのものを使用しない） 15. **信号色トリオ（赤黄緑）の無意味な装飾共存**を使わない。 → 一手: ざくろ・芥子・深緑は各々「CTA」「数値チップ」「成分」に役割固定し (§3)、バッジの色分けのような無意味な多色化をしない 16. **実写を1点も含めずSVGのみで全ページを構成すること**を使わない （「商品写真＝ボトル/パッケージは実写禁止」というルールを拡大解釈して 原料・素材の写真まで自作SVGに置き換えるのは誤り。実写禁止の対象は 商品写真のみで、原料写真は§7の通り実写必須である）。 → 一手: 原料写真は§7の指定どおりCC0/Public Domainの実写をdata URIで 最低1点埋め込む。商品（ボトル/パッケージ）だけを自作インラインSVG線画にする ## 9. 実装ノート ```css /* tokens.css — この変数セットをそのまま使うこと */ :root { --color-bg: #faf3ea; --color-bg-karashi: #f6e9cf; --color-bg-midori: #e9efe4; --color-ink: #2e2620; --color-ink-weak: #6b5c4f; --color-cream: #faf3ea; --color-zakuro: #b5322f; --color-zakuro-deep: #9c2b28; --color-karashi: #d99a2b; --color-fukamidori: #40613f; --color-line: #e3d5bd; /* 装飾・非機能の罫線 */ --color-line-strong: #8a7960; /* 機能的境界（input/button/accordion）*/ /* 変数には総称ファミリ(sans-serif)を含めないこと */ --font-heading: "Zen Kaku Gothic New"; --font-mincho: "Shippori Mincho"; --font-body: "Zen Kaku Gothic New"; --font-num: "Archivo"; --space-unit: 8px; --radius: 4px; /* ボタンのみ。カードには使わない */ --max-width: 680px; } ``` - フォント読み込み: `https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&family=Shippori+Mincho:wght@400;600;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap` - 数値・価格は必ず `font-family: var(--font-num), var(--font-heading), sans-serif;` で組む（和文フォントの数字を流用しない） ### 成分の数値表示（カウントアップ禁止の代替パターン） ```html

5,000mg

コラーゲンペプチド（魚由来・国内加工）

分子量を低分子化した魚由来ペプチドを使用。1日の摂取目安に関する 統一的な公的基準はないため、本品は含有量の実測値のみを記載します。

``` ```css .spec-num { font-family: var(--font-num), var(--font-heading), sans-serif; font-weight: 800; font-size: 48px; color: var(--color-ink); line-height: 1; } .spec-unit { font-size: 18px; margin-left: 4px; color: var(--color-ink-weak); } ``` ### 番号付き縦の物語（3カード横並びの代替・悩み/成分セクションで使用） ```html
  1. 01

    鏡を見て、肌の乾きが気になる日が増えた。

``` ```css .story-list { list-style: none; } .story-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--color-line); } .story-no { font-family: var(--font-num), sans-serif; font-weight: 800; font-size: 28px; color: var(--color-zakuro); } ``` ### 左右交互パネル（3カード横並びの代替・飲用シーンで使用） ```css .scene-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .scene-panel:nth-child(even) { direction: rtl; } /* 交互反転 */ .scene-panel:nth-child(even) > * { direction: ltr; } @media (max-width: 640px) { .scene-panel, .scene-panel:nth-child(even) { direction: ltr; grid-template-columns: 1fr; } } ``` ### 見出し中の明朝混植（1語だけ） ```html

一本に、巡りをたたむ。

``` ```css .hero-title { font-family: var(--font-heading), sans-serif; font-weight: 900; } .mincho-accent { font-family: var(--font-mincho), serif; font-weight: 800; } ``` ### CTAボタン（グラデーション禁止・単色沈み込みのみ） ```css .cta-button { display: inline-block; background: var(--color-zakuro); color: var(--color-cream); font-weight: 700; padding: 16px 32px; border-radius: var(--radius); transition: background-color 0.15s ease; } .cta-button:hover { background: var(--color-zakuro-deep); } @media (prefers-reduced-motion: reduce) { .cta-button { transition: none; } } ``` ### 役割差フェード（均一0.6sフェードの代替） ```css .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-hero { transition-duration: 0.5s; transition-delay: 0.1s; } /* 主役は遅く長く */ .reveal-sub { transition-duration: 0.25s; transition-delay: 0s; } /* 脇役は短く */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } ```