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

Claude Code はじめてガイド

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

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

このガイドはタブに分かれています。事前にやっていただくのは「セットアップ」タブだけ。残りのタブは講座の回ごとの内容で、当日一緒に進めるので読んでおかなくて大丈夫です。
この講座と、このガイドについて

オンライン秘書養成講座は、4ヶ月の講座です。メイン講師の葉子さんと、AI実践パート担当のあやの2人で伴走します。

担当内容
葉子さんメイン講師。考え方（愛されマーケ）・お金の管理・全体の伴走・毎朝のマインドアップ音声
あや外部講師。AI実践パート（下の4回）と、4ヶ月間のLINEサポート

このガイドは、AI実践パートのための1冊です。タブが担当の回に対応しています。

担当の回やること・見るタブ
導入の回Claude Code導入・基本設定 →「第1回 導入」タブ
Obsidianの回ナレッジを貯める →「Obsidian」タブ
公開の回LPを実際に公開してみる →「LPと公開」タブ
仕上げの回AIでLPブラッシュアップ →「LPと公開」タブ
いま、やっていただくのはセットアップタブ（インストール）だけです。各回の日程は、その都度よっこさんからご案内があります。
セットアップ事前にやること
第1回 導入当日一緒にやる
Obsidianナレッジを貯める
LPと公開作って世界に出す
かんたん公開公開して、の一言で
便利ツール自分のペースでOK
困ったときいつでもここ
▲ 最初に戻る
このタブが「事前にやること」です

講座が始まる前にやっていただくのは、このタブの内容だけ（所要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が必要」というエラー。故障ではありません。下の手順どおりで直ります（待ち時間を入れて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 in Chrome
Chromeの拡張機能も、セットアップと一緒に入れておきましょう。特にWindowsの方は、先に入れておくとあとの回がスムーズです。
1
Google Chromeを入れる（お持ちでない方だけ）
google.com/chrome
2
Chromeウェブストアで「Claude in Chrome」を検索して「Chromeに追加」
3
右上のアイコンから、Claudeアカウントでログインしたら完了
くわしい説明とつまずき対策は「便利ツール」タブにあります。
講座で使う道具たち（名前だけ先にご紹介）

いま入れるのはClaude Codeだけで大丈夫です。ほかの道具は、使う回になったら一緒に入れます。名前だけ覚えておいてください。

道具なにをしてくれる？いつ入れる？
Claude in ChromeChromeに入れる拡張機能。Claudeが調べものやWeb上の作業を手伝えるようになる。公開の設定でも活躍すぐ上のカードの手順で、セットアップと一緒に
Obsidianナレッジを貯めるノートアプリ。貯めた言葉がAIの材料になるObsidianの回に一緒に。先に入れるのは宿題でご案内
Typeless音声入力の道具。話すだけで文章になり、AIへのお願いがタイプより速くなる講座の中でご案内します
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
ここは第1回のオンラインで一緒にやります

事前に読まなくて大丈夫です。当日はこのページを上から順に、画面を見ながら一緒に進めます。あとで思い出したいときに戻ってくる場所としても使ってください。

はじめに（最初の15分）
1
ごあいさつと、この4ヶ月でなれる姿のお話
この講座でのビジョンとマインドセットを、よっこさんからお話しします。
2
バトンタッチして、あやの自己紹介
3
仁美さんの「なっていたい姿」をお聞きします
ここで言葉にした姿が、4ヶ月の道しるべになります。
当日の流れ
90分の目安です。インストールは事前にグループLINEで済ませておくので、当日は確認だけです。
時間やること
最初の20分よっこさんから、4ヶ月で目指すことのお話 → バトンタッチして自己紹介・なっていたい姿
20〜30分Claude Codeの画面を一緒に見る（開くかの確認・チャッピーとの違い）
30〜50分フォルダを作って貯まるイメージ・許可の意味・モデルとトークンの話・セキュリティ
50〜65分できることを体験：フォルダの整理を頼んでみる
65〜85分プロフィール1枚を作る（見本と頼み方つき）
最後の5分宿題と、これからのスケジュールのご案内（よっこさんから）
ChatGPTと、AIエージェントの違い

