KICKOFF · 2026.09

AI Craft Hub

Claude Code を相棒に、「つくれる人」になる。

あなた×メンター
1
GOAL

目指すのは、ここ。

🙏

いまよくある姿

AI に
「お願いする人」
→
🛠️

目指すゴール

AI を使いこなし
品質に責任を持てる人

HP・LP・広告クリエイティブ・SEO記事・データ分析を、AI と一緒に一人で回せる「AI駆動のマーケ職人」へ。

2
SKILLS

身につける、4つの力

🎯

決める

何を作るかを自分で決めて、AI に正確に伝えられる

🔍

確かめる

AI の「できました」を鵜呑みにせず、実物を見て直せる

🧠

覚えさせる

うまくいったやり方をルールやスキルにして、次から速くなる

🚀

届ける

作ったものを、自分の手で公開まで持っていける

3
GROW TOGETHER

教える・教わる、じゃなく
一緒に腕を上げる。

見つけたコツや失敗は、どちらが見つけたものでも「技の台帳（KATA.md）」に書き足していきます。この回転数が、そのまま職人としての成長です。

1

やってみる

AI と一緒に作る

2

ハマる・気づく

失敗もコツも全部ネタ

3

台帳に書く

1行でいい

4

ルールにする

2回起きたら AI に覚えさせる

↻ 次はもっと速く、もっと上手く

4
ROADMAP

4つのステージ

いまココSTAGE 1

自分のサイトを
作って公開

  • AI への指示の出し方
  • CLAUDE.md・デザインルール
  • Git と GitHub
  • 公開（Cloudflare Pages）
🏁 自分のサイトが公開URLで動く
STAGE 2

LP を
要件定義から

  • 誰に・何を・なぜ
  • 構成とコピー
  • ファーストビュー3案
  • フォーム・計測の基礎
🏁 練習LPがレビューを通る
STAGE 3

量産の型
SEO記事・バナー

  • 競合調査の型
  • 設計図→執筆→事実確認
  • バナーの型取り
  • 自分専用スキル
🏁 記事1本・バナー5案を型で出せる
STAGE 4

数字で語る
データ分析

  • CSV・GA4 の集計
  • グラフ化
  • 「次に何をするか」まで書く
🏁 週次レポートを自力で1本

ステージ4まで来たら、実際の案件に一緒に入るステップへ。

5
STAGE 1 · 3〜4週間

自分のサイトができるまで

0
道具の準備
GitHub にリポジトリ2つ・招待・自分の CLAUDE.md を置く
1
何を作るか決める
BRIEF.md：誰に見てほしい？ 見た人に何をしてほしい？ 載せない物は？
2
デザインのルールを決める
参考サイト3つ → DESIGN.md に色・文字・余白を言葉で書く
MTG ①
3
ファーストビューだけ作る
/plan で計画 → 3案 → スクショで見る → 直す → コミット
4
セクションを1つずつ
About → Works → Contact。文章はまず自分で下書き
MTG ②
5
Cloudflare で公開する
Cloudflare Pages × GitHub。作業用ブランチ → プレビューで確認 → main に入れる＝公開（人が押す）
6
仕上げと振り返り
スマホ確認・KATA.md に3つ・CLAUDE.md にルール追記
MTG ③ 卒業判定
6
SETUP

作品は、自分のアカウントで持つ。

リポジトリはあなた自身の GitHub に作って、メンターを招待してもらう形で進めます。

🌐

my-site

自分のサイト本体。Private でOK（公開は Cloudflare Pages から）。招待した人は書き込みもできる権限になります

🥋

ai-craft-hub

キット（心得・手順書・テンプレ）と技の台帳 KATA.md

👥 招待のしかた

各リポジトリの Settings → Collaborators → Add people でメンターの GitHub アカウント（SAP-Marketing）を招待。
リポジトリ作成も招待も、Claude Code にやってもらうのが最初の練習。やり方は次のページ 👉

7
HOW TO · 1/2 準備

まず、Claude Code と GitHub を
つなぐ。

リポジトリ作成も招待も、Claude Code にやってもらいます。そのために最初に一度だけ、GitHub へのログインをつなぎます。

1
作業用フォルダを開いて、オレンジの ✱ で Claude を開く

「書類」に ai-work、その中に練習用の sandbox フォルダを作る → VS Code の「ファイル → フォルダーを開く」で sandbox を開く → ファイルを1つ開き、タブの並びの右端にあるオレンジの ✱（Claude マーク）をクリック → チャット欄の下のモードを Manual に（教科書0章）

