DESIGN.md — 紺×薄グレーの斜めストライプ鉄道系アプリ LP（Slate Navy Diagonal Stripe Community App LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、クール・先進的
• キーワード: 斜めストライプ・紺とグレー・列車の風景写真・角を切ったカード・中央揃え・余白多め
• 地の質感: フラットな単色の面だけ。グラデーションは写真のフェードにだけ使う
• 形: 平行四辺形の帯、直角三角形、左上を斜めに切ったカード
• 温度感: やや寒色寄りで落ち着いている。ベージュを少しだけ入れて温かみを足す

Colors

• 地は白と薄いブルーグレー（#D8DBE0）の 2 色だけで切り替える
• 装飾は紺の平行四辺形ストライプを 3 本並べ、画面の端に置く
• ベージュは右上の三角 1 か所だけに使い、差し色にとどめる
• 文字は黒ではなくスレート紺を基本にし、注意事項だけ濃い黒寄りにする
• アイコンは中間のグレー 1 色の単色シルエットにする
• ボタンの黒はストア公式バッジだけ。独自の派手な CTA 色は使わない

Typography

• 見出しも本文も中央揃えを基本にし、カード本文とお願いリストだけ左揃えにする
• 字間は 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。