製造業でDX推進を担当しているRickyです。
プログラミング経験はゼロ。基本はキントーンなどのノーコードツールで現場のIT化を進めていましたが、いつもある壁にぶつかっていました。
それは作業者の使い勝手の悪さです。
ノーコードツールは作り手側に便利な仕様になっている反面、使用者側には少し億劫になるUIとなりがちです。
この記事では、Geminiを使用したバイブコーディング（文字入力のみでAIがコーディングしてくれる）でキントーンのUI特に見た目部分について魔改造した実績についてお話します。
最後まで見ていただくことであなたの会社でも活用できるアイデアにつながるかもしれません。
ノーコードツールの限界に悩んでいた日々
かゆいところに手が届かないノーコード
キントーンをはじめとするノーコードツールは、確かに便利です。
プログラミング知識がなくても業務アプリが作れますし、導入のハードルも低い。
ただ実際に現場で運用していると、細かい動作をカスタマイズしたい場面が必ず出てきます。
「ここの挙動をもう少し変えたい」「この画面レイアウトを現場向けに調整したい」と思っても、ノーコードの枠組みの中では実現できないことが多々ありました。
結果として、現場のオペレーターから「使いづらい」という声が上がることも少なくなかったのです。
UIの自由度という大きな壁
特に苦労したのがUIの自由度です。
製造現場では、パッと見て直感的に操作できるデザインが求められます。
しかしノーコードツールはテンプレートに縛られるため、どうしても画一的な見た目になってしまう。
使用者（作業者）が直感的に操作できる。考えずともどう使えばいいかわかる。そんなアプリが作りたいと願っていました。
…かといって、プログラミングを一から学ぶ時間もない。DX担当として板挟み状態でした。
Geminiバイブコーディングとの出会い
そんな時に知ったのが、AIに指示しながらコードを生成してもらう「バイブコーディング」という手法でした。Geminiを使えば、プログラミング知識がなくてもアプリが作れると聞いて、半信半疑で試してみることにしたのです。
やりたいことを伝えるだけでコードが書ける
最初は本当に驚きました。
「こんな機能がほしい」「この画面にこういう要素を追加したい」と自然な日本語でGeminiに伝えるだけで、動くコードが返ってくるのです。
専門用語を知らなくても、やりたいことのイメージさえあれば形になっていく。
最初は小さな機能から試し、動作確認しながら少しずつ機能を追加していきました。
わからない部分はGeminiに質問すれば丁寧に解説してくれるので、学習しながら開発を進められる感覚でした。
小さな成功体験を積み重ねる
いきなり大きなアプリを作ろうとすると挫折しやすいので、まずは小さなツールから始めました。
ボタンひとつで動く簡単なものから試して、動いた時の感動を積み重ねる。
この小さな成功体験が、次のステップへの自信につながりました。
気がつくと、業務で実際に使える規模のアプリを作れるようになっていたのです。
実際に作った工場の掲示板アプリ
バイブコーディングで実際に開発したのが、工場の入口モニターに表示する掲示板アプリです。
この時は現場と管理者の情報統制に問題があると感じていました。そこで現場管理情報の見える化を目的に日常管理版を電子化しました。
3つの機能と洗練されたUI
実装した機能は以下の通りです。
- 出退勤情報の表示…誰が出勤中・不在かがひと目でわかります。
- 直近スケジュール…その日やその週の予定一覧を表示。
- 今期取り組み目標と進捗確認ガントチャート…目標に対する進捗を可視化。
そしてミニマルでおしゃれなUIにこだわり、工場でも映えるデザインに仕上げています。
ノーコードでは実現できなかった、自分のイメージ通りの見た目を作れたのは大きな収穫でした。
API連携もGeminiと二人三脚で実装
特にチャレンジングだったのがAPI連携です。
勤怠サービスのAPIを取得して掲示板と連携させ、社員の出勤・退勤データを自動取得する仕組みを組み込みました。
APIという言葉すら曖昧だった私が、リアルタイムで出勤状況を反映する機能を作れたのは、Geminiに仕様を解説してもらいながら実装できたからです。
わからない用語が出てきたら都度質問し、理解しながら進められるのがバイブコーディングの強みだと実感しました。
プログラミング未経験でも作れた理由
プログラミング経験ゼロの私がここまで作れたのは、Geminiの使い方にコツがあったからだと思います。特別なスキルは必要なく、誰でも実践できるアプローチです。
やりたいことを具体的に伝える力が重要
バイブコーディングで大事なのは、プログラミングスキルより「やりたいことを言語化する力」です。
製造業の現場で改善提案をする時と同じで、課題と目的を明確に伝えられれば、Geminiが最適な実装方法を提案してくれます。
「出勤中の社員を一覧表示したい」「ガントチャートで進捗を見せたい」という具体的なイメージさえあれば、それを形にする手段はAIが持っています。
DX担当として現場の課題を整理する経験が、そのまま開発に活きたのは意外な発見でした。
まとめ
プログラミング未経験だった私が、Geminiのバイブコーディングで工場の掲示板アプリを作れた経験は、DX担当としての可能性を大きく広げてくれました。
ノーコードツールでは越えられなかった壁も、AIと対話しながらコードを書くという新しいアプローチなら突破できます。
中小企業や製造業でDXを担当している方の中には、「プログラミングができないから」と諦めている方も多いはずです。
でも大丈夫。やりたいことを言葉にできれば、アプリは作れます。
まずは小さなツールから試してみてください。
現場の課題を一番理解しているあなたこそ、最高の開発者になれるはずです。
よくある質問
Q: バイブコーディングにプログラミング知識は必要ですか？
A: 完全未経験の私でも掲示板アプリを作れたので、知識は必須ではありません。やりたいことを言語化できれば、Geminiが実装方法を提案してくれます。
Q: 最初は何から作り始めるのがおすすめですか？
A: いきなり大きなアプリを目指さず、ボタンひとつで動く小さなツールから始めるのがおすすめです。小さな成功体験の積み重ねが自信につながります。
Q: API連携のような難しそうな実装もできますか？
A: 私も勤怠サービスとのAPI連携を実装できました。わからない用語や仕様はGeminiに質問しながら進められるので、学習と開発を同時に進められます。
Q: ノーコードツールとどう使い分ければいいですか？
A: 定型的な業務アプリはノーコード、UIや細かい挙動にこだわりたい用途はバイブコーディングという使い分けが現実的だと感じています。
コメント