2
GitHub の道具（gh）が入っているか、Claude に聞く
💬「gh コマンドが使えるか確認して。無ければ、私のパソコンへの入れ方を1つずつ教えて」

インストールのコマンドは、Claude の説明を読んでから自分で OK する

3
GitHub にログインする（ここだけ自分で）

メニュー「ターミナル → 新しいターミナル」で画面の下にターミナルを開き、gh auth login と打つ → 矢印キーで GitHub.com → HTTPS → 「Authenticate Git with your GitHub credentials?」は Y → Login with a web browser → 表示されたコードを控えて Enter（ブラウザが開く）→ コードを入力して許可

4
つながったか確認

同じターミナルで gh auth status → Logged in to github.com account（自分のユーザー名） と出ればOK。Claude のチャット欄に戻ります

8
HOW TO · 2/2 Claude に頼む

この文章を、そのまま
Claude Code に貼るだけ。

GitHub に Private のリポジトリを2つ作って、SAP-Marketing を招待したい。
・my-site（自分のサイト用）
・ai-craft-hub（キット用）
gh コマンドを使って進めて。
コマンドを実行する前に、それぞれ何をするコマンドなのか一言で説明して。
最後に、2つとも招待が送れているか確認して結果を教えて。

✅ こうなったら成功

  • Claude が「実行していいか」を聞いてくる → 説明を読んで Yes
  • GitHub の各リポジトリの Settings → Collaborators に SAP-Marketing（Pending） と出ている
  • LINE で「招待しました！」と連絡 → こちらで承認して完了 🎉

🆘 つまずいたら

  • command not found: gh → 前のページの②に戻る
  • not logged in や 401 → ③のログインをやり直す
  • それでもダメ → エラー画面のスクショを Claude に見せて「原因と直し方を教えて」。解決しなければ LINE へ
9
CLOUDFLARE · 1/2

サーバーを借りずに、
サイトを公開できる。

作ったサイトは Cloudflare Pages（クラウドフレア・ページズ） で公開します。サーバーの契約も設定も保守もいりません。

☁️ Cloudflare（クラウドフレア）ってなに？

世界中のたくさんのサイトを、速く・安全に表示するための仕組みを提供している会社です。そのサービスの1つ「Pages」を使うと、自分で作ったサイトを無料でインターネットに公開できます。
🔗 公式サイト：https://www.cloudflare.com/ja-jp/
🔗 Pages の説明：https://developers.cloudflare.com/pages/

🏢

ふつうのレンタルサーバー

  • サーバーを借りる契約（月額）
  • ファイルのアップロードや設定が必要
  • セキュリティ更新も気にする
☁️

Cloudflare Pages

  • 無料（自動公開は月500回まで）
  • GitHub にセーブすると自動で公開
  • 世界中のサーバーに自動で配られて速い

⭕ 向いている

自己紹介サイト・LP・会社やお店の案内など「見せる」ページ。AI と一緒に自分で更新していく人

✕ 向いていない

WordPress・ネットショップ・予約・毎日のブログ更新。作ったあと自分では触らない人

10
CLOUDFLARE · 2/2

Cloudflare と AI の
つなぎ方。

💬
AI に頼む

チャット欄で「見出しを変えて」

🐙
GitHub にセーブ

作業用ブランチに push

☁️
Cloudflare が自動で公開

まずプレビュー URL で確認

🌐
main に入れて本番

〜.pages.dev が更新。押すのは人

◎ 最初はこれGitHub 経由でつなぐAI は GitHub にセーブするだけ。Cloudflare の鍵を AI に渡さない
○ 慣れたらCloudflare プラグインチャットで入れてログイン。「公開は成功した？」を AI が確認できる
✕ ここではやらないAPI キーで直接公開鍵の管理が必要で、事故の元

🧭 最初の設定（1回だけ・画面の名前は変わることがあります）

① 自分でアカウントを作る（無料・自分のメールアドレスで）：https://dash.cloudflare.com/sign-up → ② 「Workers & Pages」→ 作成 → Pages → Git に接続 → ③ GitHub の許可画面で 「Only select repositories」→ my-site だけ → ④ 本番ブランチは main → ⑤ 数分で 〜.pages.dev ができる。
迷ったら画面のスクショを Claude に見せて「次はどこを押す？」と聞けば OK。

