【2026完全版】Claude Code を2時間でゼロから実務レベルまで完全習得する手順

ご参考になれば、ぜひ X（@utanesuke_papa）をフォローしてください。UiPath の技術情報や AI 実装に関する話題を、できるだけ早くお届けしています。

この記事では、これまでXで分けて整理していた Claude Code の基礎編と中級編をまとめて、インストールや基本操作から、Figma MCP 連携、コンテキスト管理、CLAUDE.md、Hook、Skill、Subagent、Plugin といった応用機能・高度拡張までを一気に整理します。

本気で2時間を確保して、腰を据えて学びたい人向けに、単なる機能紹介ではなく、実務でどう使い分けるかまで見通せる構成にしています。

1. Claude Code のインストールと初回セットアップ

まずClaude Codeの公式サイトにアクセスし、表示されるインストールコマンドを実行します。ここでは Windows 環境を前提に、PowerShell での手順を例に進めます。

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

コマンドでインストールが完了したら、動作確認を兼ねて簡単な ToDo アプリを作ってみます。

まず、作業用ディレクトリとして my-todo を作成し、そのディレクトリへ移動します。続いて、claude コマンドを実行して Claude Code を起動します。

mkdir my-todo
cd my-todo
claude

Claude Code を起動した際にログイン案内が表示されない場合は、手動で次のコマンドを実行します。

/login

Claude Code では、主に次の2つの接続方法があります。

• サブスクリプション方式: Claude の Pro または Max プランを契約している場合に利用します。
• API Key 方式: API を使って従量課金で利用する方式です。

Claude の Pro または Max を利用している場合は、サブスクリプション方式を選択すれば問題ありません。

ブラウザで認証画面が開くので、許可したあとターミナルに戻って Enter を押せばログイン完了です。Claude Code の入力待ち状態に戻れば、初回セットアップは完了です。

2. 最初のページを Claude Code に作らせる

このセクションでは、最初のページを作らせる流れと、編集承認の基本的な考え方をあわせて確認します。

次に、Claude Code にシンプルな要件を伝えます。

HTML で ToDo アプリを作ってください

Claude Code が処理を始めると、最初のファイルを作成する前に、編集してよいかどうかの確認を求めてきます。たとえば、この例では index.html を作成する提案が表示されます。

このとき、主な選択肢は次の3つです。

• Yes: 今回の操作だけを許可します。別の編集が必要になった場合は、再度確認が入ります。
• Yes, allow all edits during this session: このセッション中のファイル編集をまとめて自動承認します。
• No: 今回の提案は許可しません。必要に応じて追加の指示を出し、別案を求めることもできます。
  Yes, allow all edits during this session を選ぶと、入力欄の下に次のような表示が出ます。

accept edits on

これは、そのセッション中の編集が自動承認される状態になっていることを意味します。
承認すると、Claude Code が最初の HTML ページを生成します。まずは、この一連の流れを体験することが最初の目的です。

3. Claude Code の3つのモード

Claude Code には主に3つのモードがあり、作業内容に応じて使い分けます。通常は Shift + Tab で切り替えます。

Claude Code の3つのモード

• デフォルトモード
  画面下部には ? for shortcuts と表示されます。
  デフォルトモードでは、ファイルの作成や編集のたびに確認が入るため、最も慎重に進めたいときに向いています。
• 自動モード
  画面下部には accept edits on と表示されます。
  自動モードでは、Claude Code がファイル作成や編集を自動で進めます。操作効率が高く、ある程度方針が固まっている実務作業では使いやすいモードです。
• Plan モード
  画面下部には Plan mode on と表示されます。

Plan モードでは、実際にファイルを変更せず、設計方針や実装の進め方を整理できます。大きな変更に入る前の検討に向いています。

Shift + Tab を使えば、この3つのモードを順番に切り替えられます。作業の慎重さや目的に応じて使い分けることが、Claude Code を実務で活用するうえで重要です。

