irfanfaraaz/website-builder

ウェブサイトビルダー — テンプレート修正 + Netlifyデプロイ

目標

ユーザーの簡単な説明をもとに、実績のあるテンプレートを修正して、プロダクション品質のランディングページを作成する（ゼロから構築しない）。その後、Netlifyに公開し、URLを返却する。

入力

• ブランド名: 会社/プロジェクト名
• コアテーゼ: それが何か一言（または確認用のURL）
• 雰囲気/美学: 方向性（例：「ダークテクニカル」「高級クリニカル」「ブルータリスト」）
• コンバージョン目標: CTAの内容（デフォルト：予約する）

テンプレートの場所

ベーステンプレートはワークスペースルートの website-template/ にあります。React + Vite + Tailwind v3 + GSAPで動作する完全なサイトです。

構造

website-template/
├── src/
│   ├── App.jsx              # ルートレイアウト（全セクションをインポート）
│   ├── index.css            # Tailwindインポート、ノイズオーバーレイ、スクロールバー
│   ├── main.jsx             # エントリーポイント
│   └── components/
│       ├── Navbar.jsx        # フローティングナビ、スクロール反応
│       ├── Hero.jsx          # 全画面ヒーロー、背景画像、GSAPテキストリビール
│       ├── Features.jsx      # 明るい背景のセクション、インタラクティブな3つのマイクロUI
│       ├── DiagnosticShuffler.jsx  # 自動循環スタックカードウィジェット
│       ├── TelemetryTypewriter.jsx # ターミナル風タイプライターウィジェット
│       ├── AdaptiveRegimen.jsx     # アニメーションカーソル付きカレンダーピッカー
│       ├── Philosophy.jsx    # パララックス背景、単語分割テキストリビール
│       ├── Protocol.jsx      # スタッキングスクロールカード（GSAP ScrollTriggerピン留め）
│       ├── Membership.jsx    # 3段階価格表、ホバーエフェクト
│       └── Footer.jsx        # ダークフッター、カラム
├── tailwind.config.js        # カラートークン、フォント、ボーダー半径
├── postcss.config.js         # 標準PostCSS + Autoprefixer
├── vite.config.js            # Vite + Reactプラグイン
├── package.json              # React 19、GSAP、Lucide、Tailwind v3
└── index.html

技術スタック（変更禁止）

• React 19 + Vite 7
• Tailwind CSS v3（tailwind.config.js + @tailwind ディレクティブ使用 — v4ではない）
• GSAP 3 with ScrollTrigger
• Lucide Reactアイコン
• PostCSS + Autoprefixer

デザインシステム（tailwind.config.js内）

colors:
  moss: '#070707'      — 深めのブラックアクセント
  clay: '#0026FF'      — テクノロジーブルー基調
  cream: '#EAEAEA'     — オフホワイトテキスト
  charcoal: '#070707'  — プライマリーダーク背景

fonts:
  sans: Plus Jakarta Sans, Outfit
  serif: Cormorant Garamond
  mono: system monospace

プロセス

ステップ1: テンプレートをコピー

cp -R website-template/ site-name/
cd site-name
rm -rf node_modules
npm install

ステップ2: ブランドに合わせてカスタマイズ

以下のファイルを修正 — 再構成やゼロからの書き換えはしないこと：

1. tailwind.config.js — カラートークン（moss、clay、cream、charcoal）とフォントをブランドの美学に合わせて変更する。クラス名はそのまま、16進数の値のみ変更。

2. index.css — Google FontsのインポートURLを新しいフォント選択に合わせて更新。

3. index.html — <title>を更新。

4. コンポーネントのコピー — 各コンポーネント内のブランド固有テキストを検索置換：

   • Navbar.jsx — ブランド名、ナビリンク、CTAボタンテキスト
   • Hero.jsx — 大見出し、小見出し、タグライン、背景画像URL
   • Features.jsx — セクション見出し、サブ見出し
   • DiagnosticShuffler.jsx — カードタイトル、値、トレンド（ブランドに合わせる）
   • TelemetryTypewriter.jsx — タイピングメッセージ配列、ステータスラベル
   • AdaptiveRegimen.jsx — ウィジェットラベル、ボタンテキスト
   • Philosophy.jsx — 対比する2つの声明文、セクションラベル、背景画像
   • Protocol.jsx — ステップタイトル、説明、セクション見出し
   • Membership.jsx — 層名、価格、機能、説明（不要ならCTAセクションに置き換え）
   • Footer.jsx — ブランド名、タグライン、リンクカラム、著作権表示

5. Unsplash画像 — Hero.jsxとPhilosophy.jsxの背景画像URLをブランドに合ったものに置き換える。フォーマットは https://images.unsplash.com/photo-ID?w=2000&q=80 を使用。

ステップ3: ビルド＆デプロイ

npm run build
npx netlify-cli deploy --prod --dir=dist --create-site site-name

サイトがすでにNetlifyにリンクされている場合：

npm run build
npx netlify-cli deploy --prod --dir=dist

注：インタラクティブな sites:create コマンドは非TTY環境でハングします。常に --create-site フラグを使用してください。

ステップ4: ライブURLを返す

やってはいけないこと

