--- version: alpha name: Slate Navy Diagonal Stripe Community App LP description: 白と薄いブルーグレーの地に、濃い紺の斜めストライプとベージュの三角を置いた、落ち着いた趣味系 SNS アプリの LP。写真は風景の中の列車を大きく使い、白いカードの左上を斜めに切り落として機能を説明する。文字は紺系のゴシックで中央揃え、余白を広く取る。 colors: primary: '#3B4D63' background: '#FFFFFF' background-alt: '#D8DBE0' surface: '#FFFFFF' secondary: '#DCBB90' text: '#4D545B' text-body: '#363636' accent-1: '#758390' accent-2: '#9CA6B0' cta: '#020202' on-cta: '#E3E3E3' line: '#A59794' text-muted: '#5A6270' typography: display: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 16px full: 999px spacing: unit: 8px card: 36px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' store-badges: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.sm}' height: 32px app-mockup: rounded: '{rounded.lg}' height: 260px badge-circle: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 140px stripe-deco: backgroundColor: '{colors.primary}' height: 120px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 360px photo-grid: height: 160px numbered-rules: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 260px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 14px --- # DESIGN.md — 紺×薄グレーの斜めストライプ鉄道系アプリ LP（Slate Navy Diagonal Stripe Community App LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、クール・先進的 - **キーワード**: 斜めストライプ・紺とグレー・列車の風景写真・角を切ったカード・中央揃え・余白多め - **地の質感**: フラットな単色の面だけ。グラデーションは写真のフェードにだけ使う - **形**: 平行四辺形の帯、直角三角形、左上を斜めに切ったカード - **温度感**: やや寒色寄りで落ち着いている。ベージュを少しだけ入れて温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3B4D63` | ロゴ・斜めストライプ装飾の紺 | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 55% | 画素の実測 | | `background-alt` | `#D8DBE0` | 機能セクションの薄いブルーグレー地 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | 機能カードの白面 | 8% | 画素の実測 | | `secondary` | `#DCBB90` | 右上隅のベージュ三角 | 1% | 画素の実測 | | `text` | `#4D545B` | 見出し・本文のスレート紺文字 | 3% | 画素の実測 | | `text-body` | `#363636` | 注意事項など濃い本文 | 2% | 画素の実測 | | `accent-1` | `#758390` | 機能アイコンのグレー | 1% | 画素の実測 | | `accent-2` | `#9CA6B0` | 左下隅の濃いめグレー三角 | 1% | 画素の実測 | | `cta` | `#020202` | ストアダウンロードボタンの黒 | 0% | 画素の実測 | | `on-cta` | `#E3E3E3` | ストアボタン上の白文字 | 0% | 画素の実測 | | `line` | `#A59794` | 区切りの細い横線 | 0% | 画素の主要色に補正 | | `text-muted` | `#5A6270` | 小さい注記の文字 | 0% | 推定 | - 地は白と薄いブルーグレー（#D8DBE0）の 2 色だけで切り替える - 装飾は紺の平行四辺形ストライプを 3 本並べ、画面の端に置く - ベージュは右上の三角 1 か所だけに使い、差し色にとどめる - 文字は黒ではなくスレート紺を基本にし、注意事項だけ濃い黒寄りにする - アイコンは中間のグレー 1 色の単色シルエットにする - ボタンの黒はストア公式バッジだけ。独自の派手な CTA 色は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ脇の短いキャッチ・FV の中央コピー | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 500 | 21px | 1.5 | 0.08em | | `headline-md` | 機能カードの見出し | ゴシック | Noto Sans JP | 500 | 18px | 1.5 | 0.08em | | `body-lg` | 理念文・カード本文 | ゴシック | Noto Sans JP | 400 | 16px | 2.0 | 0.08em | | `body-md` | 番号付きのお願いリスト・注記本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.06em | | `note` | ※注釈・商標表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | 欧文のロゴ風タイトル | 欧文サンセリフ | Montserrat | 700 | 44px | 1.1 | 0.02em | - 見出しも本文も中央揃えを基本にし、カード本文とお願いリストだけ左揃えにする - 字間は 0.06〜0.08em と広めにとり、落ち着いて見せる - 見出しの記号には「」や×を使い、太字は控えめにする - 本文の行間は 2.0 前後とゆったり取る - 番号リストは数字だけを少し大きく太くする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真ギャラリーだけ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 36px（375px 幅換算） - セクションの上下に 70〜100px の余白を取る - 機能カードは左右 28px 程度の余白を残して縦に積み、カード間は 48px あける - 写真グリッドは正方形 2 列で、間隔は 20px - 装飾の三角やストライプは画面端にはみ出すように置く - 注意事項セクションだけは左揃えのブロックにする ## Elevation & Depth - 影は使わずフラットにする - カードは地との色の差（白×ブルーグレー）だけで浮かせる - アプリ画面のモックだけ端末フレームで立体的に見せる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの正方形。大きな風景写真は片側を白へフェードさせるか、斜めにカットする - **セクション境界**: 直線で切り替えるのを基本にし、写真の上辺だけ斜めにカットする - カードは左上の角を斜めに切り落とした形にする - 装飾は平行四辺形を 3 本並べたストライプにする - 画面の隅に直角三角形（ベージュ・グレー）を置く - アプリアイコンの枠だけ角丸 16px にする ## Components - **ストアダウンロードボタン**（`store-badges`）: 2 つの公式ストアバッジを横に並べ、すぐ下に対応状況の注記を添える - **スマホ画面モック**（`app-mockup`）: アプリ画面を端末フレームに入れて斜めの装飾と並べる - **公式円形バッジ**（`badge-circle`）: 白丸に紺の細い縁を付け、中に提供元と公式であることを 2〜3 行で入れる - **斜めストライプ装飾**（`stripe-deco`）: 紺の平行四辺形 3 本を階段状に並べ、画面の端に置く - **角を切った機能カード**（`feature-card`）: 白いカード。左上の角を斜めに切り、見出し→グレーのアイコン→左揃えの本文の順に並べる - **正方形写真グリッド**（`photo-grid`）: 季節の風景の中を走る列車の写真を正方形 2 列で並べる - **番号付きお願いリスト**（`numbered-rules`）: 大きめの太い数字とピリオドに 2 行程度の文を続ける。最後に細い区切り線を引く - **注釈**（`note-text`）: ※で始まる小さい注記。商標表記もこれでまとめる ## Do's and Don'ts **Do** - 地は白とブルーグレーの 2 色だけで切り替える - 紺の斜めストライプとベージュの三角を画面端に置いて特徴を出す - 機能は 1 つずつ角を切った白カードに入れて縦に積む - 写真は季節感のある風景の中の主題（列車）を使う - 文字は中央揃えで、字間と行間を広く取る **Don't** - ビビッドな色の大きな CTA ボタンを置かない - カードに影や大きな角丸を付けない - 文字を真っ黒の極太にしない - ベージュを広い面に使わない - 装飾を中央に置いて本文と重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（アプリの正体を伝えて DL へ誘導する）: アイコンとロゴを横に並べ、2〜4 行の中央コピー、端末モックと円形の公式バッジ、ストアバッジの順に置く。右上にベージュの三角を置く 2. **斜めストライプの区切り**（次のセクションへの視線の流れをつくる）: 左端から紺の平行四辺形 3 本を階段状に並べる 3. **理念・ビジョン**（サービスの想いを伝える）: 「」で囲んだ見出しと、短い句を重ねた中央揃えの文。下に白へフェードする大きな列車写真 4. **サービス概要**（何ができるアプリかを説明する）: ×でつないだ 3 語の見出しと短い説明文、正方形写真の 2 列グリッド 5. **主な機能**（機能を 3 つ紹介する）: ブルーグレー地。右上にストライプ。角を切った白カードにアイコンと本文を入れて縦に積む 6. **公式 SNS 埋め込み**（最新の投稿を見せる）: ブルーグレー地のまま中央に見出しと埋め込み枠。左下にグレーの三角 7. **利用時のお願い**（投稿のマナーを伝える）: 左揃えの 2 行見出し、番号付きの 3 項目、区切り線、締めの一文 8. **風景写真**（締めくくりの雰囲気づくり）: 上辺を斜めにカットした、田園を走る列車の横長写真 9. **注釈・公式 SNS**（商標表記と SNS への導線）: ※の注記リストを並べ、中央の見出しの下に SNS アイコンを 2 つ置く ## Imagery - 季節（桜・雪・新緑・夕景）の風景の中を列車が走る、引きの鉄道写真 - 大きな写真は片側を白へグラデーションでフェードさせて文字と並べる - アイコンはグレー単色の塗りつぶしのシルエット（カメラ・本・プレゼント） - アプリ画面はスマホ端末のフレームに入れて実際の画面で見せる - 幾何学の装飾は平行四辺形と三角形だけにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV をロゴ・コピー・QR とストアバッジの左カラムと、端末モックの右カラムの 2 カラムにする - PC の理念セクションは左に文、右に大きな写真を重ねる構成にする - 写真ギャラリーは PC で 5 枚を横 1 列に並べる - 機能カードは PC で 3 列に並べる - PC の注意事項セクションは左に文、右に斜めカットの写真を置く - PC ではストアバッジの上に QR コードを追加する ## 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-d9c7509d`（元 LP の URL から採番） - **元 LP**: https://www.jrw-inv.co.jp/business/railil/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。