4. Claude Code 内でターミナルコマンドを実行する

Claude Code が index.html を作成したら、その内容を確認します。
ここでは、生成したファイルを Claude Code の中から確認する方法として、ターミナルコマンドの実行を試します。

!open index.html   # macOS の場合
!start index.html  # Windows PowerShell の場合

先頭に ! を付けると、その入力をシェルコマンドとして実行できます。これにより、Claude Code の中からそのままファイルを開いて内容を確認できます。
生成された ToDo ページは、簡単なサンプルとして動作を確認する用途であれば、十分に使えるレベルになることが多いです。

ただし、ここで生成されたコード構成には注意点もあります。

小規模なデモであれば問題ありませんが、初期生成の段階では、HTML・CSS・JavaScript が 1 つの todo.html にまとまることも少なくありません。

小さいうちは扱いやすくても、規模が大きくなると保守は一気に大変になります。

そのため、規模が大きくなる前に、ファイルを役割ごとに分けられる構成へ移行した方が保守しやすくなります。たとえば、React + TypeScript + Vite のような構成は、その移行先として分かりやすい選択肢です。

こうした構成変更は影響範囲が広いため、次は Plan モードを使って安全に整理していきます。

5. Plan モードでプロジェクト構成を再設計する

構成の変更は比較的大きな作業なので、まず Plan モードで相談するのが安全です。
Plan モードに切り替えたら(Shift + Tab)、たとえば次のように入力します。

現在のアプリを React + TypeScript + Vite の構成にリファクタリングし、既存機能はすべて維持してください。
さらに UI のスタイルも一致させてください。

この段階では、すぐにファイルを変更させるのではなく、どのような構成へ移行するか、どの手順で進めるかを先に整理してもらうのがポイントです。

複数行のプロンプトを入力するときは、改行方法も把握しておくと便利です。

• Enter: 送信
• Shift + Enter: 改行

もしターミナル内の入力欄が使いづらい場合は、Ctrl + G が便利です。

これを押すと、別タブのエディタ画面で入力内容を編集できるようになります。長いプロンプトや複数行の指示を整理したいときに向いています。

保存してタブを閉じると、内容が Claude Code の入力欄に戻るため、そのまま Enter で送信できます。

6. Claude Code が提示する計画の見方

Plan モードでは、Claude Code は実装に入る前に、作業の進め方をある程度整理した計画を提示してきます。
たとえば、次のような内容が含まれます。

• 目標
• 実装対象一覧
• ディレクトリ構成
• 実装ステップ
• テスト方針

特に、想定している構成、実装手順、テスト方針が自分の意図とずれていないかを確認することが重要です。

最後に「この計画を実行するか」と聞かれ、一般的には次のような選択肢が表示されます。

• 計画を実行し、その後は自動承認モードに入る: 以後のファイル変更をまとめて自動承認します。
• 計画を実行するが、デフォルトモードを維持する: 実行はするものの、その後のファイル変更は毎回確認を取ります。
• 計画をさらに修正する: 計画に不満がある場合は、追加要求を出して調整できます。

たとえば、次のように補足できます。

各 ToDo 項目に優先度（高・中・低）を追加し、色分けして表示してください

こうした補足を加えると、Claude Code は要求を反映した新しい計画を提示し、構成案や実装ステップもそれに応じて更新してくれます。

重要なのは、Claude Code の計画をそのまま受け入れることではなく、自分の意図した構成や要件と一致しているかを確認したうえで実行することです。

7. 自動モードなのに、なぜコマンド実行では確認が入るのか

ここは多くの人が最初に戸惑うポイントです。

たとえ accept edits on になっていても、Claude Code は一部のコマンド実行時には確認を求めることがあります。

mkdir
npm install
npm run dev

理由はシンプルです。
自動モードは、あくまでファイル編集を進めやすくするためのものであり、すべてのコマンド実行を自動化するものではありません。

