DESIGN.md — 緑×白の手描きイラスト企業文化紹介 LP（Green Illustrated Corporate Culture Card LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 親しみ・手作り感、信頼・誠実、ポップ・元気
• キーワード: 深緑の全面背景・手描き人物イラスト・札型カード・アーチ型ステップ・方眼紙の地・黄色い強調見出し
• 地の質感: ベタ塗りの緑と白、後半はうすいグレーの方眼グリッド。影はほぼ使わない
• 形: 大きな角丸の白カード、上部だけ半円のアーチ枠、ゆるい波型のセクション境界
• 温度感: 明るく温かい。企業らしい誠実さに遊び心を加えたトーン

Colors

• 前半は緑を全面に敷き、白カードを浮かせる
• 後半はグレー地と方眼の白地に切り替えて落ち着かせる
• 強調見出しは緑地では黄色＋下線、白地では緑の帯に白文字
• 線とアイコンはすべて緑の単色で描く
• 赤や青は外部ロゴ以外に使わない

Typography

• 見出しは太字ゴシックで、2行に分けて大きく出す
• 見出しの上に小さな英字ラベルを中黒付きで添える
• STEP番号は英字の小ラベルと大きな2桁数字の2段組
• 本文は太めのグレーで読みやすさを優先する
• かるたの頭文字は白丸に黒の太字で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カルーセルは横スクロール
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約5%の余白を残して中央に置く
• ステップのアーチ枠は幅約70%で中央寄せし、縦に積む
• 目的・理由セクションは太い緑枠の大型コンテナで囲む
• イラストは見出しの右肩やカードの角にはみ出させて置く

Elevation & Depth

• 影はほぼ使わず、面と線の色の差で階層を出す
• かるた札だけ薄い影と傾きを付けて立体感を出す
• 白カードはフラットで、緑地との色の差で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜き。写真は角丸16pxの横長
• セクション境界: ゆるい波型カーブで緑からグレーへ切り替える
• ステップ枠は上部が半円で下が直角のアーチ形、緑線4px
• 大型コンテナは太い緑枠（約12px）と大きな角丸
• 吹き出しは角丸の枠線に小さなしっぽを付ける

Components

• 白枠ピルボタン（button-outline-pill）: 緑地の上に置く白い枠線のピル型。右に矢印を付ける
• タイトル看板（title-board）: 白い角丸の板の中に緑の二重枠。上段に英字名、下段に大きな日本語タイトル
• 枠付きラベル見出し（heading-label-box）: 緑地の角丸箱の内側に白線を引き、白文字で見出しを入れる
• アーチ型ステップカード（step-arch-card）: 上部半円の緑線枠。STEP番号、短い説明、緑の線画アイコンを入れる
• 緑帯見出し（band-heading）: 番号の横に緑ベタの帯を置き、白い太字で要点を入れる
• 吹き出し（speech-bubble）: 白地またはグレー線の角丸吹き出しに短い補足を入れる
• カルーセル操作（carousel-nav）: 白丸または緑丸の矢印ボタンと、ドットインジケーター
• 関連リンクカード（link-card）: 白地のカードにサムネイル、タイトル、説明文、緑の矢印を並べる
• 理由カード（point-card）: グレー線の角丸枠に淡緑の帯見出しと箇条書きを入れる

Do's and Don'ts

Do - 緑は1色を軸に、明暗2〜3段階だけで構成する - 手描き風の人物イラストを各セクションの端に添える - 工程は線画アイコンとアーチ枠で、やさしく図解する - 見出しは短く、2行に分けて大きく見せる - 後半は方眼の地で、ワークショップらしい雰囲気を出す

Don't - グラデーションや強い影を多用しない - 緑以外の強い色をUIに足さない - 写真素材だけでページを構成しない - 細い明朝体で硬い印象にしない - カードの角を直角だけにしない

Page Structure

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

1. ファーストビュー（企画名と親しみやすさを一目で伝える）: 緑の全面地の中央に白い看板を置き、四方を人物イラストで囲む
2. キャッチと導線（企画の趣旨を宣言し、一覧へ誘導する）: 黄色の太字見出しを集中線と下線で飾り、その下に白枠のピルボタン
3. カードカルーセル（作品を触って見せる）: 傾けた札を横並びにし、吹き出しで操作を案内、下に矢印とドット
4. 概要説明（成り立ちを説明する）: 白い大角丸カードに商品写真、太字のリード文、注釈。下を波型で切り替え
5. ピックアップ（おすすめ作品を紹介する）: 白カード上部に枠付きラベル見出し、札の表裏を並べたスライダー
6. 制作ステップ（作られた工程を見せる）: 英字ラベル付きの緑見出しに、4つのアーチ型カードを縦に積む
7. 目的（企画の狙いを3点で示す）: 太い緑枠の方眼コンテナに、番号と緑帯見出しを並べ、写真を添える
8. 選ばれた理由（この形式を選んだ理由を説明する）: 角丸枠のカードに淡緑の帯見出しと箇条書き、吹き出しとイラスト
9. 関連リンク（関連コンテンツへ回遊させる）: 青灰の帯に、ピル型ラベルと白い横長リンクカードを2枚
10. フッター（サイト共通の導線を置く）: グレー地にSNSアイコン、テキストリンク、枠線ボタン、コピーライト

Imagery

• 太めの黒い主線とフラットな彩色で描く、手描き風の人物イラスト
• オフィス・現場・在宅など、働く場面を明るい表情で描く
• 札はパステル調の背景色に、白丸のひらがな頭文字を入れる
• 工程アイコンは緑の単色線画で、丸みのある線にする
• 商品写真は淡い青グレー地に札を散らした俯瞰構図
• 見出しの周りに集中線やきらめきの小さな装飾を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はFVの看板を中央に置き、イラストを左右に広げる
• PC のカルーセルは札を5〜6枚横に並べる
• PC のピックアップは複数カードを横に並べ、縦書きの大きな英字を添える
• PC のステップは左に見出しとタブ、右にアーチ型カードを横長で積む
• PC の理由カードと関連リンクは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 行書くと起動時に読み込まれる。