--- version: alpha name: Bright Blue Grid Lab Finance Media LP description: 鮮やかなロイヤルブルーと淡い水色、方眼紙の背景でまとめた投資学習メディアの LP。極太の欧文見出しに日本語の小見出しを添え、点線の円で囲んだ写真や 3D イラストを使う。研究所らしい親しみやすさと信頼感を両立させている。 colors: primary: '#0163FE' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#CFE5FC' line: '#BDD2E6' tint-1: '#D0E4FC' secondary: '#0967FD' text: '#0262F7' text-body: '#333333' accent-1: '#F7763B' accent-2: '#F38B95' dark-section: '#174DAC' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-view-more: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px badge-step: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px photo-circle-dotted: backgroundColor: '{colors.tint-1}' rounded: '{rounded.full}' height: 180px heading-section: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px highlight-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 52px news-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 180px card-person: rounded: '{rounded.lg}' height: 260px label-new: textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 30px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0163FE` | ブランドの青。ヘッダー・帯・濃色セクション・見出し文字に使う | 26% | 画素の実測 | | `on-primary` | `#FFFFFF` | 青地の上の白文字 | 3% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 26% | 画素の実測 | | `background-alt` | `#CFE5FC` | 水色のセクション地 | 18% | 画素の実測 | | `line` | `#BDD2E6` | 方眼の罫線 | 6% | 画素の主要色に補正 | | `tint-1` | `#D0E4FC` | 画像カード・写真円の淡い地 | 4% | 画素の実測 | | `secondary` | `#0967FD` | 濃色セクションの装飾線（コートライン） | 2% | 画素の主要色に補正 | | `text` | `#0262F7` | 見出し・強調テキストの青 | 3% | 画素の実測 | | `text-body` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `accent-1` | `#F7763B` | NEW ラベルのオレンジ | 0% | 画素の実測 | | `accent-2` | `#F38B95` | イラストの差し色ピンク | 1% | 画素の実測 | | `dark-section` | `#174DAC` | 円内の写真の青い陰影 | 3% | 画素の主要色に補正 | - 白・方眼の白・水色・青ベタの地を、セクションごとに交互に切り替える - セクションの境目には太さ約 16px の青い帯を入れる - 見出しは青、本文は濃いグレーにする。青地のセクションだけ白文字にする - オレンジは NEW ラベルなど、ごく小さな面積に限って使う - 画像は淡い水色の角丸カードに載せ、配色を青系でそろえる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の英字見出し | 欧文サンセリフ | Montserrat | 900 | 56px | 1.0 | 0.0em | | `headline-lg` | セクションの日本語キャッチ | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.4 | 0.02em | | `headline-md` | 記事タイトル・小見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.35 | 0.02em | | `headline-sm` | 英字見出しの下に添える日本語の副題 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.3 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 15px | 2.1 | 0.03em | | `accent` | 日付などの大きな数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | | `label-button` | VIEW MORE・STEP ラベル | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.03em | - 英字の大見出し＋日本語の小見出しを中央揃えで 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-a1f028e4`（元 LP の URL から採番） - **元 LP**: https://www.saison-am.co.jp/tsumitatesoken/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。