タロット占いアプリを自分で作る。しかもAIに丸投げで
先日、受講生さんからこんな相談をもらいました。
「タロット占いを副業にしたいんですけど、自分だけのオリジナルツールとかあったら差別化できるかなって。でもプログラミングなんて全くわからなくて…」
わかります、その気持ち。
結論から言うと、プログラミングの知識がゼロでも、ChatGPTを使えばタロット1枚引きアプリは作れます。しかも無料で公開できる。
2025年11月25日、AIで作る！タロット1枚引きツール講座を開催しました。
今回は、占い師歴25年の華印レンさんが講師を務めたセミナーの内容をお届けします。セミナーではファイル作成とGitHubへのアップロードまで進み、公開設定の部分は次回に持ち越しとなりました。
今回作るタロットアプリってどんなもの？
シンプルな「1枚引き」のタロット占いアプリです。
ボタンをクリックするとカードがランダムで1枚表示されて、その意味も一緒に出てくる。Webブラウザで動くので、スマホでもPCでも使えます。
レンさんは自分でデザインしたオリジナルカードを入れて使っていますが、一般的なウェイト版タロットの画像を使うこともできます。
準備するもの
必要なのはこれだけです。
・パソコン（WindowsでもMacでもOK）
・ChatGPT（無料版でも可能）
・GitHubアカウント（無料で作れます）
・Chromeブラウザ（推奨）
GitHubというのは、プログラムのコードを保存・公開できるサービスです。Googleアカウントがあればすぐに登録できます。
作り方の全体像
流れはこんな感じです。
1. ChatGPTにアプリのコードを作ってもらう
2. 必要なファイルをパソコンに保存する
3. GitHubにアップロードして公開する
やることは「ChatGPTの回答をコピペする」「ファイル名を変える」「GitHubにドラッグ&ドロップする」くらい。本当にそれだけです。
ステップ1：ChatGPTにコードを作ってもらう
ChatGPTに送るプロンプトはこれです。
タロットの1枚引きアプリを作りたいので、HTML、CSS、JavaScriptを一式生成してください。初心者でもわかるようにファイル構成も教えてください。大アルカナ22枚と小アルカナ56枚、全部のカードに対応してください。
これを送ると、ChatGPTが3つのファイルの内容を全部書いてくれます。
・index.html（画面の見た目）
・style.css（デザイン）
・script.js（カードを引く動作とカードの意味）
レンさんが最初にやったとき、「大アルカナだけ」「ワンドだけ」みたいに途中で終わっちゃうことがあったそうです。その場合は「続きを書いて」と言えばOK。
うまくいかないときは
ChatGPTは機嫌によって動きが変わることがあります。固まったり、途中で止まったりしたら、新しいチャットを開いて最初からやり直してみてください。翌日やったらすんなりできた、なんてこともあります。
ちなみにGemini（GoogleのAI）でも同じことができます。ChatGPTが調子悪いときは試してみてください。
ステップ2：ファイルを作って保存する
パソコンに作業用フォルダを作ります。名前は何でもいいですが、わかりやすく「tarot-app」とかにしておくといいです。
そのフォルダの中に、3つのファイルを作ります。
ファイルの作り方（Windowsの場合）
- フォルダを開く
- 右クリック→「新規作成」→「テキストドキュメント」
- ファイル名を変更する
ここで大事なのがファイルの拡張子です。
・1つ目のファイル：index.html（.txtを消して.htmlに）
・2つ目のファイル：style.css（.txtを消して.cssに）
・3つ目のファイル：script.js（.txtを消して.jsに）
それぞれのファイルをメモ帳で開いて、ChatGPTが生成したコードをコピペして保存します。
拡張子が見えない場合
Windowsの初期設定だと「.txt」などの拡張子が表示されないことがあります。その場合は、エクスプローラーの「表示」タブから「ファイル名拡張子」にチェックを入れてください。
ステップ3：GitHubで公開する
GitHubにログインしたら、「リポジトリ」を新しく作ります。
- 右上の「+」→「New repository」をクリック
- リポジトリ名を入力（例：my-tarot-app）
- 「Create repository」をクリック
すると「Upload files」という選択肢が出てくるので、そこをクリック。先ほど作った3つのファイル（index.html、style.css、script.js）をドラッグ&ドロップでアップロードします。
カード画像を使う場合は、imagesフォルダごとアップロードしてください。
公開設定をする
ファイルをアップロードしただけでは、まだ誰も見れません。公開するには設定が必要です。
- リポジトリの「Settings」をクリック
- 左メニューから「Pages」を選択
- 「Branch」のところを「None」から「main」に変更
- 「Save」をクリック
数分待つと、公開用のURLが表示されます。このURLにアクセスすれば、自分のタロットアプリが動いているのが確認できます。
つまずきやすいポイント
セミナーでも何人かつまずいたポイントがありました。
・GitHubのページが日本語翻訳されて操作がわかりにくい
→ブラウザの翻訳機能をオフにすると、英語表記に戻って操作しやすくなります
・Branchの選択肢に「main」が出てこない
→ファイルが正しくアップロードされていない可能性があります。一度リポジトリを作り直してみてください
・公開URLにアクセスしても表示されない
→設定後、反映まで数分かかることがあります。5分ほど待ってからもう一度試してください
自分だけのオリジナルにカスタマイズ
基本形ができたら、いくらでもカスタマイズできます。
・背景色を変える
・カード画像をオリジナルに差し替える
・解説文を自分の言葉に書き換える
これも全部ChatGPTに「背景を青に変えたい」「解説文をこういう雰囲気にしたい」と伝えれば、修正後のコードを作ってくれます。
レンさんはオリジナルのタロットカードをAI（ImageFXとChatGPT）で作って、78枚全部入れ替えたそうです。自分だけの世界観を表現できるのは楽しいですよね。
このスキルがあれば、他のツールも作れる
今回は「タロット1枚引き」でしたが、同じやり方で他の占いツールも作れます。
・おみくじアプリ
・Yes/No占い
・ルーン占い
・オラクルカード
「こういうの作りたい」とChatGPTに伝えるだけで、コードを書いてくれる。プログラミングを学ばなくても、アイデア次第でいろんなものが形にできる時代になりました。
まとめ
タロット占いアプリは、ChatGPTとGitHubを使えばプログラミング知識ゼロでも作れます。
まずは「ChatGPTにプロンプトを投げてコードを生成してもらう」ところから始めてみてください。コピペで動くものができると、「自分にもできるんだ」という感覚が得られます。
その小さな成功体験が、次のチャレンジにつながっていきます。
セミナー情報はオープンチャットで配信中
今回のようなセミナーは毎月3〜4回開催しています。
・AI動画制作
・音声配信・Udemy講師を目指す人向け講座
・占い副業
・集客・ツール活用
・AI活用全般
最新のセミナー情報はLINEオープンチャットで配信しています。興味のある方はぜひ参加してください。
コメント