--- version: alpha name: Washi Gold and Ink Heritage Tourism LP description: 和紙風のオフホワイト地に墨色の帯と金箔の円をあしらった、地域観光と宿泊予約をつなぐ記事広告型 LP。明朝体の縦書き見出しや金色の雲紋で格調を出す。後半はホテルカードと CTA を並べた送客型に切り替わる。 colors: background: '#F6F6F6' dark-section: '#1D2226' primary: '#DABE73' cta: '#760A03' on-cta: '#FFFFFF' surface: '#FEFEFE' text: '#1C222A' on-dark: '#F8FAFC' secondary: '#535353' background-alt: '#E4E4E4' line: '#D6A452' accent-1: '#8B1A1A' accent-2: '#D6A452' accent-3: '#1A5FB4' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 20px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-pill-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-bar-gold: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 46px button-hotel: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 30px heading-gold-circle: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 260px heading-line: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px label-dashed: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 28px tab-course: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 64px badge-start: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px card-hotel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 380px --- # DESIGN.md — 墨黒×金箔×和紙の歴史観光・宿泊 LP（Washi Gold and Ink Heritage Tourism LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、信頼・誠実、情報量多め・訴求型 - **キーワード**: 和紙テクスチャ・金箔の円・墨色の帯・縦書き明朝・雲紋・歴史旅 - **地の質感**: 地は細かな和紙の繊維テクスチャ。金色は箔のようなざらつきとムラを持たせる。墨色帯はフラットに近い。 - **形**: 大きな金色の正円を見出しの台座に使う。ボタンはピル型と角ばったバーを使い分ける。雲紋や紙吹雪状の金箔片を散らす。 - **温度感**: やや暖かい。落ち着いた墨と金に深紅を少量差す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F6F6` | 和紙風の地色 | 45% | 画素の実測 | | `dark-section` | `#1D2226` | 導入やセクション見出しの墨色帯 | 13% | 画素の実測 | | `primary` | `#DABE73` | 金箔の円・金色バーボタン | 7% | 画素の実測 | | `cta` | `#760A03` | 予約・詳細ボタンの深紅 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | 深紅ボタン上の文字 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | クーポン案内などの白カード | 12% | 画素の実測 | | `text` | `#1C222A` | 見出し・本文の墨色 | 4% | 画素の主要色に補正 | | `on-dark` | `#F8FAFC` | 墨色帯上の白文字 | 1% | 画素の実測 | | `secondary` | `#535353` | ホテルカードのサブボタン灰 | 2% | 画素の実測 | | `background-alt` | `#E4E4E4` | 注意書きのピル枠 | 1% | 画素の実測 | | `line` | `#D6A452` | 見出し脇の金線・ピルボタン枠 | 0% | 画素の主要色に補正 | | `accent-1` | `#8B1A1A` | 小見出し・誘導ラベルの深紅文字 | 0% | 推定 | | `accent-2` | `#D6A452` | 案内リードの金茶文字 | 0% | 画素の主要色に補正 | | `accent-3` | `#1A5FB4` | テキストリンク青 | 0% | 推定 | - 地は和紙テクスチャの #F6F6F6。章の切り替えに墨色帯を全幅で入れる。 - 章タイトルは墨色帯または写真の上に金箔の正円を置き、その上に縦書きで載せる。 - 金色は円・雲紋・バーボタン・見出し線に限定する。本文には使わない。 - 深紅は予約導線と小ラベルだけに使う。面積は 3% 程度に抑える。 - ホテルカードのボタンは深紅（主）と灰色（副）で階層を分ける。 - 情報カードは白で浮かせる。注意書きは淡いグレーのピル枠に収める。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV ロゴ風タイトル・章タイトル（縦書き） | 明朝 | Shippori Mincho | 500 | 30px | 1.3 | 0.08em | | `headline-lg` | 導入リード・セクション見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.6 | 0.05em | | `headline-md` | スポット名・プラン名 | 明朝 | Noto Serif JP | 500 | 22px | 1.4 | 0.03em | | `headline-sm` | スポットのキャッチ・小見出し | 明朝 | Noto Serif JP | 400 | 15px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em | | `note` | 注釈・外部遷移の表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0em | | `accent` | 円見出しに添える欧文筆記体・ステップ番号 | 欧文スクリプト | Great Vibes | 400 | 20px | 1.2 | 0em | | `label-button` | ボタンラベル | 明朝 | Noto Serif JP | 500 | 14px | 1.4 | 0.05em | - 見出しは明朝、本文はゴシックで役割を分ける。 - 章タイトルは縦書きの明朝 2〜3 行で、金の円の中に置く。 - 円見出しには深紅または金の欧文筆記体を斜めに添える。 - スポット名には、小さな明朝キャッチと大きな明朝名称を上下に組む。 - 料理名は縦書き 2 文字程度にして、左右に細い縦線を入れる。 - ホテルカードの名称だけは太いゴシックで実用的に見せる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ホテル一覧のみ 2 カラムのカードグリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は左右 16px の余白を取った全幅で配置する。 - テキストブロックは写真の下に置き、16〜24px の余白をとる。 - プラン紹介では縦書き見出しと横書き本文を左右に並べ、ブロックごとに左右を入れ替える。 - ステップは左に円形ラベル、右に番号と説明を置き、金の細線と下向き矢印でつなぐ。 - CTA ボタンは幅 80% で中央に置き、下に外部遷移の注釈を添える。 ## Elevation & Depth - 基本はフラット。白カードは影なしで地との色差だけで浮かせる。 - ホテルカードのボタンには下方向の薄い影（0 2px 3px rgba(0,0,0,.2)）を付ける。 - 円形ラベルの背景はぼかした淡いグレーの円で柔らかく見せる。 ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの横長矩形（約 3:2）が基本。イベント紹介だけ正円に切り抜く。 - **セクション境界**: 墨色帯との境界は直線。章見出しの下端は大きな円弧で地色に食い込ませる。白カードの上辺は雲形にする。 - 主導線のボタンは墨色または白のピル型にし、金の細い枠を付ける。 - クーポン・外部リンクは角ばった金色バーにし、右端に > を付ける。 - ホテルの予約ボタンは角丸なしの矩形にし、右端に丸矢印アイコンを付ける。 - 雲紋は金箔の質感で描き、淡い七宝柄を重ねて四隅に置く。 - 金の正円は画面幅の 60〜70% で大きく描く。 ## Components - **墨色ピル CTA**（`button-pill-dark`）: 墨色のピル型で、金の細い枠と白い明朝ラベルを持つ。右端に > を置く。プラン一覧への主導線に使う。 - **白ピル詳細ボタン**（`button-pill-outline`）: 白地のピル型で、金の枠線と墨色の文字を持つ。外部詳細ページへのリンクに使う。 - **金色バーボタン**（`button-bar-gold`）: 幅いっぱいの金色の矩形で、墨色の文字と右端の > を持つ。クーポン・寄付・ガイド申込に使う。 - **ホテル予約ボタン群**（`button-hotel`）: 深紅の予約ボタン 1 つと灰色のサブボタン 2 つを縦に積む。どれも右端に白丸の矢印アイコンを付ける。 - **金箔円の章見出し**（`heading-gold-circle`）: 墨色帯や暗い写真の上に金箔の正円を置き、縦書き明朝の見出しを載せる。深紅の縦線と欧文筆記体を添える。 - **左右金線の見出し**（`heading-line`）: 明朝の見出しの左右に金の横線を引き、下に深紅の欧文筆記体を小さく添える。 - **斜め点線の誘導ラベル**（`label-dashed`）: 深紅の短い明朝文の左右に、金の斜め点線を「ハ」の字に配置する。ボタンの直上に置く。 - **コース切替タブ**（`tab-course`）: 3 つ並びのタブ。選択中は墨色地に白文字と金の内枠、非選択は白地に灰文字にする。 - **スタート地点バー**（`badge-start`）: 左側は深紅のピル型で旗アイコンと地点名、右側は白地に深紅の枠で所要時間を示す。 - **ホテルカード**（`card-hotel`）: 2 カラムで、写真・太字の施設名・プラン概要・ボタン 3 段の順に縦に並べる。 ## Do's and Don'ts **Do** - 和紙テクスチャの地に、墨・金・深紅の 3 色で格調を保つ。 - 章ごとに金箔円の縦書き見出しを入れて、物語の区切りを示す。 - スポット紹介は「写真→小キャッチ→名称→本文→罫線→住所」の型をそろえる。 - 外部リンクのボタン下には必ず小さな注釈を添える。 - 金箔片や雲紋を余白に散らし、静かな華やかさを出す。 **Don't** - ビビッドな原色やポップな丸ゴシックを使わない。 - 金色を本文テキストや広い面の背景に使わない。 - 深紅を装飾目的で多用しない（予約導線とラベルに限る）。 - 写真に角丸や影を付けない。 - 縦書き見出しを 4 行以上にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（地域の名物写真と縦書きコピーで旅情を喚起する）: 料理や名所のクローズアップ写真を全面に敷く。縦書き明朝のキャッチと大きな地名ロゴを重ね、金の円弧と欧文筆記体を添える。 2. **導入・アクセス**（旅のテーマと主要空港からの近さを伝える）: 墨色帯に白い明朝リードと本文を置く。白抜きの地図シルエットと、深紅の円形バッジで所要時間を示す。 3. **記念イベント紹介**（周年イベントを紹介する）: 和紙の地に、上下を七宝柄の帯で挟んで配置する。正円写真と金縦線の見出しを組み、白ピルボタンを置く。 4. **特別宿泊プラン**（テーマ別の宿泊プランへ誘導する）: 夕景の写真の上に金箔円の章見出しを置く。写真と縦書き見出しを左右交互に組み、墨色ピルボタンを置く。 5. **クーポン・返礼品案内**（クーポンの使い方を手順で説明する）: 雲形の上辺を持つ白カードにする。グレーの強調ラベルと 4 ステップの縦フローを置き、金色バーボタンを 2 つ並べる。 6. **モデルコース**（歴史スポットを巡るコースを紹介する）: 紺色の夜景に金箔円の見出しを置く。コース切替タブ、スタート地点バー、スポットカードを縦に並べる。 7. **ガイド案内**（ガイド付き観光の申込へ誘導する）: 手書き風の円形吹き出し見出しと写真を横に並べる。金色バーボタンと墨色ピルボタンを 2 つ置く。 8. **ご当地グルメ**（郷土料理の背景とストーリーを伝える）: 金箔円の見出しの下に白カードでイベントを紹介する。料理写真、縦書きの料理名、本文を繰り返し、金の雲紋を散らす。 9. **おすすめ宿泊プラン一覧**（個別ホテルの予約へ送客する）: 墨色帯の下端を円弧にして見出しを置き、その下に 2 カラムのホテルカードを並べる。 10. **観光情報・アクセス・空室検索**（外部の観光情報と予約検索で締める）: 深紅のバーボタン、グレーのピル注意書き、左右金線の見出しを使う。地図埋め込みと検索フォームを置く。 11. **お問い合わせ**（問い合わせ先と情報提供元を明記する）: 灰色見出しの罫線表で、シンプルに示す。 ## Imagery - 料理は暖色の照明で寄りのアングルから撮り、湯気や照りを強調する。 - 史跡・銅像・城門は青空の下で順光で撮り、彩度をやや高めにする。 - 章見出しの背景は夕景・夜景・暗い店内など低輝度の写真にする。 - 宿泊施設は外観と客室を明るく水平に撮る。 - 装飾は金箔の円、金の雲紋、淡い七宝柄、散らした金箔片で構成する。 - 地図は白い島形シルエットで描き、対象エリアだけを金で塗る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 70% にして中央に寄せ、背景の和紙と墨色帯は全幅にする。 - PC の導入では本文と地図シルエットを左右 2 カラムに並べる。 - スポット・料理紹介は、PC では写真と文章を左右交互の 2 カラムにする。 - ホテルカードは PC で 3 カラムにする。 - クーポン手順は PC で横 4 列にし、矢印でつなぐ。 - 章見出しの金箔円は 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-cf924f87`（元 LP の URL から採番） - **元 LP**: https://travel.rakuten.co.jp/movement/kagoshima/202610_kagoshimacity/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-23、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。