はじめに

こんにちは、人事担当の @suehiro_kenta です。
普段は採用や組織活性化、人事チームのマネジメントなどをしています。
プログラミング経験はゼロ、HTMLも「なんか＜＞で囲むやつ」くらいの認識です。

そんな私が、Geminiと壁打ちをしていたら、気づけば社内用Webアプリを開発してしまった……という、話をQiitaにて初めて記事にします。

「AIでコードが書ける」とは聞いていましたが、非エンジニアでも、要件さえ伝えればここまで動くものが作れるという実体験が、誰かの参考になれば幸いです。

きっかけは「締め会のスライド」

ことの発端は、今月の締め会で使用するスライド作成でした。
今年度のスローガンのロゴ画像や動画素材があったので、それをいい感じに使いたいなと思い、Geminiに相談しました。

「このクリエイティブを使って、締め会のスライドデザインを考えて」

最初はCanvasで動くスライド案が出てきたのですが、素材そのものを使用しておらず、テイストの似たものになっていたので、背景画像だけ書き出してと依頼。
ここまでは、あるあるな生成AIの使い方でした。

「これ、毎回頼むの面倒だな……」からのツール化

スライドに動画を埋め込みたかったのですが、Googleスライドは動画が重くなりがち。
そこで動画をGIFアニメに変換したいと思い、このように伝えました。

「動画ファイルをGIF化して」

するとGeminiは、動画ファイルがありませんといいながら、動画ファイルを読み込ませるだけでGIFになる、ブラウザだけで動く HTMLファイル を生成してくれました。
「え、変換だけしてくれたいいのに、コンバーターを作りました！？」
これが図らずしも人生初のツール爆誕の瞬間でした。

要望の爆発と、AIによる爆速実装

一度動くものができると、欲が出るのが人間の性。
他にも欲しい機能がどんどん浮かび、機能追加をしまくりました。

1. Slackスタンプ機能の実装

「動画の1部分だけ切り抜いて、Slackのスタンプにしたい！」
→ 「Slackの容量制限（128KB）が厳しすぎる問題」 が発生。
→ Geminiに相談すると、「ファイルサイズを計算して、オーバーしたら自動で画質を落とすロジック」や「128KB以下に圧縮するボタン」を実装してくれました。

2. 横長画像の分割機能

「横長のスローガンロゴを、Slackで並べて表示したい！」
→ 画像をアップロードすると、自動で3等分してZIPでダウンロードできる機能を追加。

3. 画像リサイズ機能

「SNSやバナー用に、画像をいい感じにリサイズしたい」
→ ただの切り抜きではなく、「余白を背景のぼかしで埋める」 機能まで実装。

こうして、単なるコンバーターだったHTMLファイルは、統合ツールへと進化していきました。

最大の壁：社内展開と「動かない」問題

「HTMLファイルを配布する」運用は手間だと思い、Google Apps Script (GAS) を使ってWebアプリとして社内公開することにしました。
しかし、ここでエンジニアあるある（ですか？）の壁にぶつかります。

「ローカル（自分のPC）では動くのに、Webアプリ（GAS）に上げると動かない！」

画面遷移しなかったり、スタイルが崩れたり。
何が原因かわからない私は、生成して試してフィードバックを繰り返すしかありません。
そしてAIが導き出した原因は、GASのセキュリティ仕様や、外部CDNの読み込みエラーでした。
ものの数分ですべて標準のCSSとJavaScriptだけで書き直した「完全自己完結版」 を生成してくれました。
結果、社内の厳しいネットワーク環境下でもサクサク動くWebアプリが完成しました。

完成したツール

最終的に出来上がったツールがこちらです。

Slackスタンプ作成
動画も画像もドラッグ一発で最適化。128KBの壁も自動回避。
動画GIF変換
画質や長さを自由に調整可能。
UI/UX
最初は機能が増えすぎて複雑になりましたが、「トップ画面で目的を選ぶ」シンプルなUIに戻しました。

学んだこと

「どう書くか」より「何がしたいか」:
コードは1行も書いていませんが、「こういう機能が欲しい」「ここは使いづらい」「エラーが出た（ログはこれ）」と伝え続けるだけで、アプリは作れました。
AIは「最強のペアプログラマー」:
私が「人事兼PM（プロダクトマネージャー）」で、Geminiが「超優秀なエンジニア」。この役割分担がハマると、開発速度は爆発的ですし、これから求められるスキルなのだと思いました。
エラーは怖くない:
「動かない」と言えば、AIが一緒に悩んで修正してくれます。エンジニアリングの知識がなくても、解決のプロセス自体を楽しむことができました。
基礎知識がないと、逆に遠回りになる:
ここが一番の気づきかもしれません。
AIは優秀ですが、完璧ではありません。修正しても、元々の機能がなくなったり、崩れたりもします。
エラーが出た時や複雑な修正が必要な時、基礎的なIT知識や技術的な勘所がないと、「何が起きているか」が理解できず、AIに見当違いな指示を出し続けて時間を浪費してしまいます。
「AIがあれば技術力はいらない」のではなく、 「技術力（基礎）がある人が使うと、鬼に金棒になる」 というのが真実だと感じました。
良いプロダクトを作るには、AIの成果物を評価し、正しく導く人間側の「目利き力」が不可欠です。

おわりに

非エンジニアの皆さん、「自分にはツールなんて作れない」と思っていませんか？
私も思っていましたが、一度経験してしまうとそのハードルは一気に取り除かれます。
「欲しい！」という情熱と、それを言語化する力さえあれば、魔法のようにアプリが作れる時代です。

皆さんもぜひ、身近な課題をGeminiにぶつけてみてください。
きっと、予想もしない解決策（コード）が返ってくるかもしれません。

おわりのおわりに

この記事は、件のGeminiのチャット内で、「Qiita用の記事にしてくれ」と頼んで生成したものを、加筆修正しました。
認識が異なる点や、脚色されたような内容もあったので、AIはまだまだ完璧ではないですね。
ただ、明らかに生産性もクオリティも上げることができるので、今後もAIを活用しながら楽しんでいければと思います。