2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Kiroでバイブスアゲアゲで「クラ娘」を作ってみた

Last updated at Posted at 2025-11-21

0. はじめに

今回は鹿児島で開催されましたJAWS-UG Kagoshima 2.0に登壇した際のセッション資料を公開いたします!(参加された皆様、お疲れ様でした:relaxed:


1. Kiroについて🤝💡

:ghost:KiroがGAされましたね:ghost:

エンジニア界隈では「Spec駆動開発」だの「プロンプトエンジニアリング」だの、なんだか難しい言葉が飛び交ってますが……
まずは楽しく“バイブコーディング”でバイブスをブチ上げる🔥 これが結局いちばん強い!

会話しながらAIと一緒にプロダクトを作れる開発環境。
UIはVSCodeっぽいけど、中身は“AIとリアルタイム共同作業”という新感覚。

Spec駆動開発(王道)

image.png

  • 最初にガッツリ仕様を決めてから実装に入る、きっちり派のアプローチ
  • 要件 → 設計 → 実装 → テストの順で進む
  • 仕様書=品質の基準

biveコーディング(バイブ派)

image.png

  • ノリ×直感×AIの三位一体で形にしていくスタイル
  • まずは会話で方向性合わせ→AIが叩き台生成→人間が微調整
  • ログが全部“学びの資産”になるのが最高

ざっくり比較

スタイル 特徴 向いてる人
Spec駆動 石橋を叩く・精度重視 几帳面な職人タイプ
biveコーディング バイブス重視・爆速 クリエイティブ脳の人

開発画面
image.png


2. プロダクト概要

AWSサービスを擬人化し、“推しキャラ”として覚えるギャラリーを作成!

  • GeminiAPIkeyを設定
  • AWSサービス名を入力
  • AIがキャラ画像+説明文を自動生成
  • そのままギャラリーにカードとして追加
  • キャラごとに詳細画面・チャット機能付き

3. AIとのやり取り(抜粋)🗣️🤖

image.png
--3分後--
image.png

image.png

最初のキャラ生成は……まぁ、うん。
正直 ダサかった。

そこで、

  • もっとソシャゲっぽく
  • AWSの近未来感を追加
  • アニメ美少女風に
  • モデルは Gemini Flash 2.5 Image
  • 「クラ娘」というタイトルにしよう!
  • キャラはポップアップ入力にしよう
  • お気に入り機能ほしい!
  • お気に入りは上に表示して!

……などなど完全に“プロデューサー”感覚で次々と注文。

そのたびにAIが秒速でUIをアップデートしてくれる。
マジで一緒に開発してる感がスゴい...

結果――
SSR級に可愛い AWSキャラたちが誕生✨

image.png


4. 生まれたクラ娘たち

(※一部抜粋。フルメンバーはギャラリーで!)

IAM

image.png
ツンとしていて風気委員ぽくてIAMぽい...セキュリティも高そう...

ECS

image.png
六角形のマークがECSのマークを連想させますね

SQS

image.png
なんかベルト周りがいかにもキューって感じでてますね

Bedrock

image.png
bedrock感は出てるのかわかりませんが、可愛いから許します

ギャラリー

image.png


5. チャット機能で“キャラがAWSを説明”する機能を追加

  • キャラごとのチャット画面
  • 「〇〇ちゃんに質問する」というUX
  • 返答は明るい女の子口調
  • 強み・弱み・仕組みなどもキャラ語りで解説

image.png

学習コンテンツ × 擬人化 × チャットの三重奏で
「AWSがマジで覚えやすい」...気がする...


6. 学び 📒✨

今回の開発で分かったこと👇

  • 画像&UIの試作が爆速すぎる。
    盛ったら盛っただけ返ってくる!薄めたら薄めた分だけ調整される!

  • 「もっとカッコよく」「いい感じで」みたいな抽象注文でも案外なんとかなる!

  • なにより…… めちゃくちゃ楽しい。 楽しさこそ継続の秘訣!


🍜 締め

Spec駆動が悪いわけじゃないけど、まずは“動くモノ”をAIと作って
モチベとバイブスを最大化する のが一番自分には合ってると思いました。

理解や最適化は後からついてきます!
AI時代の開発はもっと自由でもっと遊んでいい!

みなさんもバイブコーディングでバイブスぶち上げていきましょう!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?