コードを知らなくても、最初の一歩は踏み出せる You can take the first step without knowing how to code

Claude Codeは、作業フォルダーのファイルを読み、編集し、コマンドを実行して仕事を進めるAIツールです。「こう作るとよい」と回答するだけでなく、実際のファイルを作れます。その分、 Claude Code is an AI tool that reads and edits files in a working folder and runs commands. It can create actual files, beyond suggesting how to build something. That makes it important to 何を変えたかを自分で確かめる check what changed yourself ことが大切です。.

普通のClaudeとClaude Code、どう違う？ How does Claude chat differ from Claude Code?

ここでいう「普通のClaude」は、claude.aiやClaudeアプリの**Chat（チャット）**です。Claude Codeは同じClaudeの能力を、プロジェクト内の作業に使うための道具です。単純な上位版・下位版という関係ではありません。 Here, “Claude” means Chat on claude.ai or in the Claude app. Claude Code applies the same Claude capabilities to work inside a project. Neither is simply a higher or lower tier of the other.

Claudeのチャットでもコードやファイルは作れます。「ファイルを作れるか」だけが違いではありません。 Claude chat can also create code and files. File creation alone is not the distinction. どの環境のファイルを、どのツールで操作するか Which environment and tools you work with がポイントです。Claude CodeのWeb版などはクラウド環境で動くため、常に自分のPCを直接操作するわけでもありません。 is the key. Claude Code on the web runs in a cloud environment, so it does not always operate directly on your PC.

このように組み合わせてもよく、Claude Codeに相談から任せても構いません。2つを契約し直す必要がある、という意味ではありません。利用できる機能と課金はアカウントで確認します。 You can combine these approaches or start the discussion in Claude Code. This does not mean you need two new subscriptions. Check your account for available features and billing.

Claude DesktopのChat・Cowork・Codeは別の入口です。この講座ではターミナルのClaude Codeを使います。チャット欄にターミナルのインストールコマンドを送る操作とは区別してください。 Chat, Cowork and Code are separate entry points in Claude Desktop. This course uses Claude Code in the terminal. Pasting an installation command into a chat box is not the same operation.

この講座では「旅の日本語」という架空サービスの紹介ページを1枚作ります。練習なので、購入・送信・インターネットへの公開はしません。 We will build a one-page introduction to a fictional service, “Travel Japanese.” This is a practice project: no purchases, messages or public deployment.

完成参考例を開く Open the reference example ／ 練習用ファイルをダウンロード Download practice files

参考例は講座用に用意したものです。Claude Codeの実行画面や、同じ入力なら必ず得られる出力ではありません。大事なのは同じ絵を再現することより、自分で依頼・確認・修正できることです。 This reference was prepared for the course. It is not a capture of Claude Code running, or a guaranteed output from the same input. Focus on requesting, reviewing and revising, rather than reproducing an identical design.

まず覚える3つの言葉 Three terms to learn first

Claude Codeが動く場所にはターミナル、VS Code、Claude Desktop、Webなどがあります。 Claude Code is available in environments including the terminal, VS Code, Claude Desktop and the web. この講座の操作例はターミナル版 This course demonstrates the terminal version です。画面が違っても「依頼→変更確認」の考え方は共通ですが、ボタンやコマンドの場所は同じではありません。. The request-and-review approach is shared, but buttons and commands may be in different places.

得意なことと、任せきりにしないこと What it does well—and what you still need to check

資料からページを作る、既存ページを直す、コードを説明する、繰り返し作業を小さなプログラムにする、といった用途に使えます。一方で、料金・契約条件・口コミなどの事実は人が渡します。AIが足したもっともらしい文章を、確認せず自分の実績として公開しません。 Use it to build pages from briefs, edit existing pages, explain code or automate small repetitive tasks. People must supply facts such as prices, terms and testimonials. Do not publish plausible AI additions as your own achievements without checking them.

公式資料 Official resources

Claude Codeの概要 Claude Code overview ／ Academy：Claude Code 101。2026年9月11日参照。. Accessed September 11, 2026.

比較の出典： Comparison sources: Claude Code概要 Claude Code overview 、Desktopの各タブ Desktop tabs 、公式Skillsリポジトリ Official Skills repository 。

自分の入口を決める Choose your starting environment

ターミナル版なら、以下のMac／Windowsのうち自分の環境だけを読みます。すでに使えている人は再インストールせず、次のレッスンへ進んでください。 For the terminal version, read only the Mac or Windows instructions for your computer. If it already works, skip reinstalling and continue.

