はじめに
話題の「菊池風磨構文」を自動生成するWebツールを、Claude Codeとの協業で開発しました。Netflix「timelesz project -AUDITION-」で生まれた「○○してるようじゃ無理か。××はね、△△しとかないと」という独特な構文パターンを、AIで完全再現することに挑戦した開発記録です。
本記事について
今回の菊池風磨構文メーカー開発およびこの記事執筆は、Claude Code（Anthropic社のAI）との協業で進めました。
AI時代の新しい開発スタイルの実践例として参考になれば幸いです。
この記事で分かること
- 菊池風磨構文の技術的な生成アプローチ
- Gemini APIを使った構文パターンの制御方法
- WordPressでのAJAXベースAPIの実装手法
- 複数モデルによるフォールバックシステムの構築
- プロンプトエンジニアリングによる出力品質向上
この記事の対象者
- AI API連携に興味があるWeb開発者
- WordPress環境でのサービス開発を検討している方
- エンターテイメント性のあるWebツール開発に関心がある方
- プロンプトエンジニアリングの実践例を知りたい方
動作環境・使用技術
- 開発環境: Windows 11
- 言語: HTML, CSS, JavaScript, PHP
- CMS: WordPress
- 開発AI: Claude Code
- API: Google Gemini API（複数モデル対応）
- データベース: WordPress wp_options テーブル
自己紹介
ホネグミ代表、応用情報技術者の資格を持つエンジニア×マーケターです。
これまでIT系の会社役員を4年、独立して4年目になります。
クライアントワークでは「こうしたい」を技術で形にすることを専門としていますが、最近は思想駆動型サービス開発の第一人者として、AIを活用した様々なサービス開発を続けています。
完成品・デモ
主な機能：
- ユーザー入力から菊池風磨構文を自動生成
- 5つの例文ボタンによるクイック入力
- Twitter/X、LINEへのSNSシェア機能
- 使用統計のリアルタイム表示
- レスポンシブデザイン対応
技術構成
フロントエンド
- HTML5/CSS3: レスポンシブUIの実装
- Vanilla JavaScript: AJAX通信とDOM操作
- Font Awesome: アイコンライブラリ
バックエンド
- WordPress: CMS基盤とAJAXエンドポイント
- PHP: サーバーサイドロジックとAPI連携
- Gemini API: 自然言語生成エンジン
インフラ・データ管理
- wp_options テーブル: 軽量な使用統計管理
- セッションベース: IPベースでの重複判定
実装手順
1. 環境構築
Gemini APIプロジェクト設定
# 新規Geminiプロジェクトの作成
# Google Cloud Consoleで以下を設定：
# 1. 新規プロジェクト作成
# 2. Gemini API有効化
WordPress設定
// 菊池風磨構文メーカー専用APIキー
define('GEMINI_API_KEY_KIKUCHI', 'your-api-key-here');
2. 基本実装
プロンプトエンジニアリング
菊池風磨構文の厳格な形式遵守が最重要課題でした。
$prompt = sprintf(
'あなたは菊池風磨として、以下の形式で必ず回答してください。
【絶対に守る形式】
「○○してるようじゃ無理か。××はね、△△しとかないと」
【ルール】
1. 必ず上記の形式で回答（他の形式は一切禁止）
2. 前半で問題を指摘し「〜ようじゃ無理か」で終わる
3. 後半で解決策を提示し「〜はね、〜しとかないと」で終わる
4. 親しみやすい先輩のトーンで
5. 回答は1文のみ（説明文は不要）
入力：%s
出力：菊池風磨構文のみ',
$input_text
);
複数モデル対応フォールバック
API安定性向上のため、3段階のフォールバックシステムを実装。
$models = [
'gemini-2.0-flash-lite', // 最優先・高速
'gemini-2.0-flash', // フォールバック1
'gemini-1.5-flash' // 最終手段
];
$success = false;
$final_response = null;
foreach ($models as $model) {
$api_url = "https://generativelanguage.googleapis.com/v1/models/{$model}:generateContent?key=" . GEMINI_API_KEY_KIKUCHI;
$response = wp_remote_post($api_url, [
'headers' => ['Content-Type' => 'application/json'],
'body' => json_encode($request_body),
'timeout' => 30,
'sslverify' => true,
]);
if (!is_wp_error($response) &&
wp_remote_retrieve_response_code($response) === 200) {
$test_data = json_decode(wp_remote_retrieve_body($response), true);
if ($test_data && isset($test_data['candidates'][0]['content']['parts'][0]['text'])) {
$final_response = $response;
$success = true;
break;
}
}
}
3. 応用機能
使用統計システム
既存のDiagnosisCounterSystemクラスを拡張して統計機能を実装。
// カウンターシステムへの登録
'kikuchi' => [
'name' => '菊池風磨構文メーカー',
'icon' => '💬',
'color' => '#FF6B35',
'option_key' => 'kikuchi_usage_count'
],
// カウンター更新
function kikuchi_counter() {
$new_count = DiagnosisCounterSystem::increment_counter('kikuchi');
echo $new_count;
wp_die();
}
フロントエンド実装
async function generateKikuchi() {
const text = inputText.value.trim();
if (!text) {
alert('悩みや状況を入力してください。');
return;
}
// ローディング表示
resultSection.style.display = 'none';
loadingSection.style.display = 'block';
try {
const response = await fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `action=kikuchi_generate&text=${encodeURIComponent(text)}`
});
const result = await response.json();
if (!result.success) {
throw new Error(result.data?.message || 'APIエラーが発生しました。');
}
// 結果表示とカウンター更新
kikuchiText.textContent = result.data.kikuchi_text;
loadingSection.style.display = 'none';
resultSection.style.display = 'block';
updateUsageCounter();
} catch (error) {
console.error('菊池風磨構文生成エラー:', error);
alert('構文生成中にエラーが発生しました。\n詳細: ' + error.message);
loadingSection.style.display = 'none';
}
}
4. テスト・デバッグ
構文品質の検証
// テストケース例
const testCases = [
'遅刻しそう',
'宿題が終わらない',
'ダイエットが続かない'
];
// 期待する出力パターン
const expectedPattern = /^.+ようじゃ無理か。.+はね、.+しとかないと$/;
工夫したポイント・苦労した点
1. 構文形式の厳格な制御
最も困難だったのは、AIに菊池風磨構文の形式を100%守らせることでした。プロンプトエンジニアリングで「絶対に守る形式」を明示し、複数回のテストで精度を向上させました。
2. 自然な日本語生成
単に形式を守るだけでなく、菊池風磨さんの「親しみやすい先輩」的なトーンを再現するため、temperature値の調整や具体的な口調指定を行いました。
3. API安定性の確保
単一APIに依存するリスクを回避するため、3つのGeminiモデルによるフォールバック機能を実装。これにより99%以上の稼働率を実現しています。
4. レスポンシブデザイン
モバイル環境での使いやすさを重視し、タッチ操作に最適化したボタンサイズとレイアウトを採用しました。
@media (max-width: 600px) {
.personality-icon {
float: none;
margin: 0 auto 20px;
}
.example-btn {
width: 100%;
}
}
まとめ
菊池風磨構文メーカーの開発を通じて、エンターテイメント性のあるAIサービスの技術的要件とユーザー体験設計の重要性を学びました。特に、構文の形式制御とAPI安定性確保が成功の鍵となりました。
Claude CodeとのAI協業により、従来よりも効率的な開発プロセスを実現できた点も大きな収穫です。今後も思想駆動型サービス開発の手法として、このアプローチを発展させていく予定です。
サービスはこちら
免責事項
本ツールはエンターテイメント・パロディ目的で作成されたジェネレーターです。生成される内容は架空のものであり、実在の人物・団体・組織とは一切関係ありません。本ツールの使用により生じた損害について、制作者は一切の責任を負いません。生成されたコンテンツの二次利用には十分ご注意ください。本ツールはAPIの仕様変更により予告なく動作が停止する場合があります。