DESIGN.md — 朱赤×青×黒のマスコット企業サイト LP（Playful Mascot Corporate Marketing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、クール・先進的、親しみ・手作り感、力強い・インパクト
• キーワード: ライトグレー地・黒枠白カード・黒ピルボタン・マスコット吹き出し・斜め色面・括弧付き英字ラベル
• 地の質感: フラットな単色面。写真は明るいオフィス撮影、イラストはベタ塗りのキャラクター
• 形: 角丸カードに 1px の黒線。ボタンは完全なピル型。背景は斜めの帯や波形の有機的な形
• 温度感: やや寒色寄りのグレー地に、朱赤とオレンジで熱を加えた中間の温度

Colors

• 地はライトグレーで統一し、白カードを浮かせる
• 朱赤はヒーロー帯・装飾線・ページトップなどブランド記号に限定
• コバルト青は英字ラベル・タグ・データ節の大きな色面に使う
• 主ボタンは常に黒地白文字の矢印付き
• オレンジはマスコットだけに使い、UI には使わない
• お問い合わせは黒パネルで締めて白文字にする

Typography

• 見出しの上に括弧で囲んだ小さな青い英字ラベルを置く
• 見出しの左上に青い引用符マークを添える
• 本文は行間を広く（2.0前後）とる
• 背景に巨大な欧文アウトラインを透かして敷く
• 特集見出しは極太ディスプレイ書体で縦組みも使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードやインタビューは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右 12px 程度の余白で画面いっぱいに置く
• 見出しとボタンは横並びで右に黒い矢印ピルを置く
• セクション境界ごとに地色を切り替える
• マスコットはセクションの角に一部はみ出させる

Elevation & Depth

• 影はほぼ使わず、1px の黒線で輪郭をつける
• 写真カードは背面に青灰のオフセット面を重ねて奥行きを出す
• お知らせカードは線なしの白面で地から浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の縦長長方形に黒の細枠。番号付きの円バッジを角に重ねる
• セクション境界: 斜めの直線帯と、波打つ有機的な白い形
• ボタン・タグ・吹き出しはすべてピル型
• 番号は白地黒枠の正円
• 装飾線は朱赤の太い曲線（獣の口元のようなシンメトリー模様）

Components

• 黒ピル矢印ボタン（button-primary）: 英字ラベル＋右向き矢印。中央または見出し右に配置
• 黒枠サービスカード（service-card）: 引用符・英字ラベル・小見出し・大見出し・説明文と右に矢印ボタン
• 括弧付き英字ラベル（label-bracket）: 細い括弧で挟んだ青い小英字。見出しの上に添える
• マスコット吹き出し（mascot-bubble）: 青ピルの白文字の短いひと言をオレンジのキャラクターに添える
• 役職・カテゴリタグ（tag-role）: 写真下端やお知らせに重ねる青いピルタグ
• 番号付き人物カード（interview-card）: 黒枠角丸の縦長写真、円形番号、タイトル2行と入社年
• お知らせ行（news-item）: 縦書き日付・サムネイル・タグ・タイトル・小さな黒矢印
• お問い合わせ黒パネル（contact-panel）: 黒地に白見出し、白い大型ピルのフォームボタン、両端にマスコット
• ページトップ帯（pagetop-bar）: 朱赤の角丸バーに白い英字と上矢印

Do's and Don'ts

Do - カードには 1px の黒枠と角丸 12px をつける - 見出しには引用符と括弧付き英字ラベルをセットで使う - マスコットに短いセリフ吹き出しを持たせ、各節に散らす - 斜め・波形の色面で節を区切りリズムを作る - ボタンは黒ピル＋矢印で統一する

Don't - 影やグラデーションを多用しない - 朱赤をボタンや本文の強調に乱用しない - 角の立った四角ボタンを使わない - マスコット以外にオレンジを使わない - 本文の行間を詰めない

Page Structure

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

1. ヘッダー（ロゴとメニュー）: グレー地、左にロゴ、右に黒ピルのハンバーガー
2. ファーストビュー（企業の姿勢を一言で示す）: 黒枠角丸の写真に、白帯黒枠のキャッチを重ねる。背後は朱赤の斜め帯とマスコット
3. サービス紹介（主要事業を2つ提示）: 朱赤地の上に黒枠白カードを縦に積み、背景に巨大な透かし英字
4. 実績企業（信頼の裏付け）: 白カード内にロゴを横並び、マスコット吹き出しを添える
5. コンセプト（理念を語る）: 朱赤の装飾線で上下を挟み、大見出しと長文、中央に黒ピル
6. 写真ギャラリー（社内の雰囲気）: 黒枠角丸写真の横スクロール、下に青の色面が食い込む
7. データ紹介（数字で会社を伝える）: 青地に白い波形ブロック、ポップ書体見出し、グレーのカードにマスコット
8. お客様の声（導入事例）: 縦組み極太見出し、集合写真に青い引用ボックスを重ねる
9. 社員インタビュー（人を見せる）: 白地、番号付き人物カードのカルーセル、青タグ
10. お知らせ（最新情報）: 白い角丸の行を縦に3件、縦書き日付
11. お問い合わせ（相談への誘導）: 斜め切りの写真に大きな欧文、その下に黒パネルと白ピルボタン
12. フッター（サイトマップと所在地）: 2列のリンク、赤い点付きサブリンク、縦書きコピーライト、朱赤のページトップ帯

Imagery

• 明るい自然光のオフィスで、スーツや白衣の人物が働く様子を撮影
• 人物写真は笑顔のバストアップで、白っぽい背景
• マスコットはオレンジの体に青のたてがみを持つ獣。太い輪郭のベタ塗りで、指し棒やPCを持たせる
• 朱赤の太い曲線で左右対称の伝統文様風の装飾を描く
• 背景に大きな欧文の白アウトラインを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビと黒ピルの問い合わせボタンを横並びにする
• PC はサービスカードを2列にし、写真ギャラリーは4枚並べる
• PC はお知らせを左に見出し、右にリスト行の2カラムにする
• PC はフッターにロゴ・リンク・黒パネルの問い合わせを横並びにし、ページトップは右端の縦帯にする
• コンセプト本文は PC では中央寄せの幅広ブロックにする

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