← ロードマップ R2 操作入門
Workshop 1 — Hands-on Guide

今日作るもの:単語帳メーカー

Claude Codeに日本語で指示するだけで、自分専用の単語帳アプリが完成します。コードは一切書きません。

作るものブラウザで動く単語帳HTML
できることカードをめくって正誤確認+スコア集計
持ち帰りindex.html を手元に保存
35分 Step 1〜5 を順番に進める 詰まったらリカバリープロンプトへ
1
CSV
準備
2
表示
だけ
3
めくれる
4
全問
スコア
5
カスタマイズ
🔧 始める前に確認

📌 ターミナル(パスB)またはVSCode(パスC)で claude が起動済みの方向けです。まだの方は tier1_setup.html から始めてください。

  1. ターミナル(黒い画面)を開いている
  2. claude と打って Enter → 起動することを確認
  3. 作業フォルダを作って移動している(まだなら下のコマンドを順番に打つ):
    mkdir -p ~/Desktop/ws1 ←フォルダを作成
    cd ~/Desktop/ws1    ←そのフォルダに移動
1
CSVファイルを準備する
単語データの元ファイルを作る
何をするか:Claude Codeに英単語データを持つCSVファイルを作ってもらいます。
このファイルが「単語帳の中身」になります。
Claude Codeに貼り付けるプロンプト
このフォルダに vocabulary.csv を作ってください。
列は word, meaning, example の3つで、中学〜高校レベルの英単語を10件入れてください。
日本語の意味と短い英語例文もセットで入れてください。
✓ できたら確認
  • フォルダに vocabulary.csv ができている
  • ファイルを開くと単語が10行入っている
詰まったとき
CSV が見つからない・列名がおかしい
vocabulary.csv が見当たりません。保存先のフォルダを確認して、見出し行が word,meaning,example のカンマ区切りになっているか確認してから、作り直してください。
vocabulary.csv が確認できたら押してください
2
まず1問だけ表示する
動くHTMLを最短で作る
何をするか:最初は1問だけ表示するシンプルなHTMLを作ります。
「表示できる」という成功体験を最短で得るのがポイント。クリックで裏返す機能はまだ付けません。
Claude Codeに貼り付けるプロンプト
index.html を作ってください。
vocabulary.csv の1行目の単語だけを画面に大きく表示してください。
まずは表示だけで、クリックなどの動作は後でいいです。
CSS と JavaScript は1ファイルの中に書いてください。
✓ できたら確認
  • index.html をブラウザで開ける
  • 英単語が1つ画面に表示されている
詰まったとき
HTMLを開いても何も表示されない
index.html を開いても何も表示されません。ブラウザのコンソールにエラーが出ていたら内容を教えます。まず固定の単語を直接HTMLに書いた最小構成で動くか確認してください。
ブラウザに単語が表示できたら押してください
3
クリックでカードをめくれるようにする
表面(単語)↔ 裏面(意味)の切り替え
何をするか:クリックで表裏が切り替わるフラッシュカードにします。
これで「単語帳らしさ」が一気に出ます。
Claude Codeに貼り付けるプロンプト
index.html を更新してください。
カードをクリックすると表面(英単語)と裏面(日本語の意味)が切り替わるようにしてください。
めくる時に少し回転するアニメーションを付けてもいいです。
✓ できたら確認
  • カードをクリックすると意味が表示される
  • もう一度クリックすると英単語に戻る
詰まったとき
クリックしても何も変わらない
クリックしてもカードが切り替わりません。アニメーションなしの一番シンプルな方法で、まずクリックで表示が変わるだけの状態にしてください。
クリックで表裏が切り替わったら押してください
4
全問進めてスコアを表示する
10問解いてスコア集計まで
何をするか:全単語をめくって「わかった / わからない」を押すと進み、最後にスコアが出るようにします。
これで「単語帳アプリ」として完結します。
Claude Codeに貼り付けるプロンプト
index.html を更新してください。
vocabulary.csv の全単語(10件)を1問ずつ表示して、
カードをめくった後に「わかった」「わからない」ボタンを表示してください。
全問終わったら正解数と不正解数をスコアとして表示してください。
「もう一度やる」ボタンも付けてください。
✓ できたら確認
  • 「わかった」「わからない」ボタンが表示される
  • 10問全部答えるとスコアが出る
  • 「もう一度やる」で最初に戻る
詰まったとき
ボタンを押しても次の問題に進まない
「わかった」を押しても次の単語に進みません。問題のインデックス管理とボタンのイベント処理に絞って確認・修正してください。
スコアが正しくカウントされない
スコアが正しく表示されません。カウント変数の初期化と更新タイミングをデバッグして直してください。
スコアが表示されたら押してください
5
自分好みにカスタマイズする
色・機能・単語内容を自由に変える
何をするか:これが一番楽しいパートです。「こうしたい」を言葉にしてClaudeに伝えるだけ。
以下のアイデアから好きなものを選んで試してください。
カスタマイズアイデア(好きなものを選んで貼り付ける)
背景色を落ち着いた配色にして、フォントを少し丸みのある雰囲気にしてください。
カードのデザインも全体的に今よりおしゃれにしてください。
別のカスタマイズ案:単語を自分のテーマに変える
vocabulary.csv の内容を、私が興味のある「〇〇(例:料理の英語名)」に書き換えてください。
単語・意味・例文のセットで10件作ってください。
別のカスタマイズ案:苦手問題を繰り返す
「わからない」を選んだ単語だけを集めて、もう一周できる「復習モード」を追加してください。
✓ 完成チェック
  • 自分が「いい感じ」と思える見た目になっている
  • index.html を保存できている(持ち帰り可能)
  • もう一回やってみたいと思える題材になっている
