--- version: alpha name: Navy and Natural Oak Craft Furniture Story LP description: 深い紺と生成り、白を基調にして、木目の板片を装飾として散らした家具産地の PR 型 LP。動画、分解写真、職人インタビュー、手描きイラストの利用シーンへと読み進める構成。縦書きの紺帯見出しと大きな欧文番号で、雑誌のような誌面にしている。 colors: primary: '#012E55' dark-section: '#004B6B' on-dark: '#E8F5F8' background: '#FFFFFF' background-alt: '#F7F4EF' surface: '#F0F0F0' tint-1: '#FCFDFC' accent-1: '#E4D5BA' accent-2: '#A5C282' text: '#1A1A1A' line: '#C9C9C9' secondary: '#1B85C4' accent-3: '#F6B52B' text-muted: '#4C8096' secondary-accessible: '#1874AB' typography: display: fontFamily: Montserrat fontSize: 62px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.15em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Mrs Saint Delafield fontSize: 36px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 0px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 32px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' vertical-question-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 260px chapter-number: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px speaker-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px arc-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 150px scene-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 230px underline-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px movie-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 52px button-external: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 54px contact-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 70px --- # DESIGN.md — 紺×生成りと木目の職人家具ストーリー LP（Navy and Natural Oak Craft Furniture Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: ナチュラル、信頼・誠実、シンプル・ミニマル、やさしい・柔らかい - **キーワード**: 紺と生成り・木目の板片装飾・縦書き帯見出し・大きな欧文番号・手描きイラスト・インタビュー誌面 - **地の質感**: 白と生成りのフラットな面に、無垢材の木目写真を短冊状に重ねて置く。影は付けない。 - **形**: 角の立った矩形が基本。見出しは円弧ラインで囲み、カードは上下の太線と左右の縦線で枠取りする。 - **温度感**: やや暖かい。木の色と生成りの温もりを紺で引き締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#012E55` | 見出し帯・番号・枠線の紺 | 4% | 画素の実測 | | `dark-section` | `#004B6B` | ヘッダー・フッターの紺青 | 4% | 画素の実測 | | `on-dark` | `#E8F5F8` | 紺地上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 43% | 画素の実測 | | `background-alt` | `#F7F4EF` | 生成りのセクション地 | 20% | 画素の実測 | | `surface` | `#F0F0F0` | 協力企業紹介のライトグレー地 | 5% | 画素の実測 | | `tint-1` | `#FCFDFC` | 話者名ラベルのベージュ地 | 1% | 画素の実測 | | `accent-1` | `#E4D5BA` | 木目装飾の明るいオーク色 | 3% | 画素の主要色に補正 | | `accent-2` | `#A5C282` | ソファの若草色（イラスト・写真） | 4% | 画素の実測 | | `text` | `#1A1A1A` | 見出し・本文の黒 | 4% | 推定 | | `line` | `#C9C9C9` | 番号下の細い区切り線 | 0% | 画素の実測 | | `secondary` | `#1B85C4` | SNS ボタンの青 | 1% | 画素の実測 | | `accent-3` | `#F6B52B` | 関連ページボタンの山吹色 | 1% | 画素の実測 | | `text-muted` | `#4C8096` | メニュー帯のくすみ青 | 0% | 画素の実測 | | `secondary-accessible` | `#1874AB` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成りを交互に切り替えて、セクションを区切る。 - 強調はすべて紺 1 色で行う。見出し帯、番号、枠線、下線に使う。 - 木目のオーク色は写真の板片として四隅に置くだけにする。文字には使わない。 - ヘッダーとフッターは紺青のベタ面にして、ページを上下から締める。 - 青と山吹色は外部リンクのボタンだけに使い、本文には持ち込まない。 - 協力企業などの付帯情報はライトグレー地で一段トーンを下げる。 - `button-external` は文字 `#E8F5F8` × 背景 `#1B85C4` のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1874AB`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | インタビュー各章の大きな欧文番号 | 欧文サンセリフ | Montserrat | 900 | 62px | 1.0 | 0.05em | | `headline-lg` | 円弧装飾付きのセクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.1em | | `headline-md` | 紺帯の縦書き質問見出し・下線付きの掛け合わせ見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.15em | | `headline-sm` | 利用シーンのカード見出し・話者名 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `body-lg` | インタビュー本文・導入文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.05em | | `note` | 動画キャプション・住所などの小さな情報 | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.03em | | `accent` | カード上の手書き英単語 | 欧文スクリプト | Mrs Saint Delafield | 400 | 36px | 1.0 | 0.0em | | `label-button` | 外部リンクボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.08em | - 和文はゴシック体に統一し、見出しは字間を広めにとる。 - インタビューの質問見出しは縦書きにして、紺の細長い帯に白抜きで置く。 - 章番号は太い欧文の 2 桁にして、紺で大きく見せる。 - シーン紹介のカードは、手書き風の英単語 1 語を枠の左上に重ねる。 - 本文は行間 2.0 前後をとり、ゆったり読ませる。 - 導入のリード文は中央揃え、インタビュー本文は左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。インタビュー章だけ、写真と縦書き見出しを左右に振り分ける。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 100px、基本単位 8px、カード内 32px（375px 幅換算） - インタビュー章では写真を画面端まで寄せ、反対側に番号と縦書き帯を置く。章ごとに左右を入れ替える。 - 写真 2 枚は大小をずらして配置し、余白をあえて残す。 - セクションの間には 80〜120px の大きな余白をとる。 - 木目の板片を 3〜4 枚重ねて、画面の左右端に交互に配置する。 - シーン紹介はイラストを全幅で置き、その下にカードを続ける。 ## Elevation & Depth - 影はほぼ使わず、フラットに仕上げる。 - 奥行きは、木目の板片と写真が重なるレイヤーで出す。 - 切り抜き家具の写真にはごく薄い接地影だけを付ける。 ## Shapes - **角丸**: 小 0px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物と工房の写真は角丸なしの矩形。家具は白抜きの切り抜きにする。 - **セクション境界**: 直線で背景色を切り替えるだけ。波や斜めの区切りは使わない。 - 見出し帯とラベルは角丸 0 の矩形にする。 - 外部リンクボタンだけ角丸 6〜8px にする。 - セクション見出しは、上下に途切れた紺の円弧で囲む。 - 動画には、紺の円形バッジを左上に重ねる。 ## Components - **縦書き質問帯**（`vertical-question-band`）: 紺の細長い帯に白抜きの縦書きで質問を入れる。2 本を並べて使う。 - **章番号**（`chapter-number`）: 太い欧文 2 桁の紺の番号。下にグレーの細線を引く。 - **話者名ラベル**（`speaker-label`）: ベージュ地の矩形に話者名を太字で入れ、発言の前に置く。 - **円弧見出し**（`arc-heading`）: 上下が途切れた紺の円弧で見出しを囲む。円の内側に等高線のような淡い模様を入れる。 - **シーン紹介カード**（`scene-card`）: 上下の太い紺線と左右の縦線で囲むカード。左上に手書き英単語を重ねる。 - **太下線の掛け合わせ見出し**（`underline-heading`）: 2 語を×でつなぐ紺の大きな文字に、紺の太い下線を引く。 - **動画番号バッジ**（`movie-badge`）: 紺の円に白文字で動画の番号を入れ、動画の左上に重ねる。 - **外部リンクボタン**（`button-external`）: アイコンと白文字を入れた角丸の横長ボタン。上に斜線で挟んだ小見出しを付ける。 - **問い合わせ帯**（`contact-band`）: 紺のベタ帯に白文字で問い合わせの案内を入れる。下に連絡先を中央揃えで置く。 ## Do's and Don'ts **Do** - 強調色は紺 1 色に絞り、余白を多めにとって上品にまとめる。 - 木目の板片装飾を、各セクションの左右端に繰り返し置く。 - インタビューは「番号＋縦書き帯＋写真 2 枚＋話者ラベル付き本文」の型を章ごとにそろえる。 - 利用シーンは手描きのやわらかいイラストと、英単語 1 語の見出しで見せる。 - 白と生成りの背景を交互に使い、セクションの切り替わりを伝える。 **Don't** - 鮮やかな色やグラデーションを本文エリアに使わない。 - 見出し帯や枠に角丸を付けない。 - 派手な影や立体的なボタンを使わない。 - 木目装飾を文字の背景にして、可読性を下げない。 - 縦書き見出しを横書きに置き換えない。誌面らしさが崩れる。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・ファーストビュー**（商品の世界観を一目で伝える）: 紺青のヘッダーとメニュー帯の下に、生活シーンの写真を全幅で置き、白いロゴを重ねる。 2. **コンセプト導入**（商品の概念を語りかけで説明する）: 白地に太字の左揃え本文を並べる。下に切り抜きの家具写真と、字間の広い欧文ロゴを置く。 3. **動画紹介**（動く様子を映像で見せる）: 動画埋め込みを 2 本並べ、左上に紺の円バッジを重ねる。下に中央揃えのキャプションを付ける。 4. **誕生の背景**（産地と技術の掛け合わせを伝える）: 生成り地に太下線の掛け合わせ見出しと中央揃えのリードを置き、分解した家具の切り抜き写真を続ける。 5. **職人インタビュー**（作り手の思いと技術で信頼を得る）: 円弧見出しの後に、01〜04 の章を続ける。各章は番号、縦書きの紺帯、大小の写真、話者ラベル付きの本文で組む。 6. **企業・協力者情報**（関わった企業を示す）: 建物の写真と住所を載せる。協力企業はライトグレー地に白い枠のロゴを置く。 7. **利用シーン**（暮らしでの価値を 4 つ提示する）: 生成り地に手描きイラストを全幅で置き、手書き英単語付きの紺枠カードを 4 回繰り返す。 8. **SNS・関連リンク**（情報発信と関連企画へ誘導する）: 斜線で挟んだ小見出しの下に、青と山吹色の角丸ボタンを縦に並べる。 9. **産地紹介・問い合わせ**（産地ブランドの説明と問い合わせ先を示す）: 紺の縦長ロゴ、説明文、紺の問い合わせ帯、中央揃えの連絡先の順に置く。 10. **フッター**（関連サイトのバナーと権利表記を載せる）: 紺青のベタ面に白地のバナーを縦に並べ、最後に小さな著作権表記を置く。 ## Imagery - 生活シーンは自然光の明るい室内で撮る。木の床、植物、若草色のファブリックを入れる。 - 家具は白背景の切り抜きにして、部品を浮かせた分解図でも見せる。 - 職人は工房で作業着姿のまま、自然体で撮る。色調はやや温かく、コントラストは控えめにする。 - 利用シーンは色鉛筆風の手描きイラストにする。人物は家族や高齢者などで、白い四角を背景に敷く。 - 装飾は無垢材の木目を短冊状に切り、段違いに重ねた写真素材を使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーを横並びのグローバルナビにする。 - PC のコンセプト導入は、左に本文、右に家具写真の 2 カラムにする。 - PC のインタビューは、番号と縦帯、本文、写真の 3 列を左右交互に組む。 - PC のシーン紹介は、イラストとカードを横に並べ、左右を交互に入れ替える。 - PC の協力企業・産地紹介は、ロゴと文章を横並びにする。フッターのバナーも横一列に並べる。 ## 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-29251267`（元 LP の URL から採番） - **元 LP**: https://www.okawa-kagu.net/robo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。