DESIGN.md — 緑×白の清潔感ある福祉向けITサポートLP（Fresh Green Corporate IT Support LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的
• キーワード: エメラルドグリーン・淡いミント地・英字見出し・写真コラージュ・四角いドット装飾・曲線ライン
• 地の質感: ほぼフラット。緑パネルにうっすら格子柄と大きな透かし英字。白い背景に細い曲線を引く
• 形: 角丸 8〜12px のパネル、白いピル型ボタン、正円のアイコン枠、小さな正方形ドット
• 温度感: やや涼しめで、明るく清潔

Colors

• 地は白と淡いミントを交互に使い、要所だけ全面緑の角丸パネルにする
• 緑パネルの中の文字は白だけにする
• 英字見出しは白地なら濃紺、緑地なら白にする
• 主ボタンは濃紺のピル型。緑パネル上では白いピル型にする
• 明るい緑は小さな正方形ドットと矢印アイコンだけに使う
• 赤や暖色は使わず、寒色だけでまとめる
• fv-label-band は文字 #FFFFFF × 背景 #259D81 のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F846D、4.59:1）を使う。
• value-card は文字 #FFFFFF × 背景 #259D81 のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F846D、4.59:1）を使う。
• green-panel は文字 #FFFFFF × 背景 #259D81 のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F846D、4.59:1）を使う。

Typography

• 見出しは「大きな英字＋小さな日本語」の2段組にする
• 日本語の小見出しの前に緑の小さな四角を置く
• 英字は細めのウェイトで、余白を広くとる
• 本文は行間を広め（1.9）にとる
• 緑パネルの下端に、極薄の大きな英字を透かしで入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列も可
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 緑パネルは左右に余白を残し、角丸で浮かせて置く
• 見出しは左寄せ。お客様の種類（対象施設）のセクションだけ中央寄せにする
• サービスは白い小カードをグリッドに並べる
• ニュースは白い横長カードを縦に積み、右端に丸い矢印を置く
• 強みのカードは高さを段違いにずらして並べる

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,.05)）
• 写真カードには軽い影を付けて浮かせる
• 緑パネルは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。対象者の種類を示すイラストは正円の中に置く
• セクション境界: 大きなゆるい曲線の面と、細い曲線ラインで区切る
• ボタンはすべてピル型にし、右に矢印を付ける
• 矢印アイコンは小さな丸の中に入れる
• 四角いドットをランダムに散らす

Components

• 濃紺ピル型ボタン（button-primary）: 「詳しく見る」などに使う。右に矢印
• 白ピル型ボタン（button-on-green）: 緑パネル上に置くボタン
• 英日2段見出し（heading-bilingual）: 大きな英字の下に、緑の四角と日本語の小見出しを置く
• 緑帯キャッチ（fv-label-band）: 文字の行ごとに緑の帯を敷いた白文字のキャッチ
• ニュース行（news-row）: 日付とタイトルを入れた白い横長カード。右に緑丸の矢印
• 写真付き強みカード（value-card）: 上が写真、下が緑の面で、番号と見出しを入れる
• サービスカード（service-card）: アイコン、名称、矢印を横に並べた白い小カード
• 円形イラスト枠（circle-illust）: 淡いグレーの円の中に人物イラストを入れ、下にラベルを置く
• 緑の角丸パネル（green-panel）: 会社紹介・採用・問い合わせのセクションに使う。透かしの格子と大きな英字を入れる

Do's and Don'ts

Do - 白・ミント・緑の3段階で地の色を切り替える - 英字見出しには必ず日本語の小見出しを添える - 四角いドットと細い曲線で、軽い動きを出す - 写真は明るいオフィスで、笑顔の人物を選ぶ - ボタンはピル型にし、矢印を付ける

Don't - 暖色や原色の赤を使わない - 装飾の多い太い見出しや、セール風の帯を使わない - 緑パネルを画面幅いっぱいに置かず、角丸で浮かせる - 濃い影や立体的なボタンにしない - 1 セクションに文字を詰め込みすぎない

Page Structure

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

1. ヘッダー（ナビゲーションと問い合わせへの導線）: 左にロゴ、右に小さなナビと濃紺のピル型ボタン
2. ファーストビュー（事業内容をひと目で伝える）: 角丸写真を散らしたコラージュに、緑帯のキャッチを重ねる
3. リード文（会社の役割を短く説明する）: 太字のリード2行と本文。背景に細い曲線
4. ニュース（最新情報を見せる）: 白い横長カードを3行積む
5. 会社紹介（事業の全体像を見せる）: 緑パネルの左に見出しとボタン、右に3要素の循環図。下端に透かし英字
6. 強み（選ばれる理由を3つ示す）: 番号付きの写真カードを段違いに並べる
7. 対象のお客様（支援する施設の種類を示す）: 円形のイラストを4つ横に並べ、下にラベルを置く
8. サービス一覧（提供サービスを一覧で見せる）: ミント色の曲線の面の上に、アイコン付きの小カードをグリッドで並べる
9. 採用（採用ページへの導線）: 緑パネルの左に文章、右に社員写真を2列で並べる
10. 問い合わせCTA（問い合わせへ誘導する）: 緑パネルに英字見出しと白丸の矢印ボタン
11. フッター（会社情報とナビ）: 淡い曲線の地に、ロゴ・住所・ナビ・トップへ戻る緑の丸ボタン

Imagery

• 明るいオフィスで働くスーツ姿の人物写真。自然光で、笑顔のものを選ぶ
• 写真は角丸で切り抜き、少し重ねながら散らす
• 対象者の種類は、淡い緑とグレーの線画・フラットなイラストで描く
• 線アイコンは細線で、淡い緑の色にする
• 明るい緑の正方形ドットを散らして、デジタル感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像のみ。SP は 1 カラムに積み、緑パネルは左右に 16px の余白を残す
• FV のコラージュは写真 3〜4 枚に減らし、キャッチを下に置く
• 強みのカードは段違いをやめて縦に並べる
• 対象者の円形イラストは 2×2 に並べる
• サービスカードは 1 列か 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 行書くと起動時に読み込まれる。