Claude Codeを利用できるClaudeプラン、Anthropic Console、または対応クラウド経由のアクセスが必要です。 You need an eligible Claude plan, Anthropic Console access or access through a supported cloud provider. Claudeの契約とAPI利用の課金は同じではありません。 Claude subscriptions and API billing are different. 金額や利用枠は変わるため、 Prices and usage limits change; check the 公式Quickstart official Quickstart とアカウント画面で確認します。この講座のためにAPIキーを新しく作る必要があるとは限りません。 and your account. You may not need a new API key for this course.

Macの場合 On Mac

「ターミナル」アプリを開きます。下の1行はAnthropicの公式インストーラーを取得して実行するコマンドです。URLを確認してから貼り付け、Enterを押します。 Open Terminal. The line below downloads and runs Anthropic's official installer. Check the URL, paste the command and press Enter.

curl -fsSL https://claude.ai/install.sh | bash

Windowsの場合 On Windows

スタートメニューから From the Start menu, open PowerShellを開きます。コマンドプロンプトやMac用のコマンドと混ぜないでください。. Do not confuse this with Command Prompt or use the Mac command.

irm https://claude.ai/install.ps1 | iex

2026年9月11日時点の公式手順では、ネイティブWindowsのCLIでGit for Windowsは推奨・任意です。Claude DesktopのCodeタブでは別の要件があります。古い記事の必須条件をそのまま当てはめず、使う画面の公式説明に合わせます。 As of September 11, 2026, official instructions describe Git for Windows as recommended but optional for the native Windows CLI. Claude Desktop's Code tab has different requirements. Follow the documentation for your environment rather than old articles.

インストールできたか確認 Check the installation

claude --version

バージョン番号が返れば、コマンドを呼び出せています。数字が教材と一致する必要はありません。起動とログインは、次の章で練習用フォルダーを開いてから行います。 If you see a version number, the command is available. It need not match the course's version. Launch and sign in after opening the practice folder in the next lesson.

エラー全文を相談する場合は、キーや個人情報を伏せます。管理者権限でのやり直しや設定の削除を、原因不明のまま繰り返さないようにします。 Remove keys and personal information before sharing an error message. Do not repeatedly retry as administrator or delete settings without understanding the cause.

公式資料 Official resources

導入・対応環境 Setup and supported environments ／ Quickstart ／ 利用量・コスト Usage and costs 。2026年9月11日参照。. Accessed September 11, 2026.

練習用ファイルを開く Open the practice files

練習用ZIP Practice ZIP をダウンロードして展開します。中にある: download and extract it. Inside,claude-code-practiceが今回の作業フォルダーです。ZIPを開くだけでなく、通常のフォルダーとして展開してください。 is your working folder. Extract the ZIP into a normal folder rather than only opening the archive.

claude-code-practice/
├── brief.md       ← 作りたいもの・完成条件
└── README.txt     ← 練習用ファイルの説明

claude-code-practice/
├── brief.md       ← Purpose and acceptance criteria
└── README.txt     ← Instructions for the practice files

.mdはMarkdownという文章用のファイル形式です。ここでは「AIに読んでもらうメモ」と考えれば十分です。完成すると、このフォルダーに is a Markdown text file. Think of it as a memo for AI to read. When you finish, this folder will also contain index.htmlが増えます。.

Macでフォルダーへ移動 Open the folder on Mac

ターミナルに In Terminal, enter cd と入力します。.cdの後に半角スペースを1つ Add one space after cd 入れ、Finderから練習用フォルダーをターミナルへドラッグしてEnterを押します。, drag the practice folder from Finder into Terminal, then press Enter.

pwd
ls

pwdは現在の場所、 shows your current location; lsは中身を表示します。 lists its contents. brief.mdが見えれば正しい場所です。 should be visible if you are in the right place.

Windowsでフォルダーへ移動 Open the folder on Windows

エクスプローラーで練習用フォルダーを開き、アドレス欄から場所をコピーします。PowerShellで Open the practice folder in File Explorer and copy its path from the address bar. In PowerShell, enter cd "コピーした実際のパス"を入力します。日本語や空白を含む場合も、引用符で囲みます。. Enclose the path in quotes, including when it contains Japanese characters or spaces.

Get-Location
Get-ChildItem

場所と中身を確認し、 Check the location and contents; make sure brief.mdが見えることを確かめます。上の「コピーした実際のパス」は説明用の表記なので、そのまま入力しないでください。 is present. Replace the explanatory placeholder in the command with the actual path you copied.

起動する Launch

claude

