無料座学 1 / 4

2時間で作る
はじめてのAIアプリ体験

この無料講座は、実作業の代行ではなく、生成AIを使ったアプリづくりの流れを座学で理解するための入門資料です。 「生成AIとは何か」「バイブコーディングとは何か」「どんなサービスがあるか」「どのプログラム言語を使うか」から説明します。 個人情報を入力するフォームは設置しません。

最終的には、受講者ごとに「簡単なWebアプリの作り方」「プロンプト集」「企画テンプレート」「安全チェックリスト」を持ち帰れる構成にしています。

1 全体像 2 整理と仕様 3 画面と確認 4 実用化と有料支援

まず最初に：そもそも生成AIとは？

生成AIとは、文章、画像、音声、動画、プログラムなどを、人間の指示に合わせて作るAIです。 アプリづくりでは、文章の整理、仕様書の下書き、画面案、HTML、CSS、JavaScript、Pythonなどのコード作成を手伝わせることができます。

ただし、生成AIは「正しいものを必ず出す機械」ではありません。 それらしく間違えることがあります。だから、AIに任せる部分と、人間が確認する部分を分ける必要があります。

できること 文章・仕様・コードのたたき台を作る 例：アプリの説明文、画面構成、HTML、CSS、JavaScript、Pythonコードの下書きを作る。
苦手なこと 正しさの保証・運用責任 例：法律、個人情報、セキュリティ、課金、業務利用の最終判断は人間が確認する。
使い方のコツ 一度に全部頼まない 目的、画面、入力項目、ボタン、保存方法のように、段階ごとに頼む。
超重要： 生成AIは「開発者の代わり」ではなく、「下書きが速い助手」です。 助手に丸投げすると迷子になります。目的地を決めるのは人間です。

バイブコーディングって何？

バイブコーディングとは、作りたいアプリを自然な言葉でAIに伝え、AIと会話しながら画面や機能を作っていく方法です。 いきなり難しいコードを書くのではなく、「こういう画面にしたい」「このボタンを追加したい」「スマホで見やすくしたい」と順番に指示します。

1. 日本語で作りたいものを説明する
例：防災チェックリストを作りたい。チェック項目を表示し、最後に結果を表示したい。
2. AIに仕様として渡す
例：画面は1つ、チェック項目は10個、ボタンは「確認する」、スマホで見やすくする。
3. できた画面を見て修正する
例：文字を大きく、ボタンを目立たせる、項目を追加する、注意文を入れる。
4. 実用化できる範囲を確認する
例：個人情報を取らないなら公開しやすい。ログインや保存が必要なら設計が必要。

どんな生成AI・AI開発サービスがある？

目的によって使うサービスは変わります。 最初から全部覚える必要はありません。まずは「相談するAI」「コードを書くAI」「ブラウザで試すサービス」を分けて考えると分かりやすいです。

種類 代表例 初心者向けの使い方
相談するAI ChatGPT、Claude、Gemini など アイデア整理、仕様書の下書き、画面構成、プロンプト作成、文章作成に使う。
コード作成支援 GitHub Copilot、Cursor、Claude Code、Gemini Code Assist など 既存コードの修正、複数ファイルの編集、エラー修正、テスト作成に使う。少し開発寄り。
ブラウザで試作 Replit、Bolt、Lovable など 環境構築を少なくして、Webアプリの試作品をすぐ動かす用途に向いている。
デザイン・画面案 Figma AI系機能、v0系サービスなど ボタン、カード、フォーム、LP、管理画面などの見た目を考えるときに使う。
コード管理 GitHub など 作ったコードを保存し、変更履歴を残す。公開や共同作業に使う。

※サービス名は代表例です。料金、機能、利用条件は変わるため、実際に使う前に各サービスの公式情報を確認してください。

プログラム言語は何を使う？

アプリづくりでは、目的によって使う言語が変わります。 初心者は、まずWeb用のHTML・CSS・JavaScriptから始めるのが一番分かりやすいです。

