DWG NO. CD-2026-001
SCALE — NTS
SHEET 1 / 1

CITIZEN DEVELOPMENT PROGRAM

メカ設計者が、
自分の課題を自分のアプリで解く。

ソフトウェアエンジニアではないけれど、メカ設計に携わり「業務をもっと良くしたい」という意欲のある人と一緒に、 社内アプリケーションを育てていく市民開発の取り組みです。AIとの壁打ちで要件を固め、プロトタイプを土台に、 最終的には本人が自走できる状態を目指します。

課題ヒアリング AIと壁打ち プロトタイプ 自走
A-1 / BACKGROUND

なぜ市民開発なのか

現場の課題を一番よく知っているのは現場の人。でも、それをアプリにする手段がこれまでありませんでした。

これまでの課題

メカ設計の現場には「この作業、ツールがあれば楽になるのに」という改善アイデアが眠っています。しかしソフト開発の経験がないため、アイデアは手つかずのまま。IT部門に依頼するほどの規模でもなく、Excelマクロでは限界がある——そんな課題が積み残されていました。

AI時代のアプローチ

生成AI(Claude・GitHub Copilot)の登場で状況が変わりました。コードを書けなくても、AIとの対話で要件を言語化し、資料を作り変え、プロトタイプを改善できます。この取り組みでは、その環境と最初の土台を用意し、現場の人が「自分の手で改善する」経験を積める仕組みを作っています。

B-1 / SYSTEM ARCHITECTURE

開発・実行環境の全体像

コードを書いてから社内に届くまで、人の手作業はありません。GitHub に push すれば、あとは自動で社内URLが更新されます。

FIG. 1 — システム構成図(コードが社内に届くまで)

自動化された流れ 参加メンバーの操作
私(DX推進担当) >_ VSCode + Claude AIと一緒に プロトタイプを開発 参加メンバー(メカ設計者) GitHub Copilot AIと壁打ちしながら 資料やコードを修正 GitHub(コードの置き場) リポジトリ コード・要件定義書・ 構成図・UIモックを一元管理 🔑 アクセス権限を付与 メンバー本人が中身を見て、 直して、push できる状態に GitHub Actions(自動化係) push を検知すると起動し、 ビルド → テスト → デプロイを 全部自動で実行 Proxmox(社内サーバー) 社内に置いた仮想化基盤。 データは社外に出ない 🐧 Linux VM アプリケーション本体が ここで動き続ける 社内の利用者 http インストール不要。 ブラウザで社内URLを 開くだけで使える git push 壁打ち・修正して push push が合図 自動デプロイ 社内ドメインで公開 https://app.example.co.jp できたアプリを実際に触って、次の改善点を壁打ちする

ポイント:push した瞬間から先はすべて自動。メンバーは「サーバー設定」や「デプロイ手順」を覚える必要がなく、アイデアを形にすることだけに集中できます。

DEV

VSCode + Claude

コーディングの中心。AIエージェントに実装を任せながら、対話ベースで開発を進めます。

→ プロトタイプ開発・改修

CI/CD

GitHub + GitHub Actions

ソースコードの管理と、push をトリガーにした自動ビルド・自動デプロイ。参加メンバーにはリポジトリのアクセス権限を付与します。

→ バージョン管理・自動デプロイ

INFRA

Proxmox 上の Linux マシン

社内に構築した仮想化基盤。アプリケーションのホスティング先として、必要に応じてVMを払い出せます。データが社外に出ない安心感も利点です。

→ アプリ実行基盤

DEPLOY

社内ネットワーク + ドメイン

作ったアプリは社内ドメインで公開。ブラウザからURLを開くだけで、誰でもすぐ使える状態で届けます。

→ 社内配信・利用

B-2 / GITHUB WORKFLOW

GitHub の中では何が起きている?

「main が壊れない仕組み」があるので、初心者でも安心して実験できます。作業は必ずブランチ(枝分かれしたコピー)の上で行い、確認してから合流させます。

