オンライン秘書養成コース　準備ガイド

Claude Code はじめてガイド

はじめてでも大丈夫。1つずつ進めましょう

このページは、講座で使うAIツール「Claude Code（クロードコード）」を、はじめての方が迷わず使い始めるためのガイドです。エラーが出ても大丈夫。うまくいかなかった所はメモしておいてもらえれば、講座の中で一緒に直します。

このガイドはタブに分かれています。事前にやっていただくのは「セットアップ」タブだけ。残りのタブは、講座のオンラインの回で一緒に進めるので、読んでおかなくて大丈夫です。
セットアップ事前にやること
オンライン1回目当日一緒にやる
オンライン2回目当日一緒にやる
ツールを入れる講座で使う道具
困ったときいつでもここ
▲ 最初に戻る
このタブが「事前にやること」です

講座が始まる前にやっていただくのは、このタブの内容だけ（所要30分ほど）。エラーが出ても大丈夫、うまくいかない所は初回のオンラインで一緒に直します。「なんだか多いな」と感じたら、下の順番1〜2（アカウントとプラン）だけ済ませておけば十分です。

パソコンでご準備ください。Claude Codeはスマホでは使えません。講座はパソコンで進めます（スマホは資料を見る用に使えます）。
Claude Codeってなに？

Claude（クロード）は、ChatGPTと同じように、質問するとチャットで答えてくれるAIです。そのClaudeの中の「Claude Code（クロードコード）」という機能を使うと、AIが「AIエージェント」として、あなたのパソコンの中のファイルを直接作ったり、操作したりできるようになります。LPやホームページのHTMLを、Claudeが実際に書いて、手を動かしてくれるのです。

ふつうのチャットAIClaude Code
回答を自分でコピーして貼り付けるAIが直接パソコンにファイルを作る。「LP作って」と言えばホームページのファイルが出来上がる
むずかしい知識は要りません。「コード」という名前ですが、コードを書くのはClaudeのほう。私たちは日本語で「こういうふうにしたい」「こういうものを作りたい」と頼むだけで大丈夫です。まずは実際に触って、ふつうのチャットとの違いを見てみましょう。
画面の見方：ホームとCode

Claude Desktopアプリを開くと、画面の上のほうに「ホーム」と「Code」のタブが並んでいます（最新版の配置です）。

