BLUEALPHA

サポート / AIコーディング入門

AIでアプリを作ってみる

クイズや作業チェックリストを、自分で作る。コードを書いたことがない人向けに、Codex・Claude Codeの始め方から紹介します。

相談するだけでなく、作業も頼めます

AIエージェントは、許可したフォルダでファイルを作り、プログラムを動かしてくれるAIです。あなたは作りたいものを伝え、できたものを試します。

最初は「1画面で、1つのことができる」アプリで十分。ログインや決済は、あとから考えましょう。

1. PCに道具を用意する

使うAIはどちらか1つでOKです。アカウントと利用可能なプランが必要なので、料金・対応OSはダウンロード先で確認してください。

Codex

公式案内からアプリを入れてログイン。開発用のCodexを選び、プロジェクトを作るか、作業フォルダを開きます。

Claude Code

Claudeアプリを入れてログイン。「Code」→「Local」→「Select folder」で作業フォルダを開きます。Node.jsやコマンド版の追加インストールは不要です。

WindowsでClaude Codeを使う場合は、Git for Windowsも必要です。未導入なら既定の選択肢でインストールし、Claudeを再起動してください。

作業フォルダと最初の設定

  1. ドキュメント内に空の「blue-quiz-demo」フォルダを作り、AIの作業場所に選びます。
  2. このPCで作業する設定を使います。CodexはWindowsなら標準のWindows native、Claude Codeは「Local」です。
  3. 表示言語・モデルは使い始めの設定でOK。操作の許可は内容を見て承認し、フルアクセスには切り替えません。

写真や仕事の資料が入ったフォルダ全体は選ばないでください。会社・学校のPCは利用ルールを確認し、分からない操作は「何のための操作?」と聞いてから進めます。

2. 作りたいものを伝える

まずは5問のクイズ。次の文章をコピーして、AIの入力欄に送ってみてください。

自分の案に変えるなら、「誰が使うか」「何ができれば完成か」を足すと伝わりやすくなります。たとえば「自分の勉強用。最後に間違えた問題を見直せれば完成」です。

仕事用のチェックリストにするなら

3. 自分で触って、直す

作業フォルダの「index.html」をブラウザで開きます。開けなければAIに開き方を聞いてください。「できました」の返事だけでは、まだ完成にしません。

  • 答えを押すと、正解と解説が出るか
  • 最後に点数が出て、「もう一度」でやり直せるか
  • 画面を狭くしても、文字やボタンが使いやすいか

修正は1つずつ。「何をしたら、どうなったか」と「どうしたいか」をセットで伝えます。

画像やエラーを添えるときは、名前・メール・鍵などを除いてから。作ったファイルは、変更前にバックアップしておきましょう。

次の日や、新しい会話で続きを作るコツ

会話の記憶だけに頼らず、作業フォルダにメモを残すと続けやすくなります。これはBlueの開発でも使っている方法です。

次回は同じフォルダを開いて、「作業メモ.mdと今のコードを読んで、続きを進めて」と頼みます。メモは公開用ファイルには含めません。

4. 誰かに使ってもらいたくなったら

Codex・Claude Codeから、BlueのAPIキーで公開する手順 →

ここまではPCの中での作業です。URLで共有できるようにするのが「公開(デプロイ)」。Blueは、その公開先の1つです。

最初は、Blueのコンソールからファイルをアップロードする方法でOK。APIキーは不要です。

Blueで公開する手順

  1. Blueでアカウントを作り、コンソールで新規アプリのアップロードを開く。
  2. AIが用意したファイルを選び、アプリ名と公開レベルを確認して公開する。
  3. 発行されたURLを開き、主要なボタンを試してから共有する。

公開(noindex)も、URLを知っていれば閲覧できます。検索に出さない設定であり、アクセス制限ではありません。

慣れてきたら、AIから直接公開もできます

コンソールのAPIキーを使う方法もあります。AIに公開仕様を渡し、キーをチャットやコードに書かずに設定する方法を相談してください。キーは自分で管理し、使い終わったら期限や失効を確認します。詳細はAI Readyへ。

できたあとも、小さく直す

使った人の「ここが分かりにくい」を、1つずつ直していきましょう。同じ作業フォルダで修正し、試してから既存アプリを更新します。

ブラウザだけに保存したデータは、公開しても他の端末と共有されません。共有が必要になったら、その使い方をAIに伝えて設計から相談してください。

困ったときは

言葉や操作が分からない

「画面に出ている項目名で、次の操作とその目的を説明して」と頼んでみてください。分からない操作を承認する必要はありません。

仕事の資料を使ってもいい?

最初は仮のデータで。実際の資料は、会社・学校のルールと、AIに渡せる範囲・公開できる範囲を確認してから使います。

AI Buildで作ったものを続けたい

セッションのエクスポートで、保存済みの会話とコードを取り出せます。中身を確認してからAIに渡してください。コードが残っていなければ、要望から作り直します。

次は、データを保存して共有する

共有チェックリストを作る — 保存・別ブラウザ共有・更新まで →