• コンポーネントをゼロから書き換えない。 テンプレートは動作します。コピー、カラー、画像のみ変更。
• Tailwind v4に切り替えない。 テンプレートはv3とtailwind.config.jsを使用。維持する。
• インタラクティブなマイクロUIを削除しない（DiagnosticShuffler、TelemetryTypewriter、AdaptiveRegimen）。これらが視覚的な差別化要因。内容をブランドに合わせて適応させる。
• 構造レイアウトを変更しない（丸いセクションの変わり目、スタッキングスクロールカード、パララックスPhilosophyセクション）。これらが見栄えを良くする要素。
• 絶対に必要な場合を除き、新しいnpm依存関係を追加しない。

カスタマイズチートシート

雰囲気を変える

tailwind.config.js の4つのカラートークンを変更するだけで全体の美学が変わります：

雰囲気	charcoal (背景)	clay (アクセント)	cream (テキスト)	moss (濃いアクセント)
テクノロジーブルー（デフォルト）	#070707	#0026FF	#EAEAEA	#070707
ゴールドラグジュアリー	#070707	#C9A84C	#F5F0E8	#0A0A0A
ネオンサイバー	#0A0A0A	#00FFD1	#E0E0E0	#0A0A0A
クリニカルホワイト	#FAFAFA	#2563EB	#1A1A1A	#F5F5F5
テラコッタオーガニック	#1A1410	#CC5833	#F2F0E9	#2E4036
エメラルドコンテンツ	#090909	#10B981	#F0F0F0	#0A0A0A

クライアントが価格表を必要としない場合

Membership.jsx の内容を全幅のCTAセクションに置き換える（コンポーネントファイルは残し、JSXのみ変更）。

実例：1SecondCopy（SEOコンテンツ作成サービス）

これは必要な修正の深さを示すゴールドスタンダードのリファレンスです。すべてのコンポーネントのテキスト内容は変更されますが、構造/レイアウトの変更は一切行われません。

カラー（tailwind.config.js）

moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'

コンポーネントごとの変更

コンポーネント	変更点	変更しなかった点
Navbar.jsx	ブランド → "1SECONDCOPY_"、リンク → Process/Platform/Pricing、CTA → "Get Started"	フローティングナビ、スクロールブラー、モバイルハンバーガー
Hero.jsx	大見出し → "Words that Rank."、タグライン → "Content Writing, With a Twist"、トップ1%のライターについてのサブ見出し、Unsplash背景 → ライティングテーマ	GSAPテキストリビール、レイアウト、グラデーションオーバーレイ
Features.jsx	見出し → "Your Content Command Center"、サブ見出し → リアルタイムダッシュボードについて	3カラムマイクロUIグリッド、セクション構造
DiagnosticShuffler.jsx	カード → "Content Velocity: 48 articles"、"Avg. SERP Position: #4.2"、"Turnaround Time: 2.1 days"、ラベル → "Content Analytics"	自動循環アニメーション、カード構造
TelemetryTypewriter.jsx	メッセージ → コンテンツパイプラインステップ（"Researching target keywords..."、"Matching writer to brief..."）、ラベル → "Live Queue"、統計 → "In Queue: 3 briefs" / "Avg. Delivery: 2.1 days"	タイプライターエフェクト、ターミナルスタイル
AdaptiveRegimen.jsx	ラベル → "Content Scheduler"、見出し → "Select Publish Day"、ボタン → "Submit"、GSAPカラー → #10B981	カレンダーグリッド、アニメーションカーソル、日付チップ
Philosophy.jsx	旧来の方法 → "Hire freelancers. Manage revisions. Pray it ranks." vs 新しい方法 → "Submit a brief. Get SEO content that converts."、Unsplash背景を交換	パララックススクロール、単語分割リビール、レイアウト
Protocol.jsx	ステップ → "Brief & Research" / "Expert Writing" / "SEO & Delivery"、見出し → "The Process."、ワークフローについての説明	スタッキングスクロールカード、GSAPピン留め、SVGグラフィック
Membership.jsx	層 → Starter $0.09/word、Bulk $0.08/word、Enterprise Custom、すべての機能をコンテンツサービス向けに書き換え	3カラムグリッド、ホバーエフェクト、人気バッジ
Footer.jsx	ブランド → "1SECONDCOPY_"、タグライン → "SEO content on-demand"、カラム → Services/Company、ステータス → "Writers Online"	レイアウト、ピングドットアニメーション、著作権表示

重要なポイント

10ファイルにわたって約200行のテキスト変更。レイアウト、アニメーション、構造の変更はゼロ。色とコピーがすべての重い仕事を担うため、サイトは完全に異なって見える。

環境

必要条件：

• Node.js 18+
• npx netlify-cli（自動インストール）
• netlify login で認証されたNetlifyアカウント

初回セットアップ

実行前に、ワークスペースに .gitignore ファイルがあるか確認する。ない場合、ユーザーはこのスキルを初めて使うと想定する。その場合：

1. ユーザーにこのスキルを初めて実行するか尋ねる
2. はいの場合、動作の仕組みと、設定・セットアップが必要なもの（APIキー、環境変数、依存関係など）について説明する
3. Nickが最高の結果を願っていることを伝える！