初回は案内に沿ってログインし、対象フォルダーを確認します。信頼について尋ねられたら、自分が展開したこの教材フォルダーであることを確認します。 Follow the first-run sign-in instructions and confirm the folder. If asked about trust, make sure this is the course folder you extracted.

最初の依頼は、編集をしない First request: read without editing

brief.mdを読んでください。
何を作るプロジェクトか、誰向けか、完成条件は何かを短く説明してください。
まだファイルを作成・編集せず、不明点があれば先に質問してください。

Read brief.md.
Briefly explain what this project will create, who it is for and its acceptance criteria.
Do not create or edit files yet. Ask about anything unclear first.

回答に「紹介ページ」「架空サービス」「外部ライブラリなし」「勝手に実績を追加しない」が含まれるか確認します。文章が違っても、条件が合っていれば大丈夫です。 Check that the response includes an introductory page, a fictional service, no external libraries and no invented achievements. Different wording is fine if the requirements match.

会話での依頼と、ツールの権限設定は別です。 A request in chat and tool permissions are separate things. 読むだけにしたいときはPlanモードも利用できます。次のレッスンで操作を確認します。 Use Plan mode when you want to start with reading. We will cover it in the next lesson.

公式資料 Official resources

最初のセッション Your first session ／ Claude Codeの作業ループ How Claude Code works 。2026年9月11日参照。. Accessed September 11, 2026.

「いい感じに」だけでは、判断基準がない “Make it nice” is not an acceptance criterion

「紹介ページを作って」だけでは、誰向けか、どの情報が必要か、何を増やしてはいけないかが伝わりません。長文より、判断に必要な材料を揃えます。 “Create an introductory page” does not explain the audience, required information or forbidden additions. Supply the information needed for decisions rather than writing a long prompt.

Planモードにする Switch to Plan mode

ターミナルのClaude Codeでは In Claude Code's terminal interface, use Shift + Tabでモードを切り替えられます。表示が to switch modes. Confirm that the display says Planになったことを確認します。現行版では. Current versions also offer/planも利用できます。利用中の版で表示されない場合は. If your version does not show it, check/helpや公式のモード操作を確認してください。 or the official mode instructions.

Planモードは、調査と計画を実装から分けるためのものです。読むための操作等は行われるので、「コンピューターで何も実行されないモード」とは考えません。 Plan mode separates research and planning from implementation. It may still perform read operations; it does not mean nothing runs on your computer.

brief.mdをもとに、紹介ページの構成を提案してください。
見出し、短い紹介文、学べること3つ、問い合わせ案内を載せます。
index.html 1ファイルと、その中のCSSだけで作ります。
外部画像・外部フォント・ライブラリは使いません。
料金・口コミ・実績を勝手に追加しないでください。
まず構成と確認方法だけを示し、実装はまだしないでください。

Using brief.md, propose the structure of an introductory page.
Include a heading, a short introduction, three learning topics and contact guidance.
Use only one index.html file with CSS inside it.
Do not use external images, fonts or libraries.
Do not invent prices, testimonials or achievements.
Show only the structure and verification plan first; do not implement yet.

計画は、ここを見る What to review in the plan

たとえば会員登録が提案されたら、「今回は不要。紹介だけで完結させて」と修正します。作る前に直せば、後から不要なコードを削る手間が減ります。 If sign-up is proposed, say “Not needed here; keep this an introduction only.” Fixing the plan first avoids removing unnecessary code later.

権限はモード表示で確認する Check permissions in the mode indicator

通常の確認モードは、編集やコマンドについて必要に応じて確認を求めます。自動編集などのモードでは確認の範囲が変わります。入門では、 The normal permission mode requests confirmation for edits and commands as needed. Other modes change when confirmation is required. As a beginner, 依頼文に『慎重に』と書くだけで済ませず、現在のモードを見ます。 check the active mode instead of only writing “be careful” in your request. 本教材では権限確認を全て無効化する設定は使いません。 This course does not disable all permission checks.

公式資料 Official resources

モードの違い Permission modes ／ 具体的な依頼と計画 Clear requests and planning 。2026年9月11日参照。. Accessed September 11, 2026.

計画がよければ、小さく作る Once the plan works, build a small version

Planモードから通常の確認モードへ切り替え、次の依頼を送ります。UIによって名前は異なるので、編集を確認するモードであることを表示で確認してください。 Switch from Plan mode to the normal permission mode before sending the next request. Labels vary by interface; confirm that the active mode includes edit confirmation.

確認した計画でindex.htmlを作成してください。
brief.mdの完成条件を守り、元のbrief.mdは変更しないでください。
まず1ページがブラウザーで表示できる状態まで進めてください。
完了したら、作成・変更したファイルと確認したことを教えてください。
実行できなかった確認は、未確認として分けてください。

