はじめに
こんにちは、人事担当の @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を活用しながら楽しんでいければと思います。