タブ何をするところ？
ホームふつうにチャットで会話する。アイデア出し・文章書き・画像を見せて質問
Codeパソコンのファイルを直接読み書きして、ページやファイルを作る。講座の主役はここ
※バージョンによっては「Co-work（コワーク）」など他のモードも見えることがありますが、この講座では使いません。
Claude─　□　✕
ホーム </> Code ここ！
＋ 新規
アーティファクト
ルーティン
カスタマイズ
∨ もっと見る
作業フォルダを選んでください
Claudeが見る範囲 ＝ このフォルダの中だけ
ここに日本語でお願いを入力します…
※画面のイメージ図です。実際の画面と配置が少し違うことがあります。
ブラウザ版とアプリ版の違い：claude.ai をブラウザで開く方法もありますが、それは「チャットのみ」。Claude Codeを使うにはパソコンにインストールするデスクトップアプリが必要です。
Codeタブが見つからない時：画面の上のほう（左上あたり）に「ホーム／Code」のタブがあります。見当たらない場合は、アプリが古い可能性があるので一度終了して起動し直すか、アップデートしてください。それでも見つからなければ、スクショを撮って講座のLINEで聞いてくださいね。
インストールする
所要時間は15〜30分くらいです。順番1〜2はみなさん共通、3からはパソコンの種類で分かれます。
1
Claudeのアカウントを作る
claude.ai を開いて、Gmail（Googleアカウント）でログインするのがわかりやすいです。うまくいかない場合はメールアドレスでの新規登録でOK。
すでにClaudeのアカウントをお持ちの方は、それをそのまま使えます（作り直し不要）。無料プランの方は、次の順番2の課金だけお願いします。なお、スマホやブラウザでClaudeを使っている方も、講座ではパソコンのデスクトップアプリを使います（順番3で入れます）。
2
Proプランに入る（月額約3,000円）
ログイン後、画面の案内から「Pro」プランにアップグレードします。無料プランではClaude Codeが使えないため、講座ではProへの加入をお願いしています。まずはProで大丈夫です。
くわしい仕組みは、このタブの下の方「プランと『許可しますか？』の話」にあります。
ここからは、お使いのパソコンに合わせてどうぞ。
Windows
Mac
1
先に「Git for Windows」を入れる
Claude Codeはパソコンの中で「Git（ギット）」というソフトを使います。これがないと動きません。Git for Windowsのダウンロードページ を開いて、上の方の「Click here to download」を押す → ダウンロードしたファイルをダブルクリック → ぜんぶ「Next」を押し続けてOK → 最後にInstall → Finish。
確認方法：Windowsキー →「cmd」と入力してEnter → 黒い画面に git --version と打ってEnter →「git version 2.xx.x」と出れば成功です。※git-scm.comのトップページはパソコンに合わせてボタンが変わります（Macで開くと「Install for Mac」表示）。上のリンクからWindows専用ページに直接飛べるので安心してください。
2
Claude Desktopをダウンロード
claude.ai/download を開いて「Download for Windows」をクリック。
3
ダウンロードしたファイルをダブルクリック
インストールが自動で始まります（数分かかることがあります）。
「WindowsによってPCが保護されました」と出たら →「詳細情報」→「実行」で進めます。こわくないです。
4
ブラウザでログイン
アプリが起動するとブラウザが開いてログイン画面が出ます。
アカウントはGmail（Googleアカウント）でのログインがわかりやすいです。もしうまくいかない場合は、メールアドレスでの新規登録に切り替えれば大丈夫です。
5
「Code」タブを開いて動作確認
アプリ上部の「Code」タブをクリック → 画面の指示に従って初回設定（許可を聞かれたら「許可」「OK」）→ チャット欄に「こんにちは」と送って返事が来たら完了です。
Windowsの方がつまずきやすいポイント：手順1のGitを飛ばすと、あとで必ず「Gitをインストールしてください」と止まります。必ずGitから先に入れてください。インストール中にたくさん選択肢が出ますが、ぜんぶそのまま「Next」でOKです。
1
Claude Desktopをダウンロード
claude.ai/download から「Download for Mac」→ ダウンロードフォルダの Claude.dmg をダブルクリック → Claudeのアイコンを Applications フォルダへドラッグ。
2
起動してログイン
アプリを起動するとブラウザが開いてログイン画面が出ます。Gmail（Googleアカウント）でのログインがわかりやすいです。うまくいかない場合はメールアドレスでの新規登録でOK。
3
「Code」タブを開いて動作確認
アプリ上部の「Code」タブをクリック → 初回設定（許可を聞かれたら「許可」「OK」）→ チャット欄に「こんにちは」と送って返事が来たら完了です。
Macの方はほぼ全員ここでつまずきます：「開発者ツールが必要」「Gitが必要」というエラー。故障ではありません。下の手順で3分で直ります（待ち時間は5〜10分）。
① ⌘（コマンド）＋スペースを押す →「ターミナル」と入力してEnter
② 黒い画面が開いたら、この1行をコピペしてEnter：xcode-select --install
③ ポップアップが出たら「インストール」をクリック → 5〜10分待つ
④ 終わったらClaudeを一度終了して、開き直す
ターミナルの画面はこんな見た目です
ターミナル — zsh
あなたの名前@MacBook ~ % xcode-select --install
あなたの名前@MacBook ~ %
※画面のイメージ図です。黒い画面が出てきても、こわくないです。上の1行を貼るだけ。
うまくいかなくても大丈夫です。エラー画面のスクリーンショットを撮っておいてください。講座のはじめに一緒に直します。
プランと「許可しますか？」の話

Claude CodeはProプラン（月額約3,000円／$20）以上で使えます。無料プランはチャットだけなので、講座ではProプランへの加入をお願いしています。まずはProプランで大丈夫です。使う量が増えて「制限によく当たるな」と感じるようになったら、上のプラン（Max）へのアップグレードを検討してください。