11
CLEAR!

ステージ1 卒業条件

✓自分のサイトが公開URLで見られる
✓スマホ幅（375px）でも崩れない
✓GitHub に、変更の単位ごとのコミット履歴が残っている
✓自分の CLAUDE.md に、作りながら見つけたルールが3つ以上ある

🌟 余力があれば：自分専用スキル /site-check を作る・独自ドメイン・問い合わせフォーム

12
10 PRINCIPLES

AI職人の10の心得

01

結論から

指示も報告も、結論→理由→詳細

02

裏どりする

AI はもっともらしい嘘を自信満々に言う

03

自分で見る

「できました」は自己申告。開いて押して確かめる

04

先に決め切る

誰に・何のため・入れない物・判定基準

05

まず計画

/plan の計画モードで順番を出させる

06

小さく作る

1セクションずつ。コミットすれば怖くない

07

3案から選ぶ

選ぶ理由を言葉にする＝審美眼

08

書いて覚えさせる

AI は忘れる。CLAUDE.md・スキルに残す

09

2回でルール化

同じ失敗が2回起きたら仕組みにする

10

出す前に見る

鍵・個人情報・社外秘が紛れていないか

13
PICK UP · 心得02

AI の報告は、3つに分けて読む。

実務でいちばん効いているクセです。自分の報告も、AI の報告も、この3つで分ける。

✅

fact ＝ 確かめた事実

「スマホ幅で開いて、ボタンが画面外にはみ出ているのを見た」

🤔

inference ＝ 推測

「たぶん横幅の固定値が原因」

❓

unknown ＝ 未確認

「iPhone の実機ではまだ見ていない」

14
HOW WE WORK

進め方

🗓️

MTG は 1〜2週間に1回

進んだものを画面で見せてもらって、次の課題を一緒に決める

💬

日々の相談は LINE

詰まったら気軽に。下の「3点セット」で送ると解決が速い

1何をしようとしていたか
2何を打ったか（指示・コマンド）
3何が出たか（エラー画面のスクショ。名前・メール・鍵っぽい文字は塗りつぶしてから）
15
TIPS · Pro プラン

上限に当たりにくくするコツ

🧹

話題が変わったら /clear

長い会話ほど、1回あたりの消費が増えます

🗺️

計画を先に出させる

作り直しが減る＝消費も減る

✂️

丸ごと貼らない

「このファイルの◯◯の部分」と場所を指定する

☕

上限に当たったら休憩

その時間で KATA.md を書く・文章を下書きする

16
PROMISE

大事な約束は、3つだけ。

🔐

パスワード・APIキー・他人の個人情報は貼らない

AI にも GitHub にも。必要になったら MTG で相談

🎨

他人のデザインや文章は「参考」まで

丸写しして公開しない。参考サイトは3つ選んで、良いところを言葉にする

🙋

わからないまま進めない

「AI がこう言ったので」は理由にならない。AI に説明させるか、LINE で聞く

17
FIRST HOMEWORK

MTG ① までにやってくること

0
教科書「0 はじめに」の🚀やってみようを済ませる

モードを Manual に固定・プライバシー設定の確認・入れていい情報の確認。教科書をひらく

1
Claude Code に頼んで my-site と ai-craft-hub を作り、SAP-Marketing を招待

やり方は 8〜9 ページ。そのあとキットを ai-craft-hub に push（これも Claude に説明させながら）

2
Cloudflare の無料アカウントを、自分で作る

👉 https://dash.cloudflare.com/sign-up から、自分のメールアドレスで登録（無料プランで OK）。サイトはまだつながなくて大丈夫。つなぎ方は「CLOUDFLARE 2/2」のページ。分からなければ画面のスクショを Claude に見せて聞く

3
自分の CLAUDE.md を置く

Claude に頼んでテンプレを ~/.claude/CLAUDE.md にコピー。合わない所も手で書かず会話で直してもらう

4
PRINCIPLES.md（10の心得）を読む

「これは耳が痛い」と思ったものを1つ、MTG で教えてください

5
BRIEF.md を書く

誰に見てほしい？ 見た人に何をしてほしい？ 今回載せないものは？

6
参考サイトを3つ選び、DESIGN.md を埋める

「おしゃれ」ではなく「作品カードの余白が広い」のように具体的に

18

Let's build! 🔨

最初の1ページが、職人としての最初の作品です。