黒地×藍ブルーの技術系ハッカソンイベント LP

Dark Tech Hackathon Event LP

ほぼ黒の地に白カードと白セクションを交互に置き、藍ブルーをコード風ラベルと区切り線だけに使う。エンジニア向け技術イベントの硬派でクールなLP。FVは水色系のデジタル抽象ビジュアルに、黒ベタ帯に白抜きで組んだ極太タイトルを重ねる。

エンタメ・ゲーム・アプリクール・先進的力強い・インパクトシンプル・ミニマルSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

黒地を基本にする。応募導線と開催概要は白地にして、黒白の大きな交互リズムを作る
黒地の上に白カードを置き、人物紹介とスケジュールをまとめる
藍ブルーはコード風ラベル、Join見出し、表の区切り線に限って使う
暖色は使わず、無彩色と青系だけで組む
人物写真はすべてモノクロにして色味をそろえる
リンクは青の下線付きテキスト

TYPOGRAPHY

書体

displayFV・フッターの黒帯タイトル欧文サンセリフ／ Noto Sans JP 900 ／ 75px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg英字のセクション見出し欧文サンセリフ／ Noto Sans JP 800 ／ 28px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-md日本語のリード見出し・スケジュール日付ゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-smカード内の名前・表の項目名ゴシック／ Noto Sans JP 700 ／ 12px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文・プロフィールゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

accentコード風ラベル・Join見出し欧文サンセリフ／ Montserrat 800 ／ 12px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonピルボタンゴシック／ Noto Sans JP 700 ／ 10px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・時刻（等幅寄り）ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

セクション見出しは英字の大文字1語にし、中央揃えで極太にする
コード風ラベルは camelCase の語にセミコロンを付け、斜体で青地に白文字にする
Join見出しは青文字の斜体極太
日本語本文は字間を広めにし、小さめのサイズで行間をゆったり取る
タイムラインの時刻は等幅風にして縦をそろえる

PAGE STRUCTURE

セクション構成

ファーストビューイベント名・日付・会場を一目で伝える水色のデジタル抽象背景に、青の斜体コピーを上下に配置。中央に黒帯の白抜きタイトルと日付を重ねる
テーマ挑戦の趣旨を示す黒地にコード風ラベル、白い見出し、短い3行の本文
賞金参加の動機付け英字見出しと大きな金額数字を中央揃えで置く
応募導線観戦と参加の申込白地に青の斜体見出しを置き、2種類の説明とピルボタンを並べる
審査員権威性を示す黒地に白カードを縦に並べ、円形のモノクロ写真と経歴を載せる
スケジュール当日の流れを示す日ごとに白カードを分け、縦線のタイムラインで時刻を並べる
開催概要詳細条件の提示白地に小さな英字見出しと日本語見出しを置き、下に青線区切りの表
ルールお題と審査基準の提示黒地にコード風ラベルを置き、線区切りの表を白文字で組む
協賛・主催関係企業の紹介円形の白ロゴに社名と下線リンクを添える
フッター締めとリンク白地に黒帯タイトルを置き、下にリンク群と著作権表記

COMPONENTS

部品

ピルボタン button-primaryグレー地に黒枠、右に山形矢印。応募導線に使う
コード風ラベル code-label青い長方形に白の斜体英字を置いたテーマ見出し
黒帯タイトル title-block段違いの黒い帯に白抜きの極太欧文を積み上げる
審査員カード profile-card白カードにモノクロの円形写真、所属・名前・経歴を載せる
タイムライン timeline-card日付と見出しの下に対象ラベルを置き、縦のグレー線と時刻の列を並べる
対象ラベル tag-role出場者は青、観覧者はグレーの小さな四角タグ
線区切り情報表 info-table青い細線で行を区切り、太字の項目名の下に本文を置く
円形ロゴ logo-circle黒地に白い円を置き、中にロゴを入れて下に社名とリンクを添える

守ること

黒と白を大きな面で切り替える
青はラベル・線・Join見出しに限定する
人物写真はモノクロ円形でそろえる
英字見出しは極太で大きく置く
開催情報は線区切りの表で淡々と見せる