用途 主な言語・技術 何を作るのに向くか 初心者へのおすすめ度
Web用 HTML、CSS、JavaScript LP、入力フォーム、チェックリスト、クイズ、簡単な画面、スマホ対応ページ。 最初におすすめ。ブラウザで動くので確認しやすい。
Python用 Python、Flask、FastAPI、Streamlit CSV処理、画像処理、AI処理、データ整理、簡単なWebアプリ、管理ツール。 処理系アプリに強い。ただしサーバや実行環境の理解が必要。
モバイルアプリ用 Swift / SwiftUI、Kotlin、Flutter、React Native iPhoneアプリ、Androidアプリ、カメラ、センサー、通知、端末機能を使うアプリ。 本格的。ストア申請や署名があるので、最初はWeb試作後がおすすめ。
最初の結論： いきなりiOS/Androidアプリから始めるより、まずWebで試作品を作る方が安全です。 Webで流れを確認してから、必要ならPython化、スマホアプリ化へ進めます。
HTML：画面の骨組み CSS：見た目の装飾 JavaScript：ボタンや動き Python：処理・AI・CSV Swift：iPhoneアプリ Kotlin：Androidアプリ

この無料講座で理解する流れ

生成AI・サービス・言語の全体像を理解する
生成AIとは何か、どんなAIサービスがあるか、Web・Python・モバイルで使う言語の違いを学びます。
バイブコーディングとは何かを理解する
AIに日本語で指示しながら、画面・機能・コードのたたき台を作る考え方を学びます。
作りたいアプリを日本語で整理する
「誰が」「何のために」「何を入力し」「何を出力するか」を短く整理します。
AIに仕様を渡す
曖昧なお願いではなく、画面、ボタン、入力欄、保存内容、スマホ対応を具体的に伝えます。
画面を作り、ボタンや入力欄を追加する
AIが作った画面を見ながら、「もっと大きく」「項目を追加」「スマホで見やすく」と修正依頼します。
スマホ表示と実用化範囲を確認する
動く試作品と、本番利用できるシステムの違いを確認します。
無料講座の範囲： このページ群は座学用です。個別の仕様作成、コード作成代行、公開作業、業務利用の設計は含みません。 そこから先は有料支援の対象です。

バイブコーディングとは？

バイブコーディングとは、作りたいアプリや機能を自然な言葉でAIに伝え、AIと対話しながら試作品を作る開発スタイルです。 たとえば「アンケートを作ってCSVで出したい」「防災チェックリストをスマホで使いたい」といった要望を、AIに段階的に伝えて形にします。

人間が考えること 目的、利用者、入力項目、必要な画面、公開してよい範囲を決めます。
AIに任せること 画面案、コードのたたき台、エラー修正案、説明文、改善案を作らせます。
必ず確認すること 個人情報、パスワード、著作権、セキュリティ、スマホ表示、保存データの扱いです。

この講座で扱うサンプル

座学では、分かりやすい例として「防災チェックリストアプリ」を題材にします。 入力欄、チェック項目、ボタン、スマホ表示、保存の考え方を説明しやすいためです。

項目 例
目的 家庭や地域で、防災準備の確認をしやすくする
利用者 スマホを使う一般利用者、地域活動メンバー、学校・講座の参加者
画面 チェックリスト画面、結果表示画面、使い方説明
注意点 氏名・住所・電話番号などの個人情報は入力させない

次へ：作りたいアプリを日本語で整理する

次のページでは、AIに頼む前に必要な「企画メモ」の作り方を説明します。 ここを飛ばすと、AIがいい感じに暴走します。AIは優秀ですが、行き先を言わないタクシーみたいなものです。

次の座学へ進む 有料相談フォームへ進む

プライバシーポリシー

バイブコーディング無料座学｜株式会社ビー・ナレッジ・デザイン

この無料ページでは個人情報を取得しません。具体的な設計・試作は有料支援として承ります。