コーディングなしでAIと一緒にWebサービスを作ろう:アプリにAIを搭載(第4部)
カフェを経営していると想像してみてください。
カフェのメインはコーヒーですが、お客さんを惹きつけるのはデザートやパンだったりしますよね。でも、そのパンがいつもカフェで手作りされているとは限りません。
-
製パン工場から完成品の状態で仕入れて、そのまま陳列するパンもあります。
-
生地だけ仕入れて、カフェのオーブンで焼くだけのパンもあります。
-
お客さんの目には「そのカフェのブランドのパン」に見えますが、核となる技術は外部の専門家が提供したものなのです。
AIも同じです。自分のサービスからAI企業にリクエストを送り、AIが結果を返してくれたら、その結果をユーザーに見せればよいのです。ユーザーからすれば、サービス内にAIが内蔵されているように感じられますが、実際には外部のAI企業の技術を連携して使っているわけです。
この時、カフェ(自分のサービス)と製パン工場(AI企業)をつなぐ架け橋の役割を果たすのが、まさにAPI(Application Programming Interface)です。
list目次expand_more
- 1. AIを活用して作れる機能
- 2. 主なAI APIサービスの比較
- 3. APIのコストはどれくらい?
- (参考)OpenRouterとは? — AI業界の「専門商社」
- 4. AIコーディングツールで連携する
- STEP 1 — API Keyの発行
- STEP 2 — 環境変数の設定
- STEP 3 — API呼び出しコードの作成
- STEP 4 — コスト上限の設定 ⚠️
- STEP 5 — フロントエンドUIの連携
- 5. AIを自分のサービスに組み込む
- コアコンセプト — 「プロンプトで自動化する」
- シナリオ 1 — 顧客の問い合わせ自動分類 + 担当者割り当て
- シナリオ 2 — 商品説明の自動生成
- シナリオ 3 — 24時間対応AIカスタマーサポートチャットボット
- シナリオ 4 — 写真でカテゴリ自動分類(画像分析)
- シナリオ 5 — 長文の要約(レビュー・契約書・レポート)
1. AIを活用して作れる機能
| 機能 | 例 |
|---|---|
| 💬 AIチャットボット | ECサイトの「24時間カスタマーサポートボット」、病院予約サイトの「症状案内ボット」、SaaSサービスの「オンボーディングアシスタント」 |
| ✍️ コンテンツ自動生成 | 商品登録時の説明文自動生成、不動産サイトの物件紹介文のドラフト作成、ブログプラットフォームのタイトル提案 |
| 🖼️ 画像分析 | フリマアプリで写真アップロード時のカテゴリ自動分類、ファッションアプリで服の写真からコーデ提案、グルメアプリで写真からカロリー推定 |
| 🗂️ 自動分類・タグ付け | 顧客の問い合わせを「技術/決済/配送」に自動分類して担当者に割り当て、コンテンツプラットフォームで投稿の自動カテゴリ分類 |
| 🔍 スマート検索 | キーワードではなく自然言語で検索可能(「赤いワンピース」→関連商品へリンク)、社内文書検索の高度化 |
2. 主なAI APIサービスの比較
| サービス | 特徴 | おすすめの用途 |
|---|---|---|
| Google (Gemini) | Gemini 2.5 Flashが現在の安定版。Gemini 3.1シリーズのプレビューを公開中。無料枠を維持し、テキスト・画像・音声・動画のマルチモーダル対応。Google検索連携機能内蔵。4月上旬に推論量に基づく新料金体系を導入。 | 初期テスト、画像・動画分析、コスト削減 |
| OpenAI (ChatGPT) | GPT-4.1がGPT-4oに代わる現在の推奨プロダクションモデル。コンテキストウィンドウが100万トークンに大幅拡大し、GPT-4oより安価($2/$8)。軽量版のGPT-4.1 mini・nanoをリリース。GPT-5シリーズも公開され、複雑な推論・コーディングに活用。エコシステムが最大。 | チャットボット、要約、コーディング、長文処理 |
| Anthropic (Claude) | Claude Opus 4.6(2026年2月リリース)が最新フラッグシップ。コンテキストウィンドウ100万トークンを2026年3月から追加料金なしで標準提供。複雑なマルチエージェント「チーム」機能をサポート。長文・日本語の品質・安全性評価で高スコア。コーディング・推論ベンチマークでトップクラス。 | 長文分析、複雑な推論、高品質な日本語の応答 |
| OpenRouter (その他多数) | OpenAI・Anthropic・Googleなど200以上のAIモデルに1つのAPI Keyで統合アクセス。無料モデルを多数含む(Llama、Gemma、Mistral、DeepSeekなど)。モデルごとの価格比較や切り替えが簡単で、コスト最適化に有利。プロトタイプ作成やモデルの実験に最適。 | 無料・安価なモデルの探索、マルチモデル比較、コスト削減 |
3. APIのコストはどれくらい?
APIのコストは使った分だけ支払う従量課金制です。
水道代や電気代のように、たくさん使えば多く支払い、少ししか使わなければ安く済みます。
月額サブスクリプションとは異なり、サービス利用者がいなければコストも0円です。
課金の単位は「トークン(Token)」です。AIがテキストを読み取って処理する最小単位だと考えてください。英語の場合、約4文字で1トークン、日本語は1文字あたり約1〜2トークンです。AI企業ごとに基準は少しずつ異なりますが、ChatGPTの場合は公式ホームページで直接確認できます。
https://platform.openai.com/tokenizer
WARNING
コストに注意!
APIは使用した分だけ請求されます。ユーザーが殺到したり、実装の過程でミスがあったりすると、予期せぬ多額のコストが発生する可能性があります。必ず使用上限(Usage Limit)を設定してください。
(参考)OpenRouterとは? — AI業界の「専門商社」
先ほどのカフェとベーカリーの例えに戻ると、OpenRouterは複数のベーカリー(AI企業)と一度に契約を結んでくれる仲卸業者のようなものです。
-
各企業と個別に契約(API Keyの発行)をする必要がありません。
-
1つのAPI KeyでOpenAI、Anthropic、Google、Meta、Mistralなど200以上のモデルを呼び出すことができます。
-
無料モデルも多数含まれており、コストゼロで始めるのに最適です。
NOTE
初めてなら? OpenRouterの無料モデルから始めましょう。
Meta Llama、Google Gemma、Mistralなど強力なAIモデルを無料でお試しいただけます。
AI連携の全プロセスをコストゼロで体験した後、ニーズに合った有料モデルへ移行すればよいのです。
OpenRouterで使える無料・安価なモデル例(2026年4月基準)
| モデル | 開発元 | 特徴 | コスト |
|---|---|---|---|
| Qwen 3.6 Plus | Alibaba | 2026年4月の無料モデル使用量1位。1Mコンテキスト。コーディング・エージェント・推論が非常に強力。SWE-benchスコア78.8点で、少なくともコーディング作業ではGPT-5級の性能に肉薄。 | 無料 |
| Llama 4 Maverick | Meta | MoE構造(400Bのパラメータのうち17Bがアクティブ)。1Mコンテキスト。画像+テキストのマルチモーダル。汎用的な多言語対応。 | 一部無料 |
| Nemotron 3 Super | NVIDIA | 262Kコンテキスト。Mamba-Transformerハイブリッド構造。長文処理に特化、速い生成速度。 | 無料 |
| GPT-OSS 120B | OpenAI | OpenAI初のオープンウェイトモデル(Apache 2.0)。GPT-4級の性能を無料で提供。 | 無料 |
4. AIコーディングツールで連携する
STEP 1 — API Keyの発行
API Keyは、AI企業が「誰がリクエストを送ってきたのか」を確認するための秘密の鍵です。
-
OpenAI: platform.openai.com/api-keys
-
Anthropic: console.anthropic.com/settings/keys
-
Google Gemini: aistudio.google.com/apikey
CAUTION
API Key = クレジットカード番号と同じです。
絶対にフロントエンドのコードやGitHubにアップロードしないでください。流出すると、他人があなたの費用でAPIを使用できてしまいます。Webサービスを公開する前に、AIコーディングツールを活用して必ずもう一度セキュリティチェックを行ってください。
STEP 2 — 環境変数の設定
AIコーディングツールにこのようにリクエストしてください:
-
“OpenAIのAPIキーを .env ファイルに保存して。変数名は OPENAI_API_KEY で”
-
“.env ファイルが .gitignore に含まれているか確認して”
STEP 3 — API呼び出しコードの作成
AI APIは必ずサーバー側でのみ呼び出す必要があります。フロントエンドから直接呼び出すと、API Keyが外部に露出する危険があります。
-
“Next.jsのAPI RouteでOpenAI GPT-4.1にリクエストを送るコードを作って。ユーザーの入力を受け取って、要約結果を返して”
-
“会話履歴を保持して、以前の会話のコンテキストを記憶するようにして”
STEP 4 — コスト上限の設定 ⚠️
-
各サービスのダッシュボードで月間使用上限(Usage Limit)を設定
-
“ユーザー1人あたり1日20回までしかAIリクエストできないように制限して。Upstash Redisで回数をトラッキングして”
STEP 5 — フロントエンドUIの連携
-
“AIの応答を待っている間ローディングアニメーションを表示し、ストリーミングで1文字ずつ表示して”
-
“エラー応答が来たら「しばらくしてからもう一度お試しください」というメッセージを表示して”
5. AIを自分のサービスに組み込む
コアコンセプト — 「プロンプトで自動化する」
普段あなたがChatGPTやClaudeでやっていることを思い浮かべてください。
“この文章を日本語に翻訳して”
“次のレビューをポジティブ/ネガティブ/ニュートラルに分類して”
“以下の契約書の重要項目を3行で要約して”
APIで連携するというのは、まさにこの会話をあなたのWebサービス内で自動的に繰り返し実行させるようにすることです。ユーザーがボタンを押したり、ファイルをアップロードしたり、フォームを送信したりするたびに、サーバーが自動的にAIにプロンプトを送信し、結果を受け取って画面に表示する仕組みです。
| チャットアプリで直接使う時 | 自分のWebサービスにAPIで組み込むと |
|---|---|
| ユーザーが直接プロンプトを入力 | サービスが自動でプロンプトを生成・送信 |
| 毎回手動でコピー&ペースト | ボタンクリック1つで自動処理 |
| 結果を直接見て手動で保存 | 結果が自動でDBに保存されるか、画面に表示される |
| 自分一人だけが使える | 数千人のユーザーが同時に使える |
結局のところ、「AI APIをサービスに組み込む」というのは、「自分がチャットアプリで直接やっていた作業を、サービスが自動で代行する」という意味なのです。
シナリオ 1 — 顧客の問い合わせ自動分類 + 担当者割り当て
1日に絶え間なく押し寄せる顧客からの問い合わせ。ECサイト、SaaS、予約プラットフォームを運営していると、毎日繰り返される分類作業にすぐに疲弊してしまいます。
「これは技術チーム、あれは決済チーム…」とため息をつきながら画面を眺めていた瞬間、システムが静かに動き始めます。顧客が問い合わせフォームを送信した瞬間に、サーバーが自動的にAIに分類を任せ、結果はDBにどんどん蓄積されていきます。自分が指一本動かさなくても、各担当者にはすでに通知が届いているのです。
AIコーディングツールのプロンプト例
顧客が問い合わせを送信したら、OpenAI GPT-5 Nano APIを呼び出して、問い合わせ内容を「技術的な問題 / 決済・返金 / 配送 / その他」の4つのカテゴリのいずれかに分類して。分類結果をSupabase DBに保存し、カテゴリ別の担当者のメールアドレス宛てにResendを使って通知を送って。
おすすめのモデル&コスト
-
GPT-5 Nano — 単純な分類作業なので、最も安価なモデルで十分
-
問い合わせ1件あたり約$0.0001以下(実質的に無視できるレベル)
シナリオ 2 — 商品説明の自動生成
今日も新商品を何十個も登録しなければならない途方に暮れる朝。コマースやマーケットプレイスを運営していると、魅力的な商品説明を毎回自分で書くのは意外と大きな負担です。
「この服は素材が良くて…」とキーボードの上で止まっていた指。今では商品名とカテゴリ、主な特徴だけを入力して「AI説明生成」ボタンを押すだけです。あっという間に魅力的で検索にも有利な説明文のドラフトが出来上がり、少し手直しして登録すれば完了です。
AIコーディングツールのプロンプト例
商品登録フォームで商品名、カテゴリ、主な特徴(カンマ区切り)の3つを入力として受け取り、Gemini 3 Flashで200文字程度の日本語の商品説明を生成するボタンを作って。生成されたテキストは説明入力欄に自動で入力され、販売者が修正できるようにして。
おすすめのモデル&コスト
-
Gemini 3 Flash — 自然な日本語の生成に最適
-
説明1件の生成コストは約$0.001(数円程度)
シナリオ 3 — 24時間対応AIカスタマーサポートチャットボット
深夜3時。SaaSサービスや病院の予約サイトには昼夜の区別がありません。担当者が全員退社した時間帯でも、困っているユーザーからの質問はチャット画面に絶え間なく寄せられます。
以前なら翌朝まで待たなければなりませんでしたが、今ではチャットボットが会話のコンテキストを把握し、即座に回答します。皆が眠っている間でも、顧客はストレスなく疑問を解決でき、私たちのサービスは24時間止まることがありません。
AIコーディングツールのプロンプト例
私たちのサービスのFAQ内容をシステムプロンプトに入れて、Gemini 3 Flashベースのチャットボットを作って。会話履歴は直近の10ターンだけ保持してコンテキストとして渡し、回答はストリーミングでリアルタイムに表示して。システムプロンプト:「あなたは[サービス名]の親切なカスタマーサポート担当者です。以下のFAQに基づいて回答してください。分からない内容はカスタマーセンターへの連絡を案内してください。」
おすすめのモデル&コスト
-
Gemini 3 Flash または GPT-5 Mini — 速い応答速度とコストのバランスが良い
-
会話1回(10ターン基準)約$0.005〜0.01
シナリオ 4 — 写真でカテゴリ自動分類(画像分析)
多くのユーザーが毎日モノを売り買いするフリマアプリやファッションプラットフォームでは、写真をアップロードするたびにカテゴリや状態をいちいち選択させると、離脱率が高くなりがちです。しかし今は違います。
ユーザーが何気なく撮った服の写真を1枚アップロードした瞬間、バックエンドのAIが画像を分析し、「レディース/ワンピース」「状態:良好」のように空欄をサクサクと埋めてくれます。面倒な手間がなくなれば、ユーザーは驚きとともに、ずっとスムーズに次のステップへ進むことができます。
AIコーディングツールのプロンプト例
ユーザーが商品写真をアップロードしたら、Gemini 3 Flash APIで画像を分析して、①カテゴリ(衣類/家電/家具/その他)、②状態(新品/良好/使用感あり)、③一言説明をJSON形式で返すAPIを作って。返された値で商品登録フォームを自動的に埋めて。
おすすめのモデル&コスト
-
Gemini 3 Flash — 画像分析のコスパ最強
-
画像1枚の分析コスト約$0.005〜0.02
シナリオ 5 — 長文の要約(レビュー・契約書・レポート)
何十枚にも及ぶ判例、果てしなく続く英語のレビュー、複雑なB2B契約書。こうした長文を前にしてユーザーが感じる疲労感は決して小さくありません。
「どこから読めばいいんだろう…」と途方に暮れて画面を見つめる時間はもう終わりです。文書をアップロードした瞬間、AIが要点だけをすっきりと抽出し、3〜5行の要約版をすぐに提示してくれます。どんなに長い文書でも、今ではわずか数秒で核心を把握することができます。
AIコーディングツールのプロンプト例
ユーザーがテキスト(最大5,000文字)を貼り付けると、Gemini 3.1 Flash-Lite APIで次の3つを抽出して表示して:①一行要約、②重要なポイント3つ(箇条書き)、③注意すべき内容(ある場合のみ)。日本語で出力し、マークダウン形式で表示して。
おすすめのモデル&コスト
-
Gemini 3.1 Flash-Lite — 日本語の要約品質が高く、費用対効果が高い
-
A4用紙1枚の要約コスト約$0.003〜0.005