DESIGN.md — 白地×赤細線のフィットネス雑誌メディア LP（Red Line Editorial Fitness Magazine LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: シンプル・ミニマル、クール・先進的、スポーティ
• キーワード: 雑誌エディトリアル・赤い1px罫線・写真主役・欧文セリフ見出し・余白多め
• 地の質感: フラット。影やグラデーションは使わず、線と写真だけで構成する
• 形: 四角い写真と罫線グリッド。タグとボタンだけをピル型・楕円にする
• 温度感: 白地に赤が映える、やや熱量のある明るいトーン

Colors

• 地は白にし、文字・罫線・タグはすべて赤 1 色でそろえる
• 黒文字を使うのはフッター（グレー地）だけにする
• 塗りの赤は楕円 CTA と登録ボタンだけに絞る
• 色の多さは写真に任せ、UI に色を増やさない
• 会員・イベントの帯はモノクロ写真に白文字を重ねる
• button-primary は文字 #FFFFFF × 背景 #FB0105 のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EE0105、4.52:1）を使う。

Typography

• 見出しは欧文セリフで大きく置き、すぐ下に和文の小ラベルを添える
• 本文は小さめ（10〜12px）にして余白で読ませる
• 太字は多用せず、細〜中の字幅でそろえる
• 日付は欧文サンセリフの数字で小さく書く
• 文字色は primary の赤を基本にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特別記事だけ 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は約 12px で、写真は横幅いっぱい近くまで広げる
• 記事 1 件ごとに赤の 1px 罫線で区切る
• セクション見出しの下にも罫線を引き、右端に『一覧→』のリンクを置く
• 記事は写真→タグ→タイトル→日付の順に縦に積む
• 横スクロールのカルーセルや流れるテキストを適度に混ぜる

Elevation & Depth

• 影は一切使わない
• 立体感ではなく罫線と囲み枠で階層を表す
• ボックスは赤 1px の枠線で囲む

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。縦長 4:5 や正方形で大きく見せる
• セクション境界: 全幅の赤い 1px 直線
• 写真とカードは角をとがらせたままにする
• タグは赤線のピル型にする
• CTA は横長の楕円にする
• 入力欄は赤の点線枠にする

Components

• 楕円 CTA（button-primary）: 中央に置く赤い横長楕円のもっと見るボタン
• カテゴリタグ（tag-pill）: 白地に赤線・赤文字の小さなピル。2〜3 個を横に並べる
• 欧文見出し＋罫線（section-heading）: 欧文セリフの見出しに和文サブを添え、上下を赤罫線で挟む
• 記事カード（article-card）: 大きな写真の下にタグ・赤いタイトル・日付を並べる
• 日付付きリスト枠（watch-list）: 赤枠のボックス内に日付と一行見出しを点線で区切って並べる
• メール登録フォーム（newsletter-form）: 赤い点線枠の入力欄の右に、赤の四角い登録ボタンを付ける
• SNS アイコングリッド（sns-grid）: 罫線で区切った 4×2 のマスに赤いアイコンを並べる
• 最新号バッジ（issue-badge）: 赤い線の楕円で号数を囲み、雑誌表紙の横に置く

Do's and Don'ts

Do - 赤 1 色と白地だけで UI を組む - 写真は大きく、角丸をつけずに見せる - セクションの区切りは全幅の赤い細罫線で示す - 欧文セリフ見出しに和文の小ラベルを組み合わせる - フッターはグレー地・黒文字に切り替えて区別する

Don't - 影・グラデーション・角丸カードを使わない - 赤以外の UI 色を足さない - 太いゴシックの大見出しを使わない - 罫線を太くしたり、色を混在させたりしない - 写真の上に装飾的な枠やラベルをごちゃごちゃ重ねない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（注目記事を大きく見せる）: 中央の楕円ロゴの下に縦長写真を置き、タグ・タイトル・日付を添える
2. ティッカー（話題の見出しを流して見せる）: 赤罫線で挟んだ帯に、赤文字の見出しを横に流す
3. 週間リスト（曜日ごとのおすすめを紹介する）: 赤枠のボックスに画像・楕円ボタン・日付付きのリストを入れる
4. 連載ピックアップ（連載の世界観を伝える）: 写真のコラージュを、円形に回る欧文テキストで囲む
5. 特集（特集記事を見せる）: 左に写真、右にテキストを置いたカルーセル。下にドットインジケーターを付ける
6. 新着記事（記事一覧を見せる）: 写真の大きいカードを罫線区切りで縦に並べ、最後に楕円 CTA を置く
7. SNS（フォローへ誘導する）: 罫線で区切った 4×2 のアイコングリッドを置く
8. 連載一覧（連載へ回遊させる）: 下線付きの連載名と右寄せのサムネイルを並べ、横スクロールの写真列を加える
9. 最新号（雑誌の購入を促す）: 左に表紙、右に楕円バッジと号の情報を置く
10. 会員・イベント（有料サービスへ誘導する）: 全幅のモノクロ写真に、欧文の見出しと白文字の説明を重ねる
11. メルマガ登録（メールアドレスを集める）: 欧文見出し・リード文・点線枠の入力欄・赤い登録ボタンを並べる
12. PR 記事（タイアップ記事を見せる）: 2 カラムの写真グリッドにして、各記事に PR の表記を付ける
13. フッター（サイト内を案内する）: グレー地に黒文字。カテゴリはピル型ボタン、連載はリスト、関連メディア名と注記を並べる

Imagery

• 人物は自然光のスナップで、屋外の風景や日常の場面を撮る
• 商品は単色のビビッドな背景（緑・黄など）で切り抜いたように撮る
• 料理は真上か寄りで撮り、質感を強く見せる
• 写真の彩度は高めにし、UI の赤とぶつかっても構わない
• 会員向けの帯はモノクロ写真にする
• イラストは平面的なグラフィックを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は罫線で区切ったマルチカラムのグリッド（3〜4 列）にする
• PC のファーストビューは、ぼかした全幅写真の中央にロゴと縦長写真を重ねる
• PC では週間リスト・連載・新着を 3 列のマスに並べる
• PC の PR 記事は横 7 列のカルーセルにし、左右に赤い矢印を置く
• PC のフッターは 4 列にする

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 行書くと起動時に読み込まれる。