このページは Cloud Translation API によって翻訳されました。

ブロガーを支援: CyberAgent が組み込み AI を導入してコンテンツ作成を強化した方法

Yuriko Hirota

Kazunari Hara

公開日: 2025 年 4 月 28 日、最終更新日: 2025 年 5 月 21 日

AI の急速な進化により、特にオンデバイス機能の登場により、ウェブアプリケーションの新たなフロンティアが開かれています。日本の大手インターネット企業であるサイバーエージェントが、Chrome の組み込み AI と Prompt API を使用して、プラットフォーム Ameba ブログのブログ作成体験を向上させている方法をご紹介します。

ここでは、彼らの目標、組み込み AI を使用するメリット、直面した課題、組み込み AI を使用する他のデベロッパーにとって貴重な分析情報をご紹介します。

Prompt API とは

商品の解説	ウェブ	拡張機能	Chrome ステータス	インテント
GitHub	オリジントライアル中	Chrome 138	表示	テストの目的

Prompt API を使用すると、デベロッパーは大規模言語モデルを使用して、AI 機能をアプリに直接追加できます。カスタムプロンプトを定義することで、アプリはデータ抽出、コンテンツ生成、パーソナライズされた応答などのタスクを実行できます。Chrome では、Prompt API は Gemini Nano を使用してクライアントサイドの推論を行います。このローカル処理により、使用されるモデルに関係なく、データのプライバシーとレスポンスの速度が向上します。使用するモデルに関係なく、クライアントの応答速度。

Ameba ブログの著者のための AI アシスタンス

CyberAgent は、魅力的なコンテンツ（特にタイトル）を作成するのに時間がかかるという、著者の共通の課題を認識していました。ブログ作成インターフェースに AI を活用した機能を統合することで、コンテンツ作成の品質と効率が大幅に向上すると仮説を立てました。彼らの目標は、ブロガーが魅力的なコンテンツを作成するうえでインスピレーションを得て役立つツールを提供することでした。

サイバーエージェントは Prompt API を使用して Chrome 拡張機能を開発しました。この拡張機能は、Ameba ブログのライターがタイトルや見出し、後続の段落、一般的なコピーの改善を生成するのに役立つように設計された、AI を活用した一連の機能を提供します。

CyberAgent は機能の柔軟性を求めており、それが Prompt API につながりました。1 つの API で無限の可能性を実現した CyberAgent は、Ameba の著者に最適な方法と最も有用な方法を正確に判断することができました。

CyberAgent は、一部のブロガーを対象に拡張機能をテストし、提供された機能の実用性に関する貴重な分析情報を得ました。このフィードバックは、CyberAgent が AI アシスタントに適したアプリケーションを特定し、拡張機能のデザインを改善するのに役立ちました。CyberAgent は、この結果とフィードバックを踏まえ、今後この機能をリリースし、クライアントサイド AI の力をブログコミュニティに直接もたらすことを検討しています。

これらの機能について詳しく見ていきましょう。

より良いタイトルと見出しを作成する

この拡張機能は、ブログのコンテンツ全体に基づいて複数のタイトルの候補を生成します。ブログの作成者は、[再生成]、[より丁寧な表現]、[よりカジュアルな表現]、[類似したタイトルを生成] などのオプションを使用して、これらの候補をさらに絞り込むことができます。

CyberAgent は、ユーザーがプロンプトを記述する必要がないように、UI を特別に設計しました。これにより、プロンプトエンジニアリングに精通していないユーザーも AI の力を活用できます。

作成者は、タイトルをよりフォーマルなものやカジュアルなものに再生成したり、同じトーンで再生成したりできます。

また、ブログの個々のセクションの魅力的な見出しを生成することもできます。見出しに関連するテキストを選択することで、著者は見出しをリクエストできます。

テキストを選択すると、そのセクションに固有の見出しを生成できます。

Prompt API を使用してタイトルを生成するコードには、初期プロンプトとユーザープロンプトが含まれています。初期プロンプトは、特定のタイプの出力を取得するためのコンテキストと指示を提供しますが、ユーザープロンプトは、ユーザーが記述した内容をモデルに処理するよう求めます。コードの詳細については、AI アシスタントをデプロイするをご覧ください。

後続の段落を生成する

