DESIGN.md — 濃紺×オレンジの訴求型物流サービスLP（Bold Blue Orange Logistics Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、力強い・インパクト
• キーワード: 濃紺の帯・オレンジCTA・斜体太ゴシック・黄色の三角マーカー・淡い水色の地・写真カード
• 地の質感: 細いストライプや斜線パターンを敷いた淡色の地。帯見出しには細い横線の質感がある
• 形: 角丸のない四角いカードと帯、六角形の写真タイル、下向き三角の吹き出し
• 温度感: 青が主で涼しく誠実、オレンジと黄で温度を足す

Colors

• 地は白・淡水色・ベージュ・斜線グレーをセクションごとに切り替える
• 大見出しは青文字＋黄色の下線、区切り見出しは青の全幅帯に白文字
• CTAはオレンジのグラデーションのみ。他の要素にオレンジ面を使わない
• 黄色は下向き三角・下線・小バッジなど小面積に限る
• 本文中の強調はオレンジ赤文字で1〜2語だけ
• フォーム送信ボタンは青で、相談CTAと区別する
• button-cta は文字 #FEFAF3 × 背景 #F57A0C のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B75A08、4.51:1）を使う。

Typography

• 見出しは太いゴシックを斜体気味にして勢いを出す
• 大見出しには白フチや薄い影をつけて写真の上でも読めるようにする
• 欧文ラベルは見出しの上に小さく添える
• カードの本文は14px前後の斜体寄りゴシックで2〜3行
• 長い説明文は小さめ10〜11pxで行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。見積り項目は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• カードは左に写真、右に本文の横並び
• 見出しは中央揃え、下に黄色の三角か下線
• 事例は番号ラベル→見出し→三角→カードの順で繰り返す
• CTAは各セクションの区切りに全幅に近い幅で置く
• フォームは項目ごとに罫線で区切る

Elevation & Depth

• カードに薄いドロップシャドウ
• CTAボタンに下方向の影と右下の黄三角
• 大見出し文字に白フチと影

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内は四角、見積り項目は黄枠の六角形
• セクション境界: 直線の切り替え。セクション上辺に下向き三角の切り欠きを入れる
• ボタンとカードは角丸なしか極小
• 小バッジは斜めに切った平行四辺形やリボン型
• 困ったバッジはカード右下の黄色い三角コーナー

Components

• 無料相談ボタン（button-cta）: オレンジグラデの横長ボタン。左にトラックのアイコン、右下に黄色の三角
• CONTACTブロック（contact-band）: 斜線グレーの地に欧文CONTACTと小さい和文ラベル、その下にCTA
• 青帯見出し（heading-band）: 全幅の濃紺帯。小さな欧文と白い太見出しを左右の細線で挟む
• 下線つき大見出し（heading-underline）: 青の斜体見出しに黄色の下線、左上に青い斜めの小バッジ
• 悩み・声カード（case-card）: 白地の横長カード。左に人物写真、右に本文、右下に黄色の困ったバッジ
• 番号ラベル（case-label）: 欧文CASE＋番号を細線とドットで挟み、下にカギ括弧の見出しと黄三角
• 六角形の項目タイル（hex-tile）: 黄枠の六角形写真に白文字の項目名と小さな英訳。おすすめは黄色の小ラベル
• 見積り合計ボックス（estimate-total）: 青の太枠の白箱に合計金額を大きく青文字で
• フォーム項目（form-field）: オレンジ赤の必須バッジ＋ラベル、下に灰枠の入力欄
• 送信ボタン（button-submit）: 青地に白文字のシンプルな全幅ボタン

Do's and Don'ts

Do - CTAはオレンジグラデ＋トラック系アイコンで統一する - セクションごとに地色を変えてリズムを作る - 番号ラベル→見出し→黄三角→カードの型を繰り返す - 見出しは斜体の太ゴシックで勢いを出す - 実務写真と人物写真を多めに使う

Don't - 丸みの強いボタンや柔らかいパステルにしない - オレンジをCTA以外の大きな面に使わない - 細い明朝や軽いウェイトの見出しにしない - 黄色を広い面に塗らない - 写真なしの文字だけのカードにしない

Page Structure

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

1. ヘッダー（社名と電話・メニュー導線）: 白地にロゴ、右に黄の電話アイコンと青のメニューボタン
2. ファーストビュー（悩みの一言とサービス名を見せる）: 倉庫・トラック写真のコラージュに白フチ太字コピーとオレンジのサービス名
3. CTA（早めに相談へ誘導）: 斜線グレー地にCONTACTとオレンジボタン
4. 悩みの提起（利用者の困りごとを3つ見せる）: 人物写真入りの見出し後、水色地に番号つき写真カードを3枚
5. 解決の宣言（サービスで解決できると言い切る）: スタッフ写真の上に特大のオレンジ文字
6. 解決パターン（悩み別の解決策を示す）: 青帯に小さな黄ラベルと番号見出しを3つ並べる
7. 特長（会社の強みを伝える）: 下線つき見出し、水色ストライプ地に社屋写真と説明文
8. お客様の声（業種別の実績で信頼を得る）: ベージュ地にVOICE番号と写真カードを3枚、最後にまとめの一文
9. 担当者の言葉（人柄と姿勢を伝える）: 青帯見出し、写真と小さい本文
10. CTA（相談への後押し）: 笑顔の家族写真の上に強調コピーとオレンジボタン
11. 料金シミュレーション（見積りを自分で試させる）: 青帯見出し、六角形の項目タイル3列、青枠の合計ボックスと注記
12. お問い合わせフォーム（問い合わせを受け付ける）: 青帯見出し、必須バッジつき項目、青の送信ボタン
13. 会社概要・フッター（会社情報を示す）: 黄下線のキャッチ、ロゴ、罫線の表、濃紺のコピーライト帯

Imagery

• 倉庫・梱包・トラックなど現場の明るい写真
• スーツ姿や事務職の人物写真で悩みや相談の場面を見せる
• 人物は困り顔と笑顔を使い分ける
• 写真の上は白フチの太字コピーで読ませる
• アイコンはトラックなどの白い単色シルエット
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約960px幅に収め、左右は淡色の地
• 悩みカードと声カードはPCで3列の縦型カードになる
• 解決パターンはPCで吹き出し型の対話カードとCTA付きのポイント枠に展開される
• 見積りタイルはPCで4列
• PCヘッダーは電話番号と相談ボタン、下にグローバルナビ
• フォームはPCでラベル左・入力欄右の2列

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