DESIGN.md — 赤×紺の幾何学線で組むサステナ情報メディア LP（Red Geometric Sustainability Media LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、シンプル・ミニマル、クール・先進的
• キーワード: 幾何学ライン・破線枠カード・赤と紺・生成り地・ハッシュタグ・メディア型
• 地の質感: 赤い面に細かいノイズ（紙やすり状の粒子）をかけ、白い細線で円・対角線・グリッドを描く。そのほかの面はフラット。
• 形: 角丸は小さめ。カードは1px破線の枠で囲む。キービジュアルは角を段状に切り欠いた形にする。ボタンはピル型。
• 温度感: 暖色の赤と寒色の紺を組み合わせた、中立で知的な温度感

Colors

• 地は生成りで統一し、白に近い色で清潔感を出す。
• 赤はキービジュアル、ボタン、見出し前の四角マークだけに使う。
• 紺は全幅の帯セクションと区切り線に使い、ページを引き締める。
• ハッシュタグは淡いピンクの地に赤みのある文字で表示する。
• コンテンツタイルは赤・緑・水色・黄土の4色に紺の三角形を重ねて描き分ける。
• ランキングのバッジは金・灰・銅・淡色の順で色を変える。
• hero-visual は文字 #333333 × 背景 #DD2A2B のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA797A、4.52:1）を使う。
• rank-badge は文字 #FFFFFF × 背景 #AC7E1B のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#986F18、4.54:1）を使う。
• content-tile は文字 #E8FAFE × 背景 #53CBDC のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1C7C89、4.55:1）を使う。

Typography

• 見出しは大きくしすぎず、15px前後の太字に左の赤い四角マークを付ける。
• 記事タイトルは2行で切り、末尾は三点リーダーで省略する。
• 日付やタグは10px程度の小さな文字にして、情報の階層差をつける。
• 字間はやや広め（0.03〜0.08em）にして、落ち着いた印象にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ランキングとセミナー一覧は左にサムネイル、右にテキストを置く横並びの行にする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 8px（375px 幅換算）
• カードは破線枠で囲み、カード同士は約16px空ける。
• リスト形式の行は上下を破線で区切る。
• セクション同士の境目に紺の細い横線を引く。
• 一覧の最後には、幅いっぱい（または約8割幅）の赤いピル型ボタンを置く。
• キーワード帯は横にはみ出すタイルを2段並べ、横スクロールで見せる。

Elevation & Depth

• 影は基本的に使わず、フラットに仕上げる。
• 奥行きは破線枠と面の色の違いで表現する。
• 灰色の面は大きな角丸で背景から浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の横長長方形に切り抜き、左下を角丸のタブ状にくり抜いて日付を載せる。
• セクション境界: 紺の1px横線、または全幅の紺帯で区切る。
• キービジュアルは右上をキーワードパネルの形に段状に切り欠く。
• 矢印ボタンは小さな赤いピル型（約38×20px）に白い矢印を入れる。
• ハッシュタグは角丸4px程度の小さなラベルにする。
• カード枠はすべて1pxの破線にする。

Components

• 幾何学線キービジュアル（hero-visual）: ノイズをかけた赤い面に白い細線で円・対角線を描き、左下に白地のタイトルタブを重ねる。
• トレンドキーワードパネル（keyword-panel）: 紺の小さなパネルに、英字の小見出しとタグを縦に並べる。
• 破線枠の記事カード（article-card）: 上から写真、日付タブ、2行タイトル、ハッシュタグ、右下の矢印ボタンの順に並べる。
• ハッシュタグ（hashtag）: 淡いピンク地に「#」付きの短い語を表示し、何個も折り返して並べる。
• 矢印ボタン（arrow-pill）: 赤い小さなピル型ボタンに白い右矢印を入れる。
• 一覧ボタン（button-primary）: 赤いピル型で、左に文字、右端に矢印を置く。
• セクション見出し（section-heading）: 赤い角丸の小さな四角の横に、太字の短い見出しを置く。
• キーワードタイル（keyword-tile）: 紺帯の上に、三角形の柄が入った破線枠の角丸タイルを置き、中央に白文字でタグを表示する。
• 順位バッジ（rank-badge）: 右端を旗のように切り欠いた小さなラベルに順位を表示し、1位から順に金・灰・銅で色分けする。
• 色面コンテンツタイル（content-tile）: 色面に紺の三角形を重ね、左上に白文字、右下に矢印ボタンを置く。

Do's and Don'ts

Do - 赤は面とボタンだけに絞り、広い範囲は生成りの地で見せる。 - カードの枠はすべて細い破線でそろえる。 - 日付・タイトル・タグ・矢印の並び順をすべてのカードで同じにする。 - 飾りには細い幾何学線と三角形の分割柄を使う。 - セクション見出しの前には必ず赤い四角マークを付ける。

Don't - 濃い影やグラデーションのボタンを使わない。 - 赤の文字で長い本文を書かない。 - 大きな角丸や丸すぎる形を多用しない。 - ポップなイラストを主役にしない。 - 実線の太い枠でカードを囲まない。

Page Structure

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

1. ファーストビュー（メディアの存在感とトレンドの入口を見せる）: 段状に切り欠いた赤い幾何学ビジュアルの右上に紺のキーワードパネルを置き、左下にタイトルを配置する。
2. 注目記事（最新・注目の記事へ誘導する）: 破線枠の記事カードを縦に4枚並べる。
3. セミナー情報（受付中のイベントで申込を促す）: リード文の下に大きな写真カードを1枚置き、続けてサムネイル付きの行リストと一覧ボタンを並べる。
4. トレンドキーワード（テーマ別の回遊を促す）: 全幅の紺帯に、はみ出すキーワードタイルを2段並べる。
5. 新着コラム（コラム記事を読ませる）: 記事カードを縦に並べ、最後に赤い一覧ボタンを置く。
6. 人気ランキング（人気記事で信頼を示す）: 順位バッジ付きのサムネイル行を5件並べ、最後に赤い帯状バナーを置く。
7. おすすめコンテンツ（ヘルプや問い合わせなど主要ページへ導く）: 灰色の角丸の面に、4色の三角柄タイルを縦に並べる。
8. SNS・メルマガ登録（継続的な接点をつくる）: 破線枠のカード2枚に、アイコン付き見出し、説明、赤い枠線のボタンを入れる。
9. フッター（運営情報とリンクを載せる）: ロゴ、外部サイトへのバナー、テキストリンク、小さな赤いビジュアルを置き、最下部中央に紺のメニューボタンを配置する。

Imagery

• 写真はビジネスの現場、人物インタビュー、都市・工場・自然など環境テーマのものを使い、自然な色味にする。
• キービジュアルは写真を使わず、ノイズをかけた赤い面に白い細線の円・対角線・同心円を重ねて作る。
• 柄はポリゴン状に分割した三角形の重なりで作り、色面と紺を組み合わせる。
• ネットワーク図のような淡い水色のグラフィックをサムネイルに使ってもよい。
• アイコンは赤一色のシンプルな線や面で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部でキービジュアルと注目記事を左右2分割する。
• PC のセミナー欄は、リード文・写真カード・行リストの3列にする。
• PC の新着コラムは2列のカードグリッドにし、右側にランキングのサイドバーを置く。
• PC のおすすめコンテンツタイルは2×2に並べる。
• PC のフッターは、左にロゴ、右にSNSとメルマガのカードを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 行書くと起動時に読み込まれる。