DON'T

避けること

暖色やグラデーションのボタンを使わない
カードに影を付けない
カラー写真の人物を混ぜない
装飾アイコンを多用しない
見出しを明朝体にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒地×藍ブルーの技術系ハッカソンイベント LP（Dark Tech Hackathon Event LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: クール・先進的、力強い・インパクト、シンプル・ミニマル
キーワード: 黒地・藍ブルー・コード風ラベル・極太欧文見出し・モノクロ写真・白カード
地の質感: フラットなベタ塗り。質感を出すのはFVの抽象3Dビジュアルだけ
形: 角丸カード、円形の人物写真とロゴ、ピル型ボタン
温度感: 冷たい・硬派

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#161618`	メイン地色（黒）	45%	画素の実測
`surface`	`#FDFDFD`	カード・白セクション地	38%	画素の実測
`primary`	`#1D4B9C`	藍ブルー（ロゴ風見出し・ラベル）	1%	画素の実測
`on-dark`	`#FBFCFB`	黒地上の白文字	2%	画素の実測
`text`	`#08080A`	白地上の本文・見出し	2%	画素の実測
`cta`	`#C3C3C3`	ボタン地（終了状態のグレー）	1%	画素の実測
`on-cta`	`#222225`	ボタン文字・枠	0%	画素の実測
`line`	`#3A6AC0`	表の区切り線（青）	0%	推定
`text-muted`	`#7A7A7A`	観覧者ラベル・タイムライン線	0%	推定
`tint-1`	`#C9EAF3`	FV水色ビジュアル地	5%	画素の実測
`accent-1`	`#1F57A8`	FV上の斜体ブルー大文字	1%	推定
`background-alt`	`#FFFFFF`	カード外の薄グレー地	3%	画素の実測

黒地を基本にする。応募導線と開催概要は白地にして、黒白の大きな交互リズムを作る
黒地の上に白カードを置き、人物紹介とスケジュールをまとめる
藍ブルーはコード風ラベル、Join見出し、表の区切り線に限って使う
暖色は使わず、無彩色と青系だけで組む
人物写真はすべてモノクロにして色味をそろえる
リンクは青の下線付きテキスト

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV・フッターの黒帯タイトル	欧文サンセリフ	Noto Sans JP	900	75px	1.0	0.05em
`headline-lg`	英字のセクション見出し	欧文サンセリフ	Noto Sans JP	800	28px	1.2	0.0em
`headline-md`	日本語のリード見出し・スケジュール日付	ゴシック	Noto Sans JP	700	18px	1.5	0.1em
`headline-sm`	カード内の名前・表の項目名	ゴシック	Noto Sans JP	700	12px	1.6	0.08em
`body-md`	本文・プロフィール	ゴシック	Noto Sans JP	400	10px	1.8	0.06em
`accent`	コード風ラベル・Join見出し	欧文サンセリフ	Montserrat	800	12px	1.3	0.02em
`label-button`	ピルボタン	ゴシック	Noto Sans JP	700	10px	1.2	0.1em
`note`	注釈・時刻（等幅寄り）	ゴシック	Noto Sans JP	500	13px	1.6	0.1em

セクション見出しは英字の大文字1語にし、中央揃えで極太にする
コード風ラベルは camelCase の語にセミコロンを付け、斜体で青地に白文字にする
Join見出しは青文字の斜体極太
日本語本文は字間を広めにし、小さめのサイズで行間をゆったり取る
タイムラインの時刻は等幅風にして縦をそろえる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、PC は審査員カード2列・応募導線2列
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
セクションの間は上下80px前後と大きく取る
カードは画面の左右に約12pxの余白を残す
開催概要とルールは見出しと内容を縦に積む線区切りの表
人物カードは円形写真を中央に置き、その下に左揃えで文字を並べる
スポンサーは円形ロゴを縦に並べ、社名とリンクを添える

Elevation & Depth

影は使わず、黒地と白カードのコントラストで面を分ける
ボタンは黒の細い枠線で輪郭を出す

Shapes

