ID,日時,プロジェクト,プロンプト 1,2025/08/28 18:26:12,landing-page,"コミットしてプッシュしてデプロイしてください。 " 2,2025/08/28 17:34:35,landing-page,"./styles/globals.css:1:1 Syntax error: /Users/mimoriikki/Desktop/landing-page/styles/globals.css The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive. > 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; This error occurred during the build process and can only be dismissed by fixing the error. " 3,2025/08/28 17:06:12,landing-page,"# 概要 **目的**: 「システム開発ノウハウ教材」を“絶対欲しい”と思わせるLP（ランディングページ）をNext.js + Tailwind CSSで制作する。 **主KPI**: CVR（購入/申し込み率） ≥ 6.0%、1ページ当たり平均滞在時間 ≥ 90秒、直帰率 ≤ 40%。 **副KPI**: CTAクリック率、スクロール到達率（50/75/100%）、FAQ展開率、レビュー閲覧率、Stripe Checkout到達率。 --- # ターゲット/ベネフィット定義 * **ターゲット**: エンジニア志望・若手社内DX担当・フリーランス初期層・ノーコードからのステップアップ層。 * **最上位ベネフィット**: *3ヶ月で自走してWebシステムを設計〜リリースできる*。 * **補助ベネフィット**: 実案件の型/テンプレ、AI・クラウド活用、失敗回避のチェックリスト、提案資料雛形。 --- # UX原則（“AIコーディング感”を消す） 1. **非対称レイアウト**: セクション毎にグリッド/余白/カード高さを意図的にずらす。 2. **実物ビジュアル**: 教材スクショ・コード抜粋・成果物キャプチャを中心に、フリー写真はサポート役。 3. **手触りアニメ**: 要素ごとに異なる緩急/方向（フローティングの微小モーション、遅延チェイン）。 4. **人の声の密度**: 受講者レビュー、Before/After、制作裏話のテキスト量を意図的に厚めに。 5. **意味のある装飾**: グロー/グラスモーフィズムは“情報階層”や“重点”の可視化にだけ使用。 --- # 情報設計（IA）/ セクション構成 1. **ヒーロー**（強ベネ + 1行サブ + 商品可視化 + CTA×2） 2. **課題共感**（3〜4カード） 3. **解決策/約束**（教材の核：“実務の型”） 4. **中身が見える**（カリキュラム・紙面/動画スクショ・コード断片） 5. **ビフォー/アフター**（定量/定性） 6. **実績/権威付け**（導入社/案件、SNS、掲載） 7. **受講者の声**（写真付きカルーセル） 8. **価格/オファー**（特典バッジ/返金保証/比較表） 9. **FAQ**（アコーディオン：8〜12項目） 10. **クロージング**（限定性・緊急性 + 大CTA） 11. **フッター**（問い合わせ/ポリシー/クレジット） --- # デザインシステム ## カラー（Tailwind + CSS変数 / HSL） * `--bg`: 222 47% 5%（#0B0E13 近似） * `--panel`: 222 36% 9% * `--card`: 222 24% 14% * `--primary`: 198 100% 52%（サイアンスカイ） * `--accent`: 264 84% 62%（バイオレット） * `--muted`: 220 12% 45% * `--text`: 210 18% 98% * `--success`: 158 64% 52% / `--warning`: 40 100% 50% / `--danger`: 0 80% 60% **運用ルール**: 主要CTA=primary、セカンダリCTA=accent。背景は`bg-[hsl(var(--bg))]`を基調に、セクション切替で`panel/card`を使用。 ## タイポグラフィ * 見出し: **Inter** / **Poppins**（700〜900） * 本文: **Noto Sans JP** / **Roboto**（400〜500） * 数字/コード: **JetBrains Mono**（600） ## ラディウス/シャドウ/ブラー * `rounded-2xl`基準、CTAは`rounded-full`。 * シャドウ：`shadow-[0_10px_30px_rgba(0,0,0,0.35)]` * グラス：`backdrop-blur-xl` + 1pxボーダー（白の5%） ## スペーシング/コンテナ * セクション縦余白: `py-24 md:py-32` * コンテナ: `max-w-[1200px] mx-auto px-6 md:px-8` ## アイコン * `lucide-react`（stroke2px、24/32px） --- # 画像/ビジュアル方針（フリー素材併用） * **ソース**: Unsplash / Pexels（人物・ワークシーン）。 * **比率**: 16:9/4:3/1:1 を使い分け、ヒーローは16:9の暗め写真に青系フィルタ（CSS）を適用。 * **加工レシピ**: `brightness-75 contrast-110 saturate-110 hue-rotate-[--blue]`、角丸大、微シャドウ。 * **教材可視化**: 実スクショ（Figmaモック→PNG）/コード抜粋画像（VSCodeテーマ基準）。 * **代替テキスト**: すべて記述（A11y）。 **キーワード例**（検索用）: * ""developer team night office"", ""code on screen closeup"", ""business person laptop focus"", ""software architect whiteboard"", ""startup collaboration table""。 --- # アニメーション仕様（Framer Motion） * **グローバル**: 初回表示`prefers-reduced-motion`尊重。A/Bでアニメ強度ON/OFF。 * **パターン**: * ヒーロー：キャッチ=上方向fade、パッケージ=scale-in、CTA=バウンド0.5回。 * カード群：stagger 0.06s / 20px slide。 * ホバー：`translate-y-[-4px]` + `shadow-lg` + ボーダーのアルファ加算。 * **実装**: `Viewport.once`で1回のみ、LCP要素は無アニメ。 --- # アクセシビリティ * コントラスト比 4.5:1 以上（本文）。 * キーボードフォーカス可視（`outline-offset-2`）。 * 画像alt/ボタンaria-label/Accordionに`aria-expanded`。 * 動画/自動アニメは`reduced-motion`で停止。 --- # SEO / OGP / 構造化データ * `next/metadata`でタイトル/ディスクリプション/OGP（1200x630）。 * ルート`/opengraph-image`で自動OG生成（satori）。 * `application/ld+json`（Product + AggregateRating + FAQPage）。 * `canonical`、`robots`、サイトマップ自動生成。 --- # パフォーマンス予算 * LCP ≤ 2.5s（初回）/ CLS ≤ 0.02 / TTI ≤ 3.2s。 * 画像は`next/image`、`priority`はヒーローのみ。 * `next/font`でInter/Notoをサブセット、プリロード。 * JSバンドル ≤ 180KB（gzip）。Framerは必要箇所のみdynamic import。 --- # 分析/計測 * Vercel Analytics + Speed Insights。 * `@vercel/analytics/react`を`layout.tsx`に設置。 * 主要イベント: `cta_click`, `checkout_start`, `faq_open`, `testimonial_slide`。 --- # セキュリティ/プライバシー * Stripe公開鍵はクライアント、秘密鍵はRoute Handler（サーバー）で管理。 * ReCAPTCHA v3（問い合わせフォーム）。 * Cookieバナー（必要最小限、分析のみ）。 --- # 技術スタック/バージョン * Next.js 14+（App Router） / TypeScript * Tailwind CSS 3.4+ * Framer Motion / lucide-react / shadcn/ui（Button, Accordion, Card など） * Stripe（Checkout） --- # ディレクトリ構成 ``` app/ layout.tsx page.tsx opengraph-image.tsx api/ checkout/route.ts components/ ui/ (shadcn生成) Hero.tsx Navbar.tsx SocialProof.tsx ProblemCards.tsx PromiseSection.tsx Curriculum.tsx BeforeAfter.tsx Stats.tsx Testimonials.tsx Pricing.tsx FAQ.tsx Footer.tsx CTA.tsx lib/ analytics.ts schema.ts (zod) utils.ts public/ images/ (フリー素材 + スクショ) styles/ globals.css tailwind.css ``` --- # コンポーネント詳細仕様（抜粋） ## Navbar * 固定、スクロールで半透明化（グラス）。 * 項目: 「特徴」「中身」「実績」「価格」「FAQ」「購入」。 * モバイルは`Sheet`（shadcn）でサイドドロワ。 ## Hero * 背景: 暗め写真 + 青系オーバーレイ。 * 要素: H1, サブコピー, CTA主要/副次, パッケージ画像（3D擬似）。 * LCP対象: H1+画像。 ## ProblemCards * 3〜4枚。アイコン + 見出し + 1文。 * ホバーで微細浮き上がり。 ## PromiseSection（解決策） * 見出し + 3カラムの“約束カード”。 * 例: 「実務の型」「AI活用」「テンプレ同梱」。 ## Curriculum * タイル8〜12。ホバーで裏面にシラバス展開（flip風）。 * 各タイルに“教材スクショ/コード写真”を混在。 ## BeforeAfter * 左右分割。Beforeはグレイッシュ、Afterは鮮明。 * KPI表示（例: 開発速度 2.3x / バグ率 -35%）。 ## Testimonials * 1\~2行レビューを輪播。顔写真必須。 * Schema.org `AggregateRating`。 ## Pricing * 単品（通常/割引） + 特典3つ。返金保証バッジ。 * 「他社教材比較」短表。 * CTA「今すぐ手に入れる」。 ## FAQ * 8〜12項目、Accordion。`FAQPage`構造化データも出力。 ## Footer * 問い合わせ/特商法/プライバシー/クレジット。 --- # コピー雛形（短） * H1: **最短で“実務の型”が身につく。一生モノの開発教材。** * サブ: 現場で磨いた知見を凝縮。3ヶ月で設計→実装→公開まで自走できる力を。 * CTA: 今すぐ教材を手に入れる * ベネフィット: 「要件定義〜運用までのチェックリスト」「AI×高速実装の実例」「提案テンプレ/コード同梱」 --- # Stripe決済フロー 1. PricingのCTAで`/api/checkout`へPOST。 2. サーバーで`stripe.checkout.sessions.create`。 3. 成功/キャンセルURL: `/thank-you`, `/`。 4. Webhookで`checkout.session.completed`受信→メール送信/ダウンロード発行。 **ENV** * `STRIPE_SECRET_KEY` * `STRIPE_PRICE_ID` * `STRIPE_WEBHOOK_SECRET` --- # セットアップ手順 ```bash pnpm create next-app@latest lpx --typescript --tailwind --eslint cd lpx pnpm add framer-motion lucide-react clsx zod @vercel/analytics stripe npx shadcn@latest init -d npx shadcn@latest add button accordion card ``` `tailwind.config.ts`にHSL変数のテーマを追加し、`globals.css`でCSS変数定義。 --- # 主要ファイル雛形（抜粋） ## tailwind.config.ts（抜粋） ```ts import type { Config } from 'tailwindcss' const config: Config = { darkMode: ['class'], content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], theme: { extend: { colors: { bg: 'hsl(var(--bg))', panel: 'hsl(var(--panel))', card: 'hsl(var(--card))', primary: 'hsl(var(--primary))', accent: 'hsl(var(--accent))', muted: 'hsl(var(--muted))', text: 'hsl(var(--text))', }, container: { center: true, padding: '2rem', screens: { '2xl': '1200px' } }, borderRadius: { xl: '1rem', '2xl': '1.25rem' }, }, }, plugins: [], } export default config ``` ## styles/globals.css（抜粋） ```css :root { --bg: 222 47% 5%; --panel: 222 36% 9%; --card: 222 24% 14%; --primary: 198 100% 52%; --accent: 264 84% 62%; --muted: 220 12% 45%; --text: 210 18% 98%; } html { scroll-behavior: smooth; } body { @apply bg-[hsl(var(--bg))] text-[hsl(var(--text))]; } ``` ## app/layout.tsx（抜粋） ```tsx import './globals.css' import { Analytics } from '@vercel/analytics/react' export const metadata = { title: 'システム開発ノウハウ教材 | 最短で実務の型を身につける', description: '現場で磨いた知見を凝縮。3ヶ月で設計→実装→公開まで自走できる力を。', } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` ## app/page.tsx（骨子） ```tsx import Navbar from '@/components/Navbar' import Hero from '@/components/Hero' import SocialProof from '@/components/SocialProof' import ProblemCards from '@/components/ProblemCards' import PromiseSection from '@/components/PromiseSection' import Curriculum from '@/components/Curriculum' import BeforeAfter from '@/components/BeforeAfter' import Testimonials from '@/components/Testimonials' import Pricing from '@/components/Pricing' import FAQ from '@/components/FAQ' import Footer from '@/components/Footer' export default function Page() { return ( <>

IT教材販売LP

お客様情報