AI付き社内ツールを15分で組み上げる

冷蔵庫の残り物でサッと一品作るように、AIという「料理上手な助手」に手伝ってもらって、あなたの職場の小さな困りごとを解決するツールを15分で形にします。プログラミングのコードは一切書きません。

今回は例として「社内備品の貸出管理ツール」を作ります。ノートPCやプロジェクターの「いま誰が使ってる？」がスマホからすぐ分かるようになるツールです。

まずは「何のためにツールを作るのか」をひと言で言えるようにしましょう。料理に例えると、「今夜のおかず」を決める段階です。

良い例:

• 「社内の備品を誰が借りているか、スマホからすぐ記録・確認できるようにしたい」
• 「会議室の予約状況を、チャットで聞かなくても一目で分かるようにしたい」

悪い例:

• 「とりあえず便利な何かが欲しい」（→ 漠然としていてAIも困ります）
• 「社内の全業務を自動化したい」（→ 範囲が広すぎて15分では終わりません）

ポイント: 「誰が」「何を」「どうしたいか」の3つが入っていれば合格です。

ChatGPT（またはClaude、Geminiなど、あなたが普段使っているAIチャット）を開いてください。以下の文章をそのままコピーして貼り付け、送信します。これがプロンプト（＝AIへの指示文）です。

あなたは優秀なシステム設計者です。私たちはプログラミングの知識がありません。
社内の備品（ノートPC、プロジェクターなど）の貸出を管理するツールを作りたいです。
必要な機能は以下の3つです。
1. 備品の貸出状況を一覧で見る
2. 新しく借りるときに記録する
3. 返却したときに記録する
このツールの画面がどんな構成になるか、初心者にもわかりやすく箇条書きで教えてください。

AIが返してくれた「画面の構成案」を読んでみましょう。これがあなたのツールの設計図になります。

もし設計図がピンとこなかったら

AIの回答が難しく感じたら、続けてこう聞いてみてください。

もっとシンプルにしてください。画面は1つだけで、備品名・借りている人・返却期限の表だけあれば十分です。

AIは何度でもやり直してくれます。遠慮せず「もっと簡単に」と言いましょう。

ここからが一番ワクワクする工程です。AIの力で実際に動く画面を作ります。

使うのはv0（ブイゼロ）というサービスです。文章で指示するだけで、ウェブの画面を自動で作ってくれる無料ツールです。

手順

1. v0 のサイトを開く
2. 入力欄に以下のプロンプトをコピーして貼り付ける
3. 生成ボタンを押して待つ（30秒〜1分ほどかかります）

社内備品の貸出管理アプリを作ってください。
画面には「備品名」「借りている人」「返却期限」の一覧表示と、
「新規貸出」「返却完了」のボタンを配置してください。
配色は青を基調とした明るいデザインにしてください。
日本語で表示してください。

しばらく待つと画面が出来上がります。スマホ表示とパソコン表示の両方を確認しましょう（v0のプレビュー画面で切り替えられます）。

出来上がった画面のボタンを実際に押して、ちゃんと動くか確認します。料理で言えば「味見」の段階です。

チェックリスト:

• 「新規貸出」ボタンを押すと入力フォームが出る
• 備品名と借りる人の名前を入力して登録できる
• 一覧に登録した内容が表示される
• 「返却完了」を押すと状態が変わる

良い例: 「新規貸出」ボタンを押すと入力フォームがスムーズに表示され、必要な項目がわかりやすく並んでいる

悪い例: ボタンを押しても何も起きない、またはエラー（＝システムの不具合を示すメッセージ）が出る

うまく動かないときのAIへの相談方法

v0のチャット欄に、具体的に何が問題かを伝えます。

「新規貸出」ボタンを押しても入力フォームが表示されません。
ボタンを押したらポップアップで入力フォームが出るようにしてください。

コツ: 「動きません」だけだとAIも原因がわかりません。「どのボタンを押したら」「何が起きるはずなのに」「実際はどうなったか」の3点を伝えましょう。

以下の3つができていれば、このレッスンは完了です。

1. 画面が表示される: 備品の一覧が見える状態になっている
2. 操作ができる: 貸出の登録と返却の操作ができる
3. スクリーンショットが撮れる: 完成した画面のスクリーンショット（＝画面の写真）を保存した

スクリーンショットの撮り方: Windowsは Windows + Shift + S、Macは Command + Shift + 3 で画面全体を撮れます。

今回は「見た目だけ」のツールを作りました。次のレッスンでは、実際にデータ（情報）を保存できるようにして、翌日開いても記録が残るツールに進化させます。