角丸: 小 4px ／中 12px ／大 16px。ボタンはピル型。
写真の切り抜き: 人物はモノクロの円形切り抜き、ロゴは白い円の中に配置
セクション境界: 直線で黒白を切り替える
カードの角丸は12〜16px
ラベルは角丸なしの長方形
FVタイトルは段違いに積んだ黒い長方形帯の中に置く

Components

ピルボタン（button-primary）: グレー地に黒枠、右に山形矢印。応募導線に使う
コード風ラベル（code-label）: 青い長方形に白の斜体英字を置いたテーマ見出し
黒帯タイトル（title-block）: 段違いの黒い帯に白抜きの極太欧文を積み上げる
審査員カード（profile-card）: 白カードにモノクロの円形写真、所属・名前・経歴を載せる
タイムライン（timeline-card）: 日付と見出しの下に対象ラベルを置き、縦のグレー線と時刻の列を並べる
対象ラベル（tag-role）: 出場者は青、観覧者はグレーの小さな四角タグ
線区切り情報表（info-table）: 青い細線で行を区切り、太字の項目名の下に本文を置く
円形ロゴ（logo-circle）: 黒地に白い円を置き、中にロゴを入れて下に社名とリンクを添える

Do's and Don'ts

Do - 黒と白を大きな面で切り替える - 青はラベル・線・Join見出しに限定する - 人物写真はモノクロ円形でそろえる - 英字見出しは極太で大きく置く - 開催情報は線区切りの表で淡々と見せる

Don't - 暖色やグラデーションのボタンを使わない - カードに影を付けない - カラー写真の人物を混ぜない - 装飾アイコンを多用しない - 見出しを明朝体にしない

Page Structure

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

ファーストビュー（イベント名・日付・会場を一目で伝える）: 水色のデジタル抽象背景に、青の斜体コピーを上下に配置。中央に黒帯の白抜きタイトルと日付を重ねる
テーマ（挑戦の趣旨を示す）: 黒地にコード風ラベル、白い見出し、短い3行の本文
賞金（参加の動機付け）: 英字見出しと大きな金額数字を中央揃えで置く
応募導線（観戦と参加の申込）: 白地に青の斜体見出しを置き、2種類の説明とピルボタンを並べる
審査員（権威性を示す）: 黒地に白カードを縦に並べ、円形のモノクロ写真と経歴を載せる
スケジュール（当日の流れを示す）: 日ごとに白カードを分け、縦線のタイムラインで時刻を並べる
開催概要（詳細条件の提示）: 白地に小さな英字見出しと日本語見出しを置き、下に青線区切りの表
ルール（お題と審査基準の提示）: 黒地にコード風ラベルを置き、線区切りの表を白文字で組む
協賛・主催（関係企業の紹介）: 円形の白ロゴに社名と下線リンクを添える
フッター（締めとリンク）: 白地に黒帯タイトルを置き、下にリンク群と著作権表記

Imagery

FVは水色〜青の、ガラス片やデータ断片が飛び散る抽象3DのCG
人物は無地背景の上半身をモノクロにし、円形で切り抜く
ロゴは白い円の中に収め、余白を広めに取る
イラストや手書きの装飾は使わない
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCのFVは横長にし、タイトルの黒帯を1行にする
PCは審査員カード・応募導線・スケジュールを2列にする
PCの開催概要は、左に見出し、右に項目名と内容の2列の表を置く
PCは協賛ロゴを横に3つ並べる
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 行書くと起動時に読み込まれる。

---
version: alpha
name: Dark Tech Hackathon Event LP
description: ほぼ黒の地に白カードと白セクションを交互に置き、藍ブルーをコード風ラベルと区切り線だけに使う。エンジニア向け技術イベントの硬派でクールなLP。FVは水色系のデジタル抽象ビジュアルに、黒ベタ帯に白抜きで組んだ極太タイトルを重ねる。
colors:
  background: '#161618'
  surface: '#FDFDFD'
  primary: '#1D4B9C'
  on-dark: '#FBFCFB'
  text: '#08080A'
  cta: '#C3C3C3'
  on-cta: '#222225'
  line: '#3A6AC0'
  text-muted: '#7A7A7A'
  tint-1: '#C9EAF3'
  accent-1: '#1F57A8'
  background-alt: '#FFFFFF'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 75px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.06em
  accent:
    fontFamily: Montserrat
    fontSize: 12px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.1em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  code-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 20px
  title-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 240px
  profile-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 360px
  timeline-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.lg}'
    height: 520px
  tag-role:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 20px
  info-table:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 80px
  logo-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 130px
