見出し画像

プログラム苦手でもOK|Gemini Canvasでジョジョ風スタンド生成アプリを4時間で作った実録

ゴゴゴゴゴ……

──これが、俺の“スタンド”か

Gemini Canvasでバイブコーディングしてみたら、想像以上にヤバいものが生まれてしまった。

「バイブコーディング」聞いたことありますか?
知らない方もいると思うので、ざっくり説明します。

これは、AIと対話しながらコードを書いていく開発スタイルのこと。

つまり、プログラミングの知識がほとんどなくても(あったほうがいいのは事実ですが)、
会話ができればアプリが作れてしまう、というやつです。



バイブコーディングの強みと弱み

まず、メリットから。

  • 圧倒的なスピード
    数日かかるプロトタイプが、数分〜数十分で形になる

  • 開発の民主化
    プログラミング未経験者でも、アイデアをアプリにできる

  • 試行錯誤がラク
    気に入らなければ、指示し直すだけ

一方で、デメリットもあります。

  • ブラックボックス化
    内部でどんなコードが動いているか把握しにくい

  • 複雑なバグへの対応が難しい
    込み入った論理エラーは、初心者だと修正が大変

  • 保守性の問題
    AIが書いたスパゲッティコードが蓄積されるリスク


なぜ作ったのか?


現在、ぼくは
Gemini Proの1ヶ月無料キャンペーンを使わせてもらっています。

せっかくなので、
「どうせなら使い倒そう」
と思い、アプリを作ってみることにしました。

どうせ作るなら、
自分がワクワクするものがいい。

そこで思いついたのが、
「ジョジョ風スタンド・トレカ生成アプリ」です。


ただの画像生成じゃ、物足りなかった


単に「スタンドっぽい画像」を出したかったわけじゃありません。

やりたかったのは、これ👇

  • 性格診断

  • ステータス(破壊力・スピード・射程など)

  • 能力解説

  • 決め台詞

  • それらを1枚のカードに封印

要するに、
「魂まで含めてスタンドを生成したかった」

そこで選んだ相棒が、
Gemini 2.5 Flash × Imagen 4.0 × Gemini Canvas

結論から言うと、
妄想を形にするスピードが異常でした。😳

Gemini Canvasについては、
ごまめちゃんの記事がとても分かりやすいので、気になる方は👇を参照してください。


4時間で駆け抜けた制作ステップ

Step1:最初の一発目で、もう60点

最初に投げた指示は、これだけ。

写真をアップしたら、ジョジョ風のイラストをトレーディングカード風に生成してダウンロードできるアプリを作成してください。
・入力した写真を本体とする
・破壊力、スピード、射程距離、持続力、精密動作性、成長性をA〜Eで数値化し、レーダーチャートを生成
・本体からイメージされるスタンドを生成し、本体と一緒に描画
・カードの構図と総合的な強さから、N / R / SR / LRのレア度を算出
・レア度に応じたキラキラ演出を追加

正直、これだけ。

驚いたのは、
この一発目で、体感60点くらいの完成度が出てきたこと。

「とりあえず形にする」
この一番しんどい工程を、
ほぼ一瞬で飛び越えてきました。

その結果、Geminiが作ってこれたのは、下記👇
もうすでに形ができている。😧

V1:最初でこの出来は驚いた😳
ちょっとジョジョ感が弱い

Step2:V1 → V15(約2時間)

最初に出てきたのが V1
すでに「アプリの形」にはなっていました。

ただ、

  • 文字切れ

  • フォント

  • 色味

  • 世界観の甘さ

このあたりが気になったので、
最低限の見栄えと“魂”の部分を重点的に調整

15回ほど対話を続けた結果が V15
ここまでで約2時間。

基礎情報をインプットとして与え、
ジョジョ風のエピソードやセリフ生成も追加しました。

V15:セリフとストーリーを追加!

Step3:意外と詰まった「画像の保存」

ここで一番ハマったのが、画像の保存処理

最初は、
プログラム側でダウンロード処理を実装しようとしたのですが、
ここで思った以上に時間を取られました。😔

なので、方針転換。

  • 保存機能はあえて実装しない

  • スマホの標準機能で
     👉 画像を長押しして保存

  • その方法を画面上のアナウンスで明示

結果的に、
技術で解決しない選択が、一番スムーズでした。


Step4:V23(+1時間)

その後、対話を続けながら、

  • タイトル画面

  • 注意事項の画面

を追加。

このあたりから、
「ツール」ではなく
ちゃんとした“アプリ”になった感覚がありました。🙂‍↕️

ジョジョの世界観を保ちながらの注意事項⚠️
V23:機能としてはほぼ完成🥳

Step5:V36(+1時間)

最後は細かいチューニング。

このあたりから、“作ってる”というより
完成に近づいてる”感覚に変わった。

  • レア度の排出率調整

  • SR / SSRの確定演出

  • イラストの文字化け対策

このあたりを詰めて、
完成したのが V36 です。

よりジョジョの高級感ある雰囲気に✨
V36:待ち時間のぐるぐるや演出
カードのレア効果音の追加等を行い完成🤩

どんな人に向いているか

バイブコーディングのやり方が向いているのは、

作りたいイメージはあるけど、
プログラムが苦手な人。

逆に言うと、
「何を作りたいかを言葉にできない人」には、
まだ少し難しい。

これからは、

  • 全体構成を考える力

  • 筋道を立てる力

  • 頭の中のイメージを言語化する力

こうした設計と言語化のスキルが、
ますます重要になってくると感じました。


最終的にできたもの

最終的に完成したのが、こちら👇

もし、ここまで読んだなら、
もう準備はできてる。

次は、あなたの番です。

※課金の都合により、サービスは途中で終了する可能性があります

また、👇のThreadsでコメントや生成したものを教えてしてくれると嬉しいです。🙂‍↕️

◾️Threads


おまけ

アプリ完成して解放感のあるナオユキと政子様


自己分析からジョジョ風キャラを作りたい方は👇をどうぞ。

※本記事は、生成AIの技術的検証を目的とした個人の実験(ファンコンテンツ)です。集英社の公式とは一切関係ありません。


最後までお読みいただき、ありがとうございました。
スキ、フォロー、コメントなんでもいただけると励みになります🙂‍↕️

以下のサイトマップからにもぜひお立ち寄りください!
サイトマップは☝️画像から

#やってみた #創作記録 #生成AI #AI #ChatGPT #人工知能 #Gemini #Imagen #バイブコーディング #アプリ開発 #プロトタイプ開発 #世界観設計 #note #エッセイ #ブログ #創作 #学び #体験談 #日常 #ライフスタイル #発想力 #妄想力

いいなと思ったら応援しよう!

ナオユキ|物語と知識のコンシェルジュ もしこの記事が少しでも役に立ったり、楽しんでいただけたりしたら、チップをいただけるととても嬉しいです! いただいたチップは、今後のより良いコンテンツ制作のための書籍代📚とnote購入🗒️、他の方へのチップ代💰に使わせていただきます。 いつも応援ありがとうございます!

この記事が参加している募集