生成AI案件が前年比8.4倍｜今から狙うべきAI×Web制作の副業ジャンル5選

<!-- チャットボットUI（HTML部分）-->
<div class="chatbot-widget" id="chatbotWidget">
  <div class="chatbot-header">
    <span class="chatbot-title">💬 AIアシスタント</span>
    <button class="chatbot-toggle" id="chatbotToggle">×</button>
  </div>
  <div class="chatbot-messages" id="chatbotMessages">
    <div class="chatbot-message chatbot-message--bot">
      <p>こんにちは！何でもお気軽にご質問ください。</p>
    </div>
  </div>
  <div class="chatbot-input-area">
    <input
      type="text"
      class="chatbot-input"
      id="chatbotInput"
      placeholder="メッセージを入力..."
    />
    <button class="chatbot-send" id="chatbotSend">送信</button>
  </div>
</div>

<!-- 起動ボタン -->
<button class="chatbot-launcher" id="chatbotLauncher">
  💬 チャット
</button>

// チャットボット基本ロジック（JavaScript）
const chatbotWidget = document.getElementById('chatbotWidget');
const chatbotLauncher = document.getElementById('chatbotLauncher');
const chatbotToggle = document.getElementById('chatbotToggle');
const chatbotMessages = document.getElementById('chatbotMessages');
const chatbotInput = document.getElementById('chatbotInput');
const chatbotSend = document.getElementById('chatbotSend');

// ウィジェットの開閉
chatbotLauncher.addEventListener('click', () => {
  chatbotWidget.style.display = 'flex';
  chatbotLauncher.style.display = 'none';
});

chatbotToggle.addEventListener('click', () => {
  chatbotWidget.style.display = 'none';
  chatbotLauncher.style.display = 'block';
});

// メッセージ送信
async function sendMessage() {
  const userMessage = chatbotInput.value.trim();
  if (!userMessage) return;

  // ユーザーメッセージを表示
  appendMessage('user', userMessage);
  chatbotInput.value = '';

  // ローディング表示
  const loadingEl = appendMessage('bot', '入力中...');

  try {
    // バックエンドAPIにリクエスト（APIキーはサーバー側で管理）
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: userMessage }),
    });

    const data = await response.json();
    loadingEl.querySelector('p').textContent = data.reply;
  } catch (error) {
    loadingEl.querySelector('p').textContent = 'エラーが発生しました。もう一度お試しください。';
  }
}

function appendMessage(role, text) {
  const div = document.createElement('div');
  div.className = `chatbot-message chatbot-message--${role === 'user' ? 'user' : 'bot'}`;
  div.innerHTML = `<p>${text}</p>`;
  chatbotMessages.appendChild(div);
  chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
  return div;
}

chatbotSend.addEventListener('click', sendMessage);
chatbotInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') sendMessage();
});

# AIへのコーディング依頼プロンプト（例）

あなたは優秀なフロントエンドエンジニアです。
以下の仕様でLP（ランディングページ）のヒーローセクションを
HTML/CSSで実装してください。

【仕様】
- ターゲット：30〜40代の経営者・マーケター
- 訴求軸：「3ヶ月でサイト売上を1.5倍にする」
- ヒーローの構成：
  - 背景：グラデーション（紺→青）
  - キャッチコピー：「3ヶ月でサイト売上1.5倍」（h1）
  - サブコピー：「無料相談受付中」（p）
  - CTAボタン：「まず無料で相談する」（a）
  - 信頼バッジ：「導入実績200社以上」「平均4.8/5.0の満足度」

【要件】
- レスポンシブ対応（スマホ・PC両方）
- CSSはBEM記法で
- アニメーション：フェードインを0.6秒
- ボタンは hover 時に少し浮き上がる効果

BEM命名の例：.hero, .hero__title, .hero__button--primary

コードのみ返答してください。

# WordPress REST APIで記事を投稿するPythonスクリプト
import requests
import json

# WordPress サイトの設定
WP_URL = "https://example.com/wp-json/wp/v2"
WP_USERNAME = "your-username"
WP_APP_PASSWORD = "your-app-password"  # WordPress管理画面で生成

def post_article(title, content, status="draft", category_ids=None):
    # WordPress REST APIで記事を投稿する
    # Args:
    #   title (str): 記事タイトル
    #   content (str): 記事本文（HTML）
    #   status (str): 'draft' or 'publish'
    #   category_ids (list): カテゴリIDのリスト
    endpoint = f"{WP_URL}/posts"

    payload = {
        "title": title,
        "content": content,
        "status": status,
        "categories": category_ids or [],
    }

    response = requests.post(
        endpoint,
        json=payload,
        auth=(WP_USERNAME, WP_APP_PASSWORD),
        headers={"Content-Type": "application/json"}
    )

    if response.status_code == 201:
        data = response.json()
        print(f"投稿成功：ID={data['id']} / URL={data['link']}")
        return data
    else:
        print(f"投稿失敗：{response.status_code} / {response.text}")
        return None

