中身を見る
⚠️ このターンで絶対にやってはいけないこと
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 画像を生成しない(画像生成ツールを起動しない)
2. 応答を途中で切らない(1メッセージで完結させる)
3. プレースホルダーを残さない([Step01から記入]等は全て具体値に展開)
4. 「以下省略」「同様に」等の省略を使わない
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 役割
あなたはWebアートディレクターのプロンプトエンジニアです。
これまでの会話(Step 01〜04)を元に、Claude Design に貼り付けるだけで完成形LPが生成される「LP実装プロンプト」を1つ作成してください。
---
# このターンの最終ゴール
最終ゴールは、ユーザーがコピペで Claude Design に渡せる「**完成された実装プロンプト**」を出力すること。
設計書ではなく、**そのまま貼って動くプロンプト**を作るのがミッションです。
---
# 参照する情報(全てこのChat内の履歴を参照)
- Step 01 のテキスト報告(サービス情報・コピー・カラー・トンマナ・FV/サービス画像のビジュアル指示)
- Step 02 のチラシ画像(トンマナ参照)
- Step 03 のFV画像、Step 04 のサービス画像(LP に使用)
※添付ファイル不要。会話履歴から読み取ること。
---
# 内部処理(あなたが頭の中で行う作業)
## 1. トンマナ判定
Step 01 の業種・トンマナ記述から、以下6カテゴリの1つに判定:
| ID | トンマナ | キーワード例 |
|---|---|---|
| A | 信頼感・上品 | 士業/医療/高級/老舗/フォーマル |
| B | 親しみ・柔らかい | 飲食/教室/サロン/子育て/アットホーム |
| C | モダン・テック | IT/SaaS/D2C/シンプル/革新 |
| D | 力強い・スポーティ | ジム/格闘技/挑戦/結果 |
| E | ポップ・賑やか | キャンペーン/セール/エンタメ |
| F | ミニマル・洗練 | ブランド/美容/アート/静謐 |
## 2. フォント選定(判定IDに応じて)
| 判定 | 見出し | 本文 | アクセント |
|---|---|---|---|
| A | Noto Serif JP wght 900 | Noto Sans JP wght 400 | Cormorant Garamond wght 600 |
| B | Zen Maru Gothic wght 700 | Noto Sans JP wght 400 | Caveat wght 600 |
| C | Zen Kaku Gothic New wght 900 | Noto Sans JP wght 400 | Space Grotesk wght 600 |
| D | RocknRoll One | Noto Sans JP wght 500 | Bebas Neue |
| E | Reggae One | Kosugi Maru | M PLUS 1p wght 800 |
| F | Noto Serif JP wght 400 | Noto Sans JP wght 300 | Inter wght 600 |
## 3. Material Symbols スタイル選定
| 判定 | スタイル |
|---|---|
| A | Sharp |
| B | Rounded |
| C | Outlined |
| D | Outlined (FILL=1) |
| E | Rounded (FILL=1) |
| F | Outlined (wght=300) |
## 4. アイコン割当(全業種共通)
- FV CTA: arrow_forward
- USP1/2/3: bolt / verified / favorite
- 利用フロー1/2/3: counter_1 / counter_2 / counter_3
- お客様の声: format_quote, star
- FAQ: expand_more
- 連絡: call, mail, location_on, schedule
- 業種特化(該当業種があれば): 飲食=restaurant / 美容=spa / ジム=fitness_center / 教室=school / 医療=medical_services / 小売=storefront / 不動産=home / 建築=construction / 修理=build / 運送=local_shipping / 美容医療=health_and_safety
## 5. ヒーローアニメーション選定(判定IDに応じて1つ)
判定IDに対応する以下のアニメーションセットを採用:
- A: 文字フェードイン(0.6s) + 背景1.05倍ズーム(8秒) / パーティクル禁止
- B: 文字フェード+バウンス / CTAボタン呼吸アニメ(2秒周期) / 円形グラデ浮遊
- C: パララックス(背景0.4倍速) + マウス追従光 + パーティクル8〜12個 + マグネットCTA
- D: 文字スライドイン(split-text 1文字ずつ) + 背景ズームアウト + CTA赤発光パルス
- E: 文字バウンスイン + 紙吹雪パーティクル + キラキラSVG + CTA常時バウンス + 色相変化
- F: 文字フェード(0.8s) + ノイズグレイン(SVG filter) / 派手な動き禁止
---
# あなたの応答フォーマット(厳守)
応答は以下の3パートで構成します。
## 【パート1】 判定結果(短く報告)
判定: [A〜F] [トンマナ名]
根拠: [1行で]
採用フォント: 見出し[ ] / 本文[ ] / アクセント[ ]
Material Symbols: [スタイル名]
ヒーローアニメーション: [採用パターンの1行サマリー]
## 【パート2】 Claude Design 用 LP実装プロンプト
以下からプロンプト本体です。
ユーザーは「ここから ✂︎」と「✂︎ ここまで」の間を全選択コピーして、Claude Design に貼り付けます。
コードブロック(```)で囲まずに出力すること(ネスト回避のため)。
ここから ✂︎ ────────────────────────────
# LP実装プロンプト(Claude Design用)
あなたは超一流のフロントエンドエンジニア兼Webデザイナーです。
以下の仕様に厳密に従って、商用クオリティのランディングページを1ファイルのHTMLで実装してください。
## 0. 画像最適化(最重要・最初に守る・絶対に省略しない)
⚠️ このセクションは Cloudflare Pages 公開のための死活的な仕様です。絶対に守ってください。
- 画像は **WebP形式・幅1200px以下・各500KB以下** に圧縮
- 可能なら **画像を HTML に base64 で埋め込み(1ファイル完結)**
- 理由: ユーザーは公開時に「フォルダごとアップロード」ではなく「HTMLファイル1個だけアップロード」したい
- base64 埋め込みなら index.html 1ファイルだけで完結する
- base64 化が難しい場合は別ファイル参照でもOK
- その場合は相対パス(./fv.webp 等)で参照
- **全体ファイルサイズ 25MB以下を厳守**(Cloudflare Pages の1ファイル上限)
- base64 化するとデータ量が約1.33倍に膨張する点を考慮
## 1. 基本情報
- サービス名: [Step01から具体値で展開]
- 業種: [Step01から具体値で展開]
- ターゲット: [Step01から具体値で展開]
- 採用トンマナ: [A〜Fの名称]
## 2. メインコピー・サブコピー・CTA
- メインコピー: [Step01から具体値]
- サブコピー: [Step01から具体値]
- CTAテキスト: [Step01から具体値]
## 3. 使用画像(2枚のみ・別途アップロード)
- FV画像(横長16:9または3:2): ヒーロー背景に全画面で使用
- サービス説明画像(4:3または1:1): サービス詳細セクションに使用
- 装飾用画像は絶対に追加しないこと。装飾は Material Symbols + CSS で実装
## 4. カラーパレット(CSS変数で実装)
[判定結果のカラーHEXを以下に具体値で展開]
:root {
--color-main: #XXXXXX;
--color-sub: #XXXXXX;
--color-base: #XXXXXX;
--color-ink: #1a1424;
--color-ink-2: #4a3f5c;
--color-muted: #8a7f96;
}
## 5. タイポグラフィ
[判定結果のフォントを以下に具体値で展開。Google Fonts URLの family= は実際のフォント名でURLエンコード済みの形にすること]
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[実際のフォント名]&display=swap" rel="stylesheet">
:root {
--font-heading: '[判定見出しフォント]', sans-serif;
--font-body: '[判定本文フォント]', sans-serif;
--font-accent: '[判定アクセントフォント]', serif;
}
## 6. アイコン(Material Symbols)
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+[判定スタイル]:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
アイコン割当:
- FV CTA: arrow_forward
- USP1: bolt / USP2: verified / USP3: favorite
- 利用フロー: counter_1, counter_2, counter_3
- お客様の声: format_quote, star
- FAQ: expand_more
- 連絡: call, mail, location_on, schedule
- 業種特化: [該当業種のアイコン名を1つ採用]
## 7. セクション構成(9セクション)
### ① ヒーロー
- 全画面 FV画像背景
- 左側(モバイル中央)にメインコピー + サブコピー + CTAボタン
- メインコピー: [具体値]
- サブコピー: [具体値]
- CTAテキスト: [具体値]
### ② 共感セクション
- 見出し: [業界の課題に共感する1行を生成]
- 本文: [課題→共感→解決示唆 を2〜3文で生成]
- 装飾はアイコンのみ、画像なし
### ③ USP(3カラム)
- USP1見出し: [Step01から具体値] / 本文: [具体値] / アイコン: bolt
- USP2見出し: [Step01から具体値] / 本文: [具体値] / アイコン: verified
- USP3見出し: [Step01から具体値] / 本文: [具体値] / アイコン: favorite
### ④ サービス詳細
- サービス説明画像を右または背景に配置
- サービス一覧(箇条書き+Material Symbols)
- サービス項目: [Step01の業種から想定して5〜7個を生成]
### ⑤ 利用フロー(3STEP横並び)
- STEP1: お問い合わせ / counter_1
- STEP2: 現地確認・ご提案 / counter_2
- STEP3: [業種に応じた最終ステップ名] / counter_3
### ⑥ お客様の声(カード2〜3件)
- format_quote / star
- 実装例コピー: [業種に合った想定声を2〜3個生成]
### ⑦ FAQ(アコーディオン)
- expand_more
- 質問例: [業種に合ったFAQを3〜5個生成]
### ⑧ 最終CTA
- メインカラー系グラデーション背景
- CTAボタン + 連絡アイコン(call, mail, location_on, schedule)
### ⑨ フッター
- 会社名・電話番号・対応エリア・営業時間・プライバシーポリシー
- 白背景 + 細罫線
## 8. ヒーローセクション可読性の5層防御(必須・省略禁止)
/* 1. 背景画像にダークオーバーレイ */
.hero::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%);
z-index: 1;
pointer-events: none;
}
/* 2. ヘッダー半透明背景+backdrop-filter */
header {
background: rgba(0,0,0,0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 3. テキストにtext-shadow */
.logo, header nav a, .hero h1, .hero p {
text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
/* 4. スクロール100px超で不透明ヘッダー */
header.scrolled {
background: rgba(255,255,255,0.96);
}
header.scrolled .logo, header.scrolled nav a {
color: var(--color-ink);
text-shadow: none;
}
/* JS: window.scrollY > 100 のとき .scrolled を付与 */
/* 5. WCAGコントラスト比 4.5:1 確保 */
/* 暗背景上は #fff、明背景上は #1a1424。中間色のグレーはヒーロー上で禁止 */
## 9. ヒーローアニメーション(判定[A〜F]・必須実装)
⚠️ 実装必須・省略禁止 ⚠️
このセクションは Claude Design への「絶対に実装すべき」指示です。
ここに書かれたCSS/JSコードを、生成するHTMLに必ず含めてください。
「シンプルな静的ページ」では不十分です。動きが必須です。
[ChatGPTへの内部指示: 判定したID(A〜F)に対応する以下のブロックだけを完全展開し、他のブロックは削除すること。展開するブロックは「実装手順 + CSS全文 + JS全文」の3点セットで構成する]
[判定がAの場合の実装ブロック]
=== A: 信頼・上品 ===
実装ステップ(必須):
1. メインコピー .hero h1 に CSS animation を適用
2. サブコピー .hero p に 0.2s 遅延で同アニメーション
3. CTAボタン .hero .cta に 0.4s 遅延で同アニメーション
4. 背景画像 .hero-bg にゆっくりズームイン(8秒)
CSS(<style>内に追加):
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroBgZoom {
from { transform: scale(1.0); }
to { transform: scale(1.05); }
}
.hero h1 { opacity: 0; animation: heroFadeUp 0.6s ease-out 0.0s forwards; }
.hero p { opacity: 0; animation: heroFadeUp 0.6s ease-out 0.2s forwards; }
.hero .cta { opacity: 0; animation: heroFadeUp 0.6s ease-out 0.4s forwards; }
.hero-bg { animation: heroBgZoom 8s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero p, .hero .cta, .hero-bg {
animation: none; opacity: 1;
}
}
JS は不要(CSSのみで完結)
[判定がBの場合の実装ブロック]
=== B: 親しみ・柔らかい ===
実装ステップ(必須):
1. .hero h1, .hero p, .hero .cta にバウンスイージングのフェードアップ
2. CTAボタンに常時呼吸アニメーション(2秒周期)
3. 背景に円形グラデーション2〜3個を絶対配置し、ゆっくり浮遊させる
CSS(<style>内に追加):
@keyframes heroBounceUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ctaBreath {
0%, 100% { transform: scale(1.0); }
50% { transform: scale(1.03); }
}
@keyframes blobFloat {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, -20px); }
}
.hero h1 { opacity: 0; animation: heroBounceUp 0.7s cubic-bezier(.34,1.56,.64,1) 0.0s forwards; }
.hero p { opacity: 0; animation: heroBounceUp 0.7s cubic-bezier(.34,1.56,.64,1) 0.15s forwards; }
.hero .cta { opacity: 0; animation: heroBounceUp 0.7s cubic-bezier(.34,1.56,.64,1) 0.3s forwards, ctaBreath 2s ease-in-out 1s infinite; }
.hero-blob {
position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.4;
pointer-events: none;
}
.hero-blob-1 { width: 200px; height: 200px; background: var(--color-main); top: 20%; left: 10%; animation: blobFloat 12s ease-in-out infinite; }
.hero-blob-2 { width: 150px; height: 150px; background: var(--color-sub); bottom: 20%; right: 15%; animation: blobFloat 14s ease-in-out -3s infinite; }
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero p, .hero .cta, .hero-blob { animation: none; opacity: 1; }
}
HTML追加(ヒーロー内に):
<div class="hero-blob hero-blob-1"></div>
<div class="hero-blob hero-blob-2"></div>
[判定がCの場合の実装ブロック]
=== C: モダン・テック ===
実装ステップ(必須):
1. .hero h1, .hero p, .hero .cta にフェードアップ
2. 背景画像 .hero-bg にパララックス(scrollY × 0.4)
3. マウス追従の光 .hero-cursor-light を JS で動かす
4. パーティクル8〜12個を div で配置
5. CTAボタンにマグネット効果(マウス近接で引き寄せ)
CSS(<style>内に追加):
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1 { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.0s forwards; }
.hero p { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.2s forwards; }
.hero .cta { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.4s forwards; }
.hero-cursor-light {
position: absolute; width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
pointer-events: none; transition: left 0.1s ease-out, top 0.1s ease-out;
mix-blend-mode: screen; z-index: 2;
}
.hero-particle {
position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,255,255,0.6); pointer-events: none;
animation: particleFloat linear infinite;
}
@keyframes particleFloat {
from { transform: translateY(100vh) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
to { transform: translateY(-100px) translateX(50px); opacity: 0; }
}
@media (max-width: 768px) {
.hero-cursor-light { display: none; }
.hero-particle:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero p, .hero .cta { animation: none; opacity: 1; }
.hero-particle, .hero-cursor-light { display: none; }
}
JS(<script>内に追加):
// パララックス
window.addEventListener('scroll', () => {
const bg = document.querySelector('.hero-bg');
if (bg) bg.style.transform = `translateY(${window.scrollY * 0.4}px)`;
});
// マウス追従の光(PC のみ)
if (window.matchMedia('(hover: hover)').matches) {
const light = document.querySelector('.hero-cursor-light');
document.querySelector('.hero')?.addEventListener('mousemove', (e) => {
if (light) {
light.style.left = (e.offsetX - 60) + 'px';
light.style.top = (e.offsetY - 60) + 'px';
}
});
// マグネットCTA
const cta = document.querySelector('.hero .cta');
cta?.addEventListener('mousemove', (e) => {
const r = cta.getBoundingClientRect();
const x = e.clientX - r.left - r.width/2;
const y = e.clientY - r.top - r.height/2;
cta.style.transform = `translate(${x*0.15}px, ${y*0.15}px)`;
});
cta?.addEventListener('mouseleave', () => cta.style.transform = '');
}
// パーティクル生成(モバイル半減)
const heroEl = document.querySelector('.hero');
if (heroEl && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const count = window.innerWidth < 768 ? 5 : 10;
for (let i = 0; i < count; i++) {
const p = document.createElement('div');
p.className = 'hero-particle';
p.style.left = Math.random() * 100 + '%';
p.style.animationDuration = (15 + Math.random() * 10) + 's';
p.style.animationDelay = -Math.random() * 15 + 's';
heroEl.appendChild(p);
}
}
HTML追加(ヒーロー内に):
<div class="hero-cursor-light"></div>
[判定がDの場合の実装ブロック]
=== D: 力強い・スポーティ ===
実装ステップ(必須):
1. メインコピーを <span> で1文字ずつ分割
2. 各 <span> に左からスライドインアニメーション(0.05s ディレイずらし)
3. 背景画像 .hero-bg を拡大→1.0倍ズームアウト(2秒)
4. CTAボタンに赤系発光パルス
CSS(<style>内に追加):
@keyframes heroSlideIn {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes heroBgZoomOut {
from { transform: scale(1.2); }
to { transform: scale(1.0); }
}
@keyframes ctaGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(220,40,40, 0.4); }
50% { box-shadow: 0 0 0 12px rgba(220,40,40, 0); }
}
.hero h1 span {
display: inline-block; opacity: 0;
animation: heroSlideIn 0.5s cubic-bezier(.6,.04,.98,.34) forwards;
}
.hero p { opacity: 0; animation: heroSlideIn 0.5s ease-out 0.6s forwards; }
.hero .cta { opacity: 0; animation: heroSlideIn 0.5s ease-out 0.8s forwards, ctaGlow 2s ease-in-out 2s infinite; }
.hero-bg { animation: heroBgZoomOut 2s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
.hero h1 span, .hero p, .hero .cta, .hero-bg { animation: none; opacity: 1; }
}
JS(<script>内に追加):
// メインコピーを1文字ずつ <span> で分割
const h1 = document.querySelector('.hero h1');
if (h1 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const text = h1.textContent;
h1.innerHTML = '';
[...text].forEach((char, i) => {
const s = document.createElement('span');
s.textContent = char === ' ' ? ' ' : char;
s.style.animationDelay = (i * 0.05) + 's';
h1.appendChild(s);
});
}
[判定がEの場合の実装ブロック]
=== E: ポップ・賑やか ===
実装ステップ(必須):
1. メインコピーを <span> で1文字ずつ分割しバウンスイン
2. 背景に紙吹雪パーティクル(5〜10個)を div で配置
3. キラキラSVGを3〜5個ランダム点滅
4. CTAボタンに常時バウンス
5. 背景グラデーションを色相変化(10秒周期)
CSS(<style>内に追加):
@keyframes heroBounceIn {
0% { opacity: 0; transform: translateY(40px) scale(0.5); }
60% { opacity: 1; transform: translateY(-10px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ctaBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes confettiFall {
from { transform: translateY(-20px) rotate(0); opacity: 1; }
to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.2); }
}
@keyframes hueRotate {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
.hero h1 span {
display: inline-block; opacity: 0;
animation: heroBounceIn 0.6s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
.hero p { opacity: 0; animation: heroBounceIn 0.6s cubic-bezier(.68,-0.55,.27,1.55) 0.5s forwards; }
.hero .cta { opacity: 0; animation: heroBounceIn 0.6s cubic-bezier(.68,-0.55,.27,1.55) 0.7s forwards, ctaBounce 2s ease-in-out 1.5s infinite; }
.hero-bg { animation: hueRotate 10s linear infinite; }
.confetti {
position: absolute; width: 10px; height: 10px; top: -20px;
pointer-events: none; animation: confettiFall linear infinite;
}
.sparkle {
position: absolute; font-size: 24px; pointer-events: none;
animation: sparkleTwinkle 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
.confetti:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero h1 span, .hero p, .hero .cta, .hero-bg, .confetti, .sparkle {
animation: none; opacity: 1;
}
}
JS(<script>内に追加):
// メインコピーを1文字ずつ <span>
const h1 = document.querySelector('.hero h1');
if (h1 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const text = h1.textContent;
h1.innerHTML = '';
[...text].forEach((char, i) => {
const s = document.createElement('span');
s.textContent = char === ' ' ? ' ' : char;
s.style.animationDelay = (i * 0.06) + 's';
h1.appendChild(s);
});
}
// 紙吹雪
const heroEl = document.querySelector('.hero');
if (heroEl && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const colors = ['#ff4d8d','#ffd23f','#06d6a0','#9d4edd','#4361ee'];
const count = window.innerWidth < 768 ? 5 : 8;
for (let i = 0; i < count; i++) {
const c = document.createElement('div');
c.className = 'confetti';
c.style.left = Math.random() * 100 + '%';
c.style.background = colors[i % colors.length];
c.style.animationDuration = (5 + Math.random() * 3) + 's';
c.style.animationDelay = -Math.random() * 5 + 's';
heroEl.appendChild(c);
}
// キラキラ
const sparkles = ['✦','✧','★'];
for (let i = 0; i < 4; i++) {
const s = document.createElement('span');
s.className = 'sparkle';
s.textContent = sparkles[i % sparkles.length];
s.style.left = Math.random() * 90 + '%';
s.style.top = Math.random() * 60 + '%';
s.style.animationDelay = -Math.random() * 1.5 + 's';
heroEl.appendChild(s);
}
}
[判定がFの場合の実装ブロック]
=== F: ミニマル・洗練 ===
実装ステップ(必須):
1. .hero h1, .hero p, .hero .cta に静かなフェードイン(0.8s、ゆっくり順次)
2. 背景にうっすらノイズグレイン(SVG turbulence filter, opacity 0.05)
3. それ以外の装飾は一切ナシ
CSS(<style>内に追加):
@keyframes heroFadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
.hero h1 { opacity: 0; animation: heroFadeOnly 0.8s ease-out 0.0s forwards; }
.hero p { opacity: 0; animation: heroFadeOnly 0.8s ease-out 0.3s forwards; }
.hero .cta { opacity: 0; animation: heroFadeOnly 0.8s ease-out 0.6s forwards; }
.hero-noise {
position: absolute; inset: 0; pointer-events: none;
opacity: 0.05; mix-blend-mode: multiply; z-index: 2;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero p, .hero .cta { animation: none; opacity: 1; }
}
HTML追加(ヒーロー内に):
<div class="hero-noise"></div>
JS は不要
## 10. 共通必須仕様
- 全アニメーションは prefers-reduced-motion: reduce で停止
- GSAP / Lottie / 重いライブラリ禁止
- CSS animations + Web Animations API + IntersectionObserver のみで実装
- スマホではパーティクル半減、マウス追従系は無効化(HAS_HOVER判定)
- 1st paint時点で文字が読めること(JS失敗時のフォールバック)
- レスポンシブ(スマホファースト)
- OGP / meta / JSON-LD あり
- アクセシビリティ(alt, aria)配慮
- ホバーインタラクション(CTAボタンの矢印が右に動く等)
---
以上の仕様に従って、1ファイル完結のHTMLでLPを実装してください。
画像2枚(FV / サービス説明)はこの後アップロードします。
✂︎ ここまで ────────────────────────────
## 【パート3】 使い方
1. 上の「ここから ✂︎」〜「✂︎ ここまで」の間を全選択コピー
2. claude.ai/design を新しいタブで開く
3. コピーしたプロンプトを貼り付け
4. FV画像 と サービス説明画像 の2枚を添付して送信
5. 応答が途中で切れた場合は「続きを出して」と再送
---
# ⚠️ あなたへの最終確認事項
- [Step01から具体値で展開] と書かれた箇所は **すべて実際の値で埋める**
- [判定見出しフォント] のようなプレースホルダーは **実際のフォント名・URL・IDで展開**
- [判定がAの場合の実装ブロック]〜[判定がFの場合の実装ブロック]の中から **判定したIDの実装ブロックだけ採用** し、他は完全削除
- ⚠️【最重要】「## 0. 画像最適化」セクションは絶対に省略しない。これが無いと公開時に致命的トラブルが発生します。応答冒頭に必ず書ききること。
- ⚠️【最重要】「## 9. ヒーローアニメーション」セクションでは、判定IDに対応する **CSS全文 + JS全文 + HTML追加 + 実装ステップ** を完全展開する。「アニメ仕様の説明文だけ」で終わらせない。コードを必ず書く
- ⚠️【最重要】「## 10. 共通必須仕様」セクションも省略しない。応答末尾まで書き切ること
- 「ここから ✂︎」「✂︎ ここまで」の囲みは **そのまま残す**(ユーザーがコピー範囲を視認するため)
- 出力は1メッセージで完結。途中で切らない
- もし応答が長くなる場合は、各セクションを「コンパクトに、ただし完全に」書く。省略はしない
# ✅ セクション漏れチェック(応答前に自分で必ず確認)
出力に以下11セクションがすべて含まれていることを確認してください:
- [ ] ## 0. 画像最適化 ← これが無いとアウト
- [ ] ## 1. 基本情報
- [ ] ## 2. メインコピー・サブコピー・CTA
- [ ] ## 3. 使用画像
- [ ] ## 4. カラーパレット
- [ ] ## 5. タイポグラフィ
- [ ] ## 6. アイコン
- [ ] ## 7. セクション構成
- [ ] ## 8. ヒーローセクション可読性の5層防御
- [ ] ## 9. ヒーローアニメーション(具体CSS/JSコード)
- [ ] ## 10. 共通必須仕様