---

# DESIGN.md — 黒地×藍ブルーの技術系ハッカソンイベント LP（Dark Tech Hackathon Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル
- **キーワード**: 黒地・藍ブルー・コード風ラベル・極太欧文見出し・モノクロ写真・白カード
- **地の質感**: フラットなベタ塗り。質感を出すのはFVの抽象3Dビジュアルだけ
- **形**: 角丸カード、円形の人物写真とロゴ、ピル型ボタン
- **温度感**: 冷たい・硬派

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#161618` | メイン地色（黒） | 45% | 画素の実測 |
| `surface` | `#FDFDFD` | カード・白セクション地 | 38% | 画素の実測 |
| `primary` | `#1D4B9C` | 藍ブルー（ロゴ風見出し・ラベル） | 1% | 画素の実測 |
| `on-dark` | `#FBFCFB` | 黒地上の白文字 | 2% | 画素の実測 |
| `text` | `#08080A` | 白地上の本文・見出し | 2% | 画素の実測 |
| `cta` | `#C3C3C3` | ボタン地（終了状態のグレー） | 1% | 画素の実測 |
| `on-cta` | `#222225` | ボタン文字・枠 | 0% | 画素の実測 |
| `line` | `#3A6AC0` | 表の区切り線（青） | 0% | 推定 |
| `text-muted` | `#7A7A7A` | 観覧者ラベル・タイムライン線 | 0% | 推定 |
| `tint-1` | `#C9EAF3` | FV水色ビジュアル地 | 5% | 画素の実測 |
| `accent-1` | `#1F57A8` | FV上の斜体ブルー大文字 | 1% | 推定 |
| `background-alt` | `#FFFFFF` | カード外の薄グレー地 | 3% | 画素の実測 |

