おみくじ画像の大量生産をやめたい! AIを使って年始のおみくじツールをアップデートした話

2026年01月14日

こんにちは、ASUE株式会社 広報のN村です!

さて、年始にASUE通信内で公開した通り、ASUEでは毎年、年賀状代わりにWeb上の特設ページを制作・公開しております。 毎年ほぼ勝手にわたしの独断で自由に作成しているページなので、「なにか新しいことをしよう!」と意気込んで楽しくいろいろな企画を行っているのですが(例:ふくわらい、お絵描きツールなど)、今回はその一環として、登場頻度の高い「おみくじ」コンテンツをパワーアップさせることにしました。

おみくじの画像のBefore/Afterがこちら……

フォントが少し変わっただけで何も変わってないんじゃないの?と思われるかもしれませんが、傍目にはわかりにくい部分で地味にいろいろアップデートしました。

  • おみくじ結果のパターン数増
  • おみくじ結果画像の動的生成機能

以前の仕様では、機能をリッチにしたり、おみくじ結果数を増やしたりしようとすると、どうしても制作の手間が増えてしまいました。

そこで今回は、Googleの生成AI「Gemini」を使用して、「来年以降の手間を減らしつつ、機能を進化させる」ことを目標とした開発に挑戦してみました。

この記事では、AIを使って制作したおみくじツールの裏側をご紹介します。 エンジニアの方はもちろん、「AIを使って業務を効率化したいけれど、具体的にどう指示を出せばいいかわからない」というWeb担当者の方にも、ヒントになれば嬉しいです。

 

注意

筆者には基礎的なWebサイト制作知識はありますが、あんまり難しいことはできません。

年始恒例「おみくじ」制作の裏にある、地味にツライ悩み

2026年版のおみくじを作るにあたり、解決したかったのが「制作と修正のコスト」です。 2025年版のおみくじでは、結果パターンごとにIllustratorで静的な画像を作成し、それを手動でサーバーへアップロードして表示させていました。

結果のバリエーションを細かく作れば作るほど、以下の作業が重くのしかかります。

  • 制作コスト
    • 結果のパターン数だけ画像を作る必要あり
    • 前回は14種類、増やした分だけ作業量増
  • 修正コスト
    • おみくじの結果文言を変更したい場合以下の手順が発生
      • Illustratorを開く
      • テキストを修正
      • 画像を書き出し
      • FTPで再アップロード

簡単ではありますが、地味に面倒な作業です。 そこで2026年版では、Geminiを活用して「PHPで画像を動的に生成する」仕組みを作ることにしました。これなら画像を一々作る必要がなくなり、結果のバリエーションも無限に増やせます。

AIと作った「PHPによる画像生成システム」の仕組み

今回構築したのは、サーバー上でベースとなる画像にテキストを合成し、その場でおみくじ画像を生成して表示するシステムです。 わたしは基礎的なWeb制作の知識(html,css,javascript,PHPあたりはなんとなく触れる)はありましたが、動的な画像生成の経験はなかったため、詳しくありません。そこで、実装のアイデア出しからコード作成まで、ほぼすべてGeminiと相談しながら進めました。(相談の結果、PHPのGDライブラリを使用しての作成となりました。)

データ構造:配列で管理する

今回は、PHPファイル内の多次元配列でテキストデータを管理する方法を採用しました。 各項目(商売、失物など)に対し、good / normal / bad の3段階でテキストを用意し、おみくじのランク(大吉、凶など)ごとにその出現比率を制御しています。

// テキストデータプール(配列で管理)
$textPool = [
    // ■商売
    'business' => [
        'good'   => ["シェア独占\n向かう所敵なし", "CPA半減\n大いに利あり", ...],
        'normal' => ["ROAS安定、損なし", "UX改善、効果あり", ...],
        'bad'    => ["原点回帰 足元を見よ", "予算見直し好機なり", ...]
    ],
    // ... 他項目(lost, dispute等)も同様
];