Create index.html using the plan we reviewed.
Follow the acceptance criteria in brief.md and leave brief.md unchanged.
First get one page working in the browser.
Report the files created or changed and what you checked.
List checks you could not perform separately.

作業中の表示には、ファイルを読む・編集する・コマンドを実行するなどが出ます。確認を求められたら、対象ファイルと目的を見ます。予想していない大量の削除や外部への公開が含まれたら進めず、理由を聞きます。 While working, Claude may read files, edit them and run commands. Review the target and purpose when asked for confirmation. If you see unexpected bulk deletion or external publishing, stop and ask why.

index.htmlを開く Open index.html

Finder／エクスプローラーで作業フォルダーを開き、 Open the working folder in Finder or File Explorer, then index.htmlをダブルクリックします。別のアプリが開いたら「このアプリケーションで開く」などからブラウザーを選びます。 double-click the file. If it opens in a different app, use “Open with” to choose a browser.

この練習は通信のない1ファイルなので、ローカルファイルとして確認できます。ブラウザーのアドレスが This single-file exercise makes no network requests, so you can inspect it locally. A browser address starting with file://で始まっていても正常です。 is expected. Webで公開されたわけではありません。 It has not been published on the web. サーバーや外部APIが必要なアプリでは、この開き方では動かないことがあります。 Apps requiring a server or external API may not work this way.

まず3つだけ確認 Start with three checks

1. 見出しと学べること3つがある。 There is a heading and three learning topics.
2. 「学べることを見る」を押すと、ページ内の該当部分へ移動する。 The learning-topics button moves to the right section on the page.
3. 問い合わせの送信や決済が行われず、練習用の案内になっている。 Contact information is for practice; no message or payment is sent.

見た目が完成参考例と違っても、すぐ失敗と決めません。目的・情報・操作が満たされているかを先に見ます。文字が大きすぎるなどの改善は次のレッスンで行います。 A design that differs from the reference is not automatically a failure. First check its purpose, information and interactions. You will refine issues such as oversized text in the next lesson.

公式資料 Official resources

最初の変更 Your first change ／ 結果を検証する Verify the result 。2026年9月11日参照。. Accessed September 11, 2026.

「直して」より、場所と期待を伝える Describe the location and expected result—not just “fix it”

ブラウザーを細くして見ます。開発者ツールに慣れている人は390pxなどの幅でも確認できます。初心者はまずウィンドウを細くするだけで構いません。文字の欠け、横スクロール、押せないボタンを探します。 Narrow the browser window. If you know developer tools, try a width such as 390px; otherwise simply resize the window. Look for clipped text, horizontal scrolling and buttons you cannot press.

狭い画面で「学べること」の3項目が横に詰まっています。
スマホ幅では1列に並べ、各項目の間に余白を入れてください。
見出しや説明文は変えず、必要なCSSだけを修正してください。
変更した場所と、確認した画面幅を教えてください。
ブラウザーで確認できない場合は、その旨を明記してください。

The three learning topics are cramped horizontally on narrow screens.
Use a single column at phone widths with spacing between items.
Keep the heading and copy unchanged; edit only the necessary CSS.
Report where you changed the code and which widths you checked.
If you cannot verify in a browser, say so explicitly.

diffは「前後の差」 A diff shows before and after

diffは変更前と変更後を比べる表示です。一般に削除側と追加側が色分けされますが、色だけでなく内容を見ます。 compares the old and new versions. Removed and added content is usually color-coded, but read the content rather than relying on color alone.

grid-template-columns: repeat(3, 1fr);

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

これは仕組みを説明するコード例です。自分の出力ではクラス名が違うことがあるので、丸ごと貼り付けず、Claude Codeに実ファイルの該当箇所を確認させます。全コードが読めなくても「関係ない文章やファイルまで変わっていないか」は確認できます。 This code illustrates the idea. Your output may use different class names; ask Claude Code to inspect the actual file rather than pasting it wholesale. Even without understanding every line, you can check whether unrelated copy or files changed.

戻したいとき When you want to undo

作業中に方向が違うと気づいたら、まず If the work goes in the wrong direction, first use Escで止めます。Claude Codeの to stop it. Claude Code's /rewindは、利用可能なチェックポイントへ会話や対象ファイルを戻すための機能です。メニューで戻す地点と対象を確認します。 lets you restore a conversation or supported file edits to an available checkpoint. Check the restore point and scope in the menu.