# 使用例
post_article(
    title="生成AI活用で業務効率を3倍にする方法",
    content="<h2>はじめに</h2><p>記事本文がここに入ります...</p>",
    status="draft",
    category_ids=[5, 12]
)

# 高品質プロンプトのテンプレート（5要素構成）

## 【ペルソナ】あなたは誰か
あなたは経験15年のベテランコピーライターです。
BtoB向けのマーケティングコンテンツ制作を専門としており、
常に読者のビジネス課題から逆算してライティングします。

## 【タスク】何をしてほしいか
以下の製品情報を基に、企業の購買担当者向けの
製品紹介LP用ファーストビューコピーを3パターン作成してください。

## 【文脈】背景・関連情報
製品名：AIサポートツール「SmartDesk」
ターゲット：中小企業の総務・人事担当者（30〜50代）
主な課題：問い合わせ対応が月500件あり、担当者が疲弊
解決策：AIが24時間自動返信、工数を70%削減

## 【出力形式】どんな形で出してほしいか
各パターンは以下の形式で出力してください：
- キャッチコピー（20文字以内）
- サブコピー（40〜60文字）
- CTAテキスト（10文字以内）

## 【制約】やってはいけないこと
- 誇大表現・絶対・確実などの保証表現は使わない
- 専門用語は最小限に（担当者が理解できる言葉で）
- 同じ単語を2回以上使わない

# Midjourney プロンプトの基本構成

## 基本テンプレート
[被写体・テーマ], [スタイル・ムード], [カラーパレット], [照明], [カメラアングル], [品質パラメータ]

## バナー用サンプルプロンプト
professional fitness gym advertisement banner, modern minimalist design,
energetic male athlete doing squat with heavy barbell,
dark navy and bright orange color palette, dramatic studio lighting,
dynamic low angle shot, ultra sharp, high contrast,
commercial photography style, 4K --ar 16:9 --v 6.1 --style raw --q 2

## 解説
--ar 16:9     : アスペクト比（バナーはワイドに）
--v 6.1       : バージョン指定（最新版）
--style raw   : よりリアルな写真風に
--q 2         : 品質最高（生成時間は増える）

## ネガティブプロンプト（避けたいもの）--no で指定
--no text, watermark, logo, blur, low quality, cartoon, anime

# .env ファイル（絶対にGitにコミットしない）
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxx

# .gitignore に必ず追加する
.env
.env.local
.env.*.local
*.pem
*.key

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AIデザイナー・[名前]のポートフォリオ</title>
  <meta name="description" content="AI×Webデザインで制作速度3倍。チャットボット組込・LP高速制作・プロンプト設計を得意とするフリーランスデザイナー。">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ヒーローセクション：AIを使える専門家として打ち出す -->
  <section class="hero">
    <div class="hero__inner">
      <p class="hero__label">AI×Webデザイン専門</p>
      <h1 class="hero__title">制作スピード3倍、<br>AIで解決するWebデザイン</h1>
      <p class="hero__desc">
        ChatGPT・Claudeなどの生成AIを駆使して、<br>
        LP・チャットボット・コンテンツ制作をハイスピードで納品します。
      </p>
      <div class="hero__cta">
        <a href="#works" class="btn btn--primary">制作実績を見る</a>
        <a href="#contact" class="btn btn--secondary">無料相談する</a>
      </div>
    </div>
  </section>

  <!-- 実績数値セクション -->
  <section class="stats">
    <div class="stats__inner">
      <div class="stat-item">
        <span class="stat-item__number">3x</span>
        <span class="stat-item__label">従来比制作速度</span>
      </div>
      <div class="stat-item">
        <span class="stat-item__number">50+</span>
        <span class="stat-item__label">AI活用制作実績</span>
      </div>
      <div class="stat-item">
        <span class="stat-item__number">100%</span>
        <span class="stat-item__label">リピート受注率</span>
      </div>
    </div>
  </section>
</body>
</html>

件名：AI活用Webサービスのご提案｜[会社名]様の課題解決に

[担当者名]様

はじめまして、AIデザイナーの[名前]と申します。

[会社名]様のWebサイトを拝見し、以下の改善でビジネス成果を向上できると感じ、
ご連絡させていただきました。

━━ 現状の課題（推察）━━
・問い合わせページの直帰率が高い可能性
・問い合わせフォームへの誘導が弱い
・24時間対応の問い合わせ窓口がない

━━ 提案：AI活用スターターパック ━━
① LPの改修（ファーストビュー・CTAの最適化）
② AIチャットボット組込み（24時間FAQ自動対応）
③ Google Analytics 4の設置と月次レポート

━━ 期待できる効果 ━━
・問い合わせ数の10〜30%増加（業種平均）
・夜間・休日の問い合わせ取りこぼしゼロ
・データに基づく継続改善が可能に

━━ 費用目安 ━━
初期：15〜20万円（LP改修＋チャットボット設置）
月額：2万円（分析レポート＋軽微な修正）

15分のオンライン相談（無料）で詳しくご説明できます。
ご都合のよい日程をお知らせください。

[名前]
[連絡先・ポートフォリオURL]