生成AIで学習スタイル診断アプリを作る
これまでの作業では、無料版のChatGPTとCopilot+のみを使用しており、他のツールは使っていませんでした。無料版のChatGPTではファイルの添付や画像生成ができず、不便に感じる場面がありました。一方で、Copilot+はコピー＆ペーストがうまく機能しないこともあったりで、状況に応じてこの2つを使い分けていました。
今回は、たった1日でアプリを完成させるために、さまざまな生成AIをフル活用したプロセスについてご紹介します。
単にAIに任せて動くものを作るのではなく、
- どのように考えたか
- なぜその設計にしたか
- AI をどの場面で、どう使ったか
といった視点から、AIを戦略的に使い倒した実践的なアプローチをお話しします。
| 使用した | AIツール |
|---|---|
| 要件定義 | Gemini |
| インターフェース設計提案 | Manus |
| デザイン作成 | Google Stitch |
| コード(ロジック) | Gemini |
| CI構築 | GitHub Copilot |
目次
Geminiに挨拶して導入設計を一緒に考えてもらう
診断アプリの要件定義をつめる
AIにWebサイトのUIを設計させてみたら？
ロジックを組んでいく
まとめ
Geminiに挨拶して導入設計を一緒に考えてもらう
まずは要件定義や設計に特化しているとのことだったので、Geminiを使用していきます。
愛称は 「ジェーイ」 と呼び、私を「ゆっちゃん」と呼ばせたところから始めました。
早速、今回アプリ実装の大枠をジェーイに話します。
自然な会話で、私のチャットに対しての「これってこういうことだよね！」という意図を汲み取ってサッと要約してくれるのが心地いいなと思いました。
まず、使用する技術スタックを選定しました。今回は未経験だったReactに挑戦し、実際に手を動かしながら学ぶことで、徐々に使い方を理解し、その特有の魅力にも触れられると考え、採用を決めました。バックエンドには（今回は使用しませんが）Next.jsを選定しました。ReactとNode.jsの組み合わせも検討しましたが、フロントエンドとバックエンドが明確に分離される構成となるため、実装の難易度が高くなると判断し、今回は見送りました。
- React
- Next.js (ReactのフレームワークであるNext.jsを使う)
- TypeScript
まず、プロジェクトの立上げ方から聞きます。
お！このコマンドでインストールできるじゃん！
と思ったのですが、
インストールする時は慎重になるので、念のためドキュメントを確認します。
ここで疑問が。
npmと言えば、パッケージかなにか？？と聞いてみることに。
納得したので、インストールに進みます。
診断アプリの要件定義をつめる
当てはまる4タイプ
論理重視論・実践重視型・コツコツ型・短期集中型
を指定して、当てはまる属性を考えてもらいました。
赤枠の「期限ギリギリ」がネガティブに聞こえたため、変更を依頼しました。
変更後↓
変更されてました。
次に、8つの質問を考えてもらうことに。
画面に1つずつ質問が表示されるので、「はい」か「いいえ」で答えていきます。
質問の内容から、あなたのタイプを判断していきます。
判定基準は、
質問1と質問5のいずれにも「はい」と回答した場合は、「論理重視型」と判定します。
また、理論重視型に該当する質問が1つ、実践重視型に該当する質問が2つある場合は、より多く当てはまった「実践重視型」として分類します。
では
- 複数2件ずつになった場合は、どうするのか？
- 質問1(論理重視型)と質問8(短期集中型)に「はい」が入った場合はどう判定されるのか？
- 全て「はい」だった場合は?
を考えると、特別枠を作ることを提案してくれました。
全てに入ったら、特別枠の「万能ハイブリット型」として、
それ以外は、多く「ハイ」が入ったタイプとする。
もし、同点になった場合をもう少し考えたい
回答ごとに、その選択肢が示す傾向や背景を説明するコメントも付け加えました。
AIにWebサイトのUIを設計させてみたら？
いままでデザインに膨大な時間をかけていた経験があるため、正直あまりいいものはできないかもな、、、と個人的には思っていました。
"質問・選択肢・結果のデータ構造を分かりやすくしてね
条件分岐を絵かイラストに変換してね"
と入力し、
まずはManusでイラスト化されました。
完成したスライドを見て、「このままアプリデザインに落とし込めるかも！」と思ったので、
画像をそのままGoogle Stitchに渡してデザイン作成を依頼しました。
Google Stitch作成↓
デザイン依頼時には、以下の点を要望として伝えました。
- 回答ボタンを横並びに配置すること
- 回答の進捗状況が一目で分かるよう、プログレスバーを表示すること
- 最後の質問に回答した際、「診断結果を見る」ボタンが表示されるようにすること
- 診断結果の画面には、判定されたタイプとその説明文を表示すること
その後、画面UIのコードをReactで依頼しました。
提供されたコードはコピー＆ペーストするだけで簡単にUIが再現でき、スムーズに実装が進みました。
また、Reactのファイル構成についてもサポートを受けながら理解を深め、
無事にページを完成させることができました。これでだいたい3～4時間。
Google Stitchで質問ページを8つ作成する際には、アイコンやボタンの位置をすべてのページで統一する必要があるため、あらかじめ位置を明確に指定して何度も作成させました。
また、回答ページやホーム画面などは、同じ構成でも微妙に異なるデザインが出力されることもあるため、意図するニュアンスやレイアウトの違いについても、しっかりと伝えることが重要でした。
ロジックを組んでいく
ロジック設計にあたっては提案を受けつつ、
要所ごとに「どう進めるべきか」「どの選択が最適か」といった点を丁寧にすり合わせ、
最終的に全体像を整理できたので、以下の内容でコード生成を依頼しました。
- 回答を見直せるように「戻る」ボタンを設置し、前の質問に戻って選択を変更できるようにする
- 全ての質問に対して、各タイプ（理論・実践・コツコツ・短期集中）のスコアを集計する
- 質問数を明確にし、それぞれの質問がどのタイプに紐づいているかを整理する
- 集計後、最もスコアが高いタイプを判定する
- スコアが同点の場合の処理：
- 1位が1タイプのみの場合 → そのタイプを診断結果として表示
- 1位が2タイプ以上で同点の場合 → 「Mixタイプ」として表示
- 「一番強く表れた個性」がその人のタイプとして表示される
- 同点が発生した場合の優先順位は以下の通りで判定：
理論 ＞ 実践 ＞ コツコツ ＞ 短期集中
Geminiが生成したコードをそのままコピー＆ペーストして使いましたが、Reactのどのファイルにどのコードを記述すればよいのか分からず、手探りで進めながら実装しました。
一通り、完成しましたがReactを深く分からないのでコードレビューをしてもらいたくなったので、
GitHub Copilotを使いました。
フォルダ内のコードをすべて読み取ってレビューされます。
命名の間違いやTypescriptではなく。JavaScriptで書かれていることを注意されました。
また、次にテストコードも書かせたくなりました。
今回Pythonは使わないので、提案から外すように指示を出します。
一瞬にして、ファイルを作成、テストコードまで作成してくれました。
lintのテストの実行も依頼。
CIの構築も依頼。
難なく作成が完了し、GitHub Actionsのワークフローで、node-version: [18.x] の指定が原因でエラー（ビルド落ち）が発生しました。
一旦このバージョン指定を削除して再送しましたが、まだエラーが解消されません。
理由を聞くと↓
TypeScriptを書いたことがないのに、「型定義ファイルが必要」という点から、
思いがけずその特徴を知ることができました。
完成まで8時間ぐらい。
まとめ
今回はReactを使って、フロントエンドのアプリを無事に構築することができました。バックエンドの実装は行っていないため、今後データの保存などを行うには、より複雑な処理や時間をかけた設計が必要になると感じました。
コード自体は、具体的に指示を出せばスムーズに生成してもらえることが分かり、非常に助かりました。
一方で、要件定義やデザインの部分は細かく詰める必要があり、それに合わせたツールの選定にも、慣れるまでは時間がかかるなと思いました。こちらの要望をくみ取ってもらえないことが複数回続いた場合、３回目の質問で違うツールに乗り換えたりする、というルーティンができました、、、。