自分の単語帳アプリができたら押してください

🎉 完成おめでとうございます!

今日作ったものをそのまま持ち帰れます。index.html と vocabulary.csv をセットで保存してください。

📄
index.html
ブラウザで動く単語帳
📊
vocabulary.csv
単語データ(差し替え可能)
💡
使い方の知識
Claude Codeで続けて改造できる

次のチャレンジ:ポモドーロタイマーを自宅で作ってみる

ポモドーロ自習プロンプトを見る →
上級者向けボーナス

🪄 魔法の呪文 — CLAUDE.md設定

毎セッション読まれるグローバル指示書。安全に使うための最初の一歩

Claude Codeはプロジェクトフォルダに CLAUDE.md というファイルを置くと、 毎セッション開始時に自動で読み込みます。 ここに「禁止事項」と「自己紹介」を書くだけで、AIが安全・賢く動くようになります。

  • APIキーをコードに絶対書かせない
  • GitHubをpublicにさせない
  • 自前認証を作らせない(Cloudflare Authを使う)
  • 「私は非エンジニア」と伝えておくと説明がやさしくなる
使い方は超シンプル。 まずは下のテンプレをそのままコピーして ~/.claude/CLAUDE.md に貼り付けるだけでOK。 あとは使いながら「こうしてほしい」が出てきたら追記して、自分仕様に育てていきます。

コピー用 全文テンプレ(非エンジニア向け・最低限の安全装備):

# わたしのClaude Code設定

## わたしのこと
- プログラミング初心者です
- 技術用語は最小限で、必要な時だけ使ってください
- 専門用語が出る時は意味も一緒に教えてください
- 日本語でやりとりしてください

## 絶対やらないでほしいこと
- APIキー、パスワード、個人情報をコードに直書きしない
- わたしの確認なしにファイルを削除しない
- わたしの確認なしに `git push` しない
- GitHubリポジトリをpublicにしない(明示指示時のみ可)
- 自前の認証システムは作らない(既存サービスを使う)

## やってほしいこと
- リスクや副作用は先に教えてください
- 「できません」より「できる方法を3つ」考えてください
- エラーは「原因/対策/確認方法」で説明してください
- 不明点は推測せず、わたしに質問してください

## 進め方
- 大きな変更前は必ずプランを共有してください
- 1つずつ確認しながら進めてください
- 完了時は何をやったかを箇条書きで報告してください

ヒント: claude を起動して「CLAUDE.mdを作って。こう書いて →(上のテキストをそのまま貼り付け)」と指示するだけでファイルを作ってくれます。

🧠 PM責任者設定 — Claude Codeを司令塔にする

重い作業をバックグラウンドで実行しながら会話を続けさせる上級テクニック

Claude Codeはデフォルトでは1つの作業に集中しますが、 「PM(プロジェクトマネージャー)として動いてください」と最初に指示すると、 重い処理を部下(サブエージェント)に任せながら自分との会話を続けてくれます。

あなた 指示・対話のみ 会話 Claude(PM役) 全体把握 / 役割分担 / 判断専念 サブエージェント① 調査・読込み サブエージェント② コード実装 サブエージェント③ テスト・検証

重い作業を3人の部下に分散しつつ、PM自身はあなたとの会話を止めない構造になります。

① セッション冒頭に一度だけ貼り付けるだけ:

あなたがPMとして動いてください。
窓口・部下・サブエージェントの採用・役割分担・統括を全てあなたにお任せします。
重い作業は部下に任せて、あなた自身は全体把握と判断に専念してください。
部下に作業させている間も、ユーザーとの会話を止めないようにしてください。
重要なことは忘れずに覚えておいてください。
迷ったら曖昧な状態で動かず確認してください。
この役割は常時有効、セッション終わりまで忘れないでください。

② 続けてもう一言 — "次の動き"を生むキックスタート

参加者は「PM化したけど、次に何を頼めばいいかわからない」で止まりがち。
PM化プロンプト直後にこの一言を貼ると、Claudeが自分から現状を整理して動き出します。

責任者として、プロジェクト全体を把握してください。可能な限り他のセッションの内容も見て、現状を要約してください。

なぜ効くか: PM役を与えただけでは"待ち"の状態になりがち。「把握して」と能動的なタスクを渡すことで、Claudeが自分でファイルを読み、状況を整理し、次の提案までしてくれます。

慣れてきたら試してみましょう。最初のうちはシンプルな1対1のやりとりが上達の近道です。