どちらもAIですが、働き方が違います。答えてくれるAIと、手を動かしてくれるAIの違いです。

ふつうのチャットAIAIエージェント（Claude Code）
質問すると答えが返ってくる。使うのは自分でコピペしてから頼むと自分で手を動かす。ファイルを作り、直し、保存までやってくれる

道具は使い分けます。ぜんぶをひとつでやろうとしなくて大丈夫です。

道具得意なこと
ChatGPT文章の壁打ち・アイデア出し・言い回しの相談
NotebookLM資料を読み込ませて、その中身について調べる・要約する
Claude Code実際に作る係。ページ・資料・ファイルの制作と修正
いちばん大事：フォルダの考え方

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つだけ）
クライアントさんの情報を預かるお仕事なので、最初に約束を3つだけ。
1
パスワード・クレジットカード情報は、AIに入力しない
ログイン作業やお支払いは、必ず自分の手で行います。
2
クライアントさんの個人情報は、むやみにフォルダに入れない
顧客リストや住所などを扱うときは、必ずクライアントさんに確認してから。使い終わったら削除します。
3
「許可しますか？」は、自分の作業フォルダの中ならYesでOK
それ以外の場所を触ろうとしていたら、一度手を止めて確認します。
現実的な線引きも、お伝えします。パスワードとカード情報は絶対に入れない。お客様のこまかい個人情報も、基本は入れない。メールアドレスなどをどこまで徹底するかは、ご自身の基準で大丈夫です。気にしすぎると何もできなくなるので、絶対の2つだけ守るところから始めましょう。
より慎重にしたい方へ：サンドボックスという設定があります。作業を閉じた箱の中で動かす仕組みで、クライアントさんの情報を扱うときに、より有効です。入れ方は「便利ツール」タブにあり、講座の中でもご案内します。
正直にお伝えします。AIエージェントに任せる以上、リスクはゼロではありません。限りなく小さくできますし、私も今まで暴走は一度も見ていません。それでも心配が残る情報は、Claude Codeに入れず自分の手で扱う。この住み分けが、いちばんの安心です。
モデルとトークンの話（かんたんに）
1
Claudeの頭脳には種類があります（モデル）
かしこくてじっくり型のOpus（オーパス）、バランス型のSonnet（ソネット）など。ふだんは選ばれているものでOK。使い分けは講座の中で慣れていきます。
2
使うぶんだけ減っていくのがトークン
会話や作業の量に応じて使う、チケットのようなものです。Proプランは一定時間ごとに回復します。
3
制限に当たったら、休憩の合図
数時間で戻ります。壊れたわけではないので安心してください。
基本的な使い方
インストールできたら、この3つを順番に試してみてください。秘書のお仕事にそのまま使える練習です。
1
まずは話しかけてみる（チャットモード）
コピペして試すお願い文私はオンライン秘書をしています。クライアントとの打ち合わせ内容を箇条書きでメモしたのですが、これを綺麗な議事録に整えてもらえますか？
→ Claudeが議事録のフォーマットを提案してくれます。メモを貼り付けると整形してくれます。
2
ファイルを渡してみる
チャット欄のクリップマークから、手元のファイル（Excel・PDF・画像など）を添付して「このデータを分析して」「この資料を要約して」と伝えてみてください。中身を読み取って答えてくれます。
3
Claude Code機能を試す（Codeモード）
コピペして試すお願い文クライアントの講座の告知文を3パターン作って、テキストファイルとして保存してください。講座名は「はじめてのメイクレッスン」、日時は8月20日（木）14:00、参加費5,000円です。
→ Claudeがファイルを作って、フォルダの中に保存してくれます。自分でコピペする必要がありません。
プロジェクト機能も便利：左サイドバーの「Projects」で「クライアントA用」「講座用」などを分けておくと、やりとりが整理されます。資料を入れておけば、毎回添付しなくてもClaudeが参照してくれます。
できることを体験：フォルダの整理を頼んでみる

