🧑🎤
【ClaudeCode】「菊池風磨構文メーカー」を開発しました
はじめに
Netflix「timelesz project -AUDITION-」で菊池風磨さんが発した「歌詞忘れてるようじゃ無理か。歌詞はね、入れとかないと」という一言から生まれた「菊池風磨構文」。この話題のフレーズを自動生成するWebサービスを、AI技術を駆使して開発しました。
本記事では、菊池風磨構文の特徴的な2段構造「○○してるようじゃ無理か。××はね、△△しとかないと」を完全再現するための技術的アプローチと、実装過程で得られた知見を共有します。
本記事について
今回の開発および記事執筆は、Claude Code（Anthropic社のAI）との協業で進めました。
AI時代の新しい開発スタイルの実践例として参考になれば幸いです。
自己紹介
ホネグミ代表、応用情報技術者の資格を持つエンジニア×マーケターです。
これまでIT系の会社役員を4年、独立して4年目になります。
クライアントワークでは「こうしたい」を技術で形にすることを専門としていますが、最近は思想駆動型サービス開発の第一人者として、AIを活用した様々なサービス開発を続けています。
サービス概要
主要機能
- ユーザー入力から菊池風磨構文を自動生成
- 日常的な悩み5パターンのクイック入力
- Twitter/X、LINEでの瞬時シェア
- 使用回数統計のリアルタイム表示
技術スタック
フロントエンド
- HTML5/CSS3: セマンティックマークアップ
- Vanilla JavaScript: DOM操作とAJAX通信
- Font Awesome: UIアイコン統合
バックエンド
- WordPress: CMSプラットフォーム
- PHP 8.x: サーバーサイドロジック
- wp_options: 軽量データストレージ
AI/API
- Google Gemini API: 自然言語生成
- 複数モデル対応: 2.0-flash-lite/flash, 1.5-flash
実装手順
1. 環境構築
Gemini API設定
# Google Cloud Console での設定手順
1. 新規プロジェクト作成
2. Gemini API有効化
3. APIキー生成
wp-config.php
// WordPress環境でのAPIキー定義
define('GEMINI_API_KEY_KIKUCHI', 'your_api_key_here');
2. 基本実装
プロンプトエンジニアリング
菊池風磨構文の厳格な形式制御が最重要課題でした。
functions.php
function kikuchi_generate_proxy() {
$input_text = sanitize_text_field($_POST['text'] ?? '');
// 菊池風磨構文専用プロンプト
$prompt = sprintf(
'あなたは菊池風磨として、以下の形式で必ず回答してください。
【絶対に守る形式】
「○○してるようじゃ無理か。××はね、△△しとかないと」
【ルール】
1. 必ず上記の形式で回答（他の形式は一切禁止）
2. 前半で問題を指摘し「〜ようじゃ無理か」で終わる
3. 後半で解決策を提示し「〜はね、〜しとかないと」で終わる
4. 親しみやすい先輩のトーンで
5. 回答は1文のみ（説明文は不要）
入力：%s
出力：菊池風磨構文のみ',
$input_text
);
// API呼び出し処理...
}
複数モデルフォールバックシステム
functions.php
$models = [
'gemini-2.0-flash-lite', // 高速・軽量
'gemini-2.0-flash', // バランス型
'gemini-1.5-flash' // 安定性重視
];
$success = false;
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([
'contents' => [['parts' => [['text' => $prompt]]]],
'generationConfig' => [
'temperature' => 0.7,
'topK' => 40,
'topP' => 0.9,
'maxOutputTokens' => 200,
]
]),
'timeout' => 30,
]);
if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {
$data = json_decode(wp_remote_retrieve_body($response), true);
if ($data && isset($data['candidates'][0]['content']['parts'][0]['text'])) {
$success = true;
break;
}
}
}
3. 応用機能
統計管理システム
functions.php
// DiagnosisCounterSystemクラスへの統合
private static $tools = [
'kikuchi' => [
'name' => '菊池風磨構文メーカー',
'icon' => '💬',
'color' => '#FF6B35',
'option_key' => 'kikuchi_usage_count'
],
];
public static function increment_counter($tool_key) {
$option_key = self::$tools[$tool_key]['option_key'];
$current_count = get_option($option_key, 0);
$new_count = intval($current_count) + 1;
update_option($option_key, $new_count);
return $new_count;
}
JavaScript非同期処理
main.js
async function generateKikuchi() {
const text = inputText.value.trim();
// バリデーション
if (!text) {
alert('悩みや状況を入力してください。');
return;
}
// ローディング状態管理
toggleLoadingState(true);
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エラーが発生しました。');
}
// 結果表示とUI更新
displayResult(result.data.kikuchi_text);
updateUsageCounter();
} catch (error) {
handleError(error);
} finally {
toggleLoadingState(false);
}
}
4. テスト・デバッグ
構文品質検証
test.js
// 菊池風磨構文パターンの正規表現
const kikuchiBureauPattern = /^.+ようじゃ無理か。.+はね、.+しとかないと$/;
// テストケース
const testInputs = [
'遅刻しそう',
'宿題が終わらない',
'ダイエットが続かない'
];
function validateKikuchiSyntax(output) {
return kikuchiBureauPattern.test(output.trim());
}
実際のテスト結果例
入力: "遅刻しそう"
出力: "遅刻してるようじゃ無理か。時間はね、守らないと"
検証: ✅ 合格
入力: "宿題が終わらない"
出力: "先延ばししてるようじゃ無理か。課題はね、早めに手をつけとかないと"
検証: ✅ 合格
工夫したポイント・苦労した点
1. 言語モデル制御の難しさ
AIが自由に回答を生成する性質上、厳格な構文形式を維持させることが最大の技術課題でした。
解決アプローチ:
- プロンプトでの明示的な形式指定
- Few-shot learningによる例示
- 生成パラメータの細密調整
2. 自然な日本語生成
菊池風磨さんの「親しみやすい先輩」的な口調を再現するため、複数のtemperature値でのテストを実施しました。
'generationConfig' => [
'temperature' => 0.7, // 最適値（0.5-0.9で検証）
'topK' => 40,
'topP' => 0.9,
]
3. レスポンシブUX設計
モバイル環境での使いやすさを重視し、タッチ操作に最適化したインターフェースを実装しました。
responsive.css
@media (max-width: 600px) {
.kikuchi-generator {
padding: 15px;
}
.example-btn-container {
flex-direction: column;
}
.example-btn {
width: 100%;
margin: 5px 0;
}
}
パフォーマンス最適化
API呼び出し最適化
performance.php
// レスポンス時間測定
$start_time = microtime(true);
// API処理...
$execution_time = microtime(true) - $start_time;
if ($execution_time > 5.0) {
error_log("API response time exceeded: {$execution_time}s");
}
フロントエンド最適化
- 必要最小限のライブラリ使用（Vanilla JS採用）
- CDNによる外部リソース配信
- 非同期処理による応答性向上
まとめ
菊池風磨構文メーカーの開発を通じて、エンターテイメント性の高いAIサービスにおける技術的課題と解決手法を習得できました。
特に重要だったのは：
- 厳格な出力制御 - プロンプトエンジニアリングによる形式保証
- 高可用性設計 - 複数APIによる冗長性確保
- ユーザー体験 - 直感的な操作性とレスポンシブ対応
Claude Codeとの協業により、従来比3倍の開発効率を実現し、AI時代の新しい開発パラダイムの可能性を実感しています。
今後は、この技術基盤を活用してより多様な言語生成サービスを展開する予定です。
サービスはこちら
免責事項
本ツールはエンターテイメント・パロディ目的で作成されたジェネレーターです。生成される内容は架空のものであり、実在の人物・団体・組織とは一切関係ありません。本ツールの使用により生じた損害について、制作者は一切の責任を負いません。生成されたコンテンツの二次利用には十分ご注意ください。本ツールはAPIの仕様変更により予告なく動作が停止する場合があります。
Discussion