ターミナルコマンドの実行は、環境の変更や外部依存の追加につながる可能性があるため、Claude Code ではより慎重に扱われます。そのため、別途ユーザーの同意が必要になることがあります。

8. 権限確認をスキップする危険な起動モード

もし、毎回の許可確認を完全に省略したい場合は、起動時に次のオプションを付けます。

claude --dangerously-skip-permissions

このモードで起動すると、画面上では次のような状態になります。

bypass permissions

この状態では、通常であれば入る権限確認がスキップされ、編集やコマンド実行がそのまま進むようになります。
たとえば、

• 依存パッケージのインストール
• ディレクトリの作成
• ファイル削除
• その他のシェルコマンド実行
  などが自動で進みます。

注意点：

非常に強力なモードですが、依存関係の追加、ファイル削除、環境変更といった操作も確認なしで進むため、影響範囲を把握しないまま使うのは危険です。

特に、プロジェクトの重要なファイルを誤って変更したり、意図しないコマンドをそのまま実行してしまう可能性があります。

少なくとも基礎編の段階では、このモードを常用する必要はありません。まずは通常の確認フローに慣れてから、用途を理解したうえで検討するのが安全です。

9. 開発サーバーの手動起動とバックグラウンドタスク

自分で npm run dev を実行し、表示された URL をブラウザで開けば動作を確認できます。

開発サーバーを手動で起動したあとは、その状態を確認・管理する方法も知っておくと便利です。

また、/tasks を実行すると、現在のバックグラウンドタスク一覧を確認できます。

このタスク管理機能を使うと、Claude Code が自動で起動した開発サーバーや、ユーザーが手動で起動したプロセスが現在どう動いているかを確認できます。

10. 機能追加とロールバック

たとえば、あとから言語切り替え機能を追加したいとします。
次のように指示できます。

画面右上に言語切り替えを追加し、日本語と英語を選べるようにしてください。デフォルトは日本語にしてください。

Claude Code に修正を依頼したあと、ブラウザで確認すると、言語切り替え UI が追加されているはずです。

しかし、あとでやっぱり不要だと思った場合は、その変更を取り消したくなることがあります。

• 方法1: rewind コマンドを使う
• 方法2: Esc を 2 回押してロールバック画面を開く

Claude Code は基本的に、各リクエストごとに巻き戻しの基準点を作成します。

ロールバック時は、その中から戻したい時点を選択します。

通常、次のような選択肢が表示されます。

• コードと会話の両方を戻す
• 会話だけ戻す
• コードだけ戻す
• キャンセルする

変更内容も会話履歴もまとめて戻したい場合は、1つ目を選ぶのが分かりやすい選択です。

11. ロールバック後も生成物や依存関係が残る理由

これは実務上かなり重要なポイントです。

Claude Code がロールバックできるのは、主に Claude Code 自身が変更したファイル内容です。

一方で、次のようにターミナルコマンドによって生成されたものは、ファイル編集の巻き戻しとは別扱いになるため、Claude Code だけでは完全に元へ戻せないことがあります。

• mkdir で作ったディレクトリ
• npm install によって追加された依存関係
• ビルド生成物
• node_modules

つまり、ロールバック後も次のような状態になり得ます。

• index.html は以前の状態に戻っている
• しかし、関連ファイルや依存関係はディレクトリに残っている

これは不具合ではなく、ロールバックの対象範囲による仕様上の制約です。

実務では、Claude Code の巻き戻し機能に頼りすぎず、変更履歴と復元範囲を明確に管理できる Git を併用する方が安全です。

12. 画像を使ってデザインを伝える

Figma などで作ったデザインに合わせて Claude Code に画面を寄せてもらいたい場合、まずは画像ベースで伝える方法があります。

最も手軽なのは、デザインを書き出してそのまま渡すやり方です。