Claude Codeは、文章だけでなくパソコンの中の実物を動かせます。最初の体験にぴったりなのが、フォルダの整理です。

コピペして使えるお願い文この作業フォルダの中を見て、内容ごとにフォルダ分けして整理してください。動かす前に、どう分けるかの案を見せてください。
目の前でフォルダが動くのを見ると、AIエージェントの意味が一気に分かります。「動かす前に案を見せて」を付けると、勝手に動かず安心です。
AIへの頼み方：むずかしい呪文は要りません

ふだんの話し言葉で大丈夫です。「今回はこういうものを作りたい」と伝えるだけ。プロンプトの勉強は要りません。

そのかわり、ひとつだけ大事な力があります。言語化力です。「なんとなくいい感じに」だと、出てきたものが正解かどうか、自分でも分からなくなります。どういうものを作りたいか。その具体的なイメージを、自分の中にしっかり持っておくことが一番の近道です。
1
作りたいもののイメージを、先に言葉にする
誰に見せるものか。どんな雰囲気か。何ができたら完成か。
2
出てきたものを、イメージに近づけていく
3
Claudeが出したもののほうが良ければ、採用してOK
こだわりと柔らかさの両方があると、一番いいものになります。
イメージがあると迷いがなくなり、最短で作れます。これは制作物に限らず、仕事の流れをお願いするときも同じです。
指示の出し方（3つのコツ）
むずかしい言葉は要りません。人にお願いするときと同じです。
1
最初に役割を伝える
「あなたは敏腕のオンライン秘書です」のように伝えると、答えの質が上がります。
2
完成のイメージを渡す
好きなページのURLやスクショを見せて「この雰囲気で」と頼めます。ゼロから言葉で説明しなくて大丈夫です。
3
直したい所は、スクショで見せる
気になる場所のスクショを撮って「ここをこうしたい」。言葉で探すより早くて確実です。
プロフィール1枚を、その場で作ってみる

第1回のしめくくりに、自分のプロフィールページを実際に1枚作ります。まず見本を見てから、下のお願い文を貼って、名前などを自分のものに変えるだけです。

見本のプロフィールページを見る

コピペして使えるお願い文私のプロフィールページを1枚のHTMLで作ってください。名前は〇〇。いまは〇〇のお仕事をしていて、これからオンライン秘書として活動を始めます。自己紹介・できること3つ・お問い合わせ先を、上品でやさしい雰囲気のデザインで載せてください。スマホで見やすく、写真をあとで入れられる場所を2つ作ってください。
完成度は気にしなくて大丈夫です。ここで作った1枚が、あとの回で世界に公開する最初のページになります。育てていきましょう。
プロフィールページで練習できること（7つ）
作った1枚が、そのまま練習台になります。順番は自由。1日1つでも大丈夫です。
1
写真を入れる
作業フォルダの中にimagesフォルダを作って写真を入れてから、「imagesの中の写真を、プロフィール写真の場所に入れて」
2
色を変える
「見出しの色を、やさしいピンクに変えて」
3
フォントを変える
「全体のフォントを、丸ゴシックにして」
4
文章を差し替える
「はじめましての文章を、この文に差し替えて：（自分の文）」
5
リンクを付ける
「お問い合わせボタンに、このURLを付けて：（インスタなどのURL）」
6
項目を増やす
「できることに、4つ目を足して：（内容）」
7
元に戻す
「さっきの変更を、ぜんぶ元に戻して」
「元に戻す」を最初に覚えると、怖いものがなくなります。何をどう変えても戻れるので、遠慮なく実験してください。
仕上げに、変えたページをスマホの幅でも見てみましょう。気になる所はスクショを撮って「ここをこうしたい」で直せます。
1回目のあとの宿題（3つ）
1
当日作ったプロフィールページを、仕上げてみる
上の練習メニューから、2〜3個試してみてください。写真を入れる・文章を直す、あたりがおすすめです。これがLPの回で「世界に公開する」ページ＝あなたのポートフォリオの1枚目になります。完成度は問いません。
2
GitHubとCloudflareのアカウントを作っておく（どちらも無料）
あとの「LPを公開する回」で使う2つのサービスです。登録だけでOK。使い方は公開の回に一緒にやります。急がなくて大丈夫です。
・GitHubのアカウント作成
・Cloudflareのアカウント作成
おすすめは、どちらも「Continue with Google」ボタンでの作成（Googleアカウントを選ぶだけ・パスワード設定なし）。そして2つとも同じGoogleアカウントを使うと、あとの連携作業で「あれ、違うメールだった？」のトラブルがゼロになります。英語のページですが押すボタンは1つ。うまくいかなくても当日一緒にやるので大丈夫。
3
Obsidianを入れておく（無料）
obsidian.md/download からダウンロードしてインストール。
開いて英語の画面が出たら、そのまま閉じてOK。設定はObsidianの回に一緒にやります。
次の回の日程は、よっこさんからのご案内をお待ちください。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
Obsidianで、ナレッジを貯める回

