はじめに
毎日ひとつ、AIアプリをつくる。
日替わりでテーマに沿って小さなアプリを開発します。Claudeで。
この記事は 
AI Code Challenge Advent Calender 2025 の 22 日目の記事です！
21日目の記事：麻雀の点数計算アプリを作ってみた！
23日目の記事：フードロス可視化アプリを作ってみた！ 
AI アプリ
概要
Claudeでアプリをつくるのにどんなプロンプトが最適なのだろうか？
プロンプトのベストプラクティスがあるけど、一から作るのは大変だ。
プロンプトを最適化してくれるアプリをつくっちゃおう！ 
AI 実装
Claude Desktopでプロンプトを与えて実装してもらいます。
プロンプト：
最適なプロンプトを生成するアプリをつくって
以下を参考にして
https://platform.claude.com/docs/ja/build-with-claude/prompt-engineering/claude-4-best-practices
素晴らしいドキュメントですね。Claude 4のベストプラクティスに基づいた、プロンプト最適化アプリを作成します。
Claude 4のベストプラクティスに基づいたプロンプト最適化アプリを作成しました！
完成したアプリ
できました！
Claude 4 プロンプト最適化ツール
のリンクからアプリを確認できます
使い方：
- リアルタイムでClaudeがプロンプトを最適化
- 適用された改善点を明示
- ワンクリックでコピー可能
- Claude 4の6つの主要原則を表示
こんなイメージです。
試しに「Webサイトをつくって」と入力。
実際に生成されたプロンプト：
あなたはWebデベロッパーとして、ユーザーの要件に基づいてWebサイトの構造とコードを作成してください。
**目的とコンテキスト:**
このタスクの目的は、実用的で機能的なWebサイトを構築することです。作成したWebサイトは実際にブラウザで表示可能で、レスポンシブデザインに対応している必要があります。
**具体的な要件:**
以下の情報を最初に確認してから作業を開始してください：
1. **サイトの種類**: どのようなWebサイトを作りたいですか？（例：個人ポートフォリオ、企業サイト、ブログ、ECサイトなど）
2. **主要なコンテンツ**: サイトに含めたい内容（会社概要、サービス紹介、お問い合わせフォームなど）
3. **デザインの方向性**: 好みの色合いやスタイル（モダン、クラシック、ミニマルなど）
4. **必要な機能**: 特別な機能の要望（お問い合わせフォーム、画像ギャラリー、ナビゲーションメニューなど）
**出力形式:**
まず上記の情報について質問し、回答を得た後、以下の形式で提供してください：
<website_structure>
サイトマップと各ページの目的を記述
</website_structure>
<html_code>
完全なHTMLコード（DOCTYPE宣言から</html>まで）
</html_code>
<css_code>
スタイリング用のCSSコード（レスポンシブデザイン対応）
</css_code>
<javascript_code>
必要に応じてインタラクション用のJavaScriptコード
</javascript_code>
<usage_instructions>
ファイルの保存方法とブラウザでの表示方法を説明
</usage_instructions>
**技術的要件:**
- HTML5の標準に準拠したセマンティックなマークアップを使用
- CSS3を活用したモダンなスタイリング
- モバイルファーストのレスポンシブデザイン
- クロスブラウザ対応
- アクセシビリティ（WCAG 2.1）への配慮
いい感じのプロンプトが生成できました！
プログラム解説
ポイントとなるプログラムを解説します。
try {
const systemPrompt = buildSystemPrompt(options);
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 4000,
messages: [
{
role: "user",
content: `以下のプロンプトをClaude 4のベストプラクティスに基づいて最適化してください。
元のプロンプト:
${prompt}
最適化オプション:
${JSON.stringify(options, null, 2)}
最適化されたプロンプトを<optimized_prompt>タグ内に出力し、適用した改善点を<improvements>タグ内に箇条書きで出力してください。`
}
],
system: systemPrompt
})
});
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`);
}
const data = await response.json();
const responseText = data.content[0].text;
const optimizedMatch = responseText.match(/<optimized_prompt>([\s\S]*?)<\/optimized_prompt>/);
const improvementsMatch = responseText.match(/<improvements>([\s\S]*?)<\/improvements>/);
if (optimizedMatch) {
optimizedPromptText = optimizedMatch[1].trim();
outputArea.innerHTML = `<pre class="whitespace-pre-wrap font-mono text-sm">${escapeHtml(optimizedPromptText)}</pre>`;
copyBtn.classList.remove('hidden');
} else {
outputArea.innerHTML = `<pre class="whitespace-pre-wrap font-mono text-sm">${escapeHtml(responseText)}</pre>`;
optimizedPromptText = responseText;
copyBtn.classList.remove('hidden');
}
if (improvementsMatch) {
const improvements = improvementsMatch[1].trim().split('\n').filter(line => line.trim());
improvementsList.innerHTML = improvements.map(improvement => `
<div class="improvement-item">
${escapeHtml(improvement.replace(/^[-•*]\s*/, ''))}
</div>
`).join('');
improvementsSection.classList.remove('hidden');
}
}
- ClaudeのArtifacts上でAnthropicのAPIを実行します。
response = await fetch("https://api.anthropic.com/v1/messages" ...)
- 生成AIのモデルは「claude-sonnet-4」です。
model: "claude-sonnet-4-20250514"
- こちらがClaudeが生成したユーザプロンプトです。
以下のプロンプトをClaude 4のベストプラクティスに基づいて最適化してください。
元のプロンプト:
${prompt}
最適化オプション:
${JSON.stringify(options, null, 2)}
最適化されたプロンプトを<optimized_prompt>タグ内に出力し、適用した改善点を<improvements>タグ内に箇条書きで出力してください。
- 最適化されたプロンプトの表示
if (optimizedMatch) {
optimizedPromptText = optimizedMatch[1].trim();
outputArea.innerHTML = `<pre class="whitespace-pre-wrap font-mono text-sm">${escapeHtml(optimizedPromptText)}</pre>`;
copyBtn.classList.remove('hidden');
} else {
outputArea.innerHTML = `<pre class="whitespace-pre-wrap font-mono text-sm">${escapeHtml(responseText)}</pre>`;
optimizedPromptText = responseText;
copyBtn.classList.remove('hidden');
}
- 改善点リストの表示
if (improvementsMatch) {
const improvements = improvementsMatch[1].trim().split('\n').filter(line => line.trim());
improvementsList.innerHTML = improvements.map(improvement => `
<div class="improvement-item">
${escapeHtml(improvement.replace(/^[-•*]\s*/, ''))}
</div>
`).join('');
improvementsSection.classList.remove('hidden');
}
おわりに
- 実際に生成されたプロンプトでアプリを作成してみましたが、かなりのトークンを消費します。Freeプランでは途中で途切れてしまうと思いますので要注意。
- また、小さなアプリを作るだけならそこまでのプロンプトは不要かなと思いました。プロンプトにより計画書的なものから作成する可能性があります。
AI で楽しいアプリ開発を！！
この記事は AI Code Challenge Advent Calender 2025 の 22 日目の記事です！