Rewindは万能のバックアップではありません。 Rewind is not a complete backup. シェルコマンドで行った変更や外部サービスへの操作など、追跡されないものがあります。長期的な履歴はGitなどで管理します。この教材では元の練習用ZIPを残し、重要な実ファイルを練習に使わないようにします。 Changes made through shell commands and actions in external services may not be tracked. Use Git for long-term history. Keep the original practice ZIP and avoid practicing on important files.

この段階の完成確認 Completion checklist

• 狭い画面でも横にはみ出さない。 No horizontal overflow on a narrow screen.
• 見出し・3項目・問い合わせ案内が残っている。 The heading, three topics and contact guidance remain.
• ページ内ボタンが正しい場所へ移動する。 The in-page button moves to the correct section.
• 架空の実績・料金・口コミが追加されていない。 No invented achievements, prices or testimonials.

完成参考ファイルをダウンロード Download the reference files して比べられます。完成例は正解を1つに限定するものではなく、確認の手がかりです。 to compare. The reference is a guide for checking your work, not the only correct result.

公式資料 Official resources

チェックポイントの範囲 Checkpoint scope ／ 検証の考え方 How to verify results 。2026年9月11日参照。. Accessed September 11, 2026.

同じ説明を繰り返さない Avoid repeating the same instructions

「日本語で説明して」「実績を勝手に足さない」「1ファイルで作る」。毎回必要な条件は、プロジェクトの “Explain in Japanese,” “Do not invent achievements,” “Use one file.” Put recurring requirements in the project's CLAUDE.mdへ短くまとめます。 as a short set of rules.

このフォルダーにCLAUDE.mdを作成してください。
日本語で説明すること、brief.mdの事実を増やさないこと、
外部依存を入れないこと、修正後に確認した内容を報告することを短く書きます。
index.htmlは変更しないでください。

Create CLAUDE.md in this folder.
Briefly state these rules: explain in English; do not add facts beyond brief.md;
add no external dependencies; report what you checked after each change.
Do not change index.html.

内容の例： Example content:

# このプロジェクトのルール
- 説明は日本語で行う。
- 事実はbrief.mdを参照し、料金・実績・口コミを追加しない。
- index.html内のHTML/CSSで完結させ、外部依存を増やさない。
- 修正後は変更ファイル、確認結果、未確認事項を短く報告する。

# Project rules
- Explain in English. Keep the Japanese practice-page copy as provided.
- Use brief.md as the source of facts; do not add prices, achievements or testimonials.
- Keep HTML/CSS inside index.html and add no external dependencies.
- After changes, briefly report changed files, verified results and unchecked items.

これはAIが読む指示書です。 This is an instruction file for AI. ファイルに書くだけで強制されるアクセス制限ではありません。 Writing a rule does not create an enforced access restriction. 権限の設定とは区別し、読みやすく短いルールにします。APIキーやパスワードも書きません。 Keep rules short and readable, and distinguish them from permissions. Never put API keys or passwords here.

長い会話を整理する Organize a long conversation

コンテキストは、AIがその会話で参照する情報のまとまりです。無関係な資料や失敗ログを大量に足すと、扱う情報が増えます。 Context is the information AI can refer to in a conversation. Adding unrelated documents or large error logs increases the information it must handle.

/clearはプロジェクトのファイルを消す操作ではありません。要約で細かな意図が抜けることもあるので、完成条件や決定事項は実ファイルへ残しておきます。 does not delete project files. Summaries can lose nuances, so save acceptance criteria and decisions in files.

利用量も、自分で確認する Check your usage too

Claude Codeの利用量は、作業量・読む情報・使うモデルなどで変わります。対応するアカウントでは Claude Code usage varies with the work, information read and model. On supported accounts, use /usageやアカウント画面で利用枠を確認できます。API課金を使う場合は、その課金元の使用量も確認します。「月額契約だから、どんな実行方法でも追加費用なし」とは考えないようにします。 or your account screen to check limits. With API billing, also check usage with the billing provider. A monthly subscription does not mean every execution method is free of additional charges.

公式資料 Official resources

CLAUDE.mdと自動メモリ CLAUDE.md and automatic memory ／ コマンド一覧 Command reference ／ 利用量と費用 Usage and costs 。2026年9月11日参照。. Accessed September 11, 2026.

毎回同じ長い依頼をしなくてよくなる Reuse instructions instead of repeating long requests

Skillは「この仕事は、この手順で進める」という知識・手順・補助ファイルのまとまりです。新しいモデルを追加するものでも、入れるだけで能力や正確さが保証されるものでもありません。 A Skill bundles knowledge, instructions and supporting files for a task. It does not add a new model or guarantee capability or accuracy simply by being installed.

