コードを書かずにAIで簡単なWebアプリをつくる手順
要件を言葉で伝え、AIに小さなWebアプリを作らせて改善する手順
計算ツール、チェックリスト、簡単な入力フォームなどの小さなWebアプリは、プログラミングを知らなくても生成AIに作ってもらえるようになりました。言葉で要件を伝え、動かしながら直していく進め方は「バイブコーディング」とも呼ばれます。ここでは、社内向けの小さなツールを作る流れを紹介します。
目的
- 表計算や紙で回している小さな業務を、使いやすい画面にする
- アイデアを動く試作品（プロトタイプ）にして、関係者と相談する
- 開発を依頼する前に、要件を具体化する
準備するもの
- 作りたいものの説明（誰が、何のために、どんな画面で使うか）
- 入力と出力の例（例：金額と税率を入れると税込額が出る）
- ツールの例：Claude の成果物（アーティファクト）機能、ChatGPT のキャンバス機能、Webアプリ生成に特化したサービスなど
- 公開する場合は、社内の公開ルール（どこに置いてよいか）の確認
手順
- 1文で目的を書く：「営業担当が見積の概算を30秒で出せるツール」など。
- 最小の機能に絞る：最初は1画面・入力3つ程度にします。ログインやデータ保存は後回しにします。
- AIに作らせる：画面の項目、計算ルール、表示の仕方を伝えます。Claude では、設定でファイル作成・コード実行の機能をオンにすると、会話の横にアプリが表示され、その場で動作を試せます。
- 触って直す：実際に入力して、おかしな点を一つずつ伝えて直してもらいます。
- 境界のケースを試す：空欄、0、マイナス、極端に大きい数などを入れて確認します。
- 共有する：まずは自分と少人数で試します。成果物の共有範囲（非公開・限定公開）を確認してから共有します。
- 本格運用は相談する：データ保存、権限管理、多数の利用者が必要になったら、社内の開発担当や正式なプラットフォームに相談します。
プロンプト例
社内向けの「出張旅費の概算計算ツール」をWebアプリで作ってください。 入力：出発地（東京／大阪／福岡から選択）、宿泊数、日当の区分（一般／管理職） 計算ルール： - 交通費は出発地ごとの固定額（東京2万円、大阪1.5万円、福岡3万円とする） - 宿泊費は1泊1万2千円 - 日当は一般3千円、管理職5千円×日数（宿泊数+1） 出力：内訳と合計を表で表示。スマホでも見やすく、日本語表示。 外部へのデータ送信はしないでください。
（上の金額は例です。実際の社内規程の値に置き換えてください）
うまくいかない時
- 修正のたびに別の部分が壊れる：一度に1つの修正だけを頼み、動いた版を保存しておきます。
- 思った画面にならない：手書きのラフ画像や、似た画面のスクリーンショット（自社のもの）を見せます。
- 計算が合わない：計算ルールを表で明示し、テスト用の入力と正解をいくつか渡して確認させます。
注意点
- 情報漏えい：顧客情報や社外秘のデータを、作ったアプリに入力・保存しないでください。公開範囲の設定を必ず確認します。
- セキュリティ：パスワードや APIキーをアプリの中に書き込まないこと。ログインや個人データを扱うアプリは、専門家のレビューなしに公開しないでください。
- 確認作業：計算ロジックは必ず人が検算します。AIが作ったコードにも誤りはあります（ハルシネーション）。
- 関連：ノーコード、プロンプト、AIエージェント
参考リンク
編集: AI Play 編集部 最終更新: 2026-10-25