知っておくこと内容
同じ財布チャットで使った量もCodeで使った量も、同じ上限から減ります。「チャットでたくさん壁打ち→Codeで作業しようとしたら制限」に注意
制限が来たら約5時間でリセットされます。あわてなくて大丈夫。待つ間はChatGPT（無料）で下準備をしておくのがおすすめ
節約のコツアイデア出しはChatGPT、資料の要約はNotebookLM（どちらも無料）、仕上げと制作はClaude Code、と使い分ける
「許可しますか？」と聞かれたら：Claudeは安全のため、ファイルを触る前に毎回確認してきます。自分の作業フォルダの中のことなら「Yes」でOKです。慣れてきたら「このセッションの間は許可」を選ぶと聞かれなくなります。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
ここは初回のオンラインで一緒にやります

事前に読まなくて大丈夫です。当日、画面を見ながら一緒に進めます。講座のあとで「あれ何だっけ？」と思ったときに戻ってくる場所として使ってください。

いちばん大事：フォルダの考え方

Claude Codeを安心して使うコツは、「作業用フォルダを1つ作って、そこだけを見せる」こと。これを知っておくと迷いません。

NG
パソコン全体を見せる → 写真も仕事のファイルも全部見えてしまう
OK
作業フォルダを1つ決めて、そこだけ見せる → 安心！
Claudeは「Select folder」で選んだフォルダの中しか見ません。まず、デスクトップに「claude-code」というフォルダを作りましょう（フォルダ名も英語にしておくと安心です）。その中に案件ごとのフォルダを作っていきます（例：claude-code → lp-project）。写真や資料をClaudeに見せたいときは、このフォルダにコピーして入れます（移動ではなくコピー）。

中の分け方のおすすめ：1つのプロジェクトごとにフォルダを作り、その中に画像用の「images」フォルダを作って写真やロゴを入れていきます。右腕のお仕事では、クライアントさんごとにフォルダを分けて、さらにその中で制作物ごと（LP・バナーなど）に分けると、あとから探しやすくなります。

デスクトップ / claude-code
├ client-a　← クライアントさんごとに分ける
│　├ lp　← 作るものごとに分ける
│　│　├ index.html
│　│　└ images　← 画像はここにまとめる
│　└ banner
└ client-b
フォルダ分けに迷ったら、Claude Codeに相談すればOK。「クライアントごとにフォルダを整理したい。どう分けるのがいい？」と聞けば、一緒に考えて、フォルダ作りまでやってくれます。最初から完璧に分けようとしなくて大丈夫です。

ファイル名は必ず英語で。日本語やスペース入りのファイル名は、Webに上げると文字化けして読み込めなくなります。英語・小文字・ハイフンつなぎが基本です。

GOOD
hero-image.jpg
logo.png
profile-photo.jpg
BAD
トップ画像.jpg
hero image.jpg（スペースNG）
スクリーンショット.png

画像の重さの目安は1枚500KB以下。写真はJPG、ロゴはPNGを選べばOK。迷ったらClaudeに「この画像を500KB以下に圧縮して」と頼めます。

