--- version: alpha name: Red Line Editorial Fitness Magazine LP description: 白地に赤の細い罫線と赤文字だけで組んだ、雑誌風のウェブメディアです。大きな写真を主役にし、欧文セリフの見出し・ピル型タグ・赤い楕円ボタンでリズムをつけます。フッターはライトグレー地に黒文字へ切り替えます。 colors: primary: '#E60012' background: '#FFFFFF' cta: '#FB0105' on-cta: '#FFFFFF' line: '#E8303C' background-alt: '#E7E7E7' text: '#1A1A1A' dark-section: '#5A5A5A' on-dark: '#FFFFFF' accent-1: '#25E748' cta-accessible: '#EE0105' typography: display: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 400 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Inter fontSize: 8px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Inter fontSize: 13px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 999px full: 999px spacing: unit: 8px card: 12px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px tag-pill: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 16px section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px article-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 560px watch-list: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 300px newsletter-form: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 40px sns-grid: backgroundColor: '{colors.background}' textColor: '{colors.primary}' height: 80px issue-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px --- # DESIGN.md — 白地×赤細線のフィットネス雑誌メディア LP（Red Line Editorial Fitness Magazine LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: シンプル・ミニマル、クール・先進的、スポーティ - **キーワード**: 雑誌エディトリアル・赤い1px罫線・写真主役・欧文セリフ見出し・余白多め - **地の質感**: フラット。影やグラデーションは使わず、線と写真だけで構成する - **形**: 四角い写真と罫線グリッド。タグとボタンだけをピル型・楕円にする - **温度感**: 白地に赤が映える、やや熱量のある明るいトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E60012` | ブランド赤。罫線・見出し・本文・タグに使う | 4% | 推定 | | `background` | `#FFFFFF` | メインの地色 | 55% | 画素の実測 | | `cta` | `#FB0105` | もっと見るボタンなどの楕円ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 | | `line` | `#E8303C` | セクション区切りの赤い細罫線 | 0% | 推定 | | `background-alt` | `#E7E7E7` | フッター地のライトグレー | 14% | 画素の実測 | | `text` | `#1A1A1A` | フッターの文字と黒の登録ボタン | 2% | 推定 | | `dark-section` | `#5A5A5A` | 会員・イベント紹介に敷くモノクロ写真帯 | 5% | 推定 | | `on-dark` | `#FFFFFF` | モノクロ写真の上に置く白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#25E748` | 写真内で使うビビッドなグリーン背景 | 2% | 画素の実測 | | `cta-accessible` | `#EE0105` | AA を満たす補正値（計算） | | 計算 | - 地は白にし、文字・罫線・タグはすべて赤 1 色でそろえる - 黒文字を使うのはフッター（グレー地）だけにする - 塗りの赤は楕円 CTA と登録ボタンだけに絞る - 色の多さは写真に任せ、UI に色を増やさない - 会員・イベントの帯はモノクロ写真に白文字を重ねる - `button-primary` は文字 `#FFFFFF` × 背景 `#FB0105` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EE0105`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの欧文（Feature や Articles など） | 欧文セリフ | Cormorant Garamond | 400 | 24px | 1.2 | 0.0em | | `headline-sm` | 記事タイトル | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.02em | | `body-md` | 説明文・リード文 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `note` | 日付・小見出しの和文サブラベル | 欧文サンセリフ | Inter | 400 | 8px | 1.4 | 0.02em | | `accent` | 写真の周りを円形に回る欧文テキスト | 欧文サンセリフ | Inter | 400 | 13px | 1.2 | 0.0em | | `label-button` | タグとボタンのラベル | ゴシック | Noto Sans JP | 400 | 8px | 1.0 | 0.02em | - 見出しは欧文セリフで大きく置き、すぐ下に和文の小ラベルを添える - 本文は小さめ（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 ```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-5c684e36`（元 LP の URL から採番） - **元 LP**: https://tarzanweb.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（4/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。