「せっかくお金をかけて作ったのに、使いにくくて誰も使わない」
こんなシステム開発の失敗、あなたの周囲でも聞いたことはありませんか？
製造業でDX推進を任されると、既存の業務をシステム化するために外部のシステム開発会社と一緒に仕事をする場面が必ず出てきます。
でも正直なところ、こんな悩みを抱えていませんか。
- 自分たちが何をしたいか、どんな画面が使いやすいかをうまく説明できない
- 「あとはよろしく」と外注任せにして、出来上がってから「なんか違う…」となるのが怖い
- システム開発の担当者と話しても、イメージが噛み合っている気がしない
私もまったく同じ経験をしました。
文章や言葉でいくら説明しても、相手が頭の中でイメージしていることと、自分がイメージしていることがズレている。気づいたときには開発がかなり進んでいた、なんてことになりがちです。
この記事では、そのズレを開発前に解消するための手段として、Google Stitchというツールを紹介します。
デザインの知識がなくても、自然言語（普通の言葉）で画面イメージを作れるので、システム開発会社との打ち合わせで「共通の画面」を見ながら話し合うことができます。
実際に私が在庫管理システムのUIを作ってみましたので、その検証結果も合わせて紹介します。
製造業の現場が「使いやすい」と感じるUI設計の3条件
まず前提として、「使いやすいシステム」とはどういうものか、整理しておきます。
システム開発会社に任せると、機能面では問題なくても、現場の人が実際に使いたいと思える画面になっていないことが多いです。
使いやすいシステムには、主に3つのポイントがあります。
① 現場が迷わず操作できる画面設計
ボタンのサイズ、配置、色の使い方。
工場の現場では、パソコン操作に慣れていない方も多いです。軍手をしたまま操作するケースや、離れた場所から画面を確認するケースもあります。
そうした環境では、ボタンが小さかったり、文字が細かすぎたりするだけで操作ミスが起きます。
UIデザインの世界では「タッチターゲットは最低48dp以上」という基準がありますが、これは製造現場のシステムでは特に重要な考え方です。
② 初めて見た人でも使い方がわかる直観性
「このボタンを押せば何が起きるか」が瞬時にわかること。
新人が入ってきたとき、説明しなくても自然に使えるシステムは、研修コストを大幅に下げます。逆にマニュアルがないと操作できないシステムは、担当者が変わるたびに業務が止まるリスクを抱えます。
多機能だけど複雑で使い方を覚えるのが大変なツールは、製造現場で忙しい人たちにとって「使いにくいツール」になります。大きな画面レイアウト、シンプルな設計で直観的に分かるシステムであることが重要です。
学習コストの低さは、導入後の定着率に直結します。
③ 欲しい情報にすぐアクセスできる
「在庫が少ない品目はどれか」を確認したいとき、3クリック以内でたどり着けるかどうか。
情報が深い階層に埋まっていたり、検索しないと出てこないような設計では、現場担当者は結局「紙の方が早い」という結論になります。
ダッシュボードや一覧画面の設計は、何の情報を一番目立たせるかという優先順位の話です。これは現場の実務を知っている人間にしかわかりません。
製造業のシステム外注が失敗する4つの根本原因
「使いやすいシステムの3条件」はわかっても、実現はそう簡単ではありません。
理由は、製造業側とシステム開発側の間にある、深い溝にあります。
製造業側の問題①：システムで何ができるか分からない
DX推進担当者でも、「システムで何が実現できるか」をすべて把握している人は多くありません。
「こういうことをしたい」というニーズはあっても、それをシステムで実現するときにどんな選択肢があるのか、どんな画面になるのかが想像できない。
だから、「とりあえず今の紙の帳票をそのままシステムにしてください」というあいまいな指示になりがちです。
製造業側の問題②：頭の中のイメージを言葉で伝えられない
「操作しやすい画面にしてほしい」
「直感的でわかりやすいデザインがいいです」
これは要望として正しいですが、システム開発側からすると「具体的にどんな画面が欲しいか」が全く伝わっていません。
言葉だけで画面のイメージを共有しようとすることには、そもそも無理があります。
システム開発側の問題①：製造業の現場が見えない
システム開発者は、製造業の現場を知らないことがほとんどです。
「在庫管理」と言われても、どんな人が・どんな状況で・何を確認したいのかが分からない。
工場の現場では、パソコンより機械を触る時間の方が長い。スマートフォンやタブレットの操作に慣れていない方もいる。こうした前提がなければ、「使いやすいシステム」の定義自体がズレてしまいます。
システム開発側の問題②：「使いやすさ」の基準が違う
システム開発者が使いやすいと感じるUIと、製造現場の人が使いやすいと感じるUIは、根本的に異なります。
開発者はPC画面の操作に慣れていて、小さなボタンや複数のメニュー構造も苦になりません。でも現場では、シンプルで大きく、迷わないことが最優先です。
この「使いやすさの基準のズレ」は、開発が完了するまで表面化しないことが多い。だから完成後に「こんな画面イメージじゃなかった」となるわけです。
要件定義より前に「画面のイメージ合わせ」が必要な理由
システム開発では「要件定義」という工程があります。何を作るかをドキュメントで固める作業です。
製造業で言えば図面やQC工程表といったものに似ています。
ただ、要件定義の前の段階で「どんな画面になるか」のイメージを共有できていないと、要件定義書を作っても認識がズレたまま先に進みます。
こうしたすれ違いを解消する方法は一つです。
お互いが同じ画面を見ながら、意見を出し合うこと。
「このボタンはもっと大きい方がいいですか？」
「この情報は一覧で見えた方がいいですか？それとも別画面でいいですか？」
「アラートはこの色と大きさで分かりますか？」
こういった会話を、実際の画面イメージを前に行えると、認識のズレが格段に少なくなります。
問題は、その「共通の画面」を誰が・どうやって作るか、でした。
あわせて読みたい
UIのすれ違い以外にも、製造業DXには「目的のズレ」「現場の負担感」「担当者の孤立」など、構造的なすれ違いがあります。
Google Stitch（グーグルスティッチ）とは？バイブデザインでUIを自動生成するAIツール
そこで紹介したいのが、Google Stitch（グーグル スティッチ）です。
Google Stitch
URL: https://stitch.withgoogle.com/
Google Labsが提供するAIネイティブのUIデザインツール。無料で使える（Google Labs実験版）。
2026年3月にGoogleが正式に発表したツールで、「バイブデザイン（Vibe Design）」という考え方を実装しています。
バイブデザインとは
従来のデザインツールは、Figmaのような専門ツールを使いこなす知識が必要でした。
Google Stitchは違います。
「在庫管理システムのダッシュボード画面を作って。製造業の現場向けで、在庫数が少ないアイテムを一目で確認できる画面にしてほしい」
こう日本語で入力するだけで、AIが高品質なUI画面を自動生成してくれます。
デザインの知識がなくても、頭の中にあるイメージを言葉にするだけでOK。これがバイブデザインの考え方です。
Google Stitchの主な特徴
① 自然言語でUIを生成
テキストを入力するだけで、本格的な画面デザインが生成されます。Gemini（GeminiモデルのAI）が動いていて、要求に応じて複数のデザイン案を提示してくれます。
② 画面同士を繋げてプロトタイプに
複数の画面を作ったら、それを繋げてプロトタイプ（実際に操作できる動くモックアップ）にできます。打ち合わせでそのまま動かして見せられるので、現場の使いやすいUI（ユーザーインターフェース：見た目）をシステム業者にもより伝わりやすくなります。
③ コードとして書き出せる
出来上がったデザインはHTMLコードとして書き出すことができます。実際の開発に使えるレベルのコードが出力されるので、システム開発会社との共有素材になります。
④ 音声でデザインを指示できる
「このボタンをもっと大きくして」「色をもっと濃くして」と話しかけるだけで、リアルタイムに画面が修正されます。
⑤ 完全無料（Google Labs実験版）
執筆時点（26年3月）では制限なく無料で使えます。料金形態については変更される可能性もありますので、導入前にご確認ください。
なぜこれがシステム開発のコミュニケーションに役立つか
システム開発会社との打ち合わせ前に、Google Stitchで作ったラフ画面を持ち込むことができます。
「大体こういうイメージで作りたいんですが、どうでしょう？」
「この部分は別の画面に分けた方がいいですか？」
「このボタンの位置は変えられますか？」
共通の画面を見ながら話すことで、言葉だけのやり取りよりも格段に具体的な議論ができます。
開発が始まる前にイメージを固められるので、完成後の「なんか違う」を大幅に減らせます。
Google Stitchで在庫管理システムのUIを作ってみた【プロトタイプ作成レビュー】
「言葉で説明するより見た方が早い」ということで、私が実際にGoogle Stitchで在庫管理システムのUIを作ってみました。
作成した画面の概要
製造業でよくある在庫管理システムを想定して、主に以下の画面を作成しました。
Google Stitchiで作成した在庫管理アプリのUI画面
作成した画面は以下の6つです。
- ホーム画面
- ダッシュボード（全体の在庫状況を一目で確認）
- 在庫不足アラート画面（安全在庫を下回った品目のリスト）
- 出荷リスト画面
- 入庫登録画面
- 出庫登録画面
①ホーム画面
アプリ起動時の画面で、ホーム画面からすぐに全情報へアクセスできるようにしています。
ホーム画面に本日の出荷数と、在庫アラートが出るようにしているため、在庫不足を事前に防ぎやすくしています。
② ダッシュボード画面
全体の在庫状況をひと目で把握できるダッシュボードです。
上部に「総SKU数」「在庫総量」「要注意品目数」などの主要指標がカード形式で並び、どれがどんな状況かが一目でわかります。
「物量（個数）」と「金額（評価額）」をボタン一つで切り替えられる設計になっています。
上部ナビゲーションには「Home | In-Out | Dashboard | Shipping」の4カテゴリが並んでいて、業務の流れに沿ったメニュー構成になっています。
③ 在庫不足アラート画面
安全在庫を下回った品目が、警告カードとして一覧表示される画面です。
カードの左端にオレンジ色のストライプが入り、視覚的にすぐ「危ない品目」とわかります。
例えば「精密スチールベアリング（8mm）」のカードには、現在の在庫数「12個」と必要数「150個」が大きく表示され、「安全在庫を92%下回っています」というアラートが出ています。
現場担当者が「今日、何を発注しなければいけないか」を素早く確認できる設計です。
④ 出荷スケジュール
出荷予定の品目リストや、倉庫間の移動を管理する画面です。
注文状況から連動して、本日何を出荷すればいいのかを一目でわかる画面をイメージしています。右上の日付を変えることで、明日明後日や翌週の出荷リストに切り替わり出荷計画が立てやすくなります。
⑤ 入出庫登録画面
実際に商品を受け入れたり、出荷したりするときの入力画面です。入出庫管理画面は1つの画面で、上部のタブを切り替えることで入庫画面、出庫画面を切り替えられるようにしています。
入力項目を大きく配置し、現場での入力ミスが起きにくい設計を意識しました。
プロトタイプの作成
先ほど作成した画面を選択して、プロトタイプを作成（右上の再生マーク）をクリックすると実際に動かせるデモ画面が出来上がります。
デモ画面ではスマホ、タブレット、PCの異なるデバイスでのレイアウトをチェックしたり、ボタンを押すとその画面にリンクするように出来ます。
実際に使ってみた感想
正直、ここまでのクオリティが出るとは思っていませんでした。
デザインの専門知識はまったくない私が、日本語でイメージを入力しただけで、これだけ完成度の高い画面が生成されました。
製造業の業務に合わせた色使い（ネイビーとブルーを基調とした落ち着いたトーン）、ボタンの大きさ、情報の優先順位。どれも自分でゼロから考えると時間がかかることばかりです。
「もっとボタンを大きくして」「この情報はカード形式で並べて」といった追加指示を入れると、すぐに反映してくれます。
2～3回修正しましたが、修正指示もAIにチャットで指示するだけなので、10分くらいでこのレイアウト、プロトタイプが完成しました。
UIが固まったら、実際のツールと比較してみる
今回は在庫管理を例にUIを作りましたが、「このくらいのUIで使えるなら、既製のSaaSツールで十分かもしれない」と気づくこともあります。
イメージが固まったタイミングで、既存の在庫管理SaaSと並べて比較してみるのも一つの判断材料になります。
- zaico（バーコードで入出庫管理。月額3,980円〜、18万社以上の導入実績）→ 詳細レビュー記事はこちら
自社開発 vs 既製SaaS の判断軸も含め、製造業向けのDXツールを8つまとめた比較記事もあります。UIのイメージが固まってからだと、ツール選びの軸が明確になって比較しやすくなります。
製造業DX担当者がGoogle Stitchを使う5つのメリット
改めて、DX推進担当者がGoogle Stitchを使うメリットをまとめます。
① 開発後の「こんなはずじゃなかった」を防げる
最大のメリットはここです。
開発が完了してから「画面が使いにくい」「思っていたのと違う」と気づいても、大幅な修正には追加コストと時間がかかります。
開発前にUIのラフ案を作り、システム開発会社と一緒に見ながら意見交換することで、認識のズレを事前に潰せます。
② デザインの知識がゼロでも使える
Figmaなどの専門ツールを覚える必要はありません。
日本語でやりたいことを入力するだけで、本格的な画面が生成されます。DX推進担当者が自分でUIイメージを作れるようになる、というのが大きな変化です。
③ 無料で使える
Google Labsの実験版として現在は無料で提供されています。ツール導入のコストをかけずに試せるのは、予算が限られた中小製造業にとってもありがたいポイントです。
④ システム開発会社との共通言語になる
「操作しやすい画面にしてほしい」という曖昧な言葉の代わりに、実際の画面イメージを共有できます。
「このボタンの大きさで」「この色で」「この情報配置で」という具体的な会話ができるようになります。画面を見ながら話すと、1時間の打ち合わせで伝わる情報量がまったく変わります。
⑤ 現場のリアルを画面に反映できる
実際に業務をしている担当者が、頭の中にある「こんな画面があれば使いやすいのに」というイメージを形にできます。
システム開発へ進む前にプロトタイプをいくつか作っておいて、現場の人にプロトタイプの操作で気になる意見をもらうことも出来ます。
システム開発会社は製造業の現場を知りません。だからこそ、現場を知っている側がUIのイメージを先に作っておくことに意味があります。
よくある質問
Q. Google Stitchは日本語で使えますか？
A. はい、日本語でのプロンプト入力に対応しています。「在庫管理のダッシュボード画面を作って」と入力すれば、日本語の指示を理解してUIを生成してくれます。ただし、ツールのUI自体は英語表示が中心です。
Q. FigmaなどのデザインツールとGoogle Stitchは何が違いますか？
A. FigmaはUIを手動でパーツを組み合わせて作るツールです。デザインの専門知識が前提になります。Google Stitchはテキストや音声で「作りたい画面のイメージ」を入力するだけでAIが自動生成します。製造業のDX推進担当者のように「デザインのプロではないがUIのイメージを固めたい」という方に向いています。
Q. デザインや開発の知識がなくても使えますか？
A. 使えます。プログラミングやデザインの知識は不要です。日本語でやりたいことを入力するだけで操作できます。むしろ「自分の現場の業務を一番知っている人」が使うことで、現場感のある画面が生まれるのがGoogle Stitchの強みです。
Q. 無料でいつまで使えますか？
A. 現時点（2026年3月）ではGoogle Labsの実験版として制限なく無料で使えます。ただし実験版のため、今後の提供形態が変わる可能性はあります。今のうちに使ってみることをおすすめします。
まとめ：開発を発注する前に、画面イメージを作っておく
製造業のシステム開発がうまくいかない本質的な理由は、「製造業側が何を作りたいか」と「システム開発側が何を作るか」の間にあるイメージのズレです。
このズレを埋めるために、お互いが共通の画面を見ながら話し合う。その最初のたたき台を、Google Stitchなら無料でかつデザイン知識なしで作れます。
「外注したら使いにくいシステムになった」という後悔を避けるために、まず試してみてください。
難しいことは何もありません。「在庫管理のダッシュボード画面を作って。製造業の現場向けで、在庫不足の品目がすぐわかるようにしてほしい」と日本語で入力するだけです。
Google Stitchはこちらから無料で使えます → https://stitch.withgoogle.com/
UIが決まったら、次はツール選びへ
画面イメージが固まって、「このシステムを実際に導入する」となったとき、次に考えるのは実際のシステム開発です。
自社開発する場合はシステム会社との連携になりますが、機能要件によっては既製のSaaSで対応できるケースも多くあります。製造業向けのDXツールをまとめた記事を参考にしてみてください。
