DESIGN.md — 紺×ピンクのぼかし球体が漂う薬局採用 LP（Navy and Pink Gradient Orb Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、親しみ・手作り感、やさしい・柔らかい
• キーワード: ぼかし球体グラデ・大きな欧文見出し・紺とピンクの2色・マスコットの吹き出し・白衣の人物写真・角丸パネル
• 地の質感: 白地に、紺とピンクの粒子感のある放射グラデーションの円を背景にぼかして配置。面はフラットで影は薄い。
• 形: 角丸の大きなパネル、ピル型ボタン、円形のアイコン枠、手描き風の吹き出し
• 温度感: やや涼しい紺を基調に、ピンクで温度を足した中間の温度感

Colors

• 地は白と淡グレーを交互にし、社員紹介は淡青紫、募集はピンクの淡い地にする。
• 見出し・ボタン・リンクは紺に統一する。
• ピンクは数値・円アイコン・募集見出しなど温かさを出したい所に限定する。
• 背景に紺とピンクのぼかし円を左右端に半分はみ出して置く。
• 強い原色や黒の面は使わない。
• stat-card は文字 #DB8297 × 背景 #F4F4F4 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C63B5C、4.57:1）を使う。
• recruit-tab-list は文字 #DB8297 × 背景 #F4F4F4 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C63B5C、4.57:1）を使う。

Typography

• 見出しは小さな和文ラベル＋大きな欧文の2段組にする。
• 欧文見出しは紺、募集セクションだけピンクにする。
• メッセージ本文は中央揃えで短い行を重ねる。
• 背景に巨大な淡色の欧文を透かしで置く。
• 数値は大きく、単位は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列まで
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに角丸パネルで区切り、左右に余白を残す。
• 見出しは左揃え、メッセージは中央揃え。
• 写真は左右に互い違いに散らして配置する。
• 各セクション末尾に詳しく見るボタンを置く。
• マスコットは見出し右上に吹き出し付きで配置する。

Elevation & Depth

• 基本はフラットで影なし。
• カードはごく薄い影か白面だけで浮かせる。
• ぼかし球体で奥行きを出す。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。人物紹介は円形背景に切り抜き
• セクション境界: 角丸パネルの境界と、緩い弧を描く曲線
• ボタンはピル型で右端に白丸の矢印アイコンを付ける。
• 特長アイコンは淡ピンクの円に収める。
• 吹き出しは白地に紺の線の楕円。
• パネルは大きな角丸で画面端から少し離す。

Components

• 詳しく見るボタン（button-primary）: 紺のピル型、右端に白丸の矢印アイコン
• 2段見出し（section-heading）: 紺の丸点付き和文ラベルの下に大きな欧文
• マスコット吹き出し（mascot-bubble）: 猫のマスコットが白い楕円吹き出しで案内する
• 特長円アイコン（feature-circle）: 番号と淡ピンク円に線画イラストと短い語
• 数値カード（stat-card）: 紺のラベル帯、線アイコン、ピンクの大きな数値
• 社員紹介カード（member-card）: 円形の色面に人物、職種名、短い一言の白枠
• 募集一覧タブ（recruit-tab-list）: 新卒・キャリアのタブと矢印付きのリスト行
• エントリーバナー（entry-banner）: 人物写真に白い大きな文字と白丸の矢印

Do's and Don'ts

Do - 紺とピンクのぼかし球体を背景の左右に散らす。 - 見出しは和文ラベルと大きな欧文をセットにする。 - 白衣の人物は自然な笑顔の写真を角丸で使う。 - マスコットの吹き出しで各セクションを案内する。 - ボタンはすべて紺のピル型にそろえる。

Don't - 濃い背景の面を広く使わない。 - ピンクを本文や長い面に使わない。 - 角が尖った写真やボタンを混ぜない。 - 強い影や立体的な装飾を付けない。 - マスコットを写真の上に重ねすぎない。

Page Structure

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

1. ファーストビュー（職場の雰囲気と理念を伝える）: 角丸の人物写真に透かし欧文、右に縦書きのコピーとマスコット
2. お知らせ（最新情報の告知）: 白い角丸カードに日付・ラベル・タイトルの行
3. メッセージ（共感と志望動機の喚起）: 中央揃えの短文、周囲に角丸写真とぼかし球体を散らす
4. 会社紹介（企業の概要を伝える）: 白い角丸パネルに欧文見出しとロゴ枠
5. 特長（3つの強みを示す）: 淡グレー地に番号付きの淡ピンク円アイコン3つ
6. 仕事紹介（職種を理解させる）: 2枚の写真カードに職種ラベルと説明
7. 社員紹介（先輩の姿を見せる）: 淡青紫パネルに円形背景の人物カードのスライダー
8. 研修（成長環境を伝える）: 左に文章、右に研修写真
9. 数値で見る（働きやすさを数字で示す）: 4枚の数値カード、ピンクの大きな数字
10. 勤務コース（働き方の選択肢）: 文章とドットの日本地図にピン
11. 福利厚生（制度の一覧）: 番号付き項目のリストと家族写真のコラージュ
12. 募集情報（応募先へ誘導）: 淡ピンク地にピンクの欧文見出し、2列タブのリスト
13. エントリー（応募を促す）: 写真背景のバナーを並べ、白文字と矢印

Imagery

• 白衣のスタッフの自然な笑顔、店舗や調剤室で明るく撮る。
• 写真は明るめで、やや青みの清潔な色調にする。
• 紺の線で描いた猫のマスコットとカプセルのキャラクター。
• 特長と数値には紺・ピンクの線画アイコンを使う。
• 背景は粒子感のある紺とピンクの放射ぼかし円。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真と文章を縦に積み、写真は全幅の角丸にする。
• 欧文見出しは 40px 前後に縮める。
• 特長円アイコンは横3つを維持するか縦に並べる。
• 数値カードは 2×2 の格子にする。
• 社員紹介は横スワイプのスライダーにする。
• エントリーバナーは 1 列に積む。

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