棚卸しの回とセットでやります。実践込みのセミナー（1時間半〜2時間ぶんの内容）を、ぎゅっとまとめてお届けします。事前に読まなくて大丈夫です。

Obsidianってなに？

Obsidian（オブシディアン）は、無料のノートアプリです。ふつうのメモアプリと違うのは、書いたものが全部、自分のパソコンの中のただのファイルだということ。だからClaude Codeがそのまま読めます。

ここが最強の組み合わせです。Obsidianに貯めたあなたの言葉を、Claude Codeが読んで、発信文やページ作りの材料にしてくれます。
貯めると、なにがいいの？
1
話したこと・気づいたことが、消えずに資産になる
お客様の声・自分の強み・学んだことは、忘れる前にノートへ。
2
AIが「あなたのこと」を知った状態で書いてくれる
ゼロから書かせた文章は他人の言葉になりがち。ノートが増えるほど、あなたの言葉で出てきます。
3
棚卸しが、そのまま商品の材料になる
講座で出す自分の強み・お客様の悩みのメモが、あとのLPやプロフィールの本文になります。
貯めて、引き出す（4ステップ）
メモする気づき・お客様の声・
自分の言葉
Obsidianに貯まるぜんぶ自分の
パソコンの中
Claudeが読む「私のノートを
読んで」と頼む
言葉が出てくる発信文・プロフィール・
LPの材料に
1
作業フォルダをObsidianで開く
Claude Codeと同じフォルダを見るように設定します。当日一緒にやります。
2
気づき・お客様の声・自分の言葉をメモしていく
きれいに書かなくて大丈夫。1行でも貯まれば財産です。
3
Claude Codeに「私のノートを読んで」と頼む
4
発信文・プロフィール・LPの文章が、自分の言葉で出てくる
コツは、講座の早いうちから少しずつ貯めること。あとの回で作るものが、ぜんぶ楽になります。
事前準備（当日までに1つだけ）
1
Obsidianをダウンロードしておく（無料）
obsidian.md/download から、お使いのパソコンに合う版をダウンロードしてインストール。
開いて英語の画面が出たら、そのまま閉じてOK。設定は当日一緒にやります。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
LPを作って、公開する回（2回に分けます）

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

AIにまるごとお任せする方法もあります。「かんたん公開」タブをどうぞ。ここは仕組みを知りたいとき・手作業でやりたいときの地図です。
回やること
公開の回形ができたページを、GitHubとCloudflareで一旦公開してみる。公開したリンクをスマホで見て、見え方を確認するところまで
仕上げの回より詳しく。直し方・見やすくするコツ・頼み方のコツをデザイナー目線でお伝えします
モデリングのやり方（ゼロから作らない）

プロのデザイナーも、ゼロからは作りません。いいなと思うページを見つけて、参考にするのが一番の近道です。

