DESIGN.md — 黒×深紅の先端テック企業コーポレートLP（Dark Crimson Tech Corporate LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: ダーク・深紅アクセント・全面写真・ハッシュ付き英字見出し・斜めストライプ・硬派
• 地の質感: 暗い写真に黒い半透明の膜をかけた質感。斜めストライプや六角形メッシュの暗いテクスチャも使う
• 形: 角丸のない直角の面と画像。矢印アイコンは四角い枠の中に入れる
• 温度感: 冷たい（寒色寄りのグレーに深紅を差す）

Colors

• 地は黒・ダークグレー・暗い写真の3種類で回し、明るい白地は使わない
• 赤はセクション英字見出し・下線・矢印アイコン・主ボタンに限って使う
• 会社情報のように締めのセクションだけ、深紅の地を一面に塗る
• 写真には黒か寒色グレーの半透明膜をかけ、白文字が読める明るさに落とす
• 文字は白を基本にし、補足はグレーにする

Typography

• 英字見出しの頭には必ず「# 」を付け、赤い太字で大きく組む
• 英字見出しは画面の端に寄せ、セクションの境目にまたがるように置く
• 英字見出しの下に、日本語の小さな副題か白い日本語見出しを添える
• 日本語見出しの下には短い赤線を引く
• 本文は小さめにし、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は文字と写真の 2 カラムを左右交互に並べ、カード一覧は 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションは英字見出し → 日本語見出し → 本文 → VIEW MORE の順に並べる
• VIEW MORE はブロックの右下か左下にそろえる
• 文字ブロックと写真は左右交互に入れ替えて並べる
• ニュースは「サムネイル＋日付＋本文＋矢印」の行を区切り線でつないだリストにする

Elevation & Depth

• 影はほとんど使わず、色の濃さの違いで階層を見せる
• 写真に半透明の暗い膜を重ね、その上に文字を置く
• カードのリンク部分は半透明の黒い面で浮かせて見せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。全幅の背景写真と 16:9 のサムネイル
• セクション境界: 直線で切り替える。英字見出しを境目にまたがせて置く
• 角丸は一切使わない
• 矢印アイコンは小さな正方形の枠に、右上向きの斜め矢印を入れる
• 装飾に斜めストライプや六角形メッシュの帯を使う

Components

• ハッシュ英字見出し（section-hash-title）: 「# 」付きの赤い大きな英字。セクションの上端にまたがせて置く
• VIEW MORE リンク（link-view-more）: 白い英字の横に、赤い正方形の枠と斜め矢印を並べる
• 問い合わせボタン（button-primary）: ヘッダー右端に置く赤塗りの長方形ボタン
• 半透明リンクパネル（link-panel）: 写真の上に置く半透明の黒い帯。左に項目名、右に赤い矢印を配置する
• 下線付き日本語見出し（heading-underline）: 白い太字の見出しの下に、短い赤線を引く
• 記事カード（media-card）: 16:9 のサムネイルの下に、白い太字のタイトルを 2 行で入れる
• ニュース行（news-row）: サムネイル・日付とカテゴリ・本文・矢印を横に並べ、行の下に赤系の線を引く

Do's and Don'ts

Do - 暗い写真を全幅に敷き、白文字を重ねる - 赤は見出しと矢印に絞り、少ない面積で効かせる - セクションごとに地の色を黒・グレー・写真・深紅と切り替える - 英字見出しは大胆に大きくし、画面端で途切れてもよい

Don't - 白や淡い色の地を広く使わない - 角丸のボタンやピル型を使わない - やわらかいパステル色を使わない - 装飾的な影やグラデーションのボタンを使わない

Page Structure

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

1. ヘッダー（ナビゲーションと問い合わせへの導線）: 写真の上に透過で重ねる。左にロゴ、右に小さな白文字のメニューと赤いボタンを置く
2. ファーストビュー（ビジョンを示す）: 車載カメラ風の全幅写真に、白い太字のキャッチを 2 行で中央に重ねる
3. 採用導線（採用ページへ誘導する）: オフィス写真の左に見出しと短い文、右に半透明のリンクパネルを 2 本置く
4. ミッション（企業の使命を伝える）: 空撮写真を地に敷き、左に文字、右に車両写真を置く
5. 技術的信念（技術の考え方を伝える）: 前のセクションと左右を反転し、左に人物写真、右に文字を置く
6. 情報発信（記事・ブログへ誘導する）: 黒地に、3 列の記事カードを 2 カテゴリ分並べる。右端に六角形メッシュの帯を置く
7. お知らせ（ニュースを一覧で見せる）: ダークグレーに斜めストライプの地。区切り線付きのリストを並べ、末尾に VIEW MORE を置く
8. 会社情報（会社紹介へ誘導する）: 深紅の地の左に見出しと文、右に大きな白いロゴを置く
9. フッター（所在地とサイトマップを示す）: 黒地の左にロゴと住所、右に 2 列のリンクを並べる

Imagery

• 実機・車両・オフィス・空撮などの実写を使い、全体を暗く寒色寄りに補正する
• 人物はスーツ姿で真剣な表情の、正面からの写真にする
• 動画サムネイルは赤と白の太字テロップ入りで、勢いのあるデザインにする
• 装飾には暗い斜めストライプと赤い六角形メッシュを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では 2 カラムを縦積みにし、写真を上、文字を下に置く
• 英字見出しは SP で 30〜36px 程度にし、はみ出しは許容する
• 記事カードは SP で 1 列か、横スクロールにする
• ヘッダーメニューは SP でハンバーガーメニューにまとめ、問い合わせボタンは残す
• ニュース行は SP でサムネイルを小さくし、本文を 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 行書くと起動時に読み込まれる。