DESIGN.md — 紺×白の円形モチーフ金属加工メーカーLP（Navy Blue Precision Manufacturing Corporate LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、上品・高級、クール・先進的、清潔・爽やか
• キーワード: 紺と白・明朝見出し・円形リング・工場写真・英字ラベル・重ねカード
• 地の質感: フラットな面に、白く光る金属製品の写真と工場写真を組み合わせる。背景の製品写真は大きくぼかして透かす。
• 形: 小さな角丸のカードと長方形ボタン。FVと問い合わせは円形リングで囲み、セクション角に青い弧をあしらう。
• 温度感: やや寒色寄り。ただし採用セクションだけは生成り地と緑で暖かくする。

Colors

• 地は白と淡いブルーグレーを交互に使い、セクションの区切りを色で示す。
• 紺は事業内容の大パネル・ボタン・見出し下の短い線にだけ使う。
• 英字ラベルは紺地では白か水色、明るい地では紺にする。
• 採用セクションだけ生成り地と緑を使い、本体と切り分ける。
• 強調したい語句には水色の太いマーカー下線を引く。
• 問い合わせは濃紺のパネルに白文字で、背景写真に青のオーバーレイをかける。
• button-recruit は文字 #ECFCFF × 背景 #12C486 のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#0C8359、4.52:1）を使う。

Typography

• 見出しは明朝体、本文とボタンはゴシック体にする。
• 見出しの上には小さな英字ラベル、下には40px幅の紺の短い線を置く。
• カード右上に、細い大きな英字を写真と重ねて置く。
• 本文は行間2.0でゆったり組み、左揃えにする。
• 見出しは中央揃えが基本。MESSAGEのみ左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（製品カードも縦に 1 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 事業内容は、画面幅から左右16pxずつ内側に入れた紺パネルの中に、写真と白カードを重ねて並べる。
• 白カードは写真の下端に重ね、上に少し食い込ませる。
• 製品カードは写真、その下に和文名＋英字名＋丸い矢印を横並びにする。
• 企業情報は、全幅写真の下に区切り線付きのリンクリストを置く。
• ボタンは幅約70%で中央に置く。

Elevation & Depth

• 影はほぼ使わず、色面の重なりで奥行きを出す。
• 白カードはごく薄い影か影なし。
• 問い合わせは、写真の上に半透明の白い円を重ねる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形で角丸は小さめ。FVは円形リングで中央を囲む。採用は斜めのひし形カットのコラージュ。
• セクション境界: 基本は直線で切り替える。セクションの角に青い弧状の帯を置く。
• ボタンは角丸4pxの長方形で、右端に白い丸アイコンを置く。
• リンクの矢印は丸の中に置く。
• 円形モチーフは青の多重リングで描く。

Components

• 詳しくはボタン（button-primary）: 紺の長方形。左に太字ラベル、右に白丸の矢印を置く。外部リンクの場合は別窓アイコンにする。
• 採用ボタン（button-recruit）: 緑の長方形。構造は主ボタンと同じ。
• 英字ラベル付き見出し（section-heading）: 英字小ラベル、明朝の大見出し、短い紺線の順に縦に並べる。
• 写真重ね白カード（overlap-card）: 紺パネル上の写真に白カードを重ねる。中身は明朝見出し、短線、本文、ボタン。
• 製品カテゴリカード（product-card）: 横長写真の下に、和文名、紺の英字、紺丸の矢印を並べる。
• 区切り線リンクリスト（link-list）: 明朝の項目名と、右端に白丸の矢印。項目の下に細い区切り線を引く。
• お知らせ行（news-item）: グレーの日付の下にタイトル2行を置き、上下を線で区切る。
• 円形リングフレーム（circle-frame）: 白い円を青の多重リングで囲み、中に明朝コピーを入れる。FVと問い合わせで使う。
• 問い合わせパネル（contact-panel）: 濃紺パネルにアイコン付きの見出しを置く。電話番号は大きく、WEB用は白ボタンにする。

Do's and Don'ts

Do - 見出しは明朝体と英字ラベルの組み合わせを統一する。 - 紺・白・淡いブルーグレーの3色を中心にまとめる。 - 工場・製品・人物の写真は青みのある寒色寄りに補正する。 - カードは写真に重ねて奥行きを出す。 - 余白は広く取り、本文は行間2.0にする。

Don't - 赤やオレンジを大きな面に使わない。 - 丸ゴシックやポップな書体を使わない。 - ピル型ボタンや強いドロップシャドウを使わない。 - 見出し下の短線を省略しない。 - 採用以外の場所で緑を使わない。

Page Structure

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

1. ファーストビュー（製品が使われる分野と企業の志を示す）: 用途写真を4分割したコラージュの中央に、青リングの白円と明朝の大キャッチを置く。
2. メッセージ（企業の姿勢を伝える）: 水色の英字ラベル、紺の明朝見出し、長めの本文を左揃えで置く。角に青い弧を添える。
3. 製品ビジュアル（技術の質感を見せる）: 白く光る金属製品の大きな写真に、小さな作業写真を重ねる。
4. 事業内容（技術・強み・行動指針を説明する）: 紺の大パネルに写真と白カードを3組、縦に並べる。各組に大きな細英字を添える。
5. 製品情報（製品の用途分野を示す）: 淡いグレー地に、導入文と4つのカテゴリカードを並べる。
6. プロジェクトストーリー（開発事例へ誘導する）: 人物写真の下に青いグラデーション帯を敷き、白い明朝見出しとボタンを置く。
7. 生産設備（設備力を示す）: 全幅の工場写真の下に、本文とボタンを置く。
8. 企業情報（会社案内への導線）: 社屋の写真の下に、区切り線付きのリンクリストを6項目並べる。
9. お知らせ（最新情報を伝える）: 日付付きの行を3件並べ、一覧ボタンを置く。
10. 採用情報（採用サイトへ誘導する）: 生成り地の角丸カード。緑の見出し線、緑ボタン、斜めカットの人物コラージュ、黄色の手書き英字を使う。
11. お問い合わせ（相談を受け付ける）: 青をかけた写真の上に白円のリングと説明文を置き、その下に電話用とWEB用の濃紺パネルを置く。

Imagery

• 工場・設備は明るく寒色寄りの実写にし、作業着の人物を入れる。
• 金属製品は白背景の柔らかい光で、銀白色の質感を強調する。
• 用途写真は自動車・バイク・重機・船などを、青空の下で鮮やかに撮る。
• 背景の製品写真は大きくぼかして半透明に敷く。
• 問い合わせの背景写真には青のモノトーンのオーバーレイをかける。
• 採用だけは笑顔の人物を斜めカットで組み、手書きの英字を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、メッセージを左の文章と右の製品写真の2カラムにし、英字ラベルを縦書きで置く。
• PC の事業内容は、写真とカードを左右交互に配置する。
• PC の製品カードは2×2のグリッドにする。
• PC の企業情報は、左に写真、右に2列のリンクリストを置く。
• PC のお知らせは、左に見出しとボタン、右にリストを置く。
• PC のお問い合わせは、電話用とWEB用のパネルを横に並べる。

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