Gemini Canvas(バイブコーディング)を使って、オリジナル画像を使ったおみくじアプリを作成する方法をご紹介します。

今回のポイントは、「自分で用意した画像(作成ソフトなどで作ったもの)」を使って、独自性のあるおみくじを作ることです。

HTML コードビューア

作成ログ

完成までの作成時間:約10分
完成までのチャットでのやり取り回数:3回

関連記事
恋のおみくじ|名前で占う今日の恋愛運&ラッキーアイテム

おみくじだけやりたい人はこちら

Gemini Canvasでの制作過程

まずは、最低限のイメージを伝えます。 今回は「ユーザーが自分で引くカードを選べる」という、おみくじ本来の楽しさを再現するため、「16枚の裏返し画像から好きなものを選ぶ」という仕様にしました。

実際に使用したプロンプト(指示文)は以下の通りです。

最初のプロンプト

おみくじ作成して
汎用性ある感じで

名前入力欄
16通り

恋みくじ
16枚おみくじ並べて選べる

おみくじの画像素材
https://aitool-lab.jp/wp-content/uploads/2025/12/17fab094da4769ffebe5449a84eecae6.jpg

プレビュー画面を見ながら微調整していく

ベースができたら、右側のプレビュー画面を見て動作を確認します。ここで重要なテクニックがあります。

「他に追加したほうがいいアイデアがあれば、チャット欄で教えて」

とAIに投げかけてみることです。

他に追加した方がいいアイディアはあればチャット欄で教えて。
プロンプトのポイント
「チャット欄で教えて」と指定しないと、AIが気を利かせて新機能を勝手にコードに盛り込んでしまうことがあります。 一度「会話」のフェーズを挟むことで、本当に必要な機能だけを選んで追加することができます。

シェア・拡散機能の追加

AIとの相談の結果、今回は「SNSシェア機能」を追加することにしました。

シェア・拡散機能追加

ページのURL
https://aitool-lab.jp/love-fortune/
Geminiで作成したおみくじのサンプル

完成!

  1. 名前を入力する
  2. 好きなおみくじ(画像)を選ぶ
  3. 結果をシェアする

これらすべての機能が揃った、イメージ通りのおみくじツールがあっという間に完成しました!

関連記事
【2026午年】開運!馬みくじ

2026年午年の運勢を無料診断!名前と日付から導き出される「今日の運勢」と、あなたを守護する「ラッキー馬(芦毛・ペガサスなど)」を判定します。勝負運、待ち人、ラッキー馬番まで詳細にアドバイス。大吉を引き当てて、素晴らしい一年を駆け抜けよう!

関連記事
戦慄の毒舌みくじ

今日の運勢を「毒舌」で診断!名前を入力するだけで、辛口AIがあなたの未来を容赦なく予言します。大吉でも皮肉たっぷり、大凶なら絶望的。メンタルが弱い方はご遠慮ください。SNSでのシェア率No.1を目指す、戦慄のエンタメ占い。【完全無料】