--- version: alpha name: Warm Orange Friendly Hospitality BtoB Service LP description: 白と生成り・淡いピーチの地に、鮮やかなオレンジを効かせた BtoB サービス LP。大きな角丸の白カードと線画の人物イラストで、業務代行の堅さをやわらげて親しみやすくしている。 colors: primary: '#EF9350' cta: '#FF842C' on-cta: '#FEFAF2' background: '#FFFFFF' background-alt: '#FAF5EF' tint-1: '#FFEDD6' dark-section: '#FF842C' secondary: '#FFC929' surface: '#FFFFFF' text: '#181718' text-body: '#4A4A4A' line: '#E7E4DF' accent-1: '#F8D2A1' cta-accessible: '#C25100' primary-accessible: '#BD5A11' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em accent: fontFamily: Barlow Condensed fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 20px lg: 32px 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-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px button-contact: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px icon-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 110px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px case-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 470px step-timeline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 560px tag-pill: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 48px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 900px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' rounded: '{rounded.full}' height: 70px --- # DESIGN.md — オレンジ×生成りの親しみ系宿泊運営代行 LP（Warm Orange Friendly Hospitality BtoB Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 親しみ・手作り感、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: オレンジ・生成り・大きな角丸カード・線画イラスト・英字サブ見出し・波形の区切り - **地の質感**: フラットな単色面。白カードにごく淡い影をつけ、紙のような柔らかさを出す - **形**: 角丸 24〜32px の大きなカード、ピル型のタグ、ゆるい波形のセクション境界 - **温度感**: 暖色寄り。オレンジとピーチで温かく、白で清潔感を保つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EF9350` | ブランドオレンジ（強調語・英字ラベル・番号） | 3% | 画素の主要色に補正 | | `cta` | `#FF842C` | 主 CTA ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FEFAF2` | CTA 上の文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 36% | 画素の実測 | | `background-alt` | `#FAF5EF` | 生成りの帯セクション | 15% | 画素の実測 | | `tint-1` | `#FFEDD6` | 淡いピーチの帯セクション・表の見出し列 | 9% | 画素の実測 | | `dark-section` | `#FF842C` | 問い合わせ帯のオレンジ全面 | 4% | 画素の実測 | | `secondary` | `#FFC929` | 問い合わせ帯内の黄色ボタン | 0% | 画素の実測 | | `surface` | `#FFFFFF` | カードの白面 | 20% | 画素の実測 | | `text` | `#181718` | 見出し文字 | 2% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文文字 | 3% | 推定 | | `line` | `#E7E4DF` | カード内区切り線・タグ枠 | 0% | 画素の主要色に補正 | | `accent-1` | `#F8D2A1` | 地図・装飾の淡いオレンジ | 2% | 画素の実測 | | `cta-accessible` | `#C25100` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#BD5A11` | AA を満たす補正値（計算） | | 計算 | - 地は白→ピーチ→白→生成りと交互に切り替え、セクションの区切りを色で示す - オレンジは CTA、見出し内の強調語、英字ラベル、番号、タグだけに使う - 見出しは黒文字にして、キーワードの部分だけオレンジにする - 問い合わせ帯だけオレンジ全面にし、ボタンは黄色にして目立たせる - カードは常に白面にし、色の付いた地から浮かせる - 料金表の見出し列はピーチ、値の列は白にする - `button-primary` は文字 `#FEFAF2` × 背景 `#FF842C` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C25100`、4.51:1）を使う。 - `step-timeline` は文字 `#EF9350` × 背景 `#FFFFFF` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BD5A11`、4.53:1）を使う。 - `button-outline` は文字 `#EF9350` × 背景 `#FFFFFF` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BD5A11`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.4 | 0.03em | | `headline-md` | カード見出し（一部オレンジ） | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.02em | | `body-md` | カード本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | FV の説明文・カードの補足 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.02em | | `accent` | 見出し下の英字ラベル・番号・パーセント | 欧文サンセリフ | Barlow Condensed | 700 | 11px | 1.2 | 0.02em | | `label-button` | CTA の文字 | ゴシック | Noto Sans JP | 700 | 19px | 1.2 | 0.05em | - セクション見出しは中央揃えの黒文字。直下に小さなオレンジの英字ラベルを置く - 番号（01・02）は太い欧文の縦長書体で大きくし、オレンジにする - 本文は左揃えで行間を広めの 1.8 にする - 強調語はオレンジ文字と下線で示す - 料金の数字は欧文書体の太字でオレンジにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコン型サポート一覧のみ 3 列グリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に約 16px の余白を取って並べる - カード同士の間隔は 24px 前後 - サポート項目は正方形に近い白タイルを 3 列 × 4 段で並べる - タグは中央揃えで折り返し、ピル型を流し込む - 工程（ステップ）は左に縦のオレンジ線とドットを置き、タイムラインにする ## Elevation & Depth - 白カードにはぼかしの大きい淡い影（0 4px 20px rgba(0,0,0,0.06)）をつける - CTA の下辺には濃いオレンジの 4px ほどの影をつけ、押せそうな厚みを出す - タグは影なしで、細い枠線だけにする ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 32px。ボタンは角丸の長方形。 - **写真の切り抜き**: カード内の写真は角丸 32px の長方形。FV の写真は角丸の縦長 - **セクション境界**: ゆるい波形カーブ、または直線で色を切り替える - CTA は角丸 8px の横長ボタンで、右端に白い四角の再生アイコンを置く - カードは角丸 32px と大きくする - カテゴリバッジとタグはピル型にする - 料金表の外枠は大きな角丸にする ## Components - **主 CTA ボタン**（`button-primary`）: オレンジの横長ボタン。中央に白い太字、右端に白い四角の再生アイコン、下に濃い影 - **問い合わせ帯ボタン**（`button-contact`）: オレンジ帯の上に置く黄色ボタン。文字は黒 - **和英 2 段見出し**（`section-heading`）: 黒の和文見出しの下に、小さなオレンジの英字ラベルを中央揃えで置く - **機能アイコンタイル**（`icon-tile`）: 白い角丸の正方形にフラットなカラーアイコンと短い名称。3 列に並べる - **理由カード**（`feature-card`）: 角丸の写真の下に、一部オレンジの 2 行見出しと本文を置く白カード - **実績カード**（`case-card`）: 上部に写真とオレンジのピル型バッジ。下は物件種別・区切り線・地域・法区分 - **工程タイムライン**（`step-timeline`）: 左にオレンジの縦線と丸、番号付きのオレンジ見出し、線画の人物、ピル型タグを詰めた白カード - **業務タグ**（`tag-pill`）: 生成りの面に淡いオレンジの枠。小アイコンと業務名を入れたピル - **料金比較表**（`price-table`）: 左にピーチ地の項目列、右に白い値の列。プラン名とパーセントはオレンジで、オレンジ枠のボックスに入れる - **展開ボタン**（`button-outline`）: オレンジ枠のピル型ボタン。オレンジ文字と丸いプラスアイコン ## Do's and Don'ts **Do** - 見出しのキーワードだけをオレンジにして、視線を誘導する - セクションごとに白・ピーチ・生成りの地を交互に使う - 線画タッチの人物イラストを見出しの横や帯の境目に置く - カードは大きな角丸と淡い影で統一する - CTA は FV・エリア紹介・問い合わせ帯の 3 か所に繰り返し置く **Don't** - 寒色や彩度の高い別のアクセント色を足さない - 角の立った四角いカードや濃い影を使わない - 本文をオレンジや中央揃えの長文にしない - 黒や濃紺の重いダークセクションを入れない - 写真を角丸なしの裁ち落としで並べ続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス分類とロゴ、価値を伝える）: 白地に中央揃えでサービス分類・ロゴ・2 行の太字コピー・説明 5 行・CTA。その下に角丸の室内写真 2 枚と、PC を囲む線画の人物 2. **サポート内容**（対応する業務の幅を一目で見せる）: ピーチ地にアイコンタイルを 3 列 × 4 段。下にオレンジ下線付きの法区分の訴求と、集合した人物イラスト 3. **選ばれる理由**（強みを 6 つ提示する）: 白地に写真付きの理由カードを縦に 6 枚。見出しの前半はオレンジ 4. **提携サービス一覧**（提携先による信頼を示す）: 生成り地にロゴと説明の白カード、その下に横スクロールのロゴカルーセル 5. **関連プロダクト紹介**（無人運営システムを訴求する）: オレンジ背景の製品写真、ロゴ、太字の見出し、番号付きの製品カード 6. **対象エリア**（全国対応を伝え、相談を促す）: 生成り地に見出し・注釈・CTA。淡いオレンジの日本地図と同心円の線 7. **運営実績**（具体的な物件事例で実績を示す）: 白地に、カテゴリバッジ付きの実績カードを縦に 6 枚 8. **運営の流れ**（導入から管理までの工程を見せる）: 生成り地に 3 段のタイムライン。各段はタグを詰めた白カード 9. **お問い合わせ CTA**（無料相談へ誘導する）: オレンジ全面の帯に白い見出しと黄色ボタン、線画の人物。下端は波形 10. **料金**（プランと手数料を比較させる）: 生成り地に料金比較表。SP は横スクロール、末尾に展開ボタン ## Imagery - 人物は茶色の細い線画に、白・水色・肌色の淡い塗りを入れたフラットなビジネスイラスト - 室内写真は明るく自然光の入ったモダンな客室 - 機能アイコンはオレンジ・黄・水色を使った立体感の少ないカラーアイコン - ビジネス写真は青みのあるストック写真（握手・グラフ・スマホ） - 日本地図は淡いオレンジのシルエットに同心円の線と現在地のドット - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左にテキスト、右に写真とイラストの 2 カラムにする - PC のサポートタイルは 6 列 × 2 段にする - PC の理由カードと実績カードは 3 列グリッドにする - PC のタイムラインは横並び 3 列にし、上部の横線でつなぐ - PC の料金表は 3 プランを横並びにし、中央のおすすめ列をピーチで強調する - PC の対象エリアは左に地図、右に文章と CTA を置く ## 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-b45bbdb6`（元 LP の URL から採番） - **元 LP**: https://athost.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。