このようにテキストデータとして管理することで、修正が必要な際もエディタで文字を書き換えるだけで済み、即座に本番環境へ反映できるようになりました。

ちなみに、このテキストデータの内容も、Geminiに素案を作成してもらって手直しする形で使用しています。

ロジック:結果を「固定」する工夫

今までは、おみくじの結果をシェアするには自分でスクリーンショットや画像保存をした上でSNSに添付するしかできませんでした。が、せっかくなのでSNSシェア時のOGP画像に結果を表示させたい!

そこで大事なのが「おみくじ結果のランダム性」と「SNSシェア時の固定」です。 ランダムにおみくじが表示されるのは楽しいですが、SNSでシェアしたときに、投稿上のOGP画像に違う結果が出てしまっては意味がありません。 いろいろ方法があるとは思いますが、今回はより軽量にするため、計算式によるシード値の生成を採用しました。

「ランクID」「バリエーション番号」「カテゴリID」を掛け合わせた計算式で数値を出し、それを基に結果を決定します。これにより、ランダム関数を使わずとも、いつ誰がアクセスしても同じIDなら必ず同じ結果が表示される仕組みを実現しました。

Geminiは「コードを書く」だけじゃない!開発プロセスの工夫

AIを使った開発というと、「プロンプトを一発入力して、完璧なコードが出力される」という魔法のような光景を想像するかもしれません。しかし、実際はそんなことはなく、求める仕様に到達するには紆余曲折が必要です。

いきなり完成形を求めない「段階的」な指示出し

細かい仕様をすべて指定したプロンプトを作っても、だいたい一回で完璧な回答が返ってくることはなく失敗してしまうので、今回は大まかな仕様で簡単に動くものを作成した後に段階を踏んで機能を拡張していくアプローチを取りました。

  • 1. 実現可能性の壁打ち(相談)
    • 「PHPで動的に画像を生成したいけれど、自分のレベル(PHP基礎)でも扱える方法は?」と相談
    • 扱いやすい「GDライブラリ」を使う方針を決定
  • 2. ベースの実装
    • まずはシンプルに「背景画像に文字を合成するだけ」のコードを書いてもらい、動作確認
  • 3. 機能のちょい足し
    • 動くものを見ながら、「縦書きにしたい」「OGP画像も同時に作りたい」「結果をIDで固定したい」と、要望を一つずつ追加
    • 大幅な仕様変更時はいちからやり直したほうがいい(多分)

もちろん、AIも万能ではありません。 例えば、日本語の「縦書き」描画を依頼した際、どうしても文字や記号の位置がズレてしまう問題が発生しました。縦書き部分の処理内容を確認したところ、一文字ずつセンターに合わせようとしているようでしたが、何度か修正を試みてもズレた画像が生成されてしまいました。

縦書きで商売、失物等のおみくじ結果が出力された画像だが、縦書きの文字がズレたり「ー」が縦書きなのに横向きのままになっている画像

そこでAIに執着するのはやめ、縦書き処理の部分だけはGoogle検索で見つけた技術ブログの関数を参考に自分で組み込むことにしました。

参考記事:「【PHP】ImageTTFText()で文字列を縦書き描画する方法」
https://note.affi-sapo-sv.com/php-imagettftext-vertical-writing.php

参考記事を元に実装してその他位置もいろいろ調整した最終形のおみくじ結果画像がこちら。

おみくじの結果が綺麗なズレのない縦書きで表示されている画像
広報のN村

AIが上手くできる部分はAIでいいですが、上手くいかなかったら人間がやったほうが早い場合もあります。

作ったコードをAI自身にチェックさせる「監査」

