はじめてのClaude Code｜日本語で頼んでWebアプリを作成・公開しよう

第02章：登録・準備に使うURL

Claudeの登録、プラン確認、アプリのインストールで使う公式URLです。

関連URL

Claudeを開く・アカウント登録
https://claude.ai/

Claudeアプリのダウンロード
https://claude.com/download

Claudeのプラン・料金
https://claude.com/pricing

Claudeヘルプセンター（日本語）
https://support.claude.com/ja/

進めるときのポイント

• 動画の順に、アカウントの準備 → プラン・使用量の確認 → アプリのインストール → Codeを開く、と進めます。

• 料金・使える機能・使用量の上限は変わることがあります。契約前に公式の料金ページと自分の契約画面を確認してください。

• パスワードや認証コードの入力は、自分で公式のログイン画面から行います。AIへの依頼文には貼り付けません。

Windowsをお使いの方：Git for Windowsの準備

この講座の後半では、アプリの変更履歴を残してGitHubに保存します。Windowsの方は、その準備として「Git for Windows」をインストールしておきましょう。Gitは、ファイルの変更履歴を管理する道具です。詳しい役割は第7章で扱います。

1. 下の公式ダウンロードページを開きます。通常のWindowsパソコンは「x64 Setup」、ARM版のWindowsパソコンは「ARM64 Setup」を選びます。

2. ダウンロードしたファイルを開き、初期設定を基本に、画面の案内に沿ってインストールします。

3. インストールが終わったら、Claudeアプリを一度終了して、開き直します。

4. Codeの画面で、下の確認用の文章を送ってください。

確認用の文章：
Gitがこのパソコンで使えるか、確認してください。まだアプリのファイルは変更しないでください。

すでにGitが使える場合は、もう一度インストールする必要はありません。GitHubのアカウント作成と、パソコンへのGitのインストールは別の準備です。

補足：Claude Code単体の利用では、アプリの版や使い方によってGitが不要な場合もあります。この講座では、第7章のGitHubへの保存に備えて準備します。Macの方は、このWindows用の手順を行う必要はありません。

Git for Windows：公式ダウンロード
https://git-scm.com/install/windows

Claude Codeデスクトップ版：Gitに関する公式案内
https://code.claude.com/docs/en/desktop#git-and-git-lfs-errors

登録用URL一覧とWindows向けの補足手順は、このレクチャーの「リソース」からダウンロードできます。

第03章：基本操作のプロンプトとURL

書類などの分かる場所に my-task-app フォルダを作り、Claude Codeで選びます。以下は一つずつ送ってください。

1. 最初の計画メモを作る

このフォルダに app-plan.md というメモを作ってください。
アプリの名前は「わたしのやることリスト」です。
やることの追加、完了の切り替え、削除ができるアプリにしたいです。
まだプログラムは作らず、名前と三つの機能を日本語で短くまとめてください。

2. メモに書いたアプリ名を変える

app-plan.md のアプリ名を「わたしの毎日リスト」に変更してください。ほかの内容はそのままにしてください。

3. 時間が空いたときに、現在の状況を確認する

今どこまでできているか、初心者向けに説明してください。まだファイルは変更しないでください。

関連URL

Claude Codeのデスクトップ版・公式ガイド
https://code.claude.com/docs/en/desktop

Claudeヘルプセンター（日本語）
https://support.claude.com/ja/

進めるときのポイント

• 最初は権限を「手動」にして、お願いした作業と確認画面の内容が合っているかを見ながら進めます。動画では、小さな名前の変更で「自動」も試しています。

• モデルや思考量の表示は、契約やアプリの更新によって異なる場合があります。自分の画面の選択肢を確認してください。

• app-plan.md は、この章で作るメモのファイル名です。そのまま使って大丈夫です。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第04章：アプリ作成・修正のプロンプト

同じ my-task-app フォルダと会話を使い、作る → 開いて使う → 希望を伝えて直す、の順に進めます。

1. 最初のアプリを作る

毎日のやることを忘れないように、自分用のタスク管理Webアプリを作ってください。
タスクの追加・完了・削除ができるようにしてください。
タスクは、使っているブラウザの中に保存してください。

2. アプリを開いてもらう

このアプリをブラウザで開いてください。URLも教えてください。今は自分のパソコンだけで使います。

3. 使ってみて、ボタンを大きくする