- 黒地を基本にする。応募導線と開催概要は白地にして、黒白の大きな交互リズムを作る
- 黒地の上に白カードを置き、人物紹介とスケジュールをまとめる
- 藍ブルーはコード風ラベル、Join見出し、表の区切り線に限って使う
- 暖色は使わず、無彩色と青系だけで組む
- 人物写真はすべてモノクロにして色味をそろえる
- リンクは青の下線付きテキスト

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV・フッターの黒帯タイトル | 欧文サンセリフ | Noto Sans JP | 900 | 75px | 1.0 | 0.05em |
| `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Noto Sans JP | 800 | 28px | 1.2 | 0.0em |
| `headline-md` | 日本語のリード見出し・スケジュール日付 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.1em |
| `headline-sm` | カード内の名前・表の項目名 | ゴシック | Noto Sans JP | 700 | 12px | 1.6 | 0.08em |
| `body-md` | 本文・プロフィール | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.06em |
| `accent` | コード風ラベル・Join見出し | 欧文サンセリフ | Montserrat | 800 | 12px | 1.3 | 0.02em |
| `label-button` | ピルボタン | ゴシック | Noto Sans JP | 700 | 10px | 1.2 | 0.1em |
| `note` | 注釈・時刻（等幅寄り） | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.1em |

- セクション見出しは英字の大文字1語にし、中央揃えで極太にする
- コード風ラベルは camelCase の語にセミコロンを付け、斜体で青地に白文字にする
- Join見出しは青文字の斜体極太
- 日本語本文は字間を広めにし、小さめのサイズで行間をゆったり取る
- タイムラインの時刻は等幅風にして縦をそろえる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、PC は審査員カード2列・応募導線2列
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションの間は上下80px前後と大きく取る
- カードは画面の左右に約12pxの余白を残す
- 開催概要とルールは見出しと内容を縦に積む線区切りの表
- 人物カードは円形写真を中央に置き、その下に左揃えで文字を並べる
- スポンサーは円形ロゴを縦に並べ、社名とリンクを添える

## Elevation & Depth

- 影は使わず、黒地と白カードのコントラストで面を分ける
- ボタンは黒の細い枠線で輪郭を出す

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 人物はモノクロの円形切り抜き、ロゴは白い円の中に配置
- **セクション境界**: 直線で黒白を切り替える
- カードの角丸は12〜16px
- ラベルは角丸なしの長方形
- FVタイトルは段違いに積んだ黒い長方形帯の中に置く

## Components

- **ピルボタン**（`button-primary`）: グレー地に黒枠、右に山形矢印。応募導線に使う
- **コード風ラベル**（`code-label`）: 青い長方形に白の斜体英字を置いたテーマ見出し
- **黒帯タイトル**（`title-block`）: 段違いの黒い帯に白抜きの極太欧文を積み上げる
- **審査員カード**（`profile-card`）: 白カードにモノクロの円形写真、所属・名前・経歴を載せる
- **タイムライン**（`timeline-card`）: 日付と見出しの下に対象ラベルを置き、縦のグレー線と時刻の列を並べる
- **対象ラベル**（`tag-role`）: 出場者は青、観覧者はグレーの小さな四角タグ
- **線区切り情報表**（`info-table`）: 青い細線で行を区切り、太字の項目名の下に本文を置く
- **円形ロゴ**（`logo-circle`）: 黒地に白い円を置き、中にロゴを入れて下に社名とリンクを添える

## Do's and Don'ts

**Do**
- 黒と白を大きな面で切り替える
- 青はラベル・線・Join見出しに限定する
- 人物写真はモノクロ円形でそろえる
- 英字見出しは極太で大きく置く
- 開催情報は線区切りの表で淡々と見せる

**Don't**
- 暖色やグラデーションのボタンを使わない
- カードに影を付けない
- カラー写真の人物を混ぜない
- 装飾アイコンを多用しない
- 見出しを明朝体にしない

## Page Structure

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

1. **ファーストビュー**（イベント名・日付・会場を一目で伝える）: 水色のデジタル抽象背景に、青の斜体コピーを上下に配置。中央に黒帯の白抜きタイトルと日付を重ねる
2. **テーマ**（挑戦の趣旨を示す）: 黒地にコード風ラベル、白い見出し、短い3行の本文
3. **賞金**（参加の動機付け）: 英字見出しと大きな金額数字を中央揃えで置く
4. **応募導線**（観戦と参加の申込）: 白地に青の斜体見出しを置き、2種類の説明とピルボタンを並べる
5. **審査員**（権威性を示す）: 黒地に白カードを縦に並べ、円形のモノクロ写真と経歴を載せる
6. **スケジュール**（当日の流れを示す）: 日ごとに白カードを分け、縦線のタイムラインで時刻を並べる
7. **開催概要**（詳細条件の提示）: 白地に小さな英字見出しと日本語見出しを置き、下に青線区切りの表
8. **ルール**（お題と審査基準の提示）: 黒地にコード風ラベルを置き、線区切りの表を白文字で組む
9. **協賛・主催**（関係企業の紹介）: 円形の白ロゴに社名と下線リンクを添える
10. **フッター**（締めとリンク）: 白地に黒帯タイトルを置き、下にリンク群と著作権表記

## Imagery

- FVは水色〜青の、ガラス片やデータ断片が飛び散る抽象3DのCG
- 人物は無地背景の上半身をモノクロにし、円形で切り抜く
- ロゴは白い円の中に収め、余白を広めに取る
- イラストや手書きの装飾は使わない
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCのFVは横長にし、タイトルの黒帯を1行にする
- PCは審査員カード・応募導線・スケジュールを2列にする
- PCの開催概要は、左に見出し、右に項目名と内容の2列の表を置く
- PCは協賛ロゴを横に3つ並べる
- PCはヘッダーにアンカーナビを横並びで置く

## 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-491aeb80`（元 LP の URL から採番）
- **元 LP**: https://lp.geechs-job.com/event/hackathon1026
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://lp.geechs-job.com/event/hackathon1026（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP