DESIGN.md — 黄×緑のポップな地域密着企業 LP（Vivid Yellow Green Local Corporate Pop LP）

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

Overview

• 業種: その他 ／ 雰囲気: ポップ・元気、親しみ・手作り感、力強い・インパクト
• キーワード: 原色ポップ・地域密着・キャラクター・ちぎり紙・角丸カード・吹き出し
• 地の質感: ベタ塗りのフラット面に写真を重ねる。紙をちぎったようなギザギザの縁取りや紙吹雪状の三角形を少し散らす
• 形: 大きな角丸パネル、ピル型ボタン、不規則な多角形の写真マスク、タブ付きのフォルダ形パネル
• 温度感: 明るく暖かい。元気で親しみやすい

Colors

• 地色は黄・淡グレー・原色パネルを交互に使い、セクションの切り替えを色で見せる
• 黄の地に置く文字は墨色。緑・青・ピンクの面に置く文字は白
• 情報量の多いセクション（事業・ニュース）は淡グレー地に白カードを置く
• 主ボタンは黒地に白文字。色面の上では白地に墨文字に反転する
• 英字ラベルと点は緑に統一し、見出しの前に置く
• 番号付きの3つのパネルは青→緑→ピンクの順に色を変える

Typography

• 見出しの上に『英字ラベル＋緑の点＋日本語ラベル』を緑で置く
• コンセプト文は中央揃えにし、行間を2倍以上とって余白で読ませる
• キャッチは白いちぎり紙の帯に手書き風の書体で載せ、行ごとに少し傾けてずらす
• 斜体の大きな英字ワードは白で入れ、下に反転させた影を付ける
• 本文は太めのゴシックで、細いウェイトは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真やカードは横スクロールのカルーセルで見せる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 左右に約18pxの余白を取り、パネルは画面幅の約93%にする
• セクションは上の角が大きく丸い面として前のセクションに重ねる
• 見出しブロックは左揃え、コンセプト文だけ中央揃え
• 写真は少しずつ高さをずらして横に並べ、画面端ではみ出させる
• キャラクターと吹き出しをセクションの境目に置いてつなぐ

Elevation & Depth

• 基本はフラットで、影はほぼ使わない
• 白カードは地色との明度差だけで浮かせる
• 問い合わせカードは薄いグレーの太い縁で二重枠にする

Shapes

• 角丸: 小 12px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形が基本。コンセプト部分ではギザギザの多角形で切り抜く
• セクション境界: 上角を丸めたパネルを重ねる。FVの下は手でちぎったような波形の境目
• 番号パネルは左上にタブがあるフォルダの形にする
• タグとボタンはすべてピル型
• FVの写真は緑の太い枠で囲み、縁を不規則に揺らす
• フッターの上辺はロゴの位置だけ半円状に盛り上げる

Components

• 黒ピル型ボタン（button-primary）: 左に白い点、中央に文字、右に白い丸の中の矢印を置く
• 白ピル型ボタン（button-on-color）: 色パネルの上で使う。左に緑の点、右に黒丸の矢印
• 英日併記ラベル（section-label）: 英字、緑の点、日本語の順に並べる見出し上のラベル
• ちぎり紙キャッチ帯（torn-paper-caption）: 不規則な白い帯に手書き風の文字を載せ、行ごとに傾ける
• キーワード枠（keyword-pill）: 本文の途中に入れる緑の枠線付き白ピルで、キーワードを3つ並べる
• 番号付きフォルダパネル（folder-panel）: 左上のタブに番号、小見出し、大きな1語、説明、白ボタン、写真の順に縦に並べる
• ニュースカード（news-card）: 白い角丸カードに写真、日付とカテゴリの点、2行のタイトルを入れる。横スクロールで進捗バーと矢印を付ける
• カテゴリタグ（filter-tag）: 白ピルに色付きの点と文字。選択中は黄色の枠線
• キャラ吹き出し（speech-bubble）: ギザギザの白い吹き出しに小さく太い文字を入れ、キャラクターの横に置く
• 誘導バナー（banner-card）: 青地にドット柄、黄色の見出し、キャラクター、右下に白い丸の矢印

Do's and Don'ts

Do - 黄・緑・青・ピンクの原色面をはっきり切り替えて使う - キャラクターと吹き出しを各所に置いて親しみを出す - ボタンは必ずピル型にし、点と丸矢印を付ける - 見出しの上には英日併記の緑ラベルを置く - 写真は角丸にし、少しずつ高さをずらして並べる

Don't - くすんだ色や中間色をメインにしない - 影の強いカードや立体的なボタンにしない - 細い明朝体で高級感を出さない - 四角い直角のボタンを使わない - 原色面の上に墨色の小さい文字を置かない

Page Structure

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

1. ファーストビュー（キャラクターと地域の風景で第一印象をつくる）: 緑のギザギザ枠で全面写真を囲み、左上にロゴ、右上に丸いメニューボタン、下に小さな英字とscroll表示を置く
2. 私たちについて（企業の想いと事業領域を伝える）: 黄色の地にちぎり紙のキャッチ、緑ラベル、中央揃えの本文、キーワードピルを置き、最後に強調の白帯を入れる
3. 風景コラージュ（地域の魅力を見せる）: 黄色の地に多角形で切り抜いた写真を散らし、紙吹雪を添え、斜体の英字ワードを大きく入れる
4. 事業紹介（事業の全体像へ誘導する）: 淡グレーの角丸パネルに見出し、本文、黒ボタン、人物写真のカルーセル、青い誘導バナーを並べる
5. 地域プロジェクト（地域貢献の取り組みを伝える）: 写真のグリッドに白カードを重ね、黒ボタンとキャラクターの吹き出しを添える
6. ニュース（最新情報を伝える）: カテゴリタグの群、横スクロールのニュースカード、進捗バー、一覧ボタン
7. 会社案内（企業情報の3つの入口を見せる）: 黄色の地に青・緑・ピンクの番号付きフォルダパネルを縦に積む
8. 周年バナー（特設サイトへ誘導する）: 生成り色の角丸バナーに写真を散らし、中央に白いピルボタンを置く
9. 採用情報（求職者を採用ページへ誘導する）: 緑の角丸パネルに重ねた写真、白抜きの見出し、白ボタン、キャラクターと吹き出し
10. 問い合わせ・フッター（問い合わせとサイト内の回遊）: 黄色の地に、上辺が半円に盛り上がった部分のロゴ、二重枠の問い合わせカード、線で区切ったリンク一覧、SNSの丸ボタン、TOPへ戻るキャラクター

Imagery

• 地域の海・街並み・建物を晴天の下で明るく撮った写真
• 笑顔のスタッフを近くから撮った自然なスナップ
• 着ぐるみキャラクターを日常の場面に置いて撮った写真
• 三角形や丸の紙吹雪を原色で小さく散らす
• 白い吹き出しはギザギザの手描き風の線にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は内容幅を約1000pxにし、見出しと写真を左右2カラムに並べる
• PC の会社案内パネルは、左に文字・右に写真の横長パネルにする
• PC のニュースは4列のカードを横スクロールで見せる
• PC はヘッダーにテキストメニューと、緑・青のピル型ボタンを横に並べる
• PC のFVは手書き風のキャッチを写真の左側に大きく重ねる

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