この講座用のSkillを作る Create a Skill for this course

Skill・Hookの練習キット Skills and Hooks practice kit の 's skill-exampleにあります。練習フォルダーの中へ、次の構成で置きます。隠しフォルダー contains it. Place it inside your practice folder with the structure below. If the hidden folder .claudeが見えない場合は、エディターのファイル一覧でも確認できます。 is not visible, check your editor's file list.

claude-code-practice/
├── brief.md
├── index.html
└── .claude/
    └── skills/
        └── page-review/
            └── SKILL.md

---
name: page-review
description: 紹介ページの文章、リンク、スマートフォン表示を確認する。
disable-model-invocation: true
---
# 紹介ページを確認する
1. brief.mdの目的・掲載内容・完成条件を読む。
2. index.htmlを読み、要求されていない料金・口コミ・実績がないか確認する。
3. ページ内リンクの参照先が存在するか確認する。
4. 利用可能なブラウザーツールがあれば、390pxと1280pxの幅で表示確認する。
5. ブラウザーが使えなければ表示は未確認とし、人が見る箇所を示す。
6. 結果を「確認できたこと／問題／未確認」に分け、根拠を添えて報告する。
ファイルの変更、公開、外部送信は行わない。

---
name: page-review
description: Review an introductory page's copy, links and mobile layout.
disable-model-invocation: true
---
# Review the introductory page
1. Read the purpose, approved content and acceptance criteria in brief.md.
2. Read index.html and check for unrequested prices, testimonials or achievements.
3. Verify that in-page link targets exist.
4. If browser tools are available, inspect at 390px and 1280px widths.
5. Without browser tools, report layout as unchecked and identify what a person should inspect.
6. Report verified results, issues and unchecked items separately, with evidence.
Do not edit files, publish or send anything externally.

nameは名前、 is the name; descriptionは用途です。この例の describes its purpose. In this example, disable-model-invocation: trueは、AIが自動選択せず、自分が呼び出す形にする指定です。権限を制限する指定ではありません。 means you invoke the Skill explicitly rather than letting AI choose it automatically. It does not restrict permissions.

呼び出してみる Try invoking it

練習フォルダーでClaude Codeを開き、 Open Claude Code in the practice folder and check that it appears among the /の候補にあるか確認してから、次を入力します。 suggestions, then enter the following.

/page-review

見つからないときは、置き場所・ファイル名・先頭の設定を確認します。認識されないままなら新しいセッションで確認し、 If it is missing, check its location, file name and frontmatter. If it is still not recognized, try a new session and consult /helpや公式Skillsガイドを見ます。プラグイン由来のSkillは、 or the official Skills guide. Skills from plugins may have names such as /プラグイン名:スキル名のような名前になる場合があります。.

「呼べた」だけで完成にしない A successful invocation is not enough

正常なページに対して何を確認したか、問題があるページに対して指摘できたかを見ます。練習用コピーのリンク先を存在しないIDへ変えた場合に、指摘できるか試せます。元のファイルは残してください。 Check what it reviews on a valid page and whether it catches problems. In a practice copy, change a link to a nonexistent ID and see whether it detects it. Keep the original file.

ブラウザーツールがないのに「スマホ確認済み」と返すなら改善が必要です。「未確認と報告する」という手順が機能するかも確認します。 If it claims to have checked mobile layout without browser tools, improve the Skill. Verify that it reports what it could not check.

公式資料 Official resources

Skillsの構造と呼び出し Skill structure and invocation 、公式Skill例 Official Skill examples 。2026年9月11日確認。このpage-reviewは講座独自の例です。. Checked September 11, 2026. This page-review Skill is an original course example.

Skillは手順、Hookはタイミングに結びつく処理 Skills describe procedures; Hooks run at specific events

Hookは、Claude Codeで特定のイベントが起きたときに処理を動かす仕組みです。このレッスンでは、決めたプログラムを実行する A Hook runs an action when a particular Claude Code event occurs. This lesson covers command型Hook command Hooks を扱います。他にも種類があるため、すべてのHookが同じ動きをするわけではありません。, which run a defined program. Other Hook types exist and behave differently.

PostToolUseで問題を見つけても、済んだ変更が自動で取り消されるわけではありません。止める必要がある操作は、実行前の制御を考えます。 Finding a problem in PostToolUse does not automatically undo a completed change. Control operations before execution when they need to be blocked.

練習例：brief.mdの直接編集を止める Practice: block direct edits to brief.md

