DESIGN.md — 赤×グレージュのポップな企業ブランド LP（Corporate Red Pop Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 鮮やかな赤・グレージュ地・太い欧文見出し・斜めピル装飾・ずらし影カード・ワクワク感
• 地の質感: フラットな面に、半透明の赤〜ピンクの斜めピル型と円を重ねる。グラデーションは淡いピンク地だけに使う
• 形: 大きめの角丸カード、ピル型ボタン、円形の人物切り抜き、回転する円形テキスト
• 温度感: 暖色寄り。赤と淡いピンクで熱量を出し、グレージュで落ち着かせる

Colors

• 地はグレージュと白を交互にし、取り組み系の一区間だけ淡いピンクのグラデーション地にする
• 赤は欧文見出しの頭文字、和文ラベル帯、ボタン、矢印アイコンに限定する
• 欧文見出しは頭文字だけ赤、残りは黒にする
• 本文は黒系で、色文字の本文は使わない
• 装飾の斜めピルと円は淡ピンクを半透明で重ね、文字の邪魔をしない
• カードは白地に暖灰色のずらし影をつけて、地から浮かせる

Typography

• 欧文大見出しは極太で詰め、すぐ下に赤い和文ラベル帯を置く
• 本文は太め（500〜700）で字間を広めにとり、行間は 1.9〜2.0 にする
• 実績数値は赤い極太欧文で大きく、単位は小さな黒文字にする
• ボタンの文字は白・太字・中央揃えにし、右端に白丸の矢印をつける
• FV キャッチは和文極太で、行頭に丸囲みの頭文字を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルは横にはみ出させて 2 枚目をのぞかせる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 20px
• 欧文見出し・ラベル・リード・コンテンツ・ボタンの順に縦に積む
• セクション末尾に中央寄せの幅広ボタンを置く
• FV 直下にニュース 1 行とアコーディオン型の目次を置く
• 人物の円形切り抜きを見出しの右に重ねる

Elevation & Depth

• カードはぼかさない灰色の影を右下に約 6〜8px ずらす
• ボタンは影なしのフラット
• 人物は赤い円の上に重ねて立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード内の写真は角丸なしの長方形。人物は円形背景からはみ出す切り抜き
• セクション境界: 基本は直線。ピンク地セクションの上端だけゆるい円弧
• 赤ラベル帯は左が直角、右がピル型の非対称にする
• 装飾は 45° 前後に傾けた太いピル型と円
• 円形に回る欧文テキストのリングをセクション角に置く
• 実績カードは赤い枠線の角丸白ボックスにする

Components

• 赤ピル型 CTA（button-primary）: 赤い塗りに白い太字、右端に白丸の赤矢印。幅は約 85%
• 頭文字赤の欧文見出し（section-heading）: 極太欧文の頭文字だけ赤、下に和文ラベル帯をつける
• 赤ラベル帯（label-ribbon）: 赤地に白い和文。右端だけピル型に丸める
• 実績数値カード（stat-card）: 赤枠の白い角丸ボックス。ラベル・赤い大数字・注釈を縦に並べ、横にスライドする
• ずらし影カード（content-card）: 白地に写真・見出し・本文・ボタン。右下に灰色のずらし影
• 流れる赤帯（marquee-band）: 全幅の赤帯に白い極太キャッチを横に流す
• ニュース一覧（news-list）: 日付と本文を細線で区切り、右に赤丸矢印
• 目次アコーディオン（accordion-nav）: 頭文字赤の欧文と小さな和文、右に赤丸の下矢印
• 円形テキスト装飾（rotating-ring）: 赤い欧文が円を描く装飾リングをセクション角にはみ出させる

Do's and Don'ts

Do - 赤は 1 色に絞り、頭文字・帯・ボタンなど要所に使う - セクションごとに欧文見出しと赤ラベル帯をセットで置く - カードには必ずずらし影と大きめの角丸をつける - 背景に斜めのピルや円を淡く散らし、動きを出す - 人物写真は明るいスタジオ撮影で、指差しなどの元気なポーズにする

Don't - 赤以外の強い色をアクセントに足さない - 見出しを細い書体や明朝にしない - ボタンを角張った四角にしない - 影をぼかした柔らかいドロップシャドウにしない - 装飾を濃くして本文の読みやすさを損なわない

Page Structure

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

1. ファーストビュー（ブランドメッセージと人物で第一印象を作る）: 斜めの赤ピル背景に男女タレントの切り抜き。左上に丸囲みの頭文字つき極太キャッチを縦に 3 段並べ、右下に白パネルのロゴを置く
2. 最新ニュースと目次（更新情報とページ内の導線を示す）: ニュース 1 行のあとに、頭文字赤の欧文ラベルを並べたアコーディオン目次
3. リードメッセージ（企業の考えを伝える）: 白地に太めのゴシックを字間・行間広めで左揃え。後に流れる赤帯を置く
4. 会社概要（規模と信頼性を示す）: 欧文見出しと円形の人物、横にスライドする赤枠の実績数値カード、赤ボタン
5. 特集コンテンツ（注目の記事に誘導する）: グレージュ地にずらし影カードを縦に並べる。写真・太字見出し・本文・ボタンの順
6. インタビュー（働く人の声を見せる）: 白カードの横スクロールカルーセル。末尾に一覧へのボタン
7. 取り組み紹介（事業・ソリューションを紹介する）: 上端が円弧の淡いピンク地。写真・中央タイトル・ボタンの白カードを 4 枚並べる
8. 動画（CM や動画を見せる）: グレージュ地に 16:9 の動画埋め込みと中央の太字タイトルを縦に並べる
9. ニュース一覧（更新履歴を示す）: 白地に中央の欧文見出し、細線で区切ったリスト、もっと見るボタン
10. 関連リンク（関連サイトへ回遊させる）: 頭文字赤の和文見出しのあとに、ロゴやバナーと説明・MORE リンクを載せた白いずらし影カードを並べる

Imagery

• 人物は白〜明るいグレー背景のスタジオ撮影で切り抜く。スーツやオフィスカジュアルで動きのあるポーズ
• 人物の背後に赤〜ピンクの円を置き、肩から上がはみ出すようにする
• 事業写真は明るいオフィス・工場・医療の現場で、笑顔で協働する様子
• 背景装飾は 45° に傾けた太いピルと円。赤〜淡ピンクを半透明で重ねる
• AI・DX はタブレットと浮遊アイコンの合成で表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部にグローバルナビと横並びの目次を常時表示する
• PC は FV を横長にし、キャッチを左、人物を中央〜右に配置する
• 実績カードは PC で 3 つ横並び（SP は横スクロール）
• 特集カードは PC で写真左・テキスト右の横組み
• インタビュー・関連リンクは PC で 3 カラム、取り組みカードは 2 カラム
• ニュースは 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 行書くと起動時に読み込まれる。