追加ボタンを、もう少し大きくしてください。今できている追加・完了・削除の機能と、保存したタスクは、そのまま使えるようにしてください。

困ったとき：アプリが開けない

このアプリが開けません。
今の画面：［表示された内容を書くか、画面の画像を添える］
原因を調べて、このアプリを開けるようにしてください。私が画面で操作する必要がある場合は、どこを押せばよいか教えてください。

関連URL

Claudeを開く・アカウント登録
https://claude.ai/

進めるときのポイント

• 「本を読む」「練習用」などを追加し、完了・取り消し・削除・画面の読み直しを試します。変更後も同じ機能が使えるか確認しましょう。

• URLは、自分のアプリについてAIが案内したものを使います。動画のURLをそのまま写す必要はありません。

• この講座のタスクは、使っているブラウザ内に保存します。別のブラウザやスマホと自動で同じタスクを共有する仕組みは、今回の実習には含めません。

• ［ ］の部分は自分の状況に置き換えます。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第05章：セキュリティの参考URL

この章では、Webアプリで起こり得る被害と、公開前に点検する考え方を学びます。具体的な点検用プロンプトは第6章の「【解説＋実演】セキュリティ：改善したアプリを点検しよう」にあります。

関連URL

IPA「安全なウェブサイトの作り方」
https://www.ipa.go.jp/security/vuln/websecurity/about.html

IPA「安全なウェブサイトの運用管理に向けての20ヶ条」
https://www.ipa.go.jp/security/vuln/websecurity/sitecheck.html

進めるときのポイント

• 入力内容の悪用、情報の流出、不適切なアクセス、使っているソフトの弱点など、アプリに関係する観点を確かめます。

• 今回のアプリはログインや機密情報を扱いませんが、安全性の確認が不要になるわけではありません。練習用のタスクを使って進めましょう。

• AIの点検結果だけで安全が保証されるわけではありません。未確認の点も説明してもらい、直した後の動きを自分でも確認します。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第06章・1：機能改善のプロンプト

対応レクチャー：【解説＋実演】機能改善：見た目と花吹雪を加えよう

第4章で作ったアプリと同じフォルダ・会話を開き、次の依頼文を一つずつ送ります。変更のたびにアプリを開き直して、希望どおりになったかを確かめましょう。

1. 文字とボタンを読みやすくする

タスクの文字とボタンを大きくしてください。スマホでも読みやすく、押しやすくしたいです。追加・完了・削除・保存の動きは保ってください。変更した場所と確かめ方を教えてください。

2. 完了時の花吹雪を加える

やることを完了にしたら、お祝いの花吹雪を2秒ほど出してください。
ボタンや文字を隠さず、終わったら消してください。
完了を取り消したときや、画面を開き直したときは出さないでください。
花吹雪を出さない設定も選べるようにしてください。パソコンやスマホの「動きを減らす」設定にも合わせてください。
今の追加・完了・削除と、タスクを保存する機能は、そのまま使えるようにしてください。

3. 花吹雪の見え方を調整する

花吹雪がもっと分かるように、もう少し派手にしてください。文字やボタンは操作できるようにし、花吹雪をオフにする設定も残してください。

困ったとき：期待した動きと違う

したこと：［何を押したか］
こうなると思っていたこと：［期待した動き］
実際に起きたこと：［画面の様子。画像を添えても大丈夫です］
原因を調べて、どうすればよいか教えてください。分からないことがあれば、私に質問してください。

進めるときのポイント

• 一つ変更したら、結果を使って確かめてから次へ進みます。分からないことは、そのまま日本語でClaude Codeに聞いてください。

• 花吹雪を加えた後も、追加・完了・取り消し・削除・保存と、花吹雪を出さない設定を確認しましょう。

• うまく動かないときは、した操作・期待した動き・実際の結果を伝えます。画面の画像を添えても大丈夫です。メールアドレスやパスワードなど、見せる必要のない情報は隠してください。

• 機能改善が終わったら、次の「【解説＋実演】セキュリティ：改善したアプリを点検しよう」へ進みます。点検・修正・更新の依頼文は、そのレクチャーのリソースにあります。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第06章・2：セキュリティ点検・修正・更新のプロンプトとURL

対応レクチャー：【解説＋実演】セキュリティ：改善したアプリを点検しよう

見た目や花吹雪を加えたアプリを、公開前に点検します。まず点検結果を読み、必要な修正と更新を依頼し、実際に動かして確かめます。「修正と更新」の文は、点検結果と変更内容を確認してから送ってください。