この例は This example targets macOS／Linux／WSLのシェルでpython3が使える環境 macOS, Linux or WSL with python3 available in the shell 向けです。WindowsネイティブではコマンドとPythonの呼び出しを環境に合わせる必要があります。Pythonがない人は、仕組みを読むだけで次へ進めます。. Native Windows needs environment-specific command and Python invocation adjustments. Without Python, read the explanation and move on.

練習キット Practice kit の 's hook-exampleに、設定例とスクリプトがあります。実際のプロジェクトではなく、この講座の練習フォルダーで試します。 contains the configuration and script. Try them in the course folder, not a real project.

.claude/
├── settings.json
└── hooks/
    └── protect_brief.py

設定例（ Configuration example ( .claude/settings.json）：

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "python3 \"$CLAUDE_PROJECT_DIR/.claude/hooks/protect_brief.py\""
          }
        ]
      }
    ]
  }
}

既存のsettings.jsonを丸ごと置き換えないでください。 Do not replace your entire existing settings.json. すでに設定がある場合は、このhooks項目を既存設定へ統合します。Hooksは設定階層をまたいで追加されるため、同じ処理の二重登録にも注意します。 Merge this hooks entry into existing settings. Hooks accumulate across configuration levels, so avoid registering the same action twice.

import json
import os
import sys
from pathlib import Path

request = json.load(sys.stdin)
project = Path(os.environ["CLAUDE_PROJECT_DIR"]).resolve()
file_name = request.get("tool_input", {}).get("file_path", "")
if request.get("tool_name") in ("Edit", "Write") and file_name:
    target = Path(file_name)
    if not target.is_absolute():
        target = project / target
    if target.resolve() == project / "brief.md":
        print(json.dumps({"hookSpecificOutput": {
            "hookEventName": "PreToolUse",
            "permissionDecision": "deny",
            "permissionDecisionReason": "練習用brief.mdは変更しません。index.htmlを修正してください。"
        }}, ensure_ascii=False))

設定後の確かめ方 Verify after setup

Claude Codeを練習フォルダーで開き直し、 Reopen Claude Code in the practice folder and use /hooksで対象Hookが登録されているか確認します。使う版で操作が違う場合は公式リファレンスを参照します。 to check that the Hook is registered. Consult the official reference if your version differs.

この練習ではHookの動きを確認します。
Editツールでbrief.mdの見出しを変更しようとして、拒否されることを確認してください。
拒否されたら止まり、Bashなど別の方法で変更を回避しないでください。

Test the Hook in this practice folder.
Attempt to change the heading in brief.md with the Edit tool and verify rejection.
After rejection, stop. Do not bypass it using Bash or another method.

AIが編集を試みずに終わった場合は、Hookが動いた証拠になりません。ツールの拒否結果・Hookの実行記録とファイルが変わっていないことを確認します。 If AI never attempted an edit, that is not proof the Hook ran. Check the tool rejection, Hook execution record and unchanged file.

Hookには普通のプログラムと同様にエラーや環境依存があります。任意のコマンドを実行するので、中身を読まずに他人のHookを入れないことが大事です。戻すときは追加したHook項目だけを外し、セッションを開き直して確認します。 Hooks can fail and depend on the environment, like any program. Read other people's Hooks before installing them, since they run commands. To undo this setup, remove only the Hook entry you added, reopen the session and verify.

公式資料 Official resources

Hooksガイド Hooks guide 、イベント・入出力リファレンス Events and input/output reference 。2026年9月11日確認。サンプルのPython分岐はテストしていますが、Claude Code内の実イベント発火は未検証です。. Checked September 11, 2026. The sample Python branches were tested; actual Claude Code event execution has not been verified.

最初は、自分の作業に必要なものだけ Start with only what your work needs

一覧の上から全部入れる必要はありません。この講座なら、まず自作のpage-review、見た目を改善したくなったらfrontend-designが候補です。ブラウザー確認や資料作成は、必要になった時点で追加します。 You do not need every Skill in the list. Start with the course's page-review; consider frontend-design when you want to improve the look. Add browser testing or document tools when needed.

Anthropic公開のスキルから選ぶ Explore Skills published by Anthropic

以下は The following were reviewed in anthropics/skillsで内容を確認したものです。Anthropic公開リポジトリの例と、このサイトの独自Skillは区別しています。. These examples from Anthropic's public repository are distinct from this site's original Skill.

Claude Code内蔵のSkillも確認 Check built-in Claude Code Skills too

現行の公式文書には Current official documentation includes /run、/verify、/debug、/code-reviewなどが掲載されています。これらは追加インストールする例示Skillとは別です。 and others. These differ from example Skills you install separately. 使える名前は手元で Check available names by typing /を入力して確認 in your own environment してください。バージョンや設定により差があります。. Availability varies with version and settings.

