DESIGN.md — 赤い斜め帯×グレーの製造業コーポレートLP（Red Slash Industrial Corporate LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、力強い・インパクト、シンプル・ミニマル
• キーワード: 赤い斜め帯・大きな欧文見出し・工場・技術・余白多め・スラッシュ記号
• 地の質感: フラットな面に半透明の赤グラデーション帯とグレーの影帯を重ねる。背景に淡い青のグラデーションやアウトライン文字を敷く。
• 形: 角丸なしの矩形と平行四辺形・山形（シェブロン）。円形の線ボタンだけが曲線要素。
• 温度感: やや寒色寄りのグレー・淡青の地に、熱い赤を差して温度差を作る。

Colors

• 地は白と#F2F2F4の淡グレーを交互に使い、製品セクションだけ淡青グラデにする。
• 赤は面ではなく斜め帯グラフィック・サブ見出し・リンク・枠線に限定する。
• CTA群は赤→濃グレー→中グレーの3段で優先度を示す。
• 見出しは赤ではなく墨色にし、赤は直下の和文サブ見出しで差す。
• 斜め帯は赤グラデ＋半透明重ね、下に灰色の影帯を添える。
• cta-bar は文字 #FFFFFF × 背景 #FD0100 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EE0100、4.53:1）を使う。
• cta-block は文字 #FFFFFF × 背景 #FD0100 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EE0100、4.53:1）を使う。
• feature-banner は文字 #FE0000 × 背景 #F2F2F4 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF0000、4.54:1）を使う。

Typography

• 各セクションは大きな欧文見出し＋赤スラッシュ和文サブ見出しの2段で始める。
• 本文は行間2.2以上でゆったり組む。
• 背景にアウトライン（白線のみ）の巨大欧文を敷いて装飾にする。
• ボールド和文は見出し・ボタン・FVのみ。本文は400。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは見出しと斜めグラフィックを左右に振る2カラム、ニュース類は2列並び。
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右余白は約20px。
• 欧文見出しは画面からはみ出す寸前まで大きく置く。
• セクション間に斜め帯グラフィックを挟んで区切る。
• View moreは左寄せ、ニュース系は右寄せ。
• CTA3つは横3分割（FV下）または全幅縦積み（Contact）。

Elevation & Depth

• 影はほぼ使わない。フラット。
• 立体感は灰色の影帯を赤帯の斜め下に置いて表現する。
• 半透明の赤帯を重ねて奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。複数写真を縦長短冊に並べて1枚の帯にする。
• セクション境界: 直線で背景色を切り替え、境界に平行四辺形の赤帯を跨がせる。
• 円形の線ボタン（直径約60px）以外は角を立てる。
• タグのみピル型の細線枠。
• 斜め帯の角度は約60度で統一。

Components

• 3分割CTAバー（cta-bar）: FV直下に赤・濃グレー・中グレーの3マスを横並び。白太字ラベル。
• アイコン付き全幅CTA（cta-block）: 左に白線アイコン、中央に2行ラベル、右端に小さな▶。赤→濃グレー→中グレーの順に縦積み。
• 円形View moreボタン（view-more）: 赤文字のView moreと、赤細線の円に小さな赤▶を並べる。
• 欧文大見出し＋スラッシュ（section-heading）: 墨色の巨大欧文の下に、赤い斜線と赤の和文サブ見出し。
• 赤枠バナー（feature-banner）: 淡グレー地に赤3px枠。小さな和文ラベル、赤太字の欧文、赤の説明2行、右に▶。
• ニュース行（news-item）: 日付＋細線ピルのカテゴリタグ、下にタイトル。行の間は細い区切り線。
• カテゴリタグ（tag-pill）: グレー細線のピル枠に小さな墨文字。
• 斜め帯グラフィック（slash-graphic）: 赤グラデの平行四辺形を2〜3本重ね、灰色の影帯を添える。

Do's and Don'ts

Do - 見出しはすべて欧文大見出し＋赤スラッシュ和文の型にそろえる。 - 赤は斜め帯・リンク・枠線に絞り、面の広さは抑える。 - 白と淡グレーの地を交互にしてリズムを作る。 - 本文はゆったりした行間で短めの段落にする。 - 工場・設備・技術の写真は寒色寄りに補正する。

Don't - 角丸カードや柔らかいパステル色を使わない。 - 本文や見出しを赤ベタ地に載せすぎない。 - ドロップシャドウや立体的なボタンを使わない。 - 斜め帯の角度をばらばらにしない。 - 装飾フォントや手書き書体を混ぜない。

Page Structure

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

1. ファーストビュー（技術企業としての印象付け）: 建屋写真の全面背景に赤のシェブロン帯を重ね、左下に赤太字キャッチ2行と欧文サブコピー。右端に縦書きSCROLL。
2. CTAバー（問い合わせ導線を即提示）: 赤・濃グレー・中グレーの3分割バー。
3. 事業紹介（主要サービスの説明）: 欧文大見出し＋赤スラッシュのリンク2行、リード見出し、本文、View more、斜め帯。
4. 設備バナー（強みの設備を訴求）: 赤枠の横長バナーに赤欧文と短い実績文。
5. 製品情報（製品群への誘導）: 淡青グラデ地に欧文見出し、リード、本文、View more。下にアウトライン欧文と赤帯。
6. 技術の可能性（応用分野の提示）: 淡グレー地。本文の下に4分野の写真を短冊状に並べた帯、最下部に赤白の球体グラフィック。
7. お知らせ（最新情報の発信）: 日付＋タグ＋タイトルの行を区切り線で3件、右寄せView more。
8. イベント情報（出展・発表会の告知）: お知らせと同じリスト型。
9. お問い合わせ（コンバージョン）: 建屋写真に白の欧文見出しと案内文、下にアイコン付き全幅CTAを3色で縦積み。
10. フッター（サイトナビ）: ロゴ、2列のサイトマップ（グレー点＋下位リンク）、区切り線、SNS、薄グレーのコピーライト。

Imagery

• 工場の外壁・建屋を見上げで撮り、青空と寒色トーンにする。
• 技術分野の写真はシアン・ブルー寄りに色調をそろえ、縦長に切って並べる。
• 赤グラデの平行四辺形・シェブロンを半透明で重ねた幾何学グラフィック。
• 白線のみのアウトライン欧文を背景に大きく敷く。
• アイコンは白の細線ピクトグラム。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは見出しブロックと斜め帯グラフィックを左右に配置する2カラム。
• PCのCTAバーは画面右端に縦に固定する。
• PCのお知らせとイベントは左右2列に並べる。
• PCのContact CTAは3つを横並びの正方形ブロックにする。
• PCのフッターはサイトマップを横6列に広げる。

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