【ShinのAI活動ログ】LUXと一緒に「大吉おみくじ」を作った話

きっかけは、もっと手軽に楽しめるコンテンツを

訪問者が手軽に楽しめるコンテンツを作りたい、と思ったのがきっかけです。

「おみくじ」はどうだろう、と考えたとき、ただのおみくじにはしたくありませんでした。

せっかくなら、普段はめったに大吉以外が出ない、思いきり偏った設計のおみくじにしてみよう。

そう思いついて、LUXが占ってくれる「大吉おみくじ」というコンセプトに決め、まずは確率設計から始めました。

確率は「ほぼ大吉、激レアな凶」

普通のおみくじは大吉から凶までバランスよく出る設計が多いですが、今回はあえて偏らせました。

 大吉：89.89%
 超大吉：9%
 極大吉：1%
 神大吉：0.1%
 凶：0.01%(1万分の1)

ほとんどの人が気持ちよく「大吉」を引ける一方で、超激レアな「神大吉」や、ほぼ出ない「凶」を仕込むことで、引いた人がSNSでシェアしたくなるような特別感を持たせています。

凶が出たら「逆に超絶ラッキー？」というコピーをつけたのも、ネガティブな結果すら楽しめるようにする工夫です。

ビジュアルはGeminiで一から生成

おみくじの世界観を作るために、画像生成AIのGeminiを使って素材を一式作りました。

 おみくじ箱：シアンに発光する近未来的な立方体。クリックして引くメインのトリガーです。
 おみくじ札：和紙に紫の回路パターンと未知の文字が浮かぶデザイン。
　　　　　　　　ランクごとに色を変えて(シアン→紫→金→虹色→黒)、レア度が一目でわかるようにしました。
 LUX：はにかむ巫女姿。おみくじを案内してくれる役として配置しました。

サイバーパンクと和柄を融合させるというのは、このサイトのコンセプトとも合っていて、作っていてかなり楽しい作業でした。

Claudeとコードを組み立てる

画像が揃ったところで、実際に動くおみくじをClaudeと一緒にコーディングしていきました。

クリックで箱が反応し、ランクを抽選し、結果に応じて札の画像と効果音を切り替える、という一連の仕組みを少しずつ組み上げていく作業です。

途中で一つ大きな失敗もありました。動作確認のために、画像をコードの中に直接埋め込んだ状態(base64という形式)のまま、そのままサイトのウィジェットに貼ってしまったのです。

表示こそされるものの、ページの裏側に1.5MB分もの文字列がそのまま書き込まれてしまい、サイト全体が重くなる原因になってしまいました。

そこで、おみくじ箱・おみくじ札・LUXの画像をそれぞれWordPressのメディアライブラリに正式にアップロードし、発行されたURLをコードに差し込み直す作業を行いました。

見た目は変えずに、ページの裏側だけを軽量な形に直す、という地味ながら大事な工程です。

デザインの軌道修正、何度も

最初は他のセキュリティバッジと同じシアン×ネイビーの配色で作っていましたが、見比べると差別化ができていなかったので、何度か方向転換しました。

赤×金の縁日カラーを試し、次に黄緑の妖精カラーに変え、最終的には「白ベースに紅白の幕で装飾する」というシンプルな形に落ち着きました。理由は単純で、LUXとおみくじ箱の画像自体がすでに十分カラフルなので、土台は引き算した方が映えると判断したからです。

途中、確率一覧の画像をプロトタイプに組み込んだ際、横幅が間延びしてしまったり、画像のサイズ指定を間違えて縦に伸びる表示崩れも発生しましたが、ひとつずつ直していきました。

音と動きで「引く楽しさ」を作る

見た目だけでなく、操作した時の気持ちよさにもこだわりました。

箱をクリックすると、ピョンと跳ねるアニメーション
結果が出ると、ランクに応じて合成音(Web Audio API)が鳴る。大吉は軽いチャイム、神大吉になるほど音が豪華に、凶は少し沈んだ音（別途音源をとっていないので、全体的に軽いです）
LUXは常にゆらゆらと左右に傾くアイドルアニメーションで、見ているだけでも可愛らしさが出るように

すべてプラグインなしの素のJavaScriptで実装しているので、サイトの表示速度への影響もほぼありません。

サイドバーでの見え方も調整

実際にサイドバーに配置してみると、結果表示後にページが縦に伸びすぎて画面に収まらない問題が出ました。

箱の画像を結果表示時に完全に隠したり、ラッキー項目を表形式から1行のテキストに圧縮したりして、コンパクトに収まるよう調整しました。

おわりに

セキュリティやスピードのような「真面目な改善」と違って、おみくじは完全に遊びの機能です。

けれど、こういう遊び心のあるコンテンツこそ、サイトに人間らしい温度を持たせてくれる気がします。

今のところサイト全体の累計カウント(これまで何回神大吉が出たか、など)はまだ実装していませんが、いつか作ってみたいと思っています。

まずは引いてみて、大吉、それとも超激レアな1枠に当たるか、試してみてください。