この拡張機能は、選択したテキストに基づいて後続の段落を生成することで、ブロガーがライターズブロック（スランプ）を克服するのに役立ちます。前の段落のコンテキストに基づいて、AI が段落の続きをドラフト作成し、著者はクリエイティブな流れを維持できます。

著者は、前の段落のコンテキストを使用して、次の段落の作成を依頼できます。

テキストを改善、編集する

Gemini Nano は選択したテキストを分析し、改善案を提示できます。ユーザーは、トーンや言語の選択に関するメモを追加して改善を再生成し、コピーを「かわいらしく」したり「シンプル」にしたりできます。

選択したテキストの改善版を生成し、モデルが改善した点の説明を表示します。

AI アシスタンスをデプロイする

CyberAgent は、拡張機能コードをセッションの作成、トリガー、モデルのプロンプトの 3 つのステップに分割しました。

まず、組み込みの AI が利用可能でサポートされているかどうかをブラウザで確認します。「はい」の場合、デフォルトのパラメータでセッションが作成されます。

if (!LanguageModel) {
  // Detect the feature and display "Not Supported" message as needed
  return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;

async function createAISession({ initialPrompts, topK, temperature } = {}) {
  const { available, defaultTopK, maxTopK, defaultTemperature } =
    await LanguageModel.availability();
  // "readily", "after-download", or "no"
  if (available === "no") {
    return Promise.reject(new Error('AI not available'));
  }
  const params = {
    monitor(monitor) {
      monitor.addEventListener('downloadprogress', event => {
        console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
      });
    },
    initialPrompts: initialPrompts || '',
    topK: topK || defaultTopK,
    temperature: temperature || defaultTemperature,
  };
  session = await LanguageModel.create(params);
  return session;
}

各機能には、ユーザーがトリガーするヘルパー関数があります。トリガーされると、ユーザーが関連するボタンをクリックしたときに、セッションがそれに応じて更新されます。

async function updateSession({ initialPrompts, topK, temperature } = {
  topK: DEFAULT_TOP_K,
  temperature: DEFAULT_TEMPERATURE,
}) {
  if (session) {
    session.destroy();
    session = null;
  }
  session = await createAISession({
    initialPrompts,
    topK,
    temperature,
  });
}

セッションが更新されると、関数に従ってモデルにプロンプトが表示されます。たとえば、タイトルを生成し、よりフォーマルなトーンでタイトルを再生成するコードは次のようになります。

async function generateTitle() {
    // Initialize the model session
    await updateSession({
      initialPrompts: [
        { role: 'system', 
          content: `Create 3 titles suitable for the blog post's content,
          within 128 characters, and respond in JSON array format.`,
        }
      ]
    });
    const prompt = `Create a title for the following
    blog post.${textareaEl.textContent}`;
    const result = await session.prompt(prompt);
    try {
      const fixedJson = fixJSON(result);
      // display result
      displayResult(fixedJSON);
    } catch (error) {
      // display error
      displayError();
    }
  }
  async function generateMoreFormalTitle() {
    // Do not execute updateSession to reuse the session during regeneration
    const prompt = 'Create a more formal title.';
    const result = await session.prompt(prompt);
    ...
 }

組み込み AI のメリット

組み込み AI はクライアントサイド AI の一種であり、推論はユーザーのデバイス上で行われます。CyberAgent は、アプリデベロッパーとユーザーの両方に魅力的なメリットがあるため、Gemini Nano を搭載した組み込みの AI API を使用することにしました。

CyberAgent が重視した主なメリットは次のとおりです。

セキュリティとプライバシー
費用
応答性と信頼性
開発の容易さ

セキュリティとプライバシー

データを外部サーバーに送信することなく、ユーザーのデバイスで AI モデルを直接実行できることが最も重要です。ブログの下書きは一般公開を想定していないため、CyberAgent はこれらの下書きをサードパーティサーバーに送信することを望んでいません。

組み込みの AI が Gemini Nano をユーザーのデバイスにダウンロードするため、サーバーとの間でデータを送受信する必要がなくなります。下書きには機密情報や意図しない表現が含まれている可能性があるため、この機能は特に文章作成時に便利です。組み込みの AI は、元のコンテンツと生成されたコンテンツをサーバーに送信するのではなくローカルに保持するため、セキュリティを強化し、コンテンツのプライバシーを保護できます。

コストの節約

組み込み AI を使用する大きなメリットの 1 つは、ブラウザに Gemini Nano が含まれており、API を無料で使用できることです。追加料金は発生しません。

AI が組み込まれているため、サーバー費用を大幅に削減し、AI 推論に関連する費用を完全に排除できます。このソリューションは、大規模なユーザーベースに迅速にスケーリングでき、ユーザーは追加料金なしで連続してプロンプトを送信して出力を調整できます。

応答性と信頼性

組み込みの AI により、ネットワークの状況に関係なく、一貫して迅速な応答時間を実現します。これにより、ユーザーはコンテンツを何度も生成できるため、新しいアイデアを試して満足のいく結果をすばやく得ることができます。

開発の容易さ

Chrome の組み込み AI は、すぐに利用できる API を提供することで、開発プロセスを簡素化します。デベロッパーは、アプリケーション用の AI 機能を簡単に作成できるというメリットがあります。

Gemini Nano と組み込みの AI API は Chrome にインストールされているため、追加の設定やモデル管理は必要ありません。他のブラウザ API と同様に、この API は JavaScript を使用しており、機械学習の専門知識は必要ありません。

課題を乗り越えて成果を向上させる

CyberAgent の Prompt API の導入事例は、クライアントサイドの LLM の使用に関する貴重な教訓を提供しています。

一貫性のないレスポンス: 他の LLM と同様に、Gemini Nano は同じプロンプトに対して同じ出力を保証しません。CyberAgent は、予期しない形式（Markdown や無効な JSON など）のレスポンスを受け取りました。手順に沿って操作しても、結果が大きく異なる可能性があります。AI が組み込まれたアプリケーションや Chrome 拡張機能を実装する際は、出力が常に正しい形式になるように回避策を追加することをおすすめします。

トークンの上限: トークンの使用量を管理することが重要です。CyberAgent は、inputUsage、inputQuota、measureInputUsage() などのプロパティとメソッドを使用して、セッションを管理し、コンテキストを維持し、トークンの消費量を削減しました。これは、タイトルを調整する際に特に重要でした。
モデルサイズの制約: モデルはダウンロードされてユーザーのデバイスに保存されるため、サーバーベースのモデルよりも大幅に小さくなります。つまり、特に要約については、満足のいく結果を得るために、プロンプト内で十分なコンテキストを提供することが重要です。詳しくは、LLM のサイズについてをご覧ください。

CyberAgent は、クライアントサイドモデルはまだすべてのブラウザとデバイスで普遍的に利用できるわけではなく、小規模なモデルには制限があるものの、特定のタスクでは優れたパフォーマンスを発揮できると強調しています。サーバーサイドの費用をかけずに迅速に反復してテストできるため、貴重なツールとなります。

サーバーサイドとクライアントサイドのどちらの AI でも、完璧な回答は難しいことを認識し、バランスを取ることを推奨しています。最後に、サーバーサイド AI とクライアントサイド AI の両方の強みを組み合わせたハイブリッドアプローチが、さらなる可能性を解き放つ未来を展望しています。

今後の対応

CyberAgent の組み込み AI の取り組みは、シームレスな AI 統合によるユーザーエクスペリエンスの向上というエキサイティングな可能性を示しています。Ameba Blog と連携する拡張機能は、これらのテクノロジーを実社会の問題解決にどのように応用できるかを示しており、ウェブ開発コミュニティ全体にとって貴重な教訓となります。

テクノロジーが成熟し、ブラウザやデバイスのサポートが拡大するにつれて、組み込み AI やその他の形式のクライアントサイド AI の革新的なアプリケーションがさらに増えることが予想されます。

リソース

Prompt API の詳細
Chrome で組み込み API の使用を開始する
Web AI に関するサイバーエージェントのケーススタディ（このトピックを扱っています）。
AI の未来は今、クライアントサイド AI に関する CyberAgent のケーススタディをご覧ください

謝辞

フィードバックを提供し、拡張機能の改善に協力してくださった Ameba のブロガー、ao、Nodoka、Erin、Chiaki、socchi に感謝いたします。このブログ投稿の執筆とレビューにご協力いただいた Thomas Steiner、Alexandra Klepper、Sebastian Benz に感謝いたします。