# Website Builder

> Full website generation from business brief. Landing pages, portfolios, e-commerce. Deploy-ready code with hosting.

- Skill: `modbender/website-builder` (Agent Skill)
- Install (CLI): `npx skillmds add modbender/website-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modbender/website-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: modbender (https://skillmd.com/u/modbender)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/modbender/website-builder

---


# Website Builder

ビジネスブリーフからデプロイ可能なウェブサイトを完全生成。

## 収益ポテンシャル

- **サイト構築**: $1,000-5,000/件
- **月額保守**: $50-100/月
- **月収目安**: $2,000-15,000/月

## 対応サイトタイプ

### ランディングページ ($500-1,500)
```
- 1ページ構成
- ヒーローセクション
- 特徴・ベネフィット
- 料金プラン
- CTA
- 問い合わせフォーム
```

### ポートフォリオサイト ($1,000-2,000)
```
- プロフィール
- 作品ギャラリー
- スキル・経歴
- 連絡先
- ブログ（オプション）
```

### 企業サイト ($2,000-4,000)
```
- ホーム
- 会社概要
- サービス
- 実績
- お知らせ
- 採用情報
- 問い合わせ
```

### Eコマース ($3,000-5,000)
```
- 商品カタログ
- カート・チェックアウト
- 決済連携（Stripe）
- 在庫管理
- 注文管理
```

## 使用方法

### 基本生成
```
「[ビジネス名]のランディングページを作って」
「フリーランスデザイナーのポートフォリオサイト作成」
```

### 詳細指定
```
「サイト作成
 ビジネス: [name]
 業種: [industry]
 ターゲット: [audience]
 ページ: [home, about, services, contact]
 カラー: [primary, secondary]
 スタイル: [modern/minimalist/corporate/creative]」
```

## 技術スタック

### フロントエンド
```
- Next.js 14+ (App Router)
- Tailwind CSS
- TypeScript
- Framer Motion (アニメーション)
```

### バックエンド（必要時）
```
- Supabase / Firebase
- Stripe (決済)
- SendGrid / Resend (メール)
```

### デプロイ
```
- Vercel (推奨)
- Cloudflare Pages
- Netlify
```

## ワークフロー

```
1. 要件ヒアリング
   ├── ビジネス理解
   ├── ターゲット特定
   └── 競合分析

2. 設計
   ├── サイトマップ作成
   ├── ワイヤーフレーム
   └── デザインシステム

3. 開発
   ├── コンポーネント作成
   ├── ページ実装
   └── レスポンシブ対応

4. テスト
   ├── クロスブラウザ確認
   ├── モバイル確認
   └── パフォーマンス最適化

5. デプロイ
   ├── ドメイン設定
   ├── SSL証明書
   └── 本番公開
```

## 出力物

### コードベース
```
project/
├── app/              # ページ
├── components/       # コンポーネント
├── lib/              # ユーティリティ
├── public/           # 静的ファイル
├── styles/           # スタイル
├── package.json
├── tailwind.config.js
└── README.md
```

### ドキュメント
```
- セットアップ手順
- 環境変数一覧
- デプロイ手順
- 更新方法
```

## 価格プラン

### Basic ($1,000)
- ランディングページ1ページ
- レスポンシブデザイン
- 問い合わせフォーム
- 1回のリビジョン

### Standard ($2,500)
- 5ページまで
- カスタムデザイン
- アニメーション
- SEO基本設定
- 2回のリビジョン

### Premium ($5,000)
- 10ページまで
- Eコマース機能
- 決済連携
- CMS連携
- 無制限リビジョン
- 1ヶ月サポート

### Monthly Maintenance ($50-100)
- コンテンツ更新
- セキュリティパッチ
- バックアップ
- パフォーマンス監視