手順はシンプルです。Figma のデザインを PNG として書き出したあと、Claude Code にドラッグ&ドロップするか、画像をコピーして貼り付けます。

画像を渡したうえで、「このデザインに寄せて修正してください」と依頼すれば、Claude Code は見た目を参考にしながら UI を調整できます。

注意

環境によっては、macOS でも画像の貼り付けが Command + V ではなく Ctrl + V で通る場合があります。うまく貼れないときは、ドラッグ&ドロップに切り替えると確実です。

限界

ただし、画像だけでは正確な再現が難しいことがあります。特にフォント、余白、コンポーネント構造のような情報は、見た目だけでは判断しきれません。画面の大枠を素早く共有するには十分ですが、細部まで合わせたい場合は追加情報が必要です。
より高い精度で再現したい場合は、次の #13 で扱うように、MCP 経由で Figma の設計情報まで渡す方法が有効です。

13. MCP を使って Figma デザインを高精度に再現する

画像だけで寄せる方法よりも、もう一段精度を上げたいなら、MCP 経由で Figma と接続する方法があります。

MCP は、LLM が外部ツールとやり取りするための接続方式です。Figma の MCP Server を使うと、Claude Code は単なる見た目の画像だけでなく、次のような設計情報まで参照できます。

• デザインのスクリーンショット
• コンポーネント構成
• スペーシング
• フォント情報
• スタイル情報
• デザインコンテキスト

そのため、画像入力だけでは拾いにくい余白や階層構造まで踏まえて、より安定して画面を寄せやすくなります。

1. Figma MCP Server をインストールする

まずは Figma 公式の手順に従って、MCP Server をインストールします。

https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
powershell

claude plugin install figma@claude-plugins-official

インストールが完了したら、Claude Code を再起動します。

2. Claude Code を再起動する

以前の会話を引き継ぎたい場合は、/resume を使います。起動時に前回の会話をそのまま継続したいなら、claude -c でも再開できます。

3. MCP ツールを確認する

Claude Code 上で次のコマンドを実行します。

/mcp

ここで Figma 関連の MCP を選び、認証を済ませます。

認証後は、その MCP Server が提供するツール一覧を確認できます。

4. 要件と Figma リンクを渡す

Figmaよりリンクを取得

たとえば、次のように依頼します。

現在のページを Figma のデザインに合わせて修正してください：
https://www.figma.com/design/hKTXuXSOWspjg1wUzQAXNK/ToDoHQ--Activity-management-website-design--Community-?node-id=3305-1035&t=LZOr2ZaXvOi73kTL-4

そのうえで、対象ノードを選択した Figma のリンクを渡します。

Claude Code は必要に応じて、デザインコンテキスト取得、スクリーンショット取得、コンポーネント情報取得などのツールを呼び出し、設計情報を確認しながら画面を修正します。

この方法なら、単純な画像入力だけに比べて、より高い再現性を狙いやすくなります。

14. コンテキスト圧縮と管理

Claude Code で長く作業していると、コンテキストにはさまざまな情報が蓄積していきます。たとえば、会話履歴、コード生成の履歴、MCP ツールの結果、中間的な方針や判断材料などです。

こうした情報の中には、引き続き必要なものもあれば、すでに不要になったものもあります。会話が長くなりすぎたときは、状況に応じてコンテキストを圧縮すると扱いやすくなります。

圧縮コマンド

/compact

これを実行すると、現在の会話や状態が、重要な内容を残したまま、よりコンパクトな要約に整理されます。

効果

• Claude Code の応答が安定しやすくなる
• 後続のトークン消費を抑えやすくなる
• 長い会話による文脈の散らかりを減らせる

圧縮後の内容を確認する

圧縮後の内容は、Ctrl + O で開いて確認できます。ここを見ると、会話が要約された形で整理されていることが分かります。

15. /compact と /clear の違い

Claude Code には、圧縮以外に /clear というコマンドもあります。この 2 つは似ていますが、役割ははっきり異なります。