1
好きな雰囲気のページを1つ見つける
同業の方のLP・好きなお店のサイト、なんでもOK。
2
URLかスクショをClaude Codeに渡す
「このページの雰囲気を参考に作ってください」でOK。丸写しではなく、雰囲気と構成を参考にします。
3
いいなと思った理由を、ひとこと添える
「色がやさしい」「文字が大きくて読みやすい」。理由を言葉にすると、仕上がりがぐっと寄ります。
直し方のコツ（デザイナーの目）
1
直したい所は、スクショで見せる
「ここの文字を大きく」「この写真を差し替え」。場所を言葉で説明するより早いです。
2
1回のお願いは、1〜2個ずつ
まとめて10個頼むと、直りもれが出ます。少しずつ確実に。
3
必ずスマホでも見る
見る人のほとんどはスマホです。公開したURLを自分のスマホで開いて確認します。
公開の仕組み：3つの場所を通るだけ

通る場所は3つだけです。

場所何をするところ？
あなたのパソコンClaude Codeとページを作る。この時点では自分しか見えない
GitHub作ったものを保管する。パソコンが壊れても安心、履歴も残るので前の版に戻せる
Cloudflare保管したものを、世界中の人が見られるURLにして届ける
自分のパソコンClaudeと
ページを作る
GitHub作ったものを
保管する
CloudflareURLにして
世界に届ける
スマホで確認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」

GitHub─　□　✕
Dashboard ＋ ▾ここ！
New repository
Import repository
New gist
＋を押すと出てくる一覧から、いちばん上を選びます
Create a new repository─　□　✕
Repository name（箱の名前）
jikoshokai-lp
jikoshokai-lp is available.
Public　←選ばない
Anyone on the internet can see this repository.
Private　←こちらを選ぶここ！
You choose who can see this repository.
Create repository
最後にこの緑のボタンを押したら完成です
※画面のイメージ図です。実際の画面は英語ですが、押す場所は同じです。
いちばん大事：必ず「Private（非公開）」を選んでください。ここを間違えると、中のファイルが世界中から見える状態になります。
選ばない
Public（公開）
世界中の誰でも中のファイルを見られる。お客様の情報や下書きも丸見えに
こちらを選ぶ
Private（非公開）
中を見られるのは自分だけ。ページの見た目だけが公開される
Privateだと公開できないのでは？→ 大丈夫です。Cloudflareは、Privateのリポジトリからでも無料で公開URLを発行できます。
手順2：CloudflareとGitHubをつなぐ（最初の一度だけ）
前回の講座で、みなさんが一番つまずいたところです。ゆっくりやれば大丈夫。
1
Cloudflare にログイン
2
左メニューの「Workers & Pages」を開く
日本語画面だと「建てる」→「従業員とページ」という変な翻訳になっていることがあります。驚かないでください。それです。
3
「アプリケーションを作成する（Create）」→ 下の方の「Pagesを導入しようとお考えですか？ 始める」を押す
Cloudflare─　□　✕
Ship something new
Continue with GitHub　←押さない
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でデプロイして
意味は「プッシュ＝GitHubに送る」「デプロイ＝公開する」です。
これだけで、1〜2分後にはネット上のページが新しくなります。URLは変わりません。お仕事では「直しては公開」の繰り返しなので、この呪文が毎日の相棒になります。
途中でブラウザが開いて、GitHubやCloudflareの「ログイン」や「Authorize（許可）」ボタンが出たら、押して大丈夫です。「ClaudeがあなたのGitHubとCloudflareを使えるようにする」ための確認で、最初の1回だけ聞かれます。
つまずいたら：Claude Codeに「もう一度認証からやり直したい」とそのまま伝えるか、画面のスクショを講座のLINEへ。
用語まとめ（分からなくなったらここ）
HTMLWebページの設計図。Claudeが書いてくれるので覚えなくてOK
リポジトリGitHubの中に作る、作品ごとの箱。1つの作品＝1つの箱
プッシュパソコンからGitHubへファイルを送ること。Claudeが自動でやります
GitHubインターネット上のファイル置き場。保管・履歴・バックアップ
CloudflareGitHubのファイルを自動で公開してくれるサービス。無料で商用OK
デプロイ公開する、のIT用語。ファイルをインターネットに置くこと
URLWebページの住所。送れば誰でもページを見られます
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
「公開して」の一言で、公開できるようにする