今回もっともやってよかったのが、「AIが書いたコードを、別のAI人格に監査させる」というダブルチェックです。 AI生成コードには、セキュリティホールや著作権侵害のリスクが潜んでいる可能性があります。そこで、Geminiに特定の「ペルソナ」と「監査基準」を与え、厳しいチェックを行わせました。

  • セキュリティ監査(DevSecOpsリード役)
    • 今回はURLパラメータを使用するため、「DevSecOpsのリードエンジニア」になりきってもらい、OWASP Top 10基準などで脆弱性を診断
    • 変数の処理における安全性や、エラー発生時にサーバー内部情報が漏れないかなどを確認
  • コンプライアンス監査(著作権侵害チェック)
    • 既存のオープンソースコードを無断転用していないか、「コードコンプライアンス監査官」としてWeb検索機能を活用して調査

自分一人では見落としてしまう可能性があるリスクを、AIという第三者視点で潰せるのは、とても良かったです。書くのも速けりゃ見るのも速い。

 

注意

なお、ASUEでは入力データが学習に使用されないプランを利用のうえ、AI上に入力する内容には機密情報が入らないようにしています。

工数削減だけじゃなく、運用の自由度もアップ

こうして完成した2026年版おみくじシステム。 導入前後で、制作フローは劇的に変わりました。

  • Before(2025年版)
    • Illustratorでの画像作成:必須(パターン数分)
    • 画像のアップロード:必須
    • 文言修正:画像の作り直しが必要
  • After(2026年版)
    • Illustratorでの画像作成:不要(共通部分のテンプレートのみ)
    • 画像のアップロード:不要(同上)
    • 文言修正:テキストファイルの編集だけで即反映

テンプレートとなる共通デザイン以外は、おみくじデータ用のテキストファイルを編集するだけでOKになりました。 単純な作業工数が減っただけでなく、「修正が面倒だからこのネタはやめておこう……」という心理的なブレーキがなくなり、コンテンツの中身(ネタ)をブラッシュアップすることに時間を使えるようになったのが最大の収穫でした。

便利な反面「丸投げ」は難しい……開発して感じたこと

今回、AIのおかげで開発は爆速になりましたが、同時に「ある程度、自分で分かっている範囲じゃないと難しい」とは感じました。AIでは、思ったように動かないコードが出力されることも多々あります。 そしてそのコードを直そうと指示を繰り返すと、大体泥沼化します。

そんな時、「このコードのどこがおかしいのか」を自分で読み解く基礎知識がないと、AIに適切な修正指示が出せません。また、ちょっとした微修正なら自分で書き換えた方が早い場面でも、知識がないと再びAIに指示を出して、出力させて……と、かえって時間がかかってしまう可能性があります。

今回はおみくじという小規模なツールだったので制御できましたが、これがもっと大規模で複雑なシステム開発だったら……と考えると、正直なところわたしはAIだけでやり切る自信はありません。全体像を把握しきれず、ブラックボックス化してしまう可能性が高いからです。

あくまで「自分の知識をブーストさせる道具」として使うのが、個人的には一番よさそうだな〜と思いました。もともとが大規模な開発に耐えうる環境(チーム、人員など)であれば良いんだろうけど。

まとめ:AIを「良き相談相手」にして業務を楽しもう

今回、このおみくじツールのアップデートに2日間程度使用しました。もし今回、自分一人でゼロからPHPの画像処理について調べて実装していたら、完成までにもっと膨大な時間がかかっていたと思います。

「こうしたいけど、技術的に面倒だな」というアイデアも、AIを上手く活用すればある程度短時間で形にできる——これが実際にやってみて感じた一番のメリットでした。

もちろんAIは万能ではありません。ですが、得意なところをうまく頼って、足りないところは人間が補う——そんな風に、AIを「うまいこと」実務に取り入れて使い倒せると、効率的に業務に取り組めるのかなと思います。

ASUEでは、こうした新しい技術やツールを、楽しみながら柔軟に実務へ取り入れています。 テックブログのような開発裏話(※ほとんどないです)から、Webマーケティングの最新情報(※こっちがメインです)まで、メールマガジンでお届けしています。

広報のN村

ぜひぜひご登録よろしくお願いいたしまーーーーす!!!