DESIGN.md — 白×墨色の鉛筆画風 映像制作会社 LP（Monochrome Pencil Sketch Creative Studio LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: シンプル・ミニマル、上品・高級、親しみ・手作り感、クール・先進的
• キーワード: 余白・モノクロ・鉛筆スケッチ・縦書きラベル・手描き下線・アトリエ感
• 地の質感: 紙に鉛筆で描いたようなラフな線画と、かすれた筆跡の境界線
• 形: 角丸なしの直線ベース。罫線はわずかに傾け、境界は波線やかすれで区切る
• 温度感: 冷たくもなく温かくもない中立。墨色のモノトーンで静かにまとめる

Colors

• 地は白を基本にし、文字・線・イラストは墨色系の 1〜2 色だけで描く
• 色は写真と実績サムネイルだけに任せ、UI には彩度のある色を使わない
• 問い合わせだけはライトグレーの面にして、入力欄を白く浮かせる
• 赤はナビの現在地マーカーなど極小の点だけに使う
• 罫線は濃いグレーの細線を基本にし、黒ベタの面は使わない
• form-field は文字 #BABCBF × 背景 #FFFFFF のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#73777C、4.51:1）を使う。

Typography

• 文字は小さめ（10〜14px）にして、余白で格を出す
• セクションラベルは左端に縦書きで置き、小さな手描き矢印を添える
• 強調は太字にせず、手描きの波打つ下線で示す
• 英字はコンデンス系サンセリフにし、TYPE タグなどの補助情報に使う
• 筆記体の英文は装飾として 1〜2 行だけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左端を縦書きラベル帯として空ける
• 本文ブロックの幅: 画面幅の約 70%
• 余白: セクション間 140px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文ブロックは左右非対称にし、左 20% 前後を空けて右寄せにする
• セクション間は 120〜160px と大きく空ける
• サービス項目は横罫線＋スケッチ画＋ローマ数字＋見出し＋本文の順に縦積みする
• 実績はやや傾いた細罫線で 1 件ずつ区切る
• リンクは右寄せのテキストリンクにする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きはグレーの面と白い入力欄の明度差だけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの正方形・横長長方形。実績サムネイルは正方形
• セクション境界: 手描き風の波線、かすれた筆跡のエッジ、わずかに傾いた細罫線
• ボタンもカードも角丸にしない
• 必須バッジだけ小さなピル型にしてよい
• 線はやや傾けたりかすれさせたりして、手作業の跡を残す

Components

• 下線テキストリンク（link-arrow）: 右寄せの小さな太字テキストに下線を引き、縦の区切り線と小さな三角矢印を添える
• 縦書きセクションラベル（vertical-label）: 左端に置く縦書きの見出しに、手描きの矢印を添える
• スケッチ付きサービス項目（service-item）: 上辺の罫線から鉛筆画をはみ出させ、ローマ数字＋2 行の見出し＋手描き下線＋本文を並べる
• 実績カード（work-card）: 傾いた罫線、中央の正方形サムネイル、タイトル、クライアント名、チェックボックス風の TYPE タグ行で構成する
• 手描き強調下線（hand-underline）: 強調したい語句の下に、波打つ鉛筆線を引く
• 吹き出しラベル（speech-label）: 手描きの楕円吹き出しの中に縦書きラベルを入れる
• フォーム入力欄（form-field）: グレー地の上に、白くフラットな入力欄を置く。ラベルは左上、必須のピルバッジは右上
• 送信ボタン（button-primary）: 白い横長の矩形ボタン。文字は左寄せのグレーで、右端に小さな三角を置く

Do's and Don'ts

Do - 余白を大きく取り、要素は小さく置く - UI はモノクロで統一し、色は写真に任せる - 鉛筆スケッチ・手描き下線・かすれ境界で手作業の温度を出す - 見出しは縦書きにし、左右非対称の配置にする - リンクは下線＋三角矢印の控えめなテキスト型にする

Don't - 彩度の高い CTA ボタンやグラデーションを使わない - 角丸・ドロップシャドウ・カード浮きを使わない - 大きな太字で訴求を叫ばない - アイコンをカラフルな素材集から持ってこない - 罫線を完全な均一線だけで機械的に引かない

Page Structure

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

1. ファーストビュー（チームの雰囲気と理念を静かに伝える）: 中央に正方形のチーム写真を置き、左に縦書きコピー、下に筆記体の英文 2〜3 行を添える。左下には縦書きの「スクロール」表示
2. 事業紹介リード（何をする会社かを短く伝える）: 右寄せの小さな本文段落を置き、左端に縦書きラベルを立てる
3. サービス特長（提供価値を 3 つに分けて示す）: ローマ数字付きの 3 項目。それぞれ罫線から鉛筆画がはみ出す
4. 実績紹介（制作実績で信頼を得る）: 傾いた罫線で区切った正方形サムネイルに、タイトル・クライアント名・TYPE タグを付けて 3 件並べる
5. 会社紹介（チームの強みと姿勢を伝える）: 波線で区切り、吹き出しラベル、横長のビジュアル、手描き下線入りのリード文を置く
6. 問い合わせフォーム（相談の獲得）: かすれたエッジのグレー面に白い落書き線を重ね、白い入力欄・チェックボックス・送信ボタンを並べる
7. フッター（ナビと拠点情報）: テキストナビ、ロゴ、縦長のスナップ写真、事務所住所、SNS の下線リンク、著作権表記

Imagery

• 写真は自然光の少しくすんだフィルム調で、作業中のチームを撮ったスナップ
• イラストは道具や手元を描いた白黒の鉛筆スケッチで、ハッチングで陰影を付ける
• 装飾には手描きの波線、かすれた筆跡、落書きのループ線を使う
• 実績サムネイルは正方形で、作品のキービジュアルをそのまま使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はサービス 3 項目を縦罫線で区切った 3 カラムにする
• PC の実績はテキスト左・サムネイル右の横並び行にする
• PC のフォームはチェックボックスと送信ボタンを左、入力欄を右に置く 2 カラム
• PC は右上にナビを縦に並べて常時表示する
• 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 行書くと起動時に読み込まれる。