現場の皆さんは普段、作業の手順や段取りを頭の中でパズルを組み替えるように、以下のようにシビアに考えているはずです。
「どうすればもっと手戻りなく、綺麗に仕上がるか」
「どうすれば次の工程の仲間が作業しやすくなるか」
その頭の中にある素晴らしい知恵や工夫（暗黙知）を、現場のみんなで共有し、チーム全体の武器に変えるための道具が今、目の前にすでにあるんです。それこそが「生成AIを使ったアプリ開発」＝バイブコーディングです。
これは決して、ITの勉強をオススメしたり、新しい業務を増やすためのものではありません。これまで皆さんがよかれと思って積み上げてきた現場のこだわりや環境をそのまま活かしながら、理不尽な事務作業の忙しさを削ぎ落とし、もっとスマートに、かっこよく仕事を回すための「現代的な工夫（裏技）」のひとつです。
しかもAIはもう、業務になくてはならない存在に近いうちになっていくはずです。
だから誰もがわけがわからない今のうちに、仲良くなっておこうって作戦ですよ。
つまり今回の記事を読めば、AIを活用したアプリ開発が、言葉のやりとりで進んでいくことがわかります。
机の上の論理だけでは分からない、うちの製造現場と最新技術が融合する瞬間のリアルなドラマが、あなたの現場でも起こるということを、今回の内容で体感していただきたいわけです。
それではぜひ今回も読み終えるまでのお時間、しばらくお付き合いくださいませ。
バイブコーディングを導入した「5S活動報告アプリ」の開発背景と目的
現場の知恵を形にするための新しい開発スタイル、それがAIと呼吸を合わせて進める「バイブコーディング」です。なぜ今回、私が最先端のAI技術を使って、5S＝整理・整頓・清掃・清潔・習慣（しつけ）の活動報告アプリを作ろうと考えたのか。その開発の裏側にあった、現場の切実な想いと目的についてお話ししようと思います。
そもそもバイブコーディングとはなにか？
「バイブコーディング」とは、プログラミングの専門知識を知っていなくくても、私たちが普段使っている言葉（日本語）を使ってAIに「こんな機能が欲しい」「ここをこう直して」と語りかけることで、まるで優秀な相棒（バディ）とノリ（バイブス）を合わせるように、アプリを組み上げていく現代的な開発手法のことです。
従来のシステム開発のように、分厚い仕様書を何ヶ月もかけて作り、専門の業者に高いお金を払って発注するのとは全く異なります。現場の「ここが不便なんだよな」「もっとこうなったらみんなが楽になるのに」という生の声を、まるでその場で治具を削り出すかのようなスピード感で画面や仕組みに変えていくことができる、現場直結のモノづくり手法です。
現場作業者の負担を減らすアプリの仕組みとは？
そして、今回そのバイブコーディングを使って開発を進めているのが「PWA（プログレッシブ・ウェブ・アプリ）」という仕組みです。
PWAとは、簡単に言えば「見た目や動きはスマホの専用アプリなのに、中身はホームページと同じブラウザで動く仕組み」のことです。皆さんがお使いのスマートフォンで、特定のウェブページを「ホーム画面に追加」したことはないでしょうか？アイコンをタップすると、ブラウザの余計な枠が出ずに、すっきりとした画面でサクサク動く。あれがPWAです。
製造業の現場でこのPWAを導入することには、次のような圧倒的な実利があります。
なぜPWAなのか？
通常のスマホアプリを開発しようとすると、App StoreやGoogle Playといったストアの厳しい審査を通す必要があり、公開までに多大な時間がかかります。しかしPWAであれば、ブラウザからアクセスして「ホーム画面に追加」するだけで、現場のスマホに一瞬で導入が完了します。この手軽さこそが、変化の激しい中小製造業の現場に必要とされる機能なのではないか、と考えた選択肢でした。
面倒な審査が一切不要で、すぐにみんなのスマホに配れる
通常のスマホアプリを導入しようとすると、App Storeなどの非常に厳しい審査を通す必要があり、コストも時間もかかります。PWAなら、社内のサーバーやクラウドにアップしたURLを共有し、ホーム画面に追加してもらうだけで、その日のうちに现场のみんなが使い始めることができます。
通信環境が不安定な現場でも、立ち上げがスムーズ
工場の奥まった場所や、電波の届きにくい遮蔽物の多いエリアでも、アプリの基本的な画面や枠組みがスマホ側に保持されているため、もたつかずに軽快に動作します。
画面の修正や機能の追加が、一瞬で全員に反映される
アプリを修正した際、現場のみんなに「アプリを更新（アップデート）してください」とお願いして回る必要はありません。こちらで仕組みを書き換えれば、次回みんながアプリを開いた瞬間に、自動で最新の使いやすい画面へと切り替わります。アプリの具体的な仕組みと、現場作業者を助けるためのこだわり機能は以下の通りです。
現場の暗黙知をシステムに組み込む「具体的な使い方」
では、この技術をどう現場に活かすのか。今回は、多くの職場で実施されている5S=整理・整頓・清掃・清潔・習慣（しつけ）の活動報告書作成を例に挙げてみましょう。
やり方は極めてシンプルです。作業者が現場で「問題を発見してスマホでカシャリと撮影」、改善した後に「もう一度カシャリと撮影」。あとは、スマホの画面からほんの数文字、気づいた点を入力するだけです。
これだけで、アプリの裏側では以下のような高度な処理が一瞬で走ります。
- 撮影日時の自動解析：写真データに含まれる情報（EXIFデータ）から、いつ撮影されたかを自動で読み取ります。
- 文字サイズの自動調整（フォールバック）：入力された文字数が多くても少なくても、枠線からはみ出さないように文字の大きさをシステムが自動で微調整します。
- 帳票の自動生成（Canvas描画）：ブラウザの機能を使って、A4横サイズの綺麗な「5S活動報告書」の画像データとしてその場で合成・出力します。
これまでのように、事務所に戻ってPCを立ち上げ、Excelのセルに写真を1枚ずつ貼り付け、枠線からはみ出さないように四苦八苦しながら文字サイズを直す……。そんな「職人の知恵とは関係のない理不尽な事務作業」の工数を、完全にゼロにすることができます。現場のみんなが普段頭の中でやっている「ここを直せば仲間が安全に動ける」という尊い気づきを、一切の手間なく、1秒で綺麗な書類に変えてチーム全体に広げる。それこそが、このツールの本質的な使い方なのです。
バイブコーディングで直面した4つの失敗と現実
道具というものは、どんなに優れたものであっても、使い始めには必ず「クセ」や「相性」があるものです。旋盤やマシニングセンタを新しく導入したときも、カタログスペック通りにはいかず、実際に削ってみて初めて「おっと、ここはこういう調整が必要か」と気づく泥臭い瞬間がありますよね。
AIを相棒にしたアプリ開発も、まさにそれと同じです。「言葉だけで一瞬でできる」という綺麗な言葉の裏には、実際に現場で働いた者にしか分からない4つのリアルな『地雷』がありました。
これからお話しする失敗談は、専門用語が少し混ざりますが、本質は私たちが現場で日々経験している「段取りのミス」や「治具のズレ」と全く同じです。私たちがどんな壁にぶつかり、どうやって乗り越えようとしているのか、休憩所で缶コーヒーでも飲みながら話を聞くような感覚で、ぜひ気楽に読んでみてください。
失敗1：パソコンの「方言」が引き起こす、看板（画像）の迷子エラー
現場で使う図面や指示書でも、寸法の表記ルールが統一されていないと、「ミリ単位だと思ったらインチだった」なんていう手戻りが起きますよね。これと全く同じことが、AIとパソコンの間でも起きました。
私たちが普段事務仕事で使っているWindowsのパソコンと、アプリをみんなに配るためのインターネット上のサーバー（Linuxという別のシステム）とでは、フォルダの区切り文字という「言葉の方言」が違います 。Windowsでは「assets\」と右下がりの斜め線（バックスラッシュ）で区切るのに対し、サーバー側では「assets/」と右上がりのスラッシュで区切るルールになっています 。
AIに「アプリを1つのファイル（ZIP形式）にまとめて」と指示したところ、AIは深く考えずにWindowsの方言（バックスラッシュ）のままファイルを詰め込んでしまいました 。その結果、サーバーに持っていったときにフォルダが正しく認識されず、アプリの顔である会社のロゴマークやアイコンが、すべて「404（見つかりません）」というエラーで消え去ってしまったのです 。
AIは「コードの書き方が正しいか」という図面上のチェックは得意ですが、こうした「持っていく環境による方言の違い」といった泥臭い仕様の差までは、人間が気配りしてあげないと見落としてしまう傾向があります 。
失敗2：脳が過去の記憶に引っ張られる？ブラウザの「思い込み」地獄
現場の作業でも、手順を新しく書き換えたのに、つい「いつもの慣れた手つき」で古いやり方のまま作業をやってしまうことってありますよね。実は、スマートフォンの画面（ブラウザ）も、まったく同じ「思い込み」をします。
AIに「ここを押しやすく直して」と指示し、AIも完璧にコードを修正したはずなのに、いざスマホの実機でテストをすると「全く直っていない」ように見える現象にぶつかりました 。
原因は、スマホ側が「前に入力したデータ（キャッシュ）」を強力に脳内に記憶していたため、新しい手順が届いているのに、古いアプリの動きをそのまま再生していたことでした 。
これを防ぐために、私たちは図面の版数を「第2版」「第3版」と更新するように、アプリの読み込みコードに app.js?v=138 のような「版数（クエリパラメータ）」を強制的に刻み込むルールを作りました 。そして、検証するときは必ず、過去の記憶を完全に消去して最新の手順を読み込ませる「ハードリロード（Ctrl+Shift+R）」を徹底するという、現場の運用ルールが不可欠になったのです 。
失敗3：工具箱の中に「使わない古い治具」がどんどん溜まる罠
腕の良い職人ほど、作業台の上や工具箱の中は常に整理整頓（5S）されていて、必要な道具が1秒で取り出せるようになっていますよね。逆に、使わなくなった古い治具や試作途中の部品がごちゃごちゃと残っていると、どれが本番用か分からなくなって誤組図の原因になります。
AIと何度もやり取りを重ねていると、まさにこの「工具箱が散らかる」状態が発生します。
複数のAIエージェントに交互に指示を出したり、追加の要望を重ねたりしていると、AIは気を利かせたつもりで、古いコードを綺麗に消して上書きするのではなく、ファイルの1番後ろのページに、新しい同名の機能をどんどん「継ぎ足す」という悪癖を持っています 。
気づけば、アプリの裏側には、名前は同じだけど中身が少しずつ違う古い機能（関数）が4重にも重複して蓄積し、どれが本物か分からない「死にコード」の山になっていました 。これが原因で、アプリ全体の動きがガタガタと不安定になってしまったのです 。
現場の5S活動と同じで、アプリ開発でも、専用の検査ツールを使って「使っていない無駄なコード（約12個の関数）」を整理し、中身を整頓する「リファクタリング（お掃除）期間」が絶対に必要だと痛感しました 。
失敗4：言葉のニュアンスが生んだ「現場に似合わない過剰装飾」の迷走
現場の改善活動で、「使いやすいように棚を作って」とだけ頼んだら、妙に派手な色の棚が出来上がってしまい、「いや、頑丈でシンプルならそれで良かったんだけどな……」と苦笑いした、なんて経験はありませんか？言葉のニュアンスというものは、具体的に伝えないと大きくズレてしまうものです。
アプリのデザインを決める際、AIに対して「クールで力強いデザインにして」と、少し抽象的な頼み方をしてしまいました 。するとAIは、私たちの町工場の雰囲気を完全に勘違いして、英字が飛び交い、金色のグラデーションがギラギラと輝く、まるで「表彰イベントの表彰状」のような、過剰で落ち着かない画面を出力してきたのです 。
私たちが求めていたのは、現場のみんなが毎日使っても目が疲れず、会社の誠実さや改善活動の泥臭さが真っ直ぐ伝わるような、実用本位のデザインでした。
最終的には、「白・濃紺・水色の3色を基調にする」「ボタンは角を丸めずカチッとした直線にする」といった、明確な配色ルールと情報の優先順位を人間がしっかりと言葉で制約し、コントロールすることで、ようやく現場に馴染む端正なデザインへと軌道修正することができました 。AIに任せっきりにするのではなく、「ガードレール」を敷くのはやっぱり人間の役割です 。
課題を打破したバイブコーディングの圧倒的なメリット
対象の5S活動報告アプリは、まだ開発途中の段階であり、来月の提案に向けてまさに今、急ピッチでデザインと機能のブラッシュアップを進めています。
5Sとは、整理・整頓・清掃・清潔・習慣（しつけ）の頭文字をとったものですが、この活動を「やらされる義務」にしないための仕組みを、私たちは今まさにバイブコーディング（AIペアコーディング）という現代的な工夫で形にしている最中です。様々な環境依存のエラーやデザインの迷走といった壁にぶつかりながらも、この開発手法がもたらす圧倒的なスピードと可能性は、私たちのモノづくりの現場を大きく変える確信に満ちています。来月の本番提案を前に、私たちが現在進行形で実感しているバイブコーディングの本質的なメリットと、現場主導の開発を成功させるための具体的な運用ルールについて紐解いていきましょう。
現場の声を即座に形にする高速プロトタイピング
私たちが支援しているある金属切削加工の現場（従業員22名）で、開発途中であるこの「5S活動報告アプリ」のテスト画面をスマホで見てもらいながら、現場のみんなと意見交換をしていたときのことです。現場のベテラン作業者であるDさんから、実際の作業環境を踏まえた、非常にリアルな本音をもらいました。
「西本さん、このアプリの狙いはすごくいいし便利そうだけどさ、現場で中心になって動く人の場合、コメントを入力する枠が小さくてタップしにくいんだよ。あと、デザインを急いで作っているからかもしれないけど、文字数が多くなったときに枠からはみ出していないか心配になるね」
従来のシステム開発であれば、こうした現場の生の声を一度持ち帰り、仕様書を書き直し、外注先に修正見積もりを依頼して……と、早くても数週間、費用も数万円単位で発生するのが当たり前でした。その間に現場の熱は冷めてしまい、「やっぱり使いにくいから、元の紙の報告書に戻そう」というリバウンドが起きてしまいます。しかし、言葉でAIとノリを合わせながら進めるバイブコーディングは違います。
私はその場でノートパソコンを開き、AIエージェントに対して、現場のみんなの目の前で次のように語りかけました。
「スマホ画面で入力しやすいよう、テキストエリアの余白（パディング）を2倍に広げて。さらに、入力文字数が上限を超えそうになったら、入力枠を赤い太枠で強調し、警告メッセージをリアルタイムで表示するよう見直ししてください」
AIは、わずか数秒で完璧な修正コードを書き上げました。その場でファイルを更新し、テストサーバーにアップロードして「Dさん、これでどうですか？」とスマホを手渡すと、画面の入力枠は押しやすく広がり、文字数オーバーの警告も分かりやすく赤枠で表示されるようになっていました。Dさんは「おお、もう直ったのか！これなら俺たちでも現場で迷わず使えるよ」と、ニヤリと笑ってくれたのです。
来月の提案に向けて時間がない中で、「作っては現場で見せ、意見をもらってその場で直す」という超高速のプロトタイピングサイクルを回せることこそが、バイブコーディング最大の強みです。
最初は完璧でなくていいんです。現場の人間が「自分たちの意見でアプリがどんどん使いやすくなっていく」という当事者意識を持つことで、誰かを責めるのではなく仲間を思いやる（利他の精神）が詰まった、本当に使われる仕組みを育てていけるわけです。これはすごい世界ですよね。
複雑なCanvas描画やデータ集計ロジックの自動生成
ものづくりの現場では、複雑な段取りや治具の組み合わせ、寸法の計算などを、ベテランさんが頭の中で瞬時に組み立てていますよね。それと同じように、アプリ開発の裏側でも「画面にどうやって綺麗に要素を収めるか」「データをどう集計するか」という、人間が手で書くと非常に骨の折れる計算処理が存在します。
今回の5S活動報告アプリでは、来月の提案時の目玉機能として、以下の2つの高度な仕組みをブラウザ完結で動かすために、AIの計算能力をフル活用しています。
Canvas（キャンバス）機能によるA4横サイズ（1600×1131px）の帳票自動生成
現場でスマホから撮影した「問題点の写真」と「改善後の写真」、そしてテキストや管理用のQRコードを、A4横サイズの決められた枠内に1ページできれいに収める処理です。文字数が多くなった場合に自動で文字サイズを縮小して枠内に収める「自動フォールバック機能」も含め、人間が1ピクセルずつ位置を計算してコードを書くのは大変な労力ですが、AIは全体のレイアウトバランスを考慮した描画ロジックを一瞬で組み立ててくれます。
各部門のリアルタイム目標達成率の自動算出とランキング化
単に報告書を作るだけでなく、現場のモチベーションを高めるしかけ作りとして、各部門の「在籍人数×目標件数」から今月の目標達成率を算出し、社内サイネージ（テレビ画面）用に自動でスライドショー表示するデータ集計ロジックを組んでいます。
こうした「職人の知恵や工夫（暗黙知）」をシステムに組み込むための複雑な計算・描画処理を、AIがバックアップしてくれるからこそ、私たちは「現場のみんながどうすればもっと動きやすくなるか」という、一番大切なUI/UXデザインの検討に時間と情熱を集中させることができるのです。
【チェックリスト】バイブコーディングで守るべき運用ルール
来月の提案に向けて、限られた時間の中で超高速開発を安全に完遂するためには、AIの暴走を抑え、人間の手でしっかりと「仕様のガードレール」を敷くための運用ルールが不可欠です。私たちは現在、以下のチェックリストを徹底して開発を進めています。
- [ ] コードの末尾追加を禁止する
修正を指示する際は、必ず既存の関数を綺麗に上書き、または置換してファイルを整理整頓するようAIに明確に指定する。 - [ ] キャッシュパラメータを必ず更新する
実機テストで「直っていない」という思い込みを防ぐため、スクリプトの参照元（index.htmlなど）の版数（?v=XXX）を必ずインクリメントし、ハードリロードを徹底する。 - [ ] パス区切りはスラッシュに統一する
Windows環境とデプロイ先（Netlifyなど）のサーバー環境の「方言の違い」による画像404エラーを防ぐため、アセット参照やZIP圧縮時はassets/の形式を徹底させる。 - [ ] 静的検証を自動化する
AIが書き換えたコードに初歩的な構文エラーがないか、本番環境にデプロイする前にnode --checkや構文チェッカーを必ず噛ませてテストする。 - [ ] デザインは「言葉」で制約する
抽象的な指示で過剰装飾に迷走するのを防ぐため、「使用する色は白・濃紺・水色の3色以内」「カードは直線的な角型」など、具体的かつ端正な制約を人間が与える。
AIとの共同開発を成功させ、社内定着させるためのプロが教えるポイント
AIを相棒に迎えたバイブコーディング（AIペアコーディング）は、現場の知恵を1秒で形にする圧倒的なスピードを持っています。しかし、このアプリが本当に現場に溶け込み、みんなが「これが欲しかったんだよ」と毎日使い続けてくれるようになるためには、単にコードを早く書くだけでは不十分です。
道具に命を吹き込み、職場の標準として定着させるためには、人間側にしかできない大切な役割があります。それは、AIの暴走を防ぐ安全装置となり、現場の空気感を仕組みに翻訳してあげることです。来月の本番提案に向けて、私たちが今まさに実践している、AIとの共同開発を大成功に導くための3つの核心的なポイントを解説します。
ポイント1：人間は「仕様のガードレール」と「文脈の記録」に徹する
AIは、指示を出せば信じられないほどの猛スピードでコードを書き上げてくれます。しかし、彼らは「言われた通りの作業」は得意でも、「なぜその修正が必要になったのか」という現場の背景や、みんながどんな表情でその意見を言ったのかという「文脈（コンテキスト）」を覚えることができません。
例えば、現場でのテスト中に「横展開候補というボタンの文字だと、次に何をすればいいか分かりづらくてみんなが迷ってしまうな」という気づきがあったとします。人間なら「現場が混乱しないように、直感的に伝わる『高評価改善』という言葉に変えよう」と判断の背景まで理解しますが、AIはただ言われた文言の置換作業としてしか処理しません。
そのため、私たち人間の役割は、開発の歴史を記した交換日記のようなもの（CHANGELOG.md という開発ログファイル）をしっかりと手元に残し、文脈の記録係になることです。
- 「〇月〇日：『横展開候補』という指標は現場が混乱するため、現場の納得感を重視して『高評価改善』に文言置換」
- 「〇月〇日：油の手袋でも押しやすいよう、Dさんの意見をもとにパディングを2倍に変更」
このように、単なる変更点だけでなく「現場の反応」や「判断の理由」を人間が強固に記録し、AIに次の指示を出す際の「ガードレール」として提示し続けること。これこそが、開発が迷走せず、現場の心に寄り添ったアプリへと仕上がる最大の秘訣です。
ポイント2：データの整合性はサーバー側で担保する設計にする
バイブコーディングを進めていると、スマートフォンの画面（フロントエンド）が目の前でみるみる変わっていくため、そのスピード感に思わず心が躍ります。しかし、ここで目に見える使いやすさだけに気を取られてしまうと、将来的に大きな手戻りが発生する原因になります。
アプリにとって最も大切なのは、みんなが入力してくれた大切なデータが、絶対に消えたりごちゃ混ぜになったりしない「安全な保管庫」を作ることです。例えば、会社ごとに重複しない連番を自動で割り振る「採番システム」や、撮影した写真の安全な保存（Storage）、そして関係者以外がデータを勝手に書き換えられないようにするアクセス権限（RLS）といった、セキュリティのコア部分がこれに当たります。
画面の見た目はAIの手を借りて超高速でブラッシュアップしつつも、こうしたデータの整合性を守る土台の部分は、最初から「Supabase」などの信頼できるサーバー側で一元管理・検証する設計（バックエンドの設計図）を、人間の手でしっかりと描いておく必要があります。表面のスピード感に騙されず、見えない骨組みを頑丈に作ること。これこそが、本番運用に耐えうるプロの設計思想です。
ポイント3：一人で進めさせずチーム全員で使いながら進める
どんなに素晴らしい治具や工具でも、設計者が部屋に閉じこもって一人で作り上げたものは、現場に持っていったときに「使いにくい」と一蹴されてしまいがちですよね。アプリ開発も全く同じです。開発担当者がパソコンとにらめっこして一人で作り込んだシステムは、現場の感覚と必ずズレが生じます。
だからこそ、私たちは来月の提案を控えた今この瞬間も、不完全な開発途中の状態のままで、チーム全員で実際に触り、使いながら開発を進めています。
朝礼のあとのちょっとした時間や、作業の合間に「今、ここまでできたんだけど、ちょっと触ってみてよ」と若い子たちやベテランさんにスマホを渡してみるのです。すると、「ここの文字、もう少し大きい方が見やすいな」「このボタン、作業の流れからすると右側にある方が押しやすい」といった、使ってみて初めて溢れ出る「宝物のような意見」が次々と集まります。
一人で抱え込まず、みんなを巻き込んで「一緒に作っているんだ」という空気感を作ること。それによって、現場のみんなの中に「自分たちの意見でこの道具がどんどん使いやすくなっていく」という強い当事者意識が芽生えます。この「利他の精神」を中心としたチーム全員でのアプローチこそが、提案後の社内定着率を爆発的に高める、最も強力なしかけになるのです。
よくある質問（FAQ：バイブコーディングとアプリ開発）
私たちは今、来月の本番提案に向けて、現場の知恵を形にするための最終調整を急ピッチで進めています。テスト運用を通じて、現場の仲間や中心になって動く人たちから、非常に鋭く、かつ本質的な質問をいくつもいただきました。
新しい道具を導入するとき、誰もが最初は不安や疑問を抱くものです。それは、より良い職場づくりに対して真剣に向き合っているからこその、職人としての誠実な反応だと言えます。ここでは、これまでに寄せられた代表的な質問とその回答を共有します。専門的な用語を現場の言葉に噛み砕きながら、私たちが目指す「これからのモノづくりの形」について、一緒に考えていきましょう。
Q1. プログラミング未経験者でもAIを使えばこのレベルのアプリを作れますか？
A1. 結論から言うと、大まかな試作品（プロトタイプ）は言葉だけで作れます。ただし、本番運用で直面する細かな仕様の壁や環境依存のエラーを乗り越えるには、最低限のWeb知識があることで、開発スピードと解決力が10倍以上に跳ね上がります。
バイブコーディング（AIペアコーディング）の最大の強みは、私たちが普段使っている日本語で指示を出すだけで、AIが数秒で形にしてくれる点にあります。そのため、「こんな画面が欲しい」「こういう入力枠を作って」というアイデアを形にするだけであれば、未経験の方でも驚くほどのスピードで進めることが可能です。
しかし、前述した「WindowsとLinuxのパス区切りの違いによる画像404エラー」や「ブラウザのキャッシュ問題」といった、システム同士が連携する際に起きる泥臭いエラーにぶつかったとき、AIだけに頼り切っていると「どこが原因でバグが起きているのか」の判断で迷走してしまうことがあります。
- 「何が起きているか」を推測する力 画面の見た目を作るHTML/CSS、そして動的な処理を行うJavaScriptの基礎的な仕組み（例えば、フォルダの参照ルールや、データの読み込みの仕組みなど）を少しだけでも知っていると、「あ、これはサーバーの方言の違いだな」とアタリをつけることができます。
- AIへの的確な指示（プロンプト）の出し方 原因の予測が立てば、AIに対して「パスをスラッシュに統一して」「キャッシュパラメータを更新するコードを追加して」と、ピンポイントで的確な修正指示を出せるようになります。
治具の設計でも、機械の構造を全く知らない人と、基礎的な図面の読み方を知っている人とでは、修正の段取りに大きな差が出ますよね。それと同じで、ほんの少しのWebの基礎知識という「共通言語」を持つことで、AIはあなたにとって、より手戻りのない、完璧な相棒（バディ）へと進化してくれるのです。
Q2. 開発した5Sアプリはオフライン環境の多い工場でも使えますか？
A2. PWA（プログレッシブ・ウェブ・アプリ）として設計しているため、電波の届きにくい現場でも、アプリの立ち上げやデータの入力枠を維持することは十分に可能です。ただし、データの完全な保存やチーム全体への共有をリアルタイムで行うためには、工場内のWi-Fi環境の整備とセットでの導入を強く推奨します。
工場の奥まった場所や、厚い鉄扉に囲まれたエリア、大型機械の電磁波の影響を受ける場所など、製造現場における通信環境の厳しさは、私もこれまで多くの現場で目の当たりにしてきました。
今回のアプリが「PWA」という仕組みを採用している大きな理由が、まさにここにあります。PWAは、一般的なホームページとは異なり、アプリを動かすための基本的な画面構成や入力の枠組み（プログラム）を、あらかじめスマートフォンの内部にしっかりと保持（キャッシュ）しておくことができます。そのため、電波の届きにくい現場であっても、アプリがもたつかずにサッと立ち上がり、その場で写真を撮影したり、コメントを入力したりする操作自体はストレスなく行えるよう設計されています。
ただし、現場で入力された大切な情報を、以下のようにチーム全体の武器として活かすためには、最終的にインターネットを介した通信が必要になります。
- 報告書の確定保存とサーバー連携：入力されたデータを「安全な保管庫」に送り、二度と消えないように保存する処理。
- TV掲示モードのリアルタイム更新：社内のモニターやサイネージへ、今月の達成率や各部門のランキングを自動で反映・スライドショー表示させる処理。
どれだけ優れた道具であっても、動かすためのインフラ（基盤）が整っていなければ、その実力を100%発揮することはできません。現場の理不尽な忙しさを解消し、みんなが安全で快適に動ける環境を作るためにも、このアプリの提案をきっかけとして、工場内の必要なエリアへのWi-Fi環境の整備をセットで進めていくことが、職場全体の生産性を底上げするための最も確実なアプローチになります。
Q3. 将来的にAIに評価や添削までを自動でやらせることは可能ですか？
A3. 技術的には、AIに5項目の点数を自動判定させたり、コメントの添削をさせたりすることは十分可能です。しかし、私たちはあえて、AIを「下書きの提案」に留め、最終的な確認と確定は必ず「人間」が行う主導権を持ったUI（画面設計）にすべきだと考えています。
現在の生成AIの進歩は凄まじく、アップロードされた報告書の写真や入力された文字数、内容の具体性を解析して、「成果：4点、独自性：3点……」といった5項目（成果、独自性、難易度、清潔、習慣）の自動評価を算出したり、中心になって動く人が入力する「リーダーコメント」の複数案を瞬時に生成したりする機能は、技術的には今すぐにでも実装できます。
来月の提案に向けた将来の拡張機能（ロードマップ）の中にも、こうしたAIによるサポート機能はしっかりと盛り込んでいます。しかし、ここで最も大切なのは、現場の仲間たちの「納得感」と、お互いを思いやる「利他の精神」です。
もし、毎日現場で汗を流し、工夫を重ねて提出した5S報告書が、AIによって機械的に「あなたの改善は2点です」と一瞬で査定されたら、現場のみんなはどう思うでしょうか。「ロボットに俺たちの仕事の何が分かるんだ」と、職人としてのプライドが傷つき、活動そのものに対する熱が冷めてしまうのではないでしょうか。
システムを長続きさせ、職場に定着させるためのしかけ作りとして、私たちは以下のルールを徹底します。
- AIは裏方に徹する
AIはあくまで「これまでの傾向からすると、このような評価点数やコメントの候補がいかがでしょうか？」と、中心になって動く人に対して静かに『下書き』を提案する役割に留めます。 - 人間が主役となり、命を吹き込む
中心になって動く人が、AIの提案を参考にしながら、「今回の改善は、次の工程の〇〇君がすごく作業しやすくなったと言っていたな」「この泥臭い工夫こそがうちの強みだ」と、現場の空気感や仲間の頑張りを加味して、最終的な点数や温かみのあるコメントを確定させます。
人間が確認し、納得して初めて報告書へと反映される「人間主導のUI」にすること。この一歩を踏み外さないからこそ、現場のみんなは「自分たちの努力をしっかりと仲間が見てくれている」という安心感を持つことができ、結果としてリバウンドのない、本当に強い現場が育っていくことになります。
まとめ：バイブコーディングでの4つの失敗と留意点
AIという新しい道具は、現場の知恵を一瞬で形にしてくれる強力な武器です。しかし、どんなに優れた最新鋭の加工機であっても、導入したその日からカタログスペック通りに完璧に動くことはありません。実際に材料を削ってみて、初めてその機械の「クセ」や「相性」が分かるのと同じですね。
今回、私たちがアプリの開発で直面した4つの失敗は、以下の通りでした。
- パソコンの「方言」によるエラー：手元のパソコンとサーバーでのパス区切りの違いが引き起こした画像の迷子（404エラー）。
- ブラウザの強い「思い込み」：古いデータ（キャッシュ）が残り、最新の手順がスマホに反映されない現象。
- 工具箱の「散らかり」：AIが古いコードを消さずに継ぎ足すことで発生した、無駄な機能（死にコード）の蓄積と動作不良。
- 言葉の「ニュアンス」のズレ：抽象的な指示によって生まれた、現場の空気に合わない過剰に派手なデザイン。
かつて私がブラウン管の製造現場にいた頃、ほんの少しのガラスの歪みや、ミクロン単位の真空引き（排気）の甘さが、「爆縮」という取り返しのつかない大事故に直結するシビアな世界を目の当たりにしてきました。その極限の連係プレーが求められる現場で学んだのは、トラブルが起きた時に「誰が悪い」と犯人を責めるのではなく、「仕組みのどこに欠陥があったのか」を全員で考え抜くことの重要性です。
AIとのアプリ開発におけるエラーも全く同じです。バグやデザインの迷走が起きたなら、それは「仕組みをさらに使いやすくするチャンス」と捉えることができます。
大切なのは、人間がしっかりと「仕様のガードレール」となり、現場の空気感や「なぜここを直したのか」という理由や考え方を、AIの代わりに覚え続けることです。AIはあくまで私たちの能力を広げる「拡張機能」であり、主役は毎日現場で工夫を重ねている仲間たちです。
「ここを直せば、次の工程のみんながもっと動きやすくなるんじゃないか」。そんな「利他の精神」と、「Let’s think（考える現場）」のスタンスが組み合わさったとき、このバイブコーディングという現代の工夫は、私たちの職場を劇的にスマートに変えてくれます。理不尽な事務作業はツールに任せ、私たちはものづくりのプロとしての誇りと知恵の共有に、その情熱を注いでいきましょう。