内蔵SkillもAIの作業なので、時間や利用枠を使います。入門の1枚ページで全部を実行する必要はありません。 Built-in Skills also use time and usage allowance. You do not need to run all of them on a beginner's one-page project.

公式リポジトリの導入例 Installation example from the official repository

以下は The following were reviewed in Claude Code内 Inside Claude Code で入力するコマンドです。普通のシェルやClaudeのChatへ貼り付けるものではありません。 is where you enter these commands—not in a regular shell or Claude Chat.

/plugin marketplace add anthropics/skills

次にプラグイン一覧から Next, find anthropic-agent-skillsを確認し、必要なセットだけを選びます。公式READMEにあるコマンド例： in the plugin list and select only the set you need. Example from the official README:

/plugin install example-skills@anthropic-agent-skills

文書用のセットを使う場合の例： Example for the document set:

/plugin install document-skills@anthropic-agent-skills

この例はセット単位の導入です。「frontend-designだけ」と同じ意味ではありません。インストールされる内容を見てから選びます。Skillが参照するスクリプトや依存ツールが自動で全て整うとも限りません。インストール後はSkill一覧で名前を確認し、必要ならセッションを開き直します。 This installs a set, not frontend-design alone. Check what will be installed before choosing. Scripts and dependencies referenced by a Skill may need separate setup. After installation, check the Skill list and reopen the session if needed.

MCPは外部ツールへの接続規格です。Skillを入れただけでNotionやGoogle Driveへアクセスできるわけではなく、それぞれの接続と認証が必要です。 MCP connects external tools. Installing a Skill alone does not give access to Notion or Google Drive; each requires its own connection and authentication.

公式資料 Official resources

導入コマンドとライセンスの案内 Installation commands and licenses 、内蔵Skills Built-in Skills 。2026年9月11日確認。文書Skillsを含め、すべてが同一のオープンソースライセンスではありません。ここでは紹介リンクを掲載し、第三者のSkill本体は再配布していません。. Checked September 11, 2026. These Skills, including document Skills, do not all share the same open-source license. We link to them without redistributing third-party Skill files.

ここまでできれば、題材を変えられる Now you can change the subject

まずは今回の紹介ページで、見出し・学べること・連絡先の案内を自分の活動へ置き換えてみます。実在の情報を入れる場合は、自分が掲載してよい内容だけを使います。一般公開や問い合わせ送信の実装は、動作と掲載内容を確認してから別の作業として進めます。 Replace the practice page's heading, learning topics and contact guidance with your own activity. Use only real information you are allowed to share. Public deployment and contact-form sending are separate tasks to address after checking the content and behavior.

いきなり業務全体を任せず、今回の「読む→計画→実装→確認」を1つの作業で繰り返します。 Repeat the read → plan → implement → verify cycle on one task before delegating an entire business process.

今あるindex.htmlを、私の活動紹介へ変更したいです。
まずbrief.mdのどの情報を置き換える必要があるか整理してください。
まだ編集せず、不明な事実は私に確認してください。
確認した情報だけで変更計画を出し、変更後のチェック項目も示してください。

I want to adapt index.html to introduce my own activity.
First identify which information in brief.md needs replacing.
Do not edit yet; ask me about unknown facts.
Use only confirmed information to propose a change plan and post-change checks.

依頼できるだけでなく、変更を見て直せることが入門のゴールです。「AIに全部やってもらった」より「自分の目的に合う成果物にできた」を目指します。 The beginner's goal is to review and revise changes, not just make requests. Aim for a result that serves your purpose, rather than simply having AI do everything.

公式で学びを深める Continue with official learning resources

• Claude Code 101：仕組み・基本の作業・設定を学ぶ入口。: an introduction to concepts, basic workflows and settings.
• Claude Code in Action：基本操作の後、長い作業や自動化を扱う発展学習。: further study of longer tasks and automation after the basics.
• 公式ベストプラクティス Official best practices ：依頼・検証・コンテキスト管理の見直し。: revisit prompting, verification and context management.

本講座は独自の日本語入門教材で、Anthropicの公式講座・認定講座ではありません。公式教材の翻訳転載ではなく、この練習題材に合わせて手順と図解を設計しています。 This independently created course is not an official or certified Anthropic course. Its exercises and diagrams were designed for this practice project, rather than translated or republished from official course materials.

公式資料 Official resources

Skills ／ MCP。2026年9月11日参照。. Accessed September 11, 2026.