DESIGN.md — 鮮やかな青×方眼の投資学習メディア LP（Bright Blue Grid Lab Finance Media LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、クール・先進的
• キーワード: ロイヤルブルー・方眼紙背景・極太欧文見出し・点線の円フレーム・3Dイラスト・研究所
• 地の質感: 白地に淡い青の方眼線を引き、実験ノートのような質感を出す。影は使わずフラットに仕上げる。
• 形: 円形の写真フレームに青い点線を添える。カードは角丸 16〜24px、矢印ボタンは細い線の正円にする。
• 温度感: 爽やかで少しクール。オレンジとピンクの差し色でやや温かみを足す。

Colors

• 白・方眼の白・水色・青ベタの地を、セクションごとに交互に切り替える
• セクションの境目には太さ約 16px の青い帯を入れる
• 見出しは青、本文は濃いグレーにする。青地のセクションだけ白文字にする
• オレンジは NEW ラベルなど、ごく小さな面積に限って使う
• 画像は淡い水色の角丸カードに載せ、配色を青系でそろえる

Typography

• 英字の大見出し＋日本語の小見出しを中央揃えで 2 段に重ねる
• 日本語の見出しは極太で詰め気味に組み、青で塗る
• キーワードは青ベタの角丸ボックスに白抜きで入れて強調する
• 本文の行間は 2.0 前後と広めに取る
• ラベル類は欧文の大文字で統一する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物カードだけ横にはみ出す 2 列グリッドにする
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 16px
• 見出しは中央揃え、本文とボタンは左揃えを基本にする（動画セクションは中央揃え）
• セクション上部に 60〜80px の余白を取る
• テキストのあとにボタン、そのあとに画像カードの順に並べる

Elevation & Depth

• 影は基本的に使わず、フラットに仕上げる
• 立体感は 3D イラストと押し出し風のロゴに任せる
• カードは白い太枠で地から浮かせて見せる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 人物は円形に切り抜き、外側に青い点線の円を添える。イラストや動画は角丸の長方形にする
• セクション境界: 直線の青い太帯で区切る
• STEP ラベルは青いピル型にする
• 動画サムネイルは角丸＋外側に青い点線枠をつける
• VIEW MORE の矢印は細い線の正円で囲む

Components

• VIEW MORE ボタン（button-view-more）: 欧文ラベルの右に細い線の正円を置き、中に小さな矢印を入れる
• STEP ピルラベル（badge-step）: 青ベタのピルに白文字。番号と短い動詞を縦線で区切る
• 点線の円フレーム写真（photo-circle-dotted）: 淡い水色の円に人物やアイコンを置き、外側に青い点線を回す
• 英字＋和文のセクション見出し（heading-section）: 極太の英字見出しの下に、小さな日本語の副題を中央揃えで添える
• キーワード白抜きボックス（highlight-box）: 見出し中の語を青い角丸ボックスに白文字で入れる
• 最新記事バー（news-bar）: 青地に小さな欧文ラベル、大きな日付、下線付きのリンクを並べる
• 人物カード（card-person）: 白い太枠の角丸カード。中は淡い水色の地に人物写真を入れる
• NEW ラベル（label-new）: オレンジの欧文を左右のスラッシュで挟む

Do's and Don'ts

Do - 地色を白・方眼・水色・青で交互に切り替える - 見出しは英字と和文の 2 段構成で統一する - 人物写真は円形の点線フレームに入れる - 3D 風のコインやグラフのイラストで親しみを出す - 境目に青い帯を入れてリズムをつける

Don't - 暗い色や重い影を多用しない - 青以外の色を大きな面に使わない - 明朝体で堅く見せない - 写真を地の上に四角いまま置かない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（学習の流れとブランドを一目で伝える）: 方眼の地の中央に押し出し風の極太ロゴを置く。周囲に点線の円の人物とアイコンを 5 つ配置し、STEP ラベルでつなぐ
2. 最新記事（更新性を示す）: 青い帯に大きな日付と、下線付きの記事タイトルを入れる
3. サービス紹介（メディアの立ち位置を伝える）: 白地。英字の見出しに続けて、キーワードを白抜きした大きなキャッチを置き、本文・VIEW MORE・イラストカードの順に並べる
4. 実践企画（新しいコンテンツへ誘導する）: 水色の地に NEW ラベルと英字見出し。タブレットを持つ手の 3D イラストの中に写真をはめ込む
5. セミナー動画（動画で学べることを示す）: 方眼の地。点線枠の動画サムネイルに PLAY ボタンを重ね、本文は中央揃えにする
6. インタビュー（利用者のリアルな声で共感を得る）: 青ベタにコートラインの装飾を引き、白文字の見出しと本文を置く。白枠の人物カードを横にはみ出すグリッドで並べる

Imagery

• 人物は白衣やユニフォーム姿で、淡い水色の背景に笑顔で写す
• コイン・グラフ・電球・旗などは 3D クレイ風のイラストにする
• 動画サムネイルには青いデュオトーンをかける
• 背景には淡い青の方眼線や、スポーツコートのラインを薄く引く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのアイコン付きナビを置き、右端に縦書きの青いタブを固定する
• PC はテキストと画像を左右 2 カラムで並べる
• PC のファーストビューはロゴを中央に、円の要素をその周囲に配置する
• PC のインタビューは左にテキスト、右に縦スクロールのカード列を置く
• PC はコンテンツ幅を約 1000px に抑え、方眼の地を全幅に敷く

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