--- version: alpha name: Calm Indigo Wave Clinic LP description: 生成りの地に落ち着いた藍色の面を交互に重ね、手描き風の細い波線と小鳥のシルエットで柔らかさを出したクリニック LP。欧文見出しと和文サブ見出しの 2 段組、縦書きの白帯コピー、大きなセリフ数字で上品にまとめている。 colors: primary: '#3B699B' background: '#F4F5F1' surface: '#FFFFFF' background-alt: '#E5E5D9' text: '#2A2A2A' secondary: '#325988' cta: '#3C699B' on-cta: '#F2FEFF' on-dark: '#F0FBFE' accent-1: '#E8EAE5' line: '#A4ABAB' text-muted: '#5F5157' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.15em headline-lg: fontFamily: Outfit fontSize: 30px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.12em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.1em accent: fontFamily: Playfair Display fontSize: 60px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 60px arrow-link: textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px menu-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 220px vertical-caption: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px feature-number: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 70px contact-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px news-row: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 88px info-table: textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px --- # DESIGN.md — 生成り×藍色の波線が通う矯正歯科 LP（Calm Indigo Wave Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、清潔・爽やか、シンプル・ミニマル - **キーワード**: 生成り・藍色・手描き波線・余白・縦書き・セリフ数字 - **地の質感**: フラットな単色面。紙のような生成りと、ぼかしのない藍のベタ面。影はほぼ使わない - **形**: 角丸の写真と白いカード、ピル型の矢印ボタン、波形のセクション境界 - **温度感**: やや涼しめで穏やか。藍の落ち着きとベージュの温かさが半々 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3B699B` | ブランドの藍色・セクション面 | 16% | 画素の実測 | | `background` | `#F4F5F1` | 生成りのページ地 | 30% | 画素の実測 | | `surface` | `#FFFFFF` | メニューカード・ボタン面 | 15% | 画素の実測 | | `background-alt` | `#E5E5D9` | フッターのグレージュ面 | 4% | 画素の実測 | | `text` | `#2A2A2A` | 見出し・本文の濃色 | 3% | 推定 | | `secondary` | `#325988` | 欧文見出し・小見出しの藍文字 | 1% | 画素の実測 | | `cta` | `#3C699B` | 矢印ピルボタン | 0% | 画素の実測 | | `on-cta` | `#F2FEFF` | ボタン上の矢印・文字 | 0% | 画素の実測 | | `on-dark` | `#F0FBFE` | 藍面上の白文字 | 1% | 画素の実測 | | `accent-1` | `#E8EAE5` | 大きな透かし欧文 | 1% | 画素の主要色に補正 | | `line` | `#A4ABAB` | 区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#5F5157` | 日付・注釈 | 1% | 画素の主要色に補正 | - 地は生成り、要所の章を藍のベタ面に切り替えて呼吸を作る - 藍面の中は白文字・白い波線のみで構成する - 強調色は藍 1 色に絞り、赤や黄は使わない - 大きな透かし欧文は地色よりわずかに濃いベージュで薄く置く - カードは白で、生成り地との明度差だけで浮かせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大コピー | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.8 | 0.15em | | `headline-lg` | 欧文セクション見出し | 欧文サンセリフ | Outfit | 500 | 30px | 1.2 | 0.02em | | `headline-md` | 章の和文見出し | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.7 | 0.12em | | `headline-sm` | 欧文見出し下の和文ラベル・カード名 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.5 | 0.15em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 2.1 | 0.1em | | `accent` | #01 などの大きな番号・透かし欧文 | 欧文セリフ | Playfair Display | 400 | 60px | 1.0 | 0.0em | | `note` | 注釈・日付 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.7 | 0.08em | | `label-button` | ボタン・リンク文字 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.4 | 0.12em | - 和文は字間を 0.1em 以上広げてゆったり組む - セクション見出しは欧文大＋和文小の 2 段 - 写真上のコピーは白帯付きの縦書きで置く - 番号は大きな細身セリフで写真の角に重ねる - 太字は使わず中太までに抑える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、カードも縦積み - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右余白は約 20px - 写真は画面端まで寄せるか、片側に寄せて非対称に置く - リンクはテキスト＋矢印ピル＋手描き波線下線のセット - 情報表は左に項目、点線の縦罫で区切って右に内容 ## Elevation & Depth - 影はほぼ使わずフラット - カードは白面と角丸のみで浮かせる - 写真の重なりで奥行きを出す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸 12px 前後の長方形。一部は画面端まで裁ち落とし - **セクション境界**: ゆるやかな波形カーブで藍面と生成り面を切り替える - 細い手描き風の波線をセクションをまたいで流す - 小鳥のシルエットを 2 羽セットで添える - 直線の区切りは細い 1px のグレー線 ## Components - **欧文＋和文見出し**（`section-heading`）: 藍の欧文見出しの下に小さな和文ラベル - **矢印リンク**（`arrow-link`）: 左にテキスト、右に藍のピル型矢印、下に手描き波線 - **メニューカード**（`menu-card`）: 白カードに線画アイコン、角丸サムネ、名前、2 行説明、右下矢印 - **縦書き白帯コピー**（`vertical-caption`）: 写真上に白帯付きの縦書き文字を数行並べる - **特長番号**（`feature-number`）: 写真右下に重ねる大きなセリフの #番号 - **予約ボタン**（`contact-button`）: 藍面上の白いピル型。電話は白枠線のみ、Web と LINE は白塗り - **お知らせ行**（`news-row`）: 日付と題名、右に白ピルの＋、上下に細罫 - **情報テーブル**（`info-table`）: 項目と内容を点線の縦罫で区切る表 ## Do's and Don'ts **Do** - 生成り地と藍面を交互に使う - 見出しは欧文＋和文の 2 段にする - 細い波線と小鳥モチーフで柔らかさを足す - 字間を広げて余白を多くとる - 写真は自然光で白っぽく明るく **Don't** - 赤や黄の強い訴求色を使わない - 太いゴシックや大きなバッジで煽らない - 濃い影やグラデーションを付けない - 藍以外の色をボタンに使わない - 要素を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（やさしい第一印象を作る）: 生成り地に大きな和文コピーを 3 行。波線が角丸の院内写真へ流れ、写真上に縦書き白帯コピー 2. **お知らせ**（最新情報を伝える）: 日付と題名の行を細罫で 3 件、右に＋ボタン 3. **メッセージ**（相談しやすさを伝える）: 写真 2 枚を重ねて、縦の透かし欧文。短い段落を 4 つ並べ、矢印リンク 4. **当院について（特長）**（強みを 3 つ示す）: 波形境界から藍面へ。写真＋大きな番号＋白見出し＋短い区切り線＋本文を 3 回 5. **診療案内**（メニューを案内する）: 全幅写真の下、白カードを 4 枚縦に並べる 6. **ごあいさつ**（院長の人柄を伝える）: 全幅の人物写真、本文、名前と経歴の点線テーブル 7. **院内紹介**（空間の雰囲気を見せる）: 透かし欧文を背景に、縦書きキャプション付き写真の横スライダー 8. **CTA**（予約・相談へ導く）: 藍面に白コピーと小鳥、白いピルボタン 3 つ、下端を波形に 9. **アクセス・診療時間**（来院情報を伝える）: 地図、点線区切りの表、支払い案内の角丸枠 10. **診療カレンダー**（診療日を示す）: 月ごとのカレンダーを埋め込み 11. **フッター**（回遊と締め）: グレージュの角丸面にナビ・SNS・ロゴ、下に外観写真 ## Imagery - 自然光で白っぽく明るい院内・機器の写真 - スタッフは笑顔で手元や対話の場面を切り取る - 木目やベージュの小物で温かみを足す - 細い 1 本線の手描き風波線を装飾に流す - 線画の歯アイコンと小鳥のシルエット - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は見出しを左、本文やカードを右に置く 2 カラム - PC の特長は写真と文章を左右交互にずらして配置 - メニューカードは PC で 2×2 グリッド - CTA は PC でコピー左・ボタン右の横並び - ヘッダーは PC でナビと電話・予約ボタンを横一列に ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-709c2315`（元 LP の URL から採番） - **元 LP**: https://yaizu-ortho.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。