miiboの会話型AIをより魅力的にカスタマイズしたいと考えている方に朗報です。編集者として活動されているオトーワン氏が、miiboのWebチャット画面の色を自在に変更できる「miiboカラーカスタマイズツール」を開発しました。このツールは、従来のライトモード・ダークモードという2択の制約を超えて、企業のコーポレートカラーや好みの色でオリジナルの会話型AIを実現します。
本記事では、miiboDesignerの岡大徳がオトーワン氏にインタビューを行い、ツール開発の背景から具体的な機能、そして今後の展望まで詳しくお聞きしました。GoogleタグマネージャーでのUIカスタマイズに苦労されている方や、miiboをより効果的に活用したい方にとって、必見の内容となっています。
オトーワン氏が語るmiiboの魅力とカスタマイズの必要性
オトーワン氏にとってmiiboは、AIをより身近に感じ、応用するための教材的なプラットフォームです。ChatGPTやGeminiなどの既存AIサービスとは異なり、自分のオリジナルのボットとして世に出せる点が大きな魅力だと語ります。特に「爆速」という表現通り、初期的なものであれば5分程度で作成できる手軽さを高く評価しています。
しかし、miiboのWebチャット画面にはカスタマイズ性の課題がありました。色の選択肢がライトモード（白）とダークモード（黒）の2種類に限定されており、オリジナリティを出すことが困難でした。さらに、GoogleタグマネージャーでUIをカスタマイズする際は、JavaScriptのコードを複数箇所変更する必要があり、作業が煩雑になっていました。
最も大きな問題は、色を変更した際の実際の見た目を事前に確認できないことでした。全体の色とボタンクリック時の色のバランスを確認できないため、試行錯誤を繰り返す必要があったのです。これらの課題を解決するため、オトーワン氏はカラーカスタマイズツールの開発を決意しました。
バイブコーディングで50回の試行錯誤を経て完成したツール
開発のきっかけは、miiboでGoogleタグマネージャーが使えるようになったことと、株式会社miiboがnoteで公開した「GoogleタグマネージャーでmiiboのUIカラーをカスタマイズする」という記事でした。オトーワン氏は最初、記事通りに赤い色のmiiboWebチャット画面を作成しましたが、他の色に変更する際の煩雑さに直面しました。
転機となったのは、バイブコーディング（AIを活用したコーディング手法）の流行でした。オトーワン氏は、色のプレビューができるカスタマイズツールの開発に着手しました。開発にあたっては、プリセットで色パターンを用意すること、個別に色を変更できること、実際のmiiboWebチャット画面で確認できることを重視しました。
開発過程では、50回もの書き直しを経験しました。GitHubを使わず、クラウドでの直接開発だったため、バージョン管理ができず、途中で修正が困難になることもありました。しかし、要件定義を明確にし、miibo社のサンプルコードをAIに学習させることで、最終的に完成度の高いツールを作り上げることができました。
プリセットテーマとリアルタイムプレビューで実現する簡単カスタマイズ
完成したmiiboカラーカスタマイズツールは、GoogleタグマネージャーのHTMLカスタマイズ部分に貼り付けるJavaScriptコードを生成します。主な機能として、プリセットテーマの選択、カラーピッカーでの詳細設定、HTMLカラーコードでの直接入力が可能です。
最大の特徴は、リアルタイムプレビュー機能です。色を変更すると即座にプレビュー画面に反映され、実際の見た目を確認しながら調整できます。生成されたコードはコピーボタンで簡単にコピーでき、Googleタグマネージャーにそのまま貼り付けることができます。
このツールは、自社や社内で簡単にボットを作りたいが、会社のコーポレートカラーや好みの色を使いたいという方向けに開発されました。miiboの基本機能はそのままに、見た目だけをカスタマイズしたいというニーズに応えるツールとなっています。
今後の展望：ホームページ設置用カスタマイズツールへの発展
オトーワン氏は現在、2つのmiiboエージェントを運用しています。1つは勉強用のテスト用、もう1つは表に出して人に見せるためのテスト用で、後者では真っ赤な画面にカスタマイズして使用しています。色は頻繁に変更して試しているとのことです。
今後の展望として、カラーカスタマイズツールの「パーツツール」版の開発を検討しています。これは、ホームページに設置する小さなmiiboボタンやポップアップ画面の色をカスタマイズするツールです。さらに、ホームページ右下に表示されるボタンも自由にデザインできるようにする計画もあります。
最終的には、ホームページへの設置からカスタマイズまでをカバーする総合的なツールの開発を構想しています。これにより、miiboを活用したい企業や個人が、より簡単に、よりオリジナリティのある会話型AIを導入できるようになることが期待されます。
まとめ
オトーワン氏が開発したmiiboカラーカスタマイズツールは、miiboの可能性を大きく広げる画期的なソリューションです。プリセットテーマの選択、詳細なカラー設定、リアルタイムプレビューという3つの機能により、誰でも簡単にオリジナルの会話型AIを作成できるようになりました。
このツールの登場により、企業は自社のブランドカラーに合わせた会話型AIを簡単に導入でき、個人ユーザーも好みのデザインでAIボットを公開できるようになります。miiboの「爆速」という特徴を活かしながら、さらなるカスタマイズ性を実現したこのツールは、会話型AI活用の新たな可能性を示しています。
Share this post