KIROはAWSのエージェント型IDE
CursorとかAntigravityとか次世代IDEの１つと思ってくれ
このIDEは仕様駆動開発という一面をもつ、 これ１つでバイブコーディングができるのだ。
ココでは書かないけど仕様駆動開発も可能で、どちらかといえばコッチの方に力を入れて開発されている。
なんか作ってみよう
ぼく「コイントスをやってくれるアプリ」
Kiro「コイントスアプリを作りますね。シンプルなHTML/CSS/JavaScriptで実装します。」
デザイン何も指示しなかったけどイイ感じに仕上がっている
もっと開発してみよう
コインを飛ばしたい
ぼく「コインを３Dにしてくれ、実際のコイントスのように上に飛ばして回転する演出を加えます」
Kiro「3Dコインで上に飛ばして回転する演出に変更します！」
２Dのコインの画像がXYZで回転して上昇するアニメが追加された
コインは３Dではなかったというか、HTML/CSS/JavaScriptしか無いのため、3Dのライブラリを指名しないと作れないのでは？
コインを3Dにする
３Dを扱うにはいろいろあるが情報量豊富なThree.jsを採用する。
ぼく「Three.jsを導入し、Visualを強化します」
Kiro「hree.jsを導入して、ビジュアルを大幅に強化しました！」
コインが３DModelになった、でもちょっと動きを始めとした細かい部分が怪しい
修正指示１
ぼく「以下に対応して」
- 裏表の結果をリセットする機能
- コインの漢字が右に90°回転している
- パーティクルを黄色にする
- コイントスを実行後、落下する前に判定が完了してしまう
Kiro「修正しました！」
解決しているが、ボタンが違った場所に追加されてしまった。
一方を治すと他方が壊れるので、大雑把な指示を投げるだけで解決する状況ではなくなったか？
ココらへんからVibeより企画を書いたほうが速いのではないだろうか
修正指示２
ぼく「ボタンの位置を変更、結果を表示するTextより下に配置してください」
Kiro「完了しました！ボタンが結果表示テキストの下に配置されるようになりました。」
まあ位置は変わったが、UIデザインとしては問題がある
そこでスクショをNanobananaでUIデザインとして仕立て上げ その画像を与えてみる
修正指示３
ぼく「gemini、この壊滅的なUIを助けてくれ」
Gemini画像生成モード「現在のスクリーンショット（コイントス 3D）の構成要素と、なぜ「壊滅的」なのかを整理しました。」
3Dコイントス UIレイアウト改善案
| 要素 | 改善後の配置・デザイン | 改善のポイント |
|---|---|---|
| タイトル | 画面最上部から少し下げて配置 | 画面端の「窮屈さ」を解消し、ゆとりを持たせます。 |
| メインコンテンツ (3Dコイン) | 中央（センター）に配置 | 最優先事項。 周囲に何もない空間を作り、回転アニメーションを完全に露出させます。 |
| ステータス表示 | コインの下、ボタンの上に配置 | 視線の流れを「コイン（結果を見る）→ その下のテキスト（確認）」に固定します。 |
| 操作ボタン | 画面下部（親指の可動域内） | コインから離すことで操作時の視覚的干渉を防ぎ、片手操作をしやすくします。 |
| 統計情報 | 画面の最下部（フッター付近） | 背景に馴染ませるか、カード状にまとめてボタン群と視覚的に統合します。 |
これと以下の見出しがあったが省略
- 縦型Webアプリとしての「あるべき姿」への修正案
- Kiro（Agentic AI IDE）への指示出しのヒント
nanobananaが寒さで調子でないため望んだ画像を作れなかった。
Kiroに投げて直談判する
画像を添付して修正指示
画像と上記のテーブルを与える。
画像はDDに対応してるはずだったが・・・
何故か機能せず。
Kiro「これでコインが画面中央で完全に見えるようになり、3Dアニメーションを邪魔しない配置になりました。ボタンも親指で押しやすい下部に配置されています！」
タイトル: 上部に適度な余白を持たせて配置、サイズも少し小さく調整
結果表示: タイトルの下、コインの上部に固定配置（コインと重ならない位置）
ボタン: 画面下部、統計情報の上に固定配置（コインの下で邪魔にならない位置）
統計情報: 最下部に固定配置
素晴らしい、ちゃんと治っている。
要求を上げてみる
ぼく「SNSでShareできるようにしたい」
Kiro「了解です！」
- Twitter（X）カラーの青いボタンを追加
- クリックすると、表と裏の回数と割合を含む定型文を自動生成
- ハッシュタグ付きでXの投稿画面が開きます
- 投稿内容には以下が含まれます
- 表と裏の回数
- それぞれの割合（パーセント）
- 合計回数
- ハッシュタグ（#コイントス3D #WebGL #ThreeJS）
- ボタンのサイズも3つ並べても見やすいように調整しました！
偶然かもしれないが、青いボタンで作られているのは評価が高い
ポップアップウィンドウで投稿もできる
コインの結果だけでなく、ディレクトリ配置も投稿できる！ みんなにディレクトリの美しさを見てもらおう。
流石にまずいか
コインを切り替えてみよう
コイントスに必要な機能はできてしまったので機能を拡張してみよう
ぼく「左右ボタンを追加して、コインのデザインを選択できるようにします。 フリップコインは裏と表の書かれた通常のコイントスを決めるコインです リゾルブコインはYESとNOを決めることができます。 」
Kiro「コインデザインの切り替え機能を追加しました！」
- 左右ナビゲーションボタン: タイトルの両側に◀▶ボタンを配置
- フリップコイン: 金色と銀色で「表」「裏」が書かれた通常のコイン
- リゾルブコイン: 緑色と赤色で「YES」「NO」が書かれた決断用コイン
- コインタイプを切り替えると、統計ラベルとボタンテキストも自動更新
- 切り替え時に統計がリセットされます
- Xシェア時にコインタイプも含めて投稿されます
- 左右ボタンをクリックすると、コインのデザインが切り替わり、用途に応じて使い分けられます！
結構凄いのでは？
左右の位置とか、コインのデザインとか YES Noを実装しただけで、リザルトの結果は裏表のままではないかとか思ってたが、予想以上に作ってみせた、凄い。
雰囲気で組み立てる能力が高い
ちゃんとスキルとかルールを整備すればもっとパワーが出ると思う
おわり