公開スキルという「AIに渡す手順書」を一度入れておくと、GitHubへの送信からCloudflareの設定・公開まで、AIが進めてくれるようになります。手作業の手順（LPと公開タブ）を、まるごとお任せする形です。

この仕組みは、チームのゆみさん・ちゃかなんさんが作って検証したものを、Claude Code向けに調整したものです。
じゅんび：3つのチェック
1
GitHubにログインできる（まだの方は アカウント作成）
2
Cloudflareにログインできる（まだの方は アカウント作成。GitHubと同じGoogleアカウントで）
3
Chrome右上のClaude in Chromeがログイン状態になっている
Cloudflareの画面操作を、AIがこの拡張機能でやってくれます。まだの方は claude.ai/chrome から（くわしい手順は「便利ツール」タブ）。効いているかの確かめ方は、すぐ下にあります。
Claude in Chromeが効いているか、確かめる
1
Chromeの右上で、このマークを探す
Chrome右上のClaude in Chromeのマーク
赤で囲んだ、オレンジの花火のようなマークがClaude in Chromeです。Windowsでも同じ場所にあります。見当たらないときは、隣のパズルのマークを押すと一覧に出てくるので、ピンのマークを押すと右上に固定できます。
2
マークを押して、Claudeの画面が開けばOK
ログイン画面が出たら、Claudeアカウントでログインしてください。すでにログイン済みなら、そのままチャットの画面が開きます。
3
仕上げに、Claude Codeから確認する
コピペして試すお願い文Claude in Chromeにつながっているか確認して、いまChromeで開いているタブのタイトルを教えてください。
→ タブの名前が返ってきたら、連携ばっちりです。公開をお任せできる状態になっています。
つながらないと言われたら：Chromeを一度閉じて開き直す→拡張機能のアイコンからログインし直す、の順で直ることが多いです。それでもダメなら、その画面のスクショを講座のLINEへ。
公開の仕組み：3つの場所を通るだけ

通る場所は3つだけです。

場所何をするところ？
あなたのパソコンClaude Codeとページを作る。この時点では自分しか見えない
GitHub作ったものを保管する。パソコンが壊れても安心、履歴も残るので前の版に戻せる
Cloudflare保管したものを、世界中の人が見られるURLにして届ける
自分のパソコンClaudeと
ページを作る
GitHub作ったものを
保管する
CloudflareURLにして
世界に届ける
スマホで確認URLを開けば
誰でも見られる
「リポジトリ」という言葉だけ覚えてください。GitHubの中に作る、作品ごとの「箱」のことです（例：jikoshokai-lp という箱に自己紹介ページ一式を入れる）。1つの作品＝1つのリポジトリ、と覚えればOK。
一度つなげば、あとは全自動。最初に「GitHubとCloudflareをつなぐ設定」を1回だけやれば、次からはClaude Codeに頼むだけでページが自動更新されるようになります。
リポジトリ（作品の箱）は、作らなくて大丈夫です

ふつうの手順では、先にGitHubの画面でリポジトリという箱を作ります。このタブのやり方では、そこもAIがやってくれます。自動で非公開（Private）の箱を作って、ファイルを入れて、公開までつなげます。

自分の手で作ってみたい方・画面つきの手順を見たい方は「LPと公開」タブにあります。
手順は、こちらの1枚にまとまっています

スキルの入れ方から、はじめての公開、次からの一言まで。この順番どおりに進めば公開できます。

かんたん公開の手順ページを開く

途中で止まったら、その画面のスクショを講座のLINEへ。手作業でやりたいときは「LPと公開」タブに画面つきの地図があります。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
あると便利なツールの置き場です

