--- version: alpha name: Navy and Orange Corporate Consulting LP description: 濃紺を軸に、朱オレンジの診断 CTA と明るい青の強調文字を合わせた BtoB コンサルの LP。白地と淡い青地を交互に使い、チェックリスト、番号付きカード、波形の円バッジ、線画イラストで信頼感と成果の数字を伝える。 colors: primary: '#10375E' dark-section: '#345578' cta: '#FD613B' on-cta: '#FFFFFF' secondary: '#0059B3' accent-1: '#46A3FC' accent-2: '#1B4F86' background: '#FCFCFC' background-alt: '#EEF5FF' surface: '#EEEEEE' tint-1: '#F6FAFD' text: '#3E3E3D' line: '#324B5B' cta-accessible: '#E22E02' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Roboto fontSize: 34px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px check-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px numbered-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 190px reason-badge: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 96px reason-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 320px heading-dotted: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 30px tab-panel: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 480px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 300px --- # DESIGN.md — 紺×朱オレンジの宿泊業向けコンサル LP（Navy and Orange Corporate Consulting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、クール・先進的 - **キーワード**: 濃紺・朱オレンジ CTA・数値訴求・線画イラスト・チェックリスト・カード積み - **地の質感**: ほぼフラット。紺セクションに薄い筆跡風の模様、オレンジ帯にざらついた紙の質感を少しだけ入れる - **形**: 角丸 8px 前後のカード、上部が半円に切り欠かれた番号カード、ギザギザの波形の円バッジ - **温度感**: クールな紺と青が基調。オレンジで温度を上げて行動を促す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#10375E` | ブランド濃紺（バッジ・プラン枠・見出し帯） | 8% | 画素の実測 | | `dark-section` | `#345578` | 強みセクションのくすんだ紺地 | 7% | 画素の実測 | | `cta` | `#FD613B` | 診断 CTA・訴求帯の朱オレンジ | 7% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 1% | 画素の主要色に補正 | | `secondary` | `#0059B3` | 相談 CTA の青ボタン・CTA 帯 | 4% | 画素の実測 | | `accent-1` | `#46A3FC` | 強調語の明るい青（数字・キーワード） | 1% | 画素の実測 | | `accent-2` | `#1B4F86` | カード内小見出しの濃い青 | 1% | 画素の実測 | | `background` | `#FCFCFC` | 基本の白地 | 33% | 画素の実測 | | `background-alt` | `#EEF5FF` | サービス領域セクションの淡い青地 | 6% | 画素の実測 | | `surface` | `#EEEEEE` | 強みカードの明るいグレー面 | 11% | 画素の実測 | | `tint-1` | `#F6FAFD` | イラストを置く淡い青グレーの面 | 8% | 画素の実測 | | `text` | `#3E3E3D` | 見出し・本文の濃いグレー | 3% | 画素の実測 | | `line` | `#324B5B` | カードの細い枠線 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#E22E02` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い青を交互に使う。中盤だけくすんだ紺の帯を入れて流れを区切る - 主 CTA（無料診断）は朱オレンジ、相談・資料請求は青。2 色で役割を分ける - 見出しのキーワードは明るい青の文字にして、下に青い点線を引く - 数字や成果を言う語句は明るい青。本文は濃いグレー - オレンジは CTA と診断訴求の帯だけに使い、装飾には使わない - 紺地の上は白文字、カード内の小見出しは濃い青にする - `button-primary` は文字 `#FFFFFF` × 背景 `#FD613B` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E22E02`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し（数字の部分は青で一回り大きく） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.04em | | `headline-md` | カード見出し・理由のタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.04em | | `headline-sm` | 悩みリストの各項目 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.04em | | `body-md` | 箇条書き・本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.05em | | `accent` | 大きい数字・番号・理由番号 | 欧文サンセリフ | Roboto | 700 | 34px | 1.1 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.06em | | `note` | ボタン上の小さな添え書き・タブ | ゴシック | Noto Sans JP | 700 | 9px | 1.5 | 0.04em | - 見出しはすべて太めのゴシックで中央揃え - キーワードだけ明るい青にして、下に点線を引く - 数字は欧文サンセリフの太字で大きくする - 本文は小さめにして字間を広めに取る - CTA の上には斜線ではさんだ短い添え書きを置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。サービス領域だけ十字の線で 2×2 に分ける - **本文ブロックの幅**: 画面幅の約 95% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右 10px 程度の余白でほぼ全幅に置く - カード同士の間隔は 8〜16px で縦に積む - 見出しとカードの間は 24px 前後 - CTA 帯ではボタン 2 本を縦に並べ、それぞれに添え書きを付ける - プランはタブを 4 つ横に並べ、その下に紺のパネルを置く ## Elevation & Depth - 悩みカードは白地に淡いグレーの枠と、ごく弱い影 - FV のグラフカードは白で角丸を大きくし、ふんわりした影 - 診断結果の画像は少し傾けて、影で浮かせる - それ以外の要素は影なしのフラット ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 8px の長方形。人物は切り抜きで重ねる - **セクション境界**: 直線で区切る。サービス領域の背景は淡い青の曲線 - ボタンは角丸 4px 程度の長方形 - 番号カードは上辺中央を半円に盛り上げて番号を置く - 理由番号は波形（ギザギザ）の紺の円バッジ - 実績の見出しは月桂樹の装飾ではさむ - お客様の声のカードは上部に紺の帯ラベルを付ける ## Components - **診断 CTA ボタン**（`button-primary`）: 朱オレンジの長方形ボタン。左に書類アイコン、上に白い吹き出しの添え書き - **相談 CTA ボタン**（`button-secondary`）: 青の長方形ボタン。左にメールアイコン。青帯の上では白い枠線だけのボタンにする - **悩みチェックカード**（`check-card`）: 白いカードの左に淡い青の円とチェックマーク。悩みを 2 行の中央揃えで書く - **番号付き強みカード**（`numbered-card`）: グレーのカードの上部を半円に切り欠き、青い番号を置く。見出しは 2 段目を青にし、青い丸の箇条書きを続ける - **波形の理由バッジ**（`reason-badge`）: 紺のギザギザ円に、小さなラベルと大きな番号を白抜きで入れる - **理由カード**（`reason-card`）: 紺の細い枠の白カード。上段にバッジと見出し、下段に淡い青の面と線画イラスト - **点線強調見出し**（`heading-dotted`）: 中央揃えの見出しで、キーワードだけ青文字にして下に青い点線を引く - **プランのタブとパネル**（`tab-panel`）: 4 つのタブに下向き矢印を付け、選択中のタブは青。その下に紺のパネルで箇条書きと写真を置く - **お客様の声カード**（`voice-card`）: 上部の紺帯に英字の番号ラベル。引用符と人物イラスト、青で強調した見出しを付ける ## Do's and Don'ts **Do** - 見出しのキーワードは青文字と点線で強調する - 成果は大きな数字で見せる - CTA は診断（オレンジ）と相談（青）の 2 種類を繰り返し置く - イラストは青系の線画で統一し、淡い青の面に載せる - カードは同じ形のまま縦に揃えて積む **Don't** - オレンジを CTA と診断の帯以外に広げない - ピンクや緑など、紺・青・オレンジ以外の色を足さない - 明朝体や手書き風の書体を使わない - カードの角丸を大きくしすぎない - 写真を多用しない（FV とプラン以外はイラストにする） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（社名と電話窓口を示す）: 白地。左にロゴ、右に電話アイコンと太字の番号、その下に受付時間 2. **ファーストビュー**（期間と成果を約束し、CTA に誘う）: 夜の建物の写真に半透明の黒パネル。白い大見出しに青い数字、CTA を 2 本。下に成長グラフのカードと笑顔の人物 3. **悩みの提起**（ターゲットの悩みに共感する）: 点線強調見出しの下に、チェック付きの悩みカードを 8 枚縦に積む 4. **解決の提示**（3 つの改善軸を示す）: くすんだ紺地の上に、オレンジと白の 2 行見出し。番号付きのグレーカードを 3 枚並べる 5. **診断 CTA**（無料診断に誘導する）: オレンジの角丸ブロック。白い大きなボタンの下に、診断結果のレーダーチャートを置く 6. **選ばれる理由**（実績と強みで信頼を得る）: 月桂樹で囲んだ実績の見出しのあと、波形バッジ付きの理由カードを 4 枚。各カードに線画イラスト 7. **中間 CTA**（診断を再び訴求する）: ざらつきのあるオレンジの帯。斜線ではさんだ添え書き、白枠のボタン、傾けた診断画像 8. **サービス領域**（支援範囲を一覧で見せる）: 淡い青地に白カードを置き、十字の矢印線で 4 象限に分ける。各象限は小さなアイコン付きの項目 9. **プラン詳細**（期間内の取り組みを具体的に示す）: 点線強調見出し、4 つのタブ、紺のパネル（箇条書きと業務写真） 10. **CTA 帯**（相談と資料請求に誘導する）: 青の全幅帯。添え書きと白枠のボタンを 2 組、縦に並べる 11. **お客様の声**（導入後の成果を伝える）: かぎかっこ付きのリード文と見出し。紺帯ラベル付きの声カードに人物イラストと青い強調見出し ## Imagery - イラストはアイソメトリックの線画。紺の線に青と淡い青で塗り、背景は淡い青の面 - 人物はスーツ姿のスタッフを、フラットな線画イラストで描く - 写真はスーツの手元や資料など、青みのあるビジネス写真 - グラフ・レーダーチャートなど、数字を図にした画像を多く使う - アイコンは細い線の単色で、項目名の先頭に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文の幅を 1000px 前後に収め、背景色の帯だけ全幅にする - 悩みカードは PC で 2 列のグリッドにする - 強みカードと理由カードは PC で横に 3〜4 列並べる - FV は PC で左に見出しと CTA、右に人物とグラフの 2 カラムにする - CTA 帯のボタン 2 本は PC で横に並べる - 添付の PC 画像は別のサイトの LP と思われるため、ここに書いた 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-c3f5e673`（元 LP の URL から採番） - **元 LP**: https://smtrc.jp/toushi/cam_lp1/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。