1. 公開前に安全性と更新の必要性を点検する

このアプリを公開する前に、セキュリティを点検してください。次のIPAの資料を参考にしてください。
https://www.ipa.go.jp/security/vuln/websecurity/about.html
https://www.ipa.go.jp/security/vuln/websecurity/sitecheck.html
入力した内容が悪用されないか、保存したタスクやパスワードなどが勝手に外へ送られないかを調べてください。花吹雪の仕組みと、公開するファイルも含めてください。
使っているソフトや部品を調べ、公式に出ている安全性の修正が必要かも確認してください。更新が必要なら、今のアプリで使える修正版と、公式の案内を教えてください。更新するものがなければ、そのように教えてください。
まずは変更せず、問題と直し方、更新する理由、私が試して確かめることを、初心者向けに説明してください。資料を読めなかったことや、未確認のことも教えてください。

2. 説明を確認した修正と更新を頼む

今説明してもらった内容で、必要な修正と、ソフトや部品の更新を進めてください。今のアプリで使える、安全性の修正が入った最新の版を使い、更新に必要な設定ファイルも合わせて直してください。
大きな作り直しや、パソコン全体・公開先の設定変更が必要なら、先に理由を説明してください。
保存したタスクは残し、追加・完了・削除・保存と花吹雪が今までどおり使えるかも確認してください。何を修正・更新したかと、私が試すことを教えてください。

3. 結果を作業メモに残す

ここまでの改善と安全性の点検結果を、作業メモに短くまとめてください。修正したこと、更新したソフトや部品とその版、確認した日、動きを試した結果、まだ確認できていないことを残してください。更新するものがなかった場合も書いてください。パスワードなどは書かないでください。

関連URL

IPA「安全なウェブサイトの作り方」
https://www.ipa.go.jp/security/vuln/websecurity/about.html

IPA「安全なウェブサイトの運用管理に向けての20ヶ条」
https://www.ipa.go.jp/security/vuln/websecurity/sitecheck.html

進めるときのポイント

• 更新するのは、実際に使っているソフトや部品のうち、修正が必要なものです。すべてのファイルを無条件に最新版へ置き換える、という意味ではありません。

• AIが資料を読めなかった場合や、確認できていない部分がある場合は、その内容を確かめてから進めます。

• 修正・更新の後は、自分でも追加・完了・取り消し・削除・保存と、花吹雪の動きを確認してください。

• 確認結果と、まだ確認できていないことを作業メモに残してから、第7章のGitHubへの保存に進みます。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第07章：GitHub保存のプロンプトとURL

GitHubでアカウントを用意し、my-task-app という保存先（リポジトリ）を作ってから使います。公開範囲は動画と同じ「Private」を選びます。

1. GitHubへの保存をお願いする

このアプリを、次のGitHubの保存先に保存してください。保存に必要な準備も進めてください。
［自分のリポジトリのURLを貼り付ける］
使うGitHubアカウントは「［自分のGitHubユーザー名］」です。
ログインなど、私の操作が必要なところは手順を教えてください。

2. ブラウザで認証した後、確認をお願いする

ログイン操作が終わりました。使うGitHubアカウントでログインできているか確認してください。問題がなければ、指定した保存先にアプリを送ってください。

関連URL

GitHubを開く・アカウント登録
https://github.com/

GitHub公式：新しいリポジトリの作成
https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository

進めるときのポイント

• URLは自分で作ったリポジトリの画面からコピーします。形は「https://github.com/自分のユーザー名/my-task-app」です。［ ］は説明用なので、自分の内容へ置き換えてから送ってください。

• 動画では説明用にアカウントを切り替えています。受講時は、自分が作った同じアカウントで進めて大丈夫です。

• ログインの案内が出たら、ターミナルの表示を確認し、必要なところでEnterを押します。ブラウザでは今回表示された確認コードを使い、アカウントと許可の内容を確認します。

• ブラウザでの認証後、ターミナルにもログイン完了が出ていることを確かめます。最後にGitHubでファイルが届いているかを確認しましょう。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第08章：Vercel公開に使うURLと相談用プロンプト

Vercelでアカウントを作り、GitHubの my-task-app を取り込んで公開します。

困ったとき：画面を添えて、次の操作を相談する