/compact

重要な情報を残しつつ、会話を要約して軽くします。

/clear

現在のコンテキストを消去し、新しい状態から始めます。
前の文脈を引き継ぎながら作業を続けたいなら /compact、次にやる作業が前の会話と無関係なら /clear が向いています。逆に、前提を残したい場面で /clear を使うと、必要な文脈まで失われるため注意が必要です。

16. CLAUDE.md を使って継続的な設定を与える

Claude Code に毎回読み込んでほしい情報がある場合は、CLAUDE.md が便利です。ここにプロジェクト固有の前提を書いておくと、セッションをまたいでも同じルールを渡しやすくなります。

たとえば、次のような内容を入れておけます。

• このプロジェクトの概要
• 開発ルール
• 表現上の注意事項
• 回答スタイル
• 毎回守ってほしい制約

初期化方法

まずは次のコマンドを実行します。

/init

すると、Claude Code が CLAUDE.md を自動生成します。必要に応じて、日本語で書き直しても構いません。たとえば、Claude Code に対して「CLAUDE.md を日本語に変更してください」と依頼して整えてもよいです。

また、CLAUDE.md の末尾に次のような指示を追加することもできます。

# 注意事項：
毎回の回答の最後に happy coding を付けること

その後、Claude Code を再起動すると、そのルールが反映されるようになります。
毎回の回答の最後にhappy codingが付け加えました。

17. CLAUDE.md の適用範囲

CLAUDE.md の設定がどこに適用されるかは、次のコマンドで確認できます。

/memory

通常は、次の 2 種類のスコープがあります。

1. プロジェクトレベル

現在のプロジェクトにだけ適用される設定です。たとえば、そのリポジトリ固有の開発ルールや記述方針を置くのに向いています。

2. ユーザーレベル

そのユーザーが使うすべてのプロジェクトに適用される設定です。個人として常に守ってほしい回答スタイルや作業方針を置くのに向いています。
このように、プロジェクトごとのルールと、自分の共通ルールを分けて管理できます。

18. Hook で操作の前後に自動処理を走らせる

Claude Code には Hook 機能があります。これは、特定のタイミングで自分で定義した処理を自動実行する仕組みです。

代表的な使い方は、Claude Code がコードを書いたあとに自動でフォーマットをかける、といった自動化です。
設定方法

次のコマンドを使います。

/hooks

すると、Hook を設定できるトリガー一覧が表示されます。

たとえば、ツール実行後に処理を走らせたいなら PostToolUse を選びます。ここで対象ツールと実行したいコマンドを設定します。

例として、Edit や Write のあとに hook-simple-test.txt へ hooktest という文字列を書き込む Hook を追加したい場合は、Claude Code にその内容を依頼できます。
~/.claude/settings.json に保存される設定イメージは、次のようになります。

"hooks": {
  "PostToolUse": [
    {
      "matcher": "Write",
      "hooks": [
        {
          "type": "command",
          "command": "echo hooktest >> hook-simple-test.txt"
        }
      ]
    }
  ]
}

このように設定しておくと、Claude Code が対象ツールを実行したあとに、指定したコマンドが自動で走るようになります。

19. Hook の保存スコープ

Hook を保存するときには、適用範囲も選べます。

1. ローカル・プロジェクトレベル

今のマシン上のこのプロジェクトだけで有効です。設定は settings.local.json のようなローカル設定に保存され、通常は .gitignore に入ります。

2. プロジェクトレベル

このプロジェクトを使うすべてのメンバーに共有される設定です。チームで共通のフォーマッタやチェックを使いたい場合に向いています。

3. ユーザーレベル

そのユーザー個人にだけ適用される設定です。プロジェクトには紐づかず、自分の開発環境全体で使う Hook を置くのに向いています。

