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

Yuriko Hirota

Kazunari Hara

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

AI の急速な進化により、ウェブ アプリケーションの新たな可能性が広がっています。特に、デバイス上の機能の登場は大きな変化をもたらしています。日本の大手インターネット企業である サイバーエージェントが、Chrome の 組み込み AI と Prompt API を使用して、同社のプラットフォームである アメーバブログのブログ作成 エクスペリエンスをどのように強化しているかをご紹介します。

サイバーエージェントの目標、組み込み AI を使用するメリット、直面した課題、組み込み AI を使用する他のデベロッパーにとって有益な分析情報について説明します。

Prompt API とは

商品の解説	ウェブ	拡張機能	Chrome ステータス	インテント
GitHub	Chrome 148	Chrome 138	表示	リリースする意向
GitHub	サンプリング パラメータのオリジン トライアル	Chrome 148	表示	テストの意向

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

アメーバブログの作成者向け AI アシスタンス

サイバーエージェントは、作成者にとって共通の課題を認識していました。それは、魅力的なコンテンツ、特にタイトルを作成するのに時間がかかることです。ブログ作成インターフェースに AI 搭載機能を統合することで、コンテンツ作成の品質と効率を大幅に改善できるのではないかと考えました。同社の目標は、インスピレーションを提供し、ブロガーが魅力的なコンテンツを作成するのに役立つツールを提供することでした。

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

サイバーエージェントは機能の柔軟性を求めており、それが Prompt API につながりました。1 つの API で無限の可能性を実現できるため、サイバーエージェントは、アメーバの作成者にとって最適な方法と最も役立つ方法を正確に判断できました。

サイバーエージェントは、少数のブロガーで拡張機能をテストし、提供される機能の実用性に関する貴重な分析情報を得ました。このフィードバックは、AI アシスタンスのより適切なアプリケーションを特定し、拡張機能のデザインを改善するのに役立ちました。肯定的な結果とフィードバックに基づいて、サイバーエージェントは今後この機能をリリースし、クライアントサイド AI の力をブログ コミュニティに直接提供することを目指しています。

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

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

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

サイバーエージェントは、ユーザーがプロンプトを作成する必要がないように、UI を特別に設計しました。これにより、プロンプト エンジニアリングに慣れていないユーザーでも、AI の力を活用できます。

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

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

後続の段落を生成する

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

テキストを改善して編集する

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

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

サイバーエージェントは、拡張機能のコードをセッションの作成、トリガー、モデルのプロンプトの 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 の一種で、 推論はユーザーのデバイスで行われます。サイバーエージェントは、アプリケーション デベロッパーとユーザーの両方に魅力的なメリットをもたらすため、Gemini Nano を使用して組み込み AI API を使用することにしました。

サイバーエージェントが重視した主なメリットは次のとおりです。

• セキュリティとプライバシー
• 費用
• レスポンスと信頼性
• 開発の容易さ

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

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

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

コストの節約

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

組み込み AI はサーバー費用を大幅に削減し、AI 推論に関連する費用を完全に削減できます。このソリューションは大規模なユーザーベースに迅速にスケーリングでき、ユーザーは追加料金を発生させることなく、連続してプロンプトを送信して出力を絞り込むことができます。

レスポンスと信頼性

組み込み AI は、ネットワークの状態に関係なく、一貫して迅速なレスポンスを提供します。これにより、ユーザーはコンテンツを何度も生成できるため、新しいアイデアを試して、満足のいく最終結果をすばやく作成することがはるかに簡単になります。

開発の容易さ

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

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

課題を克服してより良い結果を得る

サイバーエージェントは、Prompt API を使用して、クライアントサイド LLM の操作のニュアンスについて貴重な教訓を得ました。

• レスポンスの一貫性がない: 他の LLM と同様に、Gemini Nano は同じプロンプトに対して同じ出力を保証しません。サイバーエージェントは、予期しない形式（Markdown や無効な JSON など）のレスポンスを受け取りました。手順を指定しても、結果が大きく異なる可能性があります。組み込み AI を使用してアプリケーションまたは Chrome 拡張機能を実装する場合は、出力が常に正しい形式になるように回避策を追加するとよいでしょう。

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

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

サーバーサイドとクライアントサイドのどちらの AI でも、完璧なレスポンスを実現することは難しいことを認識し、バランスを見つけることを推奨しています。最後に、サーバーサイドとクライアントサイドの AI の強みを組み合わせたハイブリッド アプローチが、さらに大きな可能性を切り開くと考えています。

今後の対応

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

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

リソース

• Prompt API の詳細
• Chrome で組み込み API の使用を開始する
• サイバーエージェントのウェブ AI に関する事例紹介 （同じトピックを扱っています）
• サイバーエージェントのクライアントサイド AI に関する事例紹介「The future of AI is now」 を見る

謝辞

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