読み終わった後に、読者はどこへ行く？
ブログやメディアを運営する上で最大の課題の一つが「直帰率」です。
一つの記事を読み終えた読者に、いかにしてサイト内の他のコンテンツを見つけてもらうか。
これまで関連記事の表示やサイドバーなど様々な手を試してきましたが、もう一歩踏み込み、「キャラクターによる能動的な提案」を実装してみました。
今回これをGoogleのAIエディター「Antigravity」で開発しましたので、苦労した点や参考になりそうな情報について共有します。
AI Character：あなたの隣に寄り添う読書ガイド
今回実装した「AI Character」は、サイトの右下にひょっこりと現れる、愛らしいキャラクターによる誘導コンポーネントです。
単なるバナーや静的なリンクではなく、キャラクターが「つぶやく」ことで、読者の注意を自然に引きつけます。
AIと言っていますが、厳密にはAI風の実装となっています。
主な特徴
- カテゴリ連動型のレコメンド: 読者が今見ている記事のカテゴリを自動判別し、そのカテゴリに関連する「おすすめ記事」をピックアップして囁きます。
- 双方向のインタラクション: 小さなつぶやきをクリックすると、キャラクターが笑顔（またはウィンク！）と共に、記事の詳細な見どころを語り、リンクを提示します。
- 生き生きとしたアニメーション: 呼吸するようにふわふわ浮遊し、表情の変化、話している最中の弾むようなアクションなど、ちょっとしたアニメーションで「生命感」を演出しています。
技術的なこだわり：軽量さと導入のしやすさ
このコンポーネントは、WordPressのパフォーマンスを落とさないよう、非常に軽量なTypeScript + Viteの構成になっています。
外部ライブラリへの依存を最小限に抑え、組み込みのCSSアニメーションを活用することで、モバイル端末でもサクサクと動作します。
また、WordPressへの導入も非常にシンプルです。
ビルドされたJSとCSSを所定のフォルダにアップロードし、フッターに数行のリンクを追記するだけで、どのサイトにも「コンシェルジュ」を招き入れることができます。
AntigravityとGemini3.1 Proの組み合わせはいまいち
これは2026年3月4日時点での情報になりますが、先日追加された最新のGemini3.1 Proでは、Antigravityでの開発であまり良い結果は得られませんでした。
途中で停止して進まなくなることが多々あったり、ひとつひとつの実行時間が非常に長く、かなり時間を要しました。
また、今回の開発ではあらかじめキャラクタのつぶやきをAIで作成しているのですが、外部APIで呼び出して作業を実施するため、API制限で作業が止まってしまうことが多々ありました。利用者視点では動作中のように見えるため、何が原因で時間がかかっているのかが分からないという状況になることが多かったです。
途中からClaude 4.6 Opusに切り替えたところ、無事作業が進んで何とか完成できたという感じです。最近企業でもClaudeの評価が高く、作業の完遂力が非常に高く感じます。先ほどのAPI制限で止まった際も、他の方法が無いか尋ねると、APIには投げずにAntigravity上で作業する提案がされ、以降はAPI制限に悩まされることが無くなりました。
なぜかGeminiはAPIを使用して作業する方針しか提案してこないため、悩ましいなと感じていたのですが、Claudeはあっさり解決してしまったということで、AntigravityはGoogleのツールなのに、Geminiだといまいちというのはもったいないです。
Claudeが制限で使えないとき、AntigravityでGeminiを使うなら、現時点ではGemini 3.0 Flashが動作も早くて安定していると感じます。
まとめ：サイト回遊率が上がればいいな
今回キャラクタの案内役により、他の記事にも興味を持ってもらいたいということで実装しましたが、画面右下の一角を占有するため、邪魔にならないかと正直迷いました。
しかし、実装してみると意外に邪魔にならないサイズに収まったのではないかなと感じています。サイトを訪れた際は、ぜひ右下の彼女に話しかけてみてください。きっと、あなたにぴったりの「次の物語」を教えてくれるはずです。
