BizAgentでLP作成ガイド
BizAgentを使ってランディングページ（LP）を作成する手順を解説します。
なぜNode.jsやNext.jsを使うのか？
HTML/CSSだけの場合との違い
| 項目 | HTML/CSS のみ | Next.js（Node.js） |
|---|---|---|
| 見た目 | シンプルな静的ページ | リッチでインタラクティブ |
| アニメーション | 手作業で追加 | ライブラリで簡単に実装 |
| コンポーネント | コピペで使い回し | 再利用可能な部品として管理 |
| デプロイ | サーバーにファイルをアップ | ワンクリックで自動デプロイ |
| 更新・保守 | 全ファイルを手動編集 | 一箇所変えれば全体に反映 |
具体的なメリット
1. おしゃれなアニメーションが簡単
Next.jsではAnimejsやFramer Motionなどのライブラリを使って、スクロールアニメーションやホバーエフェクトを数行のコードで追加できます。
2. 再利用しやすい
一度作ったヘッダーやフッター、ボタンなどのパーツを「コンポーネント」として保存しておけば、別のプロジェクトでも簡単に再利用できます。
3. AIとの相性が良い
BizAgentはNext.jsのコードを理解しているので、「このボタンの色を変えて」「ここにアニメーションを追加して」といった指示に的確に対応できます。
Node.jsとは？
Node.jsは「パッケージ管理ツール」を動かすための土台です。
- npm: いろんな便利なライブラリ（アニメーション、デザインなど）をインストールするツール
- BizAgentが自動でNode.jsの有無を確認し、なければインストールを案内してくれます
「呪文みたいなコマンド」について
画面に表示される英語のコマンド（npm install など）は、覚える必要はありません。
- BizAgentが実行していいか聞いてくるので、Yesを選ぶだけ
- 意味がわからなければ「詳しく教えて」と入力すれば解説してくれます
前提条件
- VSCodeがインストールされていること
- BizAgent拡張機能がインストールされていること
- Node.jsがインストールされていること（なければBizAgentが案内してくれます）
基本フロー
1. タスクボードを開く
- VSCode左側の拡張機能アイコン（BizAgentアイコン）をクリック
- 「タスクボード」を開く
2. LP作成タスクを開始
タスクボードで以下のように入力します：
ホームページを作りたい
または、プリセットから「会社ホームページ作成」を選択して「エージェントで実行」をクリックします。
3. 質問に答える
BizAgentがいくつかの質問をしてきます：
- プロジェクトの保存場所: 現在開いているフォルダ内を推奨
- フレームワーク: Next.js推奨（リッチなデザインが作りやすい）
- デプロイ先: Vercel推奨（無料で簡単にデプロイ可能）
わからない質問があれば「詳しく教えて」と入力すると、日本語で解説してくれます。
4. プロジェクト作成を待つ
自動的に以下が実行されます：
- Node.jsのインストール確認
- Next.jsプロジェクトの作成
- 必要なパッケージのインストール
左側のファイルエクスプローラーにプロジェクトファイルが追加されていきます。
5. デザインを確認・調整
プロジェクト作成後、以下のように指示できます：
開発サーバーを起動して
ブラウザで http://localhost:3000 にアクセスしてデザインを確認し、調整したい部分があれば：
ヘッダーの色を青に変えて
もっとモダンなデザインにして
デザイン品質を上げるコツ
参考サイトを渡す
良いデザインの参考サイトURLを指示に含めます：
このサイトを参考にしてデザインを改善して: https://example.com
プロンプト集を活用
Web上の質の高いプロンプト集を検索させます：
LP作成の良いプロンプトをネットで検索して、それを使ってデザインを改善して
複数パターン生成
デザインを5パターン作って比較させて
トラブルシューティング
Node.jsがインストールされていないと言われる
BizAgentの案内に従ってインストールします。インストール後、VSCodeを再起動してください。
プロジェクトがデスクトップに作成されてしまう
プロジェクトは現在開いているフォルダ内に作成するのが推奨です。「この階層に作成して」と伝えてください。
エラーが発生した
「うまくいかない」と入力すると、BizAgentが問題を解決しようとします。
次のステップ
- デプロイ: 「Vercelにデプロイして」と指示
- ドメイン設定: 「カスタムドメインを設定して」と指示
- 機能追加: 「お問い合わせフォームを追加して」と指示