Vercelで、このアプリをインターネットに公開したいです。
今の画面：［画像を添えるか、表示された内容を書く］
困っていること：［例：どこを選べばよいか分からない／エラーが出た］
このアプリのファイルと今の画面を確かめて、次にどこを選び、何を入力すればよいか、一つずつ教えてください。

関連URL

Vercelを開く・アカウント登録
https://vercel.com/

Vercel Hobbyプランの対象・利用条件
https://vercel.com/docs/plans/hobby

VercelとGitHubの連携・公式ガイド
https://vercel.com/docs/git/vercel-for-github

進めるときのポイント

• 実習の流れ：アカウント作成 → GitHubと連携 → my-task-app をImport → Deploy → 公開されたアプリを使う → 公開URLを確認、の順です。

• Hobbyは個人の非商用利用向けです。仕事や商用で使う場合は、現在のプラン条件を確認してください。

• GitHubでは第7章と同じアカウントを使い、連携先と対象のリポジトリを確認します。動画のアカウント切り替えをまねする必要はありません。

• 公開後は、自分のVercel画面に出たURLを使います。GitHubの保存先URLと、アプリを使う公開URLは別です。

• ［ ］は自分の状況に置き換えます。画面の画像には、パスワードや認証コードなどを含めないようにしてください。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。

第09章：公開後の更新・管理のプロンプトとURL

自分の my-task-app フォルダと、これまでの会話を開いて進めます。以下は動画の流れに沿った例です。希望に合わせて一つずつ送ってください。

1. 翌日、続きから作業する

このアプリは今どこまでできていますか。作業メモも確認して、続きから進められるように説明してください。まだファイルは変更しないでください。

2. タスクに期限を付ける相談

タスクに期限を付けたいです。まずは、更新できるか確認してください。

質問されたとき：期限の希望を伝える

日付を設定できるようにして、時間の入力は任意にしてください。期限が近い順に表示し、後から編集できるようにしたいです。通知はいりません。

3. GitHubに送って、公開を更新する

GitHubに送信して、公開も更新してください。

4. エラー画面を添えて相談する

このような表示になりました。どうすればいいですか。原因と必要な操作を、初心者向けに教えてください。

5. ボタンを青色に変える

ボタンの色を青色にしてください。

6. 戻したい状態を履歴から探す

今までのGitHubの変更履歴を出してください。

7. 戻す対象を指定する

この状態に戻したいです。
［戻したい変更履歴の行を貼り付けるか、画面の画像で示す］
今の状態を確認し、これまでの履歴を残して安全に戻す方法を説明してください。

戻し方の説明を確認した後

今説明してもらった方法で戻してください。GitHubへの保存と公開の更新も進めてください。

8. アプリの利用説明資料を作る

このアプリの利用説明資料を、パワーポイントで作ってください。1スライドに1つの機能で、初心者にも分かるように、シンプルに説明してください。

関連URL

GitHubを開く・アカウント登録
https://github.com/

Vercelを開く・アカウント登録
https://vercel.com/

VercelとGitHubの連携・公式ガイド
https://vercel.com/docs/git/vercel-for-github

Vercelプロジェクトの一時停止・再開・管理
https://vercel.com/docs/projects/managing-projects

Claudeヘルプセンター（日本語）
https://support.claude.com/ja/

進めるときのポイント

• エラー相談では、直前に何をしたかも伝え、エラーが読める画像を添えます。動画は別アカウントの情報が関係した例ですが、原因は人によって異なります。

• GitHubへの送信後は、VercelでReadyになったことと、公開URLで実際に変更されていることの両方を確かめましょう。

• 戻すときは、どこを戻し、どの機能を残したいかも伝えます。動画では履歴を消さず、ボタンを緑色に戻す新しい変更を加えています。講師の履歴番号は使わず、自分の履歴を選んでください。

• スマホでは自分の公開URLを開きます。この講座の保存方法では、パソコンとスマホのタスクは自動で共有されません。

• 公開を一時停止する場合：Vercelで対象のプロジェクト → Settings → General → Pause Project。表示内容を確認し、プロジェクト名を入力して停止します。再開はResume Projectです。Delete Projectは削除なので、一時停止の練習では使いません。

• 作った説明資料は、実際のアプリの画面や操作と合っているかを確認してから使います。

• 使用量は自分の設定画面で確認します。動画の数値は撮影時の例で、同じ作業でもモデル・思考量・会話の長さなどによって変わります。

同じ内容のテキストファイルを、このレクチャーの「リソース」からダウンロードできます。