たとえば、個人用の補助処理ならユーザーレベル、チームで統一したい処理ならプロジェクトレベル、今の環境だけで試すならローカル・プロジェクトレベル、という形で使い分けると整理しやすくなります。
実際に動作を確認すると、Claude Code にファイル作成を依頼したタイミングで、Hook による追加の書き込みが行われることがあります。

20. Agent Skill：定型タスクを説明書として再利用する

たとえば、毎日開発日報を書きたいとします。しかも毎回、日付、開発内容、詳細、備考といった一定のフォーマットに従わせたいなら、毎回その指示を貼り付けるのは非効率です。こういう場面では Agent Skill が向いています。

Agent Skill は、Claude Code に必要なときだけ読み込ませる説明書のようなものです。定型タスクをテンプレート化して再利用したいときに使えます。

作成の流れ

ユーザーの Skill 用ディレクトリに、たとえば daily-report のようなフォルダを作り、その中に SKILL.md を配置します。

mkdir ~/.claude/skills/daily-report

PS C:\Users\admin_1\.claude\skills> code

エディタは VS Code でもメモ帳でも構いません。SKILL.mdを作成します。SKILL.md には、通常次の 2 種類の情報を書きます。

1. メタ情報

name や description を書きます。Claude Code はこれを見て、どのような依頼にその Skill を適用すべきか判断します。

2. 実際のルール

日報の書式、含めるべき項目、表現上のルールなど、出力時に守ってほしい指示を書きます。
たとえば、次のような内容です。

---
name: daily-report
description: 毎日の進捗レポートを生成します。ユーザーがその日の作業をまとめたり、日報として進捗を報告したりする際に使用します。
---
# daily-report
## フォーマット要件
以下の Markdown 形式に従って出力してください。
# 開発日報（YYYY-MM-DD）
## 本日の概要
（1文で本日の主な成果をまとめる）
## 詳細変更
### 新機能
- 【モジュール名】詳細...
### 問題修正
- 【モジュール名】詳細...
## 注意事項

設定後に Claude Code を再起動し、

/skills

を実行すると、その Skill が認識されていることを確認できます。

そして、たとえば「今日の日報を書いてください」と依頼すると、Claude Code は必要に応じてその Skill を呼び出し、指定したフォーマットで日報を出力します。

21. Agent Skill は手動でも呼び出せる

Skill は Claude Code が自動で判断して使うだけでなく、ユーザー側から明示的に指定して呼び出すこともできます。

/daily-report 今日の日報を書いてください

このように手動で指定すると、どの Skill を使わせたいかを明確にできるため、結果をより意図通りに制御しやすくなります。

22. Subagent：独立したコンテキストを持つ子 Agent

Claude Code には、Skill とは別に Subagent という仕組みもあります。Subagent は、独立したコンテキスト、独立した設定、独立した処理空間を持つ小さな Agent です。特定用途専用の役割を持たせたいときに向いています。
たとえば、コードレビュー専用 Agent を作って、重い調査や長い分析をメイン会話と切り離して処理させる、といった使い方ができます。

コードレビュー用 Subagent の例

次のコマンドを使います。

/agents

ここで Agent のスコープを選び、ユーザー単位で持つか、プロジェクト単位で持つかを決めます。

そこで新しい Agent を作成し、たとえば「ユーザーがコードレビューを依頼したときに使うコードレビュー用 Subagent です」のように役割を説明します。

Claude Code はその説明をもとに初期設定を生成します。

その後、必要に応じて自分で設定を編集し、JavaScript のレビュー基準、CSS のレビュー基準、出力フォーマットなどを細かく調整できます。
その状態で、Claude Code に「my-todo のソースコードをレビューしてください」と依頼すると、その Subagent が呼び出され、定義した基準に沿ったレビュー結果を返します。

23. Skill と Subagent の最大の違い

この 2 つは似ていますが、最も重要な違いはコンテキストの扱い方にあります。

Agent Skill

