DESIGN.md — 生成り地と多色タイルの地域福祉 LP（Warm Kinari Community Welfare LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: やさしい・柔らかい、信頼・誠実、ナチュラル、親しみ・手作り感
• キーワード: 生成り地・こげ茶文字・分野別カラー・縦書き見出し・四分円装飾・日常写真
• 地の質感: 無地のフラットな面。影はほぼ使わず、白カードと生成り地の明度差だけで面を分ける
• 形: 角丸が小さめのカード、ピル型のボタンとタグ、角に置く原色の四分円
• 温度感: 暖かい。黄みのクリームと茶系でまとめ、原色はアクセントにだけ使う

Colors

• 地は生成り（#F7F5E9）を基本にする。ブログの帯だけ一段濃いベージュで区切る
• 文字は黒を使わず、すべてこげ茶系にする
• 支援分野ごとに固有の色を固定し、分野ブロックとタグの枠線で同じ色を使い回す
• 英字の小見出しラベルは朱色の文字だけにする
• 黄・緑・青・朱の四分円は、カードや写真の角にだけアクセントとして置く
• 主要ボタンは白地にこげ茶の細枠。朱の塗りボタンは検索など1か所だけに絞る
• category-block は文字 #FEFEFD × 背景 #CA4F26 のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C84E26、4.55:1）を使う。
• button-search は文字 #FEFEFD × 背景 #CA4F25 のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C84E25、4.55:1）を使う。
• slider-control は文字 #FEFEFD × 背景 #148E4C のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#138748、4.54:1）を使う。

Typography

• 全体に字間を 0.08〜0.15em と広めに取り、ゆったり読ませる
• FV のキャッチは細字の縦書きにし、カギ括弧で囲む
• 日本語見出しの下に、朱色の小さな英字ラベルを添える
• 本文は短い行で改行し、詩のように段落を重ねる
• ブログのタイトルには下線を引き、リンクとわかるようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。分野ブロックとサムネイルは 2 カラムにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 20〜28px
• 分野ブロックは 2 列グリッドで間隔 12px
• ブログは左にサムネイル・右に日付/タイトル/投稿元/タグを置く横並びリスト
• お知らせは日付とタイトルを点線で区切った縦リストにする
• 写真カルーセルは画面幅いっぱいに広げる

Elevation & Depth

• 影はほぼ使わず、フラットにする
• 白カードは生成り地との明度差だけで浮かせる
• 浮遊する検索ボタンにだけ薄い影を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸 8〜10px の長方形。ブログのサムネイルは横長の小さな角丸
• セクション境界: ブログ帯は上下の角が大きく丸い（24px）面で区切る。その他は余白だけで区切る
• カードや写真の角に、原色の四分円（扇形）を半分はみ出させて置く
• タグは色付きの細枠のピル型
• 主要ボタンは横幅いっぱいのピル型に細い枠線

Components

• 支援分野ブロック（category-block）: 分野ごとの色で塗ったカード。上に人物などのイラストがはみ出し、下に白いピル型の件数ラベルを置く
• 検索開始ボタン（button-search）: 白カード内に置く朱のピル型塗りボタン。上に黄色の丸い？アイコンを付ける
• 一覧ボタン（button-outline）: 白地にこげ茶の細枠を付けた横長ピル型。リストの末尾に置く
• 浮遊の探すボタン（floating-search）: 写真の上に重ねる白いピル型ボタン。黄色の？アイコンと太字を組み合わせる
• 矢印付きメニューカード（menu-card）: 白カードに朱の丸矢印と項目名を並べ、項目を点線で区切る。角に四分円の装飾を付ける
• 分野タグ（tag-pill）: 分野の色で細枠と文字を付けた小さなピル型
• 分野フィルタ帯（filter-tabs）: 白い横長の帯に分野名を横スクロールで並べる
• 白帯ラベル付き写真バナー（photo-label-banner）: 写真の上に、白地にこげ茶文字の帯ラベルを横書きと縦書きで重ねる
• スライダー操作（slider-control）: 緑のピル型。前へ・一時停止・次へのアイコンを並べる

Do's and Don'ts

Do - 生成り地とこげ茶文字を基本にし、温かい色調を保つ - 分野ごとの色を全ページで一貫させる - 見出しには英字の朱ラベルを添え、字間を広く取る - 写真は日常の笑顔を自然光で撮ったものを使う - 四分円の装飾は角に小さく、控えめに置く

Don't - 真っ黒の文字や純白の背景をページ全体に使わない - 強い影やグラデーションを使わない - 朱の塗りボタンを多用しない - 太すぎる見出しや煽り調の装飾を使わない - 分野の色を別の意味に流用しない

Page Structure

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

1. ファーストビュー（理念を静かに伝える）: 右に縦書きの細字キャッチ、左に短い行の理念文を置く。下には写真の横スライダーと浮遊ボタンを配置する
2. 団体紹介（誰のための団体かを示す）: 角丸の大きな写真、英字ラベル、見出し、短文の順に並べ、写真2枚を添える
3. 案内メニュー（下層ページへ誘導する）: 白カードに矢印付きの項目を点線区切りで並べ、角に四分円を付ける
4. 支援分野一覧（サービスの全体像を示す）: 色分けしたブロックを2列で並べ、イラストと件数ラベルを付ける。最後のマスは検索カードにする
5. ブログ（現場の日常を伝える）: 角丸のベージュ帯の中に、フィルタ帯とサムネイル付きの記事リスト、一覧ボタンを置く
6. お知らせ（公式の情報を伝える）: 日付とタイトルを点線で区切ったリストに、一覧ボタンを添える
7. 相談窓口（電話相談へ誘導する）: 白カードに語りかける文章と大見出し、縦書きの副題を置き、背景に曲線の線画を描く
8. 施設と問い合わせ（施設紹介と連絡への導線）: 写真付きの白カードを2つ並べる
9. 取り組みと採用バナー（活動紹介と人材募集）: 写真に白帯ラベルと細い英字を重ねたバナーを縦に並べる
10. フッター（連絡先などの基本情報）: 全幅の写真スライダーの下に、キャッチの再掲・住所・電話・リンクを並べ、縦書きのコピーライトを添える

Imagery

• 施設で過ごす利用者と職員の自然な笑顔を、自然光で撮る
• 色味は暖かく、少し明るめに仕上げる
• 分野アイコンは、太い線のないフラットで素朴なイラストにする
• 原色の四分円や曲線の線画を装飾に使う
• 写真に細字の英字コピーを大きく重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の理念文も縦書きにし、右寄せの縦書きキャッチと並べる
• PC は分野ブロックを5列横並びにし、検索は横長の帯にする
• PC のブログは4列のカードグリッドにする
• PC のお知らせは見出しを左、リストを右に置く2カラムにする
• 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 行書くと起動時に読み込まれる。