FIG. 2 — ブランチ運用と自動デプロイの流れ

main = いつでも動く「公開中の版」 feature/kaizen-idea = メンバーの安全な実験場 Pull Request ① 私がプロトタイプを push して公開 ② ブランチを切って 安全に実験開始 ③ Copilot と壁打ちしながら 修正を積み上げる ④ 確認して main に合流 (マージ) Actions が 自動起動 🚀 ⑤ 社内URLが 自動で最新に

安心設計:実験は必ずブランチ上で行うため、途中で失敗しても公開中のアプリ(main)には一切影響しません。「壊すのが怖い」という初心者の最大の不安を、仕組みで取り除いています。

C-1 / PROCESS

進め方 — 6つのステップ

「聞く → 見える化 → 壁打ち → 作る → 渡す」の流れで、少しずつ本人の手に開発を移していきます。

01

ミーティングで課題をヒアリング一緒に

まずは対話から。業務のどこに困りごとがあり、何が改善されると嬉しいのかをじっくり聞き取ります。

02

3種類のHTML資料を提供私が作成

ヒアリング内容をもとに、要件定義書・システム構成図・UIモックの3つをHTMLで作成して渡します。「文章だけ」ではなく「見て触れる形」にすることで、認識のズレを早期に発見できます。

03

GitHub Copilot で壁打ち本人が実施

受け取った資料を、本人が GitHub Copilot に相談しながら読み込み、疑問点や違和感を洗い出します。AIとの対話を通じて「自分の要望を言語化する」練習にもなります。

04

3つのHTMLを意図に合わせて作り変え、方向性を決定本人が実施

壁打ちの結果を反映して、本人自身がAIの力を借りながら資料を修正。「これなら業務で使える」と納得できる形になったら、方向性を確定します。

05

プロトタイプを開発し、社内にデプロイ私が作成

確定した要件をもとに、私が動くプロトタイプを実装。GitHubにあげてアクセス権限を付与し、GitHub Actions 経由で社内ドメインにデプロイします。

06

プロトタイプに壁打ちしながら、自走へ本人が主役

実際に動くアプリを触りながら、AIと壁打ちして改善を続けます。コードもリポジトリも本人の手元にあるので、小さな修正から自分で挑戦でき、開発が「自分ごと」になっていきます。

C-2 / DELIVERABLES

最初に渡す3つのHTML

3点セットにしている理由は、「何を・どう作り・どう見えるか」を一度に確認できるようにするためです。

DOC 01 — HTML

要件定義書

「何を作るか」を言語化した資料。解決したい課題、機能一覧、対象ユーザー、やらないこと(スコープ外)を整理します。壁打ちの出発点です。
DOC 02 — HTML

システム構成図

「どう作るか」を示す図。データの流れ、使う技術、社内環境のどこで動くのかを可視化し、仕組みの全体像を共有します。
DOC 03 — HTML

UIモック

「どう見えるか」を体感できる画面モック。実際にブラウザで開いて操作イメージを確認できるため、完成後の「思っていたのと違う」を防ぎます。
D-1 / GOALS

この取り組みが目指すもの

アプリを1本作ることがゴールではありません。「現場が自分で改善し続けられる状態」を作ることがゴールです。

GOAL-1

課題解決のスピードアップ現場の困りごとを、IT部門の順番待ちなしに、数週間単位でアプリとして形にします。

GOAL-2

AIと協働できる人材の育成壁打ちを通じて「要望を言語化し、AIに伝え、成果物を評価する」スキルが自然に身につきます。これはツールが変わっても通用する力です。

GOAL-3

自走する文化づくりコードとリポジトリを本人に渡し、権限を付与することで、開発が「頼むもの」から「自分でやるもの」に変わります。成功事例が増えるほど、次の挑戦者が生まれます。

◀ 図面索引にもどる ◀ SHEET 0 入門編 — Claude × GitHub SHEET 2 Proxmoxなしの環境構築 ▶