コード経験ほぼゼロでも大丈夫！Geminiと挑んだ3日間のサイト制作
こんにちは！kickflowプロダクト開発本部 QAチームのNです。
今回は、普段はコードを書く機会がほとんどない私が、GoogleのAI Gemini という強力な相棒と一緒に、チームの業務効率を改善する 「QA ポータルサイト」 をゼロから作ったお話をご紹介します。
「自分も何か作ってみたいけど、プログラミングはちょっと…」と感じている方の背中をそっと押せるような記事になれば嬉しいです！
- コード経験ほぼゼロでも大丈夫！Geminiと挑んだ3日間のサイト制作
- 「あの情報、どこだっけ？」が日常だった
- きっかけは社内コンペ
- コードが書けない私が、どうやって？
- Geminiとの二人三脚開発、スタート！
- 改善を重ねる「対話型開発」
- 感動したこと、一番の山場
- AIと創る、未来の働き方
「あの情報、どこだっけ？」が日常だった
私たちのQAチームでは、日々の業務で本当にたくさんの情報やツールを使っています。
- チームのミッション
- 開発の進め方
- メンバーの連絡先
- テスト手順書
- 各種管理ツールへのリンク
- 検証環境のドメイン一覧
- 便利な社内ツール
- 定例会議のスケジュール …などなど
これらの大切な情報が esa・Slack・Googleカレンダー など、あちこちに散らばっていました。
よくある困りごと
- 「最新のテスト手順書って、どのesaの記事だっけ？」
- 「この検証環境のドメイン、誰かに聞かないと…」
- 「新メンバーに見てもらう情報が多すぎて大変！」
こうした情報探しのプチストレスが積み重なり、特に新しいメンバーのオンボーディングでは情報の洪水がスムーズな立ち上がりを妨げることも。
チーム外からも「QAチームの活動の全体像が分かりにくい」という声があり、「これは何とかしないと！」 と、情報を一元化できるポータルサイトの必要性を強く感じていました。
きっかけは社内コンペ
今回ポータルサイトを作ろうと思ったきっかけは、「社内でAIを活用した便利ツールを作ってみた・使ってみたコンペ」があったことです。 その中で、kickflowのポータルサイトをAIで作ったという記事を見て、「これ、QAチーム用にもあったら絶対便利！」と感じたのがスタートでした。
コードが書けない私が、どうやって？
私の主な業務はテストケースの作成やテスト実行。HTML・CSS・JavaScriptといったコードを書く経験はほとんどありません。
「でも、AIと一緒なら何かできるかも？」
そう思って、今話題のGeminiに相談してみることにしました。
Geminiとの二人三脚開発、スタート！
まずはサイトをより実用的にするため、チームメンバーに普段よく参照する情報やリンクをヒアリングすることから始めました。
そして集まった情報を元に、作りたいポータルサイトのイメージとまとめたい情報をMarkdown形式でリストアップしてGeminiに伝えました。
AIモデルの選定：Gemini 2.5 Pro vs Gemini 2.5 Flash
実は今回、せっかくなので高機能な「Gemini 2.5 Pro」と、より高速な「Gemini 2.5 Flash」の両方に同じプロンプトを投げて、どちらがより良いコードを生成するか比較してみました。
結論から言うと、驚いたことにGemini 2.5 Flashが生成したコードの方が、私たちの要望に近いものでした。
Flashの方が最新の情報を学習しているのか、UIのデザインがより洗練されており、求めていた折りたたみ機能などもシンプルかつ的確に実装してくれました。まさに求めていた直感的で分かりやすいサイト構成を提案してくれたのがFlashだったのです。
必ずしも性能が高いモデルが常に最適とは限らない、というAI活用の面白い一面を発見した瞬間でした。
不採用になったGemini 2.5 Proで生成されたデザイン(ドラフト)
Geminiとのやりとり（一例）
私：Kickflow QAチームのポータルページをGoogle Sitesで作りたいです。必要な情報はこんな感じです…
## 1. チーム紹介・役割
- チームのミッション（今期の目標）：[社内esa記事（リンク省略）]
- 開発プロセス：[社内esa記事（リンク省略）]
- メンバー一覧
- 正社員
- マネージャー：**（氏名マスク済）**
- [Slackプロフィール（リンク省略）]
- メンバー：**（氏名マスク済）**
- [Slackプロフィール（リンク省略）]
## 2. ナレッジ（FAQ・手順書・Tips）
- よくある質問
- 操作手順がわからないとき→マニュアルテスト手順書一覧：[社内esa記事（リンク省略）]
- テスト手順書まとめ
- Techチケットの検証フロー：[社内esa記事（リンク省略）]
- Bugチケットの検証フロー：[社内esa記事（リンク省略）]
- Tips集
- e2eのアサーション設定方法：[社内esa記事（リンク省略）]
- e2eの工夫しないといけないところ：[社内esa記事（リンク省略）]
- その他ナレッジ：[esa記事URL]
- kickflowで利用しているVuetifyコンポーネント一覧：[社内esa記事（リンク省略）]
- ワークフローJSONインポート時のデフォルト値一覧：[社内esa記事（リンク省略）]
- 外部連携通知まとめ：[社内esa記事（リンク省略）]
- 上限値仕様メモ：[社内esa記事（リンク省略）]
etc........
Gemini：
2カラム構成で、左側にナビゲーション、右側にコンテンツを表示するHTMLを提案します。
Geminiから提案されたのは、まさに私が思い描いていた2カラム構成のレイアウト！この時点で「もしかして本当に作れるかも」とワクワクが一気に高まりました。
改善を重ねる「対話型開発」
その後も、まるで隣にいる同僚に相談するように、細かいリクエストをどんどん伝えていきました。
- 私：「ホーム画面に、よく使うリンクをまとめたいです」
- Gemini：「クイックリンク付きのホーム画面のコードを生成します」
- 私：「メンバー一覧にプロフィール画像とSlackアイコンも表示したい！」
- Gemini：「画像・アイコン付きのメンバー一覧コードはこちらです」
- 私：「新メンバー向けのオンボーディングページも作りたい」
- Gemini：「見出しやリストで整理したオンボーディングページのコードをどうぞ」
- 私：「定例会議は日付じゃなくて"毎週◯曜日"と表示できますか？」
- Gemini：「JavaScriptで曜日表示に修正できます」
- 私：「社内ChatGPTのリンクは目立たせたいので赤くハイライトして！」
- Gemini：「該当部分のCSSを調整します」
などなど。
Geminiは、私の曖昧なお願いにも的確に応えてくれる頼もしいパートナーでした。
時には「Google Sitesの仕様上、こういう実装は難しいですが、代替案としてこういう方法があります」と提案してくれることもあり、まさに壁打ちの相棒という感覚です。
感動したこと、一番の山場
特に感動したのはページ内検索機能の実装です。 「キーワードでサイト全体を検索できるようにしたい」という無茶なお願いにも、Geminiはサイト内の全コンテンツを走査してキーワードをハイライト表示する複雑なJavaScriptを作り上げてくれました。
また、最も苦労したのがGoogle Sitesのiframe内でスムーズなページ内リンク遷移を実現すること。
通常のリンクだと別タブで開いてしまう問題をなかなか解決できず、Geminiもいくつかの方法を試しては失敗…。
AIも試行錯誤するんだな…と親近感が湧きました。
そしてついに、JavaScriptでクリックイベントを制御し理想の動きを実現するコードをGeminiが提示してくれたとき、「本当に一緒に課題解決してくれる相棒だ」と実感しました。
AIと創る、未来の働き方
驚くべきことに、ここまでのサイト制作は通常のQA業務と並行しながら、わずか2〜3日で形にすることができました。
こうして完成したQAポータルサイトが、こちらです！
完成したQAポータル
このサイトができたことで、
- 情報探しがなくなり、チームメンバーが本来の業務に集中できるようになった
- 新メンバーのオンボーディングが格段にスムーズになった
- チーム外にもQAの活動を分かりやすく伝えられるようになった
といった、たくさんの嬉しい変化が生まれました。
もちろんGeminiが生成したコードをそのまま使うのではなく、その意図を理解して自分で微調整することも大切です。 でも、ゼロからコードを書く労力を考えれば、そのサポートは計り知れません。
今回の経験は、職種に関わらず誰もがアイデアを形にできる時代の到来を強く感じさせてくれました。 そして、このような挑戦を歓迎してくれるkickflowの文化、まさにバリューの一つである 「AI 1st」 を体現できたのかなと、少し誇らしい気持ちです。
AIは私たち非エンジニアにとって、クリエイティブな課題解決を助けてくれる最高の相棒になり得ます。 これからもAIの活用を通して、QA業務のさらなる効率化と品質向上に貢献していきたいと思います！
kickflowに少しでも興味を持ってくださった方は、ぜひ一度お話ししませんか？ 皆さんのエントリーを心よりお待ちしています！
