DESIGN.md — 赤・黄・青の斜めストライプ二輪採用 LP（Bold Racing Stripe Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、スポーティ、情報量多め・訴求型
• キーワード: レーシングストライプ・原色トリコロール・モノクロ人物写真・斜めカット・明朝見出し・硬派
• 地の質感: グレースケールの写真やかすれたテクスチャを地に敷き、その上にベタ塗りの原色を置く。グラデーションはほとんど使わない
• 形: 角丸なしの四角形が基本。平行四辺形の斜め帯と2本のスラッシュ記号を繰り返し使う
• 温度感: 熱い・情熱的。赤と黄色でエネルギーを出し、黒で締める

Colors

• 赤・黄・青の3原色をブランドのトリコロールとして使い、セクションごとに主役の色を替える
• 写真は基本モノクロかくすんだトーンにし、原色の面が際立つようにする
• セクション見出し帯やカードの角に、黒・白・赤・黄の斜めストライプを入れる
• 職種や募集区分ごとに色を割り当てる（赤・青・緑／赤・黄・青）
• 本文は白地またはグレー地に濃いグレー文字。濃色地の文字は白にする
• フッターは黒い写真の上に白文字を置き、角に赤のストライプを入れる

Typography

• 見出しは太めの明朝。左側に2本スラッシュの記号を付ける
• 見出しの直下に欧文セリフの小さなサブ見出しを置く
• 番号は大きな欧文イタリックにし、ピリオドを付ける
• 本文はゴシックで字間を広めにとり、ゆったり読ませる
• 濃色地の本文は明朝の太字で中央寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードと募集ボタンは縦積み
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは左寄せ。記号が左端からはみ出すように置く
• セクションの間に、斜めストライプ入りの全幅見出し帯をはさむ
• 写真とテキスト枠を重ね、枠を写真の下端に食い込ませる
• インタビューは横スライダー。左右に次のカードを少し見せる
• ニュースは白いカードを縦に並べた一覧にする

Elevation & Depth

• 影はほぼ使わず、面の色の切り替えで奥行きを出す
• 写真の上に半透明の黒帯を重ね、コピーを載せる
• テキスト枠を写真に重ねて、レイヤー感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。カードの片側に斜めカットの色帯を沿わせる
• セクション境界: 直線で切り替える。角に斜めの平行四辺形ストライプを重ねる
• 角丸は使わない
• 平行四辺形の斜め帯（約60度）を装飾として繰り返す
• 2本スラッシュ記号を見出しとボタンのアイコンに使う
• ボタン内の矢印は細い横線の矢印にする

Components

• スラッシュ付き見出し（section-heading）: 2本スラッシュ＋明朝の見出しの下に、欧文サブ見出しを置く
• 全幅見出し帯（band-heading）: 赤い全幅の帯の中央に白文字の見出しを置き、右端に黒白の斜めストライプを入れる
• READ MOREボタン（button-readmore）: 白地または透明地に黒い枠線。左上にスラッシュ記号、右に矢印を置く
• 職種カード（job-card）: 写真の下部に色帯（番号＋職種名）を重ね、その下の黄色帯にキャッチを入れる
• 募集区分ボタン（button-recruit）: 原色ベタ塗りの横長ボタン。中央に和文と欧文の2段、右上に斜めの色ブロックと矢印を置く
• 黄色メッセージ枠（message-box）: 写真に重ねる黄色の大きな枠。右下に赤白のストライプを入れる
• ニュース行（news-item）: 日付と赤いカテゴリラベルの下にタイトルを置き、右に矢印を付けた白いカード
• インタビューカード（interview-card）: 写真の上に黒帯の吹き出しコピーを重ね、大きな番号・本文・READ MOREを続ける。下隅に黄色の斜め帯を入れる
• カテゴリラベル（badge-category）: 赤地に白い小さな文字のタグ

Do's and Don'ts

Do - 写真はモノクロかコントラスト強めにして、原色の面と対比させる - 斜めストライプと2本スラッシュ記号を各セクションで一貫して使う - 職種や区分ごとに原色を割り当て、色で区別できるようにする - 見出しは明朝と欧文サブ見出しの2段構成にする - テキスト枠を写真に重ねて、躍動感を出す

Don't - 角丸やピル型ボタンを使わない - パステル色や淡いグラデーションを使わない - 丸ゴシックや手書き体で柔らかくしない - 原色を1画面に詰め込みすぎて、黒や白の締めを失わない - 影の強いカードUIにしない

Page Structure

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

1. ファーストビュー（現場の人物で業界への想いを伝える）: 全画面のモノクロ人物写真。左下の半透明の黒帯に明朝のコピーと肩書き・氏名を置き、下にスクロールアイコン
2. 会社を知る（歴史とビジョンを語る）: 赤い見出し帯の後に、青空と道路の全幅写真。上に白の明朝で中央寄せの文章を置き、白いREAD MOREボタンを続ける
3. 代表メッセージ（トップの想いを伝える）: 人物写真の下部に黄色のテキスト枠を重ね、本文と枠線ボタンを入れる
4. 職種紹介（職種ごとの仕事を見せる）: グレーのテクスチャ地に職種カードを縦に3枚。番号付きの色帯と黄色のキャッチ帯を付ける
5. 制度バナー（奨学金などの支援制度を訴求する）: 黄色地に赤い星形バッジと太ゴシックを使い、写真を添えた横長バナー
6. インタビュー（先輩社員のリアルな声を届ける）: 濃い赤のテクスチャ地に横スライダーのカード。下にドットのページネーション
7. ニュース・説明会情報（イベントの告知）: 白いカードの一覧と、枠線のREAD MOREボタン
8. 募集要項（応募の入口）: 赤・黄・青の募集区分ボタンを縦に3つ並べ、下に店舗の集合写真を置く
9. フッター（SNSと公式サイトへの導線）: 暗い写真の地にロゴ・SNSアイコン・リンク・コピーライトを中央寄せ。角に斜めストライプ

Imagery

• 人物は作業着やライダーウェアの社員。正面を見る表情か笑顔で撮る
• ファーストビューとフッターはハイコントラストのモノクロ写真
• 現場写真は整備工場・店舗・バイクを入れて臨場感を出す
• 背景にはかすれたグレーのテクスチャやバイクのモノクロ写真を薄く敷く
• 装飾は赤・黄・黒・白の平行四辺形ストライプのみ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの人物を左、コピー帯を右に配置する
• PC の会社紹介は左寄せの文章を写真に重ねる
• PC の代表メッセージは写真が左、黄色枠が右の2カラム
• PC の職種カードは3カラム、インタビューは中央カードの両側をのぞかせるスライダー
• PC の募集ボタンは2列＋中央に1つ。フッター上にグローバルナビを横並びで置く
• PC の見出しは、和文の右横に欧文サブ見出しを並べる

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