現在のメイン会話のコンテキストをそのまま共有します。つまり、Skill が実行中に参照した内容や途中の判断は、基本的にメイン会話の文脈と連続しています。
そのため、Skill は次のような用途に向いています。
いまの会話内容と密接に関係している
実行中に大量のノイズを生まない
既存の文脈をそのまま活かしたい
たとえば、今日の作業内容をもとに日報を書く、といった用途です。

Subagent

完全に独立したコンテキストで動作します。その中で大量のコードを読んだり中間分析を行ったりしても、メイン会話には主に最終結果だけが戻ってきます。

そのため、Subagent は次のような用途に向いています。

• 処理量が多い
• 中間過程が煩雑
• メイン会話のコンテキストを汚したくない
• 独立した専門タスクを処理したい

たとえば、大規模プロジェクトのコードレビューや調査タスクなどです。

一言でまとめると

Skill はコンテキスト共有型、Subagent はコンテキスト分離型です。

24. Plugin：一式まとめてインストールできる拡張パッケージ

さらに上のレイヤーとして、Plugin という仕組みがあります。これは、単体の Skill を 1 つ追加するというより、関連する機能群をまとめて導入するための仕組みです。

含められるものは、たとえば次のような要素です。

• Skill
• Subagent
• Hook
• MCP 設定
• 追加ルールや補助ファイル

つまり、Plugin は「機能セット丸ごとの導入手段」と考えると分かりやすいです。

25. フロントエンド設計用 Plugin の例

次のコマンドでプラグイン管理画面を開きます。

/plugin

一般的には、次のような項目があります。

• Discover: 新しいプラグインを探す
• Installed: 導入済みプラグインを確認する
• Marketplace: プラグインを探して導入する

たとえば front-end-design のようなプラグインを見つけてインストールできます。導入対象は通常、次のようなスコープから選べます。

• 現在のユーザー
• 現在のプロジェクト
• 現在のユーザーの現在のプロジェクト

インストール後に Claude Code を再起動します。

その後、

/skills

を確認すると、そのプラグインに対応する Skillが追加されていることが分かります。

つまり、Plugin の導入は、その一式の能力(MCP,Hook,Skill)をまとめて追加することに相当します。

26. Plugin の価値

たとえば front-end-design のようなプラグインは、モデルにより具体的な UI 設計ルールを与える役割を持ちます。大規模言語モデルが素の状態でフロントエンドを作ると、配色が似通う、レイアウトが無難になりやすい、といった傾向が出ることがあります。

こうしたプラグインを使うと、Claude Code は設計ルールや補助設定を踏まえたうえでページを生成できるため、見た目の完成度を上げやすくなります。

たとえば、次のように依頼できます。

front-end-design のルールに従って、HTML の ToDo アプリを作ってください。my-todo2 フォルダに入れてください。

すると Claude Code はそのプラグインに含まれる Skill やルールを参照し、それを踏まえてコード生成を進めます。結果として、デフォルト状態よりも、配色、余白、レイアウト、全体の雰囲気が整いやすくなります。

27. 最後のまとめ

Claude Code の主要機能は、大きく整理すると次のようになります。

基礎レイヤー（No1-No4）

• インストールとログイン
• プロジェクト作成
• ファイル生成
• モード切り替え
• ターミナル実行

実務レイヤー（No5-No11）

• Plan モードによる設計
• バックグラウンドタスク管理
• ロールバック
• 開発サーバーの手動制御

応用レイヤー（No12-No17）

• 画像入力
• MCP による Figma 連携
• コンテキスト圧縮と整理
• CLAUDE.md による継続設定

高度拡張レイヤー（No18-No26）

• Hook 自動化
• Agent Skill
• Subagent
• Plugin

ここまで一通り理解できれば、Claude Code は単なる「コードを書いてくれるチャットツール」ではなく、実際の開発フローに組み込めるコーディング Agent として扱いやすくなります。