【ShinのAI活動ログ】ノエをサイトに設置した話

サイトに案内キャラクター「ノエ」を設置しました。

以前の記事でノエを作ると書いたので、その続きです。キャラクターのイラストが完成したので、次のステップとしてサイトに実際に置いてみることにしました。

ミニキャラ生成、思ったより難航した

まず一番手こずったのが、ウィジェット用のミニキャラ（ちびキャラ）イラストの生成です。ノエには「ハチミツ色の髪・右側だけ長い一房・アホ毛・シアンのインナーカラー」という細かいデザインがあります。

これを2.5頭身のちびキャラに落とし込もうとしたのですが、生成AIへの伝え方がなかなか難しく、何度試作しても何かがズレる状態が続きました。
髪全体がロングになったり、一房の位置が左右逆になったり、頭身が崩れてデブキャラになったり

——試作は30回を軽く超えました。プロンプトをゼロからリセットしたのも2〜3回あります。

試行錯誤のはてに、ようやくミニキャラノエが誕生しました。

コンテンツ整理も意外と大変だった

ウィジェットのメニュー内容を決めるにあたって、サイトのコンテンツを整理し直す必要がありました。

最初はゲームを4項目並べていたのですが、メニューが長くなりすぎて見づらかったので、ゲーム一覧用の固定ページ（🎮 ゲームアーケード）を新たに作成。そこに4つのゲームバナーをまとめて、ウィジェットからは1リンクで飛べるようにしました。

実装はシンプルに

ウィジェット自体の実装はWPCodeにHTML/CSS/JSを書くだけで完結しています。プラグイン追加なしで動くので、サイトへの負荷も最小限です。

動作としては、ノエにカーソルを乗せると左横に吹き出しメニューが展開して、興味に合わせて6つのコンテンツへ案内してくれます。スマホではタップで開閉する仕様にしてあります。

実際に動いているのを見ると、サイトに「人がいる感」が出てきた気がします。

これから

今はノエがメニューを案内するだけですが、ゆくゆくはページの内容に合わせてセリフを変えたり、もう少しインタラクティブな動きをつけたりしていきたいと思っています。

ノエと一緒にこのサイトをもっと面白くしていきたいです。