基本的な使い方
インストールできたら、この3つを順番に試してみてください。秘書のお仕事にそのまま使える練習です。
1
まずは話しかけてみる（チャットモード）
コピペして試すプロンプト私はオンライン秘書をしています。クライアントとの打ち合わせ内容を箇条書きでメモしたのですが、これを綺麗な議事録に整えてもらえますか？
→ Claudeが議事録のフォーマットを提案してくれます。メモを貼り付けると整形してくれます。
2
ファイルを渡してみる
チャット欄のクリップマークから、手元のファイル（Excel・PDF・画像など）を添付して「このデータを分析して」「この資料を要約して」と伝えてみてください。中身を読み取って答えてくれます。
3
Claude Code機能を試す（Codeモード）
コピペして試すプロンプトクライアントの講座の告知文を3パターン作って、テキストファイルとして保存してください。講座名は「はじめてのメイクレッスン」、日時は8月20日（木）14:00、参加費5,000円です。
→ Claudeがファイルを作って、フォルダの中に保存してくれます。自分でコピペする必要がありません。
うまく使うコツ：最初に「あなたは〇〇の専門家です」と役割を伝えると、回答の質がグッと上がります。例：「あなたはLP制作のプロです」「あなたは敏腕のオンライン秘書です」。
プロジェクト機能も便利：左サイドバーの「Projects」で「クライアントA用」「講座用」などを分けておくと、やりとりが整理されます。資料を入れておけば、毎回添付しなくてもClaudeが参照してくれます。
セキュリティの約束（3つだけ）
クライアントさんの情報を預かるお仕事なので、最初に約束を3つだけ。
1
パスワード・クレジットカード情報は、AIに入力しない
ログイン作業やお支払いは、必ず自分の手で行います。
2
クライアントさんの個人情報は、むやみにフォルダに入れない
顧客リストや住所などを扱うときは、必ずクライアントさんに確認してから。使い終わったら削除します。
3
「許可しますか？」は、自分の作業フォルダの中ならYesでOK
それ以外の場所を触ろうとしていたら、一度手を止めて確認します。
1回目のあとの宿題（2つ）
1
自分の自己紹介ページを作ってみる
Claude Codeに日本語で頼んで、自己紹介ページ（または自分のサービスの紹介ページ）を1枚作ります。完成度は問いません。これが2回目で「世界に公開する」ページ＝あなたのポートフォリオの1枚目になります。
コピペして使えるお願い例私の自己紹介ページを1枚のHTMLで作ってください。名前は〇〇、オンライン秘書として活動を始めます。得意なこと・好きなこと・お問い合わせ先を、やさしい雰囲気のデザインで載せてください。
2
GitHubとCloudflareのアカウントを作っておく（どちらも無料）
2回目の「公開」で使う2つのサービスです。登録だけでOK。使い方は2回目に一緒にやります。
・GitHubのアカウント作成
・Cloudflareのアカウント作成
おすすめは、どちらも「Continue with Google」ボタンでの作成（Googleアカウントを選ぶだけ・パスワード設定なし）。そして2つとも同じGoogleアカウントを使うと、あとの連携作業で「あれ、違うメールだった？」のトラブルがゼロになります。英語のページですが押すボタンは1つ。うまくいかなくても2回目に一緒にやるので大丈夫。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
ここは2回目のオンラインで一緒にやります

作ったページをインターネットに公開して、URLを人に送れるようになる回です。むずかしそうに見えますが、画面を一緒に見ながら進めるので安心してください。

公開の仕組み：3つの場所を通るだけ

お料理に例えると、こんな流れです。

場所例えるなら何をするところ？
あなたのパソコン自分のキッチンClaude Codeとページを作る。この時点では自分しか見えない
GitHub冷蔵倉庫作ったものを保管。パソコンが壊れても安心、履歴も残るので前の版に戻せる
Cloudflareお店のテーブル倉庫の中身を、世界中の人が見られるURLにして届ける
「リポジトリ」という言葉だけ覚えてください。GitHubの倉庫の中に作る、作品ごとの「箱」のことです（例：jikoshokai-lp という箱に自己紹介ページ一式を入れる）。1つの作品＝1つのリポジトリ、と覚えればOK。
一度つなげば、あとは全自動。最初に「GitHubとCloudflareをつなぐ設定」を1回だけやれば、次からはClaude Codeに頼むだけでページが自動更新されるようになります。
じゅんび：3つのチェック
1
GitHubにログインできる（まだの方は アカウント作成。「Continue with Google」が一番かんたん）
2
Cloudflareにログインできる（まだの方は アカウント作成。GitHubと同じGoogleアカウントで）
3
Chrome右上のClaude in Chromeがログイン状態になっている
時間が経つと自動でログアウトされることがあります。アイコンを押してログイン画面が出たら、再ログインしてください。
手順1：GitHubに「保管箱（リポジトリ）」を作る
やり方は2つ。どちらでもOKです。

かんたんな方：Claude Codeに頼む

コピペして使えるお願い台本このフォルダのために、GitHubに「jikoshokai-lp」という名前のPrivate（非公開）リポジトリを作って、ファイルをアップロードしてください。