このタブのツールは、講座の回では扱いません。あると作業がぐっと楽になるものを集めてあるので、ご自身のペースで進めてみてください。わからないことやエラーが出たら、そのままLINEでご連絡ください。Claude in Chromeだけは必須なので、セットアップと一緒に入れておいてくださいね。

拡張機能：Claude in Chrome

ClaudeがChromeブラウザを直接操作できるようになる拡張機能です。調べものや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を作って。上品でやわらかい雰囲気で」と頼むだけ。業界に合った配色・フォントで仕上げてくれるようになります。
セキュリティ設定：サンドボックス
より慎重にしたい方向けの設定です。Claudeの作業を、閉じた箱の中に限定して動かします。クライアントさんの情報を扱うお仕事では、入れておくと安心が一段上がります。

設定は講座の中で、画面を見ながら一緒にやります。ここでは「そういう安全装置がある」とだけ覚えておいてください。

それでも心配が残る情報は、Claude Codeに入れず自分の手で扱う住み分けが一番です。詳しくは第1回タブのセキュリティの約束へ。
Typeless（タイプレス）：音声入力

話すだけで文章になる、音声入力の道具です。AIへのお願いは長い文になりがちなので、タイプするより話すほうが何倍も速いです。無料プランから始められます。

1
下のリンクから登録する
Typelessに登録する
あやの紹介リンクです。ここから登録すると、Typeless Proで使える5ドル分のクレジットがつきます。
入れるタイミングは、講座の中でご案内します。先に急がなくて大丈夫です。
▲ 最初に戻る（タブ選択へ）
▲ 最初に戻る
困ったときは（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のタブが見つからない・消えた
画面の上のほうに「ホーム」と「Code」のタブが並んでいます。ウィンドウが小さいと隠れることがあるので、ウィンドウを大きくしてみてください。それでも出ないときは、アプリを一度終了してもう一度開くと戻ります。再インストールは必要ありません。
ファイルがどこに保存されたか分からない
Claudeに「今作ったファイルはどこにありますか？フォルダを開いて見せて」とそのまま聞いてください。場所を答えて開いてくれます。基本は「Select folder」で選んだ作業フォルダの中にあります。
ダウンロードしたファイルが、どこにあるか分からない（Windows）

ダウンロードしたものは、ほぼ必ず「ダウンロード」フォルダに入っています。見つけ方は2つあります。

見つけ方1：ブラウザの右上の、下向き矢印マーク

ブラウザ（ChromeやEdge）─　□　✕
git-scm.com ↓ここ！ ︙
最近のダウンロード履歴
Git-2.55.0-64-bit.exe
押すとそのまま開けます。「フォルダに表示」で場所も開けます
※画面のイメージ図です。矢印マークを押すと、いままでダウンロードしたものの一覧が出ます。

見つけ方2：エクスプローラーの「ダウンロード」フォルダ

エクスプローラー─　□　✕
デスクトップ
ダウンロードここ！
ドキュメント
ピクチャ
Git-2.55.0-64-bit.exe
これをダブルクリックするとインストールが始まります
※タスクバーの黄色いフォルダのマークから開けます。左の一覧に「ダウンロード」があります。
ファイルが見つかったら、ダブルクリックでOK。設定はなにも変えずにNextを押していき、最後にFinishで完了です。
スキルやプラグインの導入で止まった（Windows）
まずClaude Codeに「gitが入っているか確認して」とそのまま聞いてください。入っていなければ、セットアップタブのWindows手順1（Gitのインストール）を先に済ませます。それでも止まるときは、エラーのスクショをそのままClaude Codeに貼れば、原因を調べて直してくれます。
解決しないときは：エラー画面のスクリーンショットを撮って、Claudeのチャットに貼り付けて「これどうしたらいい？」と聞くのが一番早いです。それでも困ったら、スクショを講座のLINEに送ってください。一緒に解決します。
▲ 最初に戻る（タブ選択へ）
講座のホーム（会員サイト）に戻る