生成AIをプロダクトに組み込む企業が増えるなか、会話型AIで成果を出した次のステージに進みたいという声が増えています。しかし、AIの実装パターンの多くが会話型に偏り、他のUIへ活かす選択肢が見えないという課題もあります。本ページでは、miiboが公開した「AI UX Playbook」を紹介し、自社プロダクトをAIネイティブ化するための具体的な方法を伝えます。
AI UX Playbookは、AIネイティブなプロダクト設計の5パターンを体系化したガイドです。Playbookは、検索・ヒアリング・操作補助・分析・自律実行の5つのUXパターンをマークダウンファイルにまとめています。このファイルをClaude Codeに読み込ませれば、バイブコーディングで爆速にAI機能を実装できます。miiboがAIエージェントのバックエンドを丸ごと担うため、開発者はUXの設計と実装に集中できます。
AI UX Playbookとは｜AIネイティブな設計思想を体系化したガイド
AI UX Playbookは、AIネイティブなプロダクト体験の設計パターンを5つに体系化した、マークダウン形式のガイドです。Playbookの狙いは、会話型AIで築いた成果を、業務に合った最適なUIへと広げることにあります。公開は現時点でpublic beta版であり、今後も改良を重ねていく予定です。
AIネイティブなプロダクトのUIは、人間が操作するための設計から、AIが実行した結果を人間が確認・判断するための設計へと変化します。従来のUIでは、人間が検索し、フォームに入力し、ダッシュボードを読み解き、タスクを管理していました。AIネイティブなUIでは、AIが探して人間は選ぶだけ、AIが書いて人間は確認するだけ、AIが分析と提案をして人間は承認するだけに変わります。この構造変化を設計パターンとして示すのが、AI UX Playbookの役割です。
AI UX Playbookでは、5つの設計パターンに加えて、基盤技術と応用トピックも網羅しています。基盤技術では、miibo APIの使い方、ストリーミング対応、ChatFilesでのコンテキスト伝達、Extensionsによる構造化データ連携を解説しています。応用トピックでは、プロダクト操作の高度なパターン、動的コンテキストストア、クロスパターン設計指針、プロンプト設計ガイドラインを扱います。これらの情報を組み合わせれば、5パターン以外の独自UXも自由に設計できます。
5つのAIネイティブUXパターン｜業務に合った体験を届ける型
5つのAIネイティブUXパターンは、多くの業界・業務に共通する「型」として抽出された代表例です。5つのパターンに共通するのは、AIが能動的に動き、人間は確認・判断に集中できるという構造です。パターンごとに、AIの自律度と人間の役割のバランスが段階的に変わります。
1つ目のパターンは、AI情報検索です。ユーザーが自然言語で質問するだけで、AIが文脈を理解し、構造化された検索結果を提案します。適用領域は、旅行プラン検索、不動産物件検索、求人マッチング、社内ナレッジ検索などです。ユーザーは検索ワードを考える必要がなく、AIの深掘り質問を通じて目的の情報にたどり着けます。
2つ目のパターンは、AIヒアリング&提案です。フォームと生成AIが融合し、ユーザーの入力内容に応じてAIがリアルタイムに質問を変え、最適な提案へと導きます。適用領域は、中古車見積もり、保険プラン提案、法律相談の初期ヒアリング、採用要件の整理などです。ユーザーは「何を選べばいいか分からない」状態からでも、対話を通じて最適な次のアクションにたどり着けます。
3つ目のパターンは、AI操作補助です。複雑な管理画面の操作や大量のデータ入力を、AIが代行します。適用領域は、人事評価フォームの入力支援、物件情報の登録支援、MBO設定、CRMの商談メモ入力などです。ユーザーは「こうしたい」という意図を伝えるだけで、作業時間の短縮と入力ミスの防止を同時に実現できます。
4つ目のパターンは、AI分析&改善提案です。AIがダッシュボードのデータを分析し、変化を検知し、実行可能な改善施策を提案します。適用領域は、SaaS経営ダッシュボード、EC最適化、マーケティング分析、カスタマーサクセス改善などです。ユーザーは「この提案を実行するかどうか」を判断するだけで、意思決定の質とスピードを同時に高められます。
5つ目のパターンは、AIエージェント自律実行です。AIがバックグラウンドでデータを分析し、改善タスクを生成し、人間は承認または却下するだけで業務が進みます。適用領域は、ナレッジベースの改善、コンテンツ管理、データクリーンアップ、定型レポート生成などです。人間の承認・却下のフィードバックが蓄積されることで、AIの精度が継続的に向上していきます。
AI UX Playbookの導入手順｜4ステップで実装を開始する
AI UX Playbookを使った実装は、Claude Codeとの組み合わせによって4ステップで開始できます。手順は、miiboアカウントの準備からClaude Codeでの指示出しまで、一貫して簡潔に設計されています。必要なものは、miiboアカウントとNext.jsやReact.jsなどのWebアプリプロジェクトの2つだけです。
最初のステップは、miiboでエージェントを作成し、APIキーを取得することです。miiboの管理画面からノーコードでエージェントを作成し、開発者向け設定画面で「api_key」と「agent_id」を取得します。取得したキーは、プロジェクトの環境変数ファイルに設定します。
次のステップは、プロジェクトにPlaybookのマークダウンファイルを配置することです。AI UX Playbookの公式サイトからファイルをダウンロードし、プロジェクトのルート直下に設置します。ファイル名は、プロジェクトの命名規則に合わせて「AI_PLAYBOOK.md」などに統一しておくと管理しやすくなります。
3番目のステップは、Claude CodeがPlaybookを参照できるように設定することです。プロジェクトの「CLAUDE.md」に、Playbookへの参照を追加します。参照設定によって、Claude Codeがコンテキストとして自動的に読み込めるようになります。
最後のステップは、Claude Codeで実装を開始することです。Claude Codeを起動し、「AI_PLAYBOOK.mdを読んで、Pattern 1の機能を実装して」のように自然言語で指示するだけで、ガイドに基づいた実装が始まります。この一連の流れによって、既存プロダクトにも新規プロダクトにも、爆速でAIネイティブな機能を搭載できます。
miiboがバックエンドを担う価値｜UX設計に100%集中できる環境
AI UX PlaybookがUI・UXパターンに特化できるのは、miiboがAIエージェントのバックエンドを丸ごと引き受けているからです。miiboは、LLMの利用、ナレッジデータストアによるRAG、Extensions、ステート管理、会話ログ、インサイト分析、アナリティクス、外部連携をすべて1本のAPIに集約しています。自前構築すれば膨大な工数がかかる機能群を、miiboなら最初から揃った状態で利用できます。
バックエンドの機能群は、8つの要素で構成されています。LLMは1本のAPIで即利用でき、契約やキー管理は不要です。ナレッジデータストアはドキュメントをアップロードするだけでRAGを実装でき、ベクトルDBの構築は不要です。Extensionsはノーコードで関数実行を定義でき、オーケストレーション基盤の開発は不要です。ステートはAPIパラメータで管理でき、セッションDBの実装は不要です。会話ログは自動保存され、ログ基盤の設計は不要です。インサイトとアナリティクスは管理画面で確認でき、分析パイプラインの構築は不要です。外部連携HubはMCPやWebhookをノーコードで設定でき、個別のAPI連携実装は不要です。
miiboの管理画面を活用すれば、コードのデプロイなしにエージェントを継続的に改善できます。管理画面でプロンプトやRAGデータを更新すると、即座にエージェントの応答に反映されます。フロントエンドのコード変更やデプロイは発生しません。この仕組みによって、導入後はPdM・グロースハッカー・カスタマーサクセスがノーコードでAIを改善し、プロダクトを成長させられます。
よくあるご質問
Q
AI UX Playbookはどんな人が活用できますか？
AI UX Playbookは、自社プロダクトにAI機能を組み込みたいPdM・エンジニア・miiboDesignerが活用できます。前提知識は、HTML・CSS・JavaScriptの基本と、React（Next.js推奨）の基本的な開発経験、REST APIの基本概念の3つです。ガイドの設計パターン自体はプラットフォームを問わず応用できるため、miibo未導入の方でも設計思想を学ぶ目的で読むことができます。
Q
5つのパターン以外のUXは設計できますか？
5つのパターン以外のUXも、基盤技術の組み合わせで自由に設計できます。チャットQ&A、ページ遷移アシスタント、マルチステップ操作、コンテキスト付きヘルプなど、さまざまなパターンを実現できます。Playbookは、ChatFiles・Extension・UI構成の3要素を組み合わせる設計思想を解説しているため、5パターンを参考にしながら自社プロダクトに最適なパターンを設計できます。
Q
Claude Code以外のAIコーディングエージェントでも使えますか？
AI UX Playbookはマークダウン形式のファイルのため、Claude Code以外のAIコーディングエージェントでも読み込ませて利用できます。推奨環境はClaude Codeですが、Playbookのコンテキストを読み込める環境であれば、他のAIコーディングエージェントでもバイブコーディングが可能です。プロジェクトの参照設定を調整することで、各AIコーディングエージェントの仕様にあわせた活用ができます。
Q
既存のプロダクトにもAIネイティブ機能を組み込めますか？
既存のプロダクトにも、AIネイティブ機能を後から追加できます。miiboはREST APIで提供されるため、既存のWebアプリ・モバイルアプリ・デスクトップアプリ・IoTデバイスなど、APIを呼び出せる環境であれば導入可能です。既存のUIを大きく変更することなく、AI操作レイヤーを上から被せる形で段階的に導入できる点も特徴です。
Q
AI UX Playbookはpublic beta版ですが、商用利用できますか？
AI UX Playbookはpublic beta版として公開されており、商用プロダクトへの活用も可能です。ただし今後も改良を重ねていく予定のため、内容が更新される可能性があります。実際のUXパターンはAI UX Showcaseで動作を確認できるため、Playbookを読んだあとにShowcaseで動作イメージを掴み、自社プロダクトへの適用を検討することをおすすめします。
まとめ｜AI UX Playbookで自社プロダクトをAIネイティブに進化させる
AI UX Playbookは、自社プロダクトをAIネイティブ化するための設計ガイドです。Playbookには、検索・ヒアリング・操作補助・分析・自律実行の5つのUXパターンが体系化されています。Claude Codeとの組み合わせによって、4ステップでバイブコーディングを開始でき、爆速でAI機能を搭載できます。miiboがAIエージェントのバックエンドを丸ごと担うため、開発者はUXの設計と実装に集中できます。自社プロダクトをAIが実行し人間が承認するソフトウェアへと進化させたい方は、AI UX Playbookの活用をぜひご検討ください。