自分でやる方：GitHubの画面から
GitHub右上の「＋」→「New repository」→ 名前を入力（英語・小文字・ハイフン。例：jikoshokai-lp）→ Privateを選ぶ →「Create repository」

必ず「Private（非公開）」を選んでください。Publicにすると、中のファイルが世界中から見える状態になります。「Privateだと公開できないのでは？」→ 大丈夫。Privateのままでも、Cloudflare経由でページの見た目だけを公開できます。
手順2：CloudflareとGitHubをつなぐ（最初の一度だけ）
前回の講座で、みなさんが一番つまずいたところです。ゆっくりやれば大丈夫。
1
Cloudflare にログイン
2
左メニューの「Workers & Pages」を開く
日本語画面だと「建てる」→「従業員とページ」という変な翻訳になっていることがあります。驚かないでください。それです。
3
「アプリケーションを作成する（Create）」→ 下の方の「Pagesを導入しようとお考えですか？ 始める」を押す
4
「GitHubに接続」を押して、許可の画面で「All repositories」を選ぶ
5
自分のリポジトリ（jikoshokai-lp）を選んで「保存してデプロイ」→ 1〜2分待つと、あなたのURLが発行されます
いちばん大事：手順4は必ず「All repositories」。「Only select repositories」を選ぶと、あとで作ったリポジトリがCloudflareから見えなくなって詰まります。前回2時間つまずいたのは、ここでした。
手順3：2回目以降は「呪文」ひとつ
一度つながれば、もうこのページに戻る必要はありません。ページを直したら、Claude Codeにこう言うだけです。
コピペして使える呪文GitHubにプッシュして、Cloudflareでデプロイして
これだけで、1〜2分後にはネット上のページが新しくなります。URLは変わりません。お仕事では「直しては公開」の繰り返しなので、この呪文が毎日の相棒になります。
途中でブラウザが開いて、GitHubやCloudflareの「ログイン」や「Authorize（許可）」ボタンが出たら、押して大丈夫です。「Claudeがあなたの倉庫とお店を使えるようにする」ための確認で、最初の1回だけ聞かれます。
つまずいたら：Claude Codeに「もう一度認証からやり直したい」とそのまま伝えるか、画面のスクショを講座のLINEへ。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
講座で使う道具の置き場です

ここに載っている物は、講座の進みに合わせて「今日はこれを入れましょう」とご案内します。先回りして入れてもOKですが、まずはセットアップタブの完了が先です。最初に入れるのはClaude in Chrome、SuperpowersとUI UX Pro Maxは講座の中でご案内します。それぞれ、押せるリンクとコピペできる手順つきです。

拡張機能：Claude in Chrome

ClaudeがChromeブラウザを直接操作できるようになる拡張機能です。調べものやWeb上の作業を手伝ってもらえるようになります。

いちばん最初に入れてほしい拡張機能です。Claudeが調べものやWeb上の作業を手伝えるようになります。セットアップタブが終わったら、次はこれを入れましょう。
Chromeが必須です。この拡張機能はGoogle Chromeにしか対応していません。MacはSafari、WindowsはEdgeが標準になっていることが多いので、Chromeが入っていない方は先に google.com/chrome からインストールしてください。
1
Chromeブラウザを開く
2
Chromeウェブストアで「Claude in Chrome」を検索して「Chromeに追加」をクリック
3
右上に「Claude in Chrome」のアイコンが出たら完了。Claudeアカウントでログインする
Superpowers（スーパーパワーズ）
Anthropic公式の「上級の技の詰め合わせ」プラグイン。段取り・計画・確認が上手になります。講師陣も使っています。
ターミナルは使いません。アプリの中から、マウスだけで入れられます。前提：Claude Desktop（最新版）＋Proプラン。
1
Claude Desktopの左サイドバーから「カスタマイズ」を開き、メニューの「プラグイン」を選ぶ
Claude─　□　✕
ホーム </> Code
＋ 新規
アーティファクト
ルーティン
カスタマイズここ！
∨ もっと見る
※画面のイメージ図です。
2
検索ボックスに superpowers と入力 →「Superpowers」のカードを選ぶ
3
「インストール」を押せば完了。次から、計画・確認などの技が自動で使われるようになります
つまずいたら：「プラグイン」が見当たらない → アプリを最新版にアップデート／検索に出てこない →「Anthropic＆パートナー」タブを選んでから検索／入れたのに動かない → アプリを一度終了して再起動。
UI UX Pro Max（デザインの知識ライブラリ）
配色・フォント・レイアウトの知識をClaude Codeに教え込むスキル。「AIっぽい平凡なデザイン」から抜け出せます。LPやバナーを作る回までに入れれば十分です。
1
下のURLをぜんぶコピーする
コピーするURLhttps://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
2
Claude Codeのチャット欄に貼り付けて、こう頼む
コピペして使えるお願い例https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
こちらのスキルを導入してください
→ Claude Codeが自動で取得して設置してくれます。
使い方の例：「美容サロンのLPを作って。上品でやわらかい雰囲気で」と頼むだけ。業界に合った配色・フォントで仕上げてくれるようになります。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
困ったときは（Q&A）
クリックすると答えが開きます。
Windowsの方のつまずきポイント
「Gitをインストールしてください」と出ました
Claude Codeは内部でGitというソフトを使うので、先にGit for Windowsが必要です。Git for Windowsのダウンロードページ から「Click here to download」→ ダウンロードしたファイルを開いて、すべて「Next」→ Install → Finish → Claudeを再起動してください。
Gitのインストール中、選択肢がたくさん出てきて不安です
ぜんぶそのまま「Next」を押し続けて大丈夫です。何も変更する必要はありません。最後にInstall → Finishで完了です。
「WindowsによってPCが保護されました」と出ました
「詳細情報」→「実行」の順にクリックすれば進めます。Claudeは公式のアプリなので、こわがらなくて大丈夫です。セキュリティソフトがブロックしてくる場合は、一時的に許可してください。
アプリが開かない・動かない
パソコンを再起動してからもう一度試してください。それでも動かない場合は、アプリのアイコンを右クリック →「管理者として実行」を試してください。
黒い画面（cmd）ってどうやって開くの？
キーボードのWindowsキーを押して「cmd」と入力し、Enterを押すと開きます。Gitが入ったか確認するときは、この黒い画面に git --version と打ってEnter。「git version 2.xx.x」と出れば成功です。
ダウンロードしたファイルがどこにあるか分かりません
エクスプローラー（フォルダのアイコン）を開いて、左側の「ダウンロード」をクリックすると見つかります。ブラウザの右上のダウンロードマーク（↓）からも開けます。
デスクトップに作ったフォルダが「OneDrive」の中にあるようです
Windowsでは、デスクトップが自動でOneDrive（クラウド同期）とつながっていることがあります。そのままでも使えますが、同期マークがぐるぐるして気になる場合は、作業フォルダを「ドキュメント」やCドライブ直下など、OneDriveの外に作ってもOKです。分からなければそのままで大丈夫、講座で一緒に確認します。
Macの方のつまずきポイント
「ローカルセッションにはGitが必要です」と出ました
⌘＋スペース →「ターミナル」と入力して開く → xcode-select --install をコピペしてEnter → ポップアップで「インストール」をクリック（5〜10分）→ 完了したらClaudeを再起動。ターミナルで git --version と打って「git version 2.xx.x」と出れば成功です。
共通のよくある質問
Gmail（Google）でログインできない
その場合は、メールアドレスでの新規登録に切り替えてください。どちらで作っても同じように使えます。
CodeモードやCo-workが見つからない・消えた
画面左上の三本線（≡）マークをクリックしてサイドバーを開いてください。Claude／Co-work／Codeの切り替えがそこに並んでいます。再インストールは必要ありません。
ファイルがどこに保存されたか分からない
Claudeに「今作ったファイルはどこにありますか？フォルダを開いて見せて」とそのまま聞いてください。場所を答えて開いてくれます。基本は「Select folder」で選んだ作業フォルダの中にあります。
解決しないときは：エラー画面のスクリーンショットを撮って、Claudeのチャットに貼り付けて「これどうしたらいい？」と聞くのが一番早いです。それでも困ったら、スクショを講座のLINEに送ってください。一緒に解決します。
▲ 最初に戻る（タブ選択へ）