MENU
開発ツール

Claude Code【準備編】インストール・初期設定からFigma MCP連携まで

みなと
UI実装担当
UI実装担当

Claude Codeって最近よく聞くけど、実際どうやって使うの？

この記事では、Claude Codeのインストールから初期設定、さらにFigma MCPサーバーとの連携まで、順を追って解説します。

Claude Codeに関する情報を調べると、公式ドキュメントや断片的な解説は見つかるものの、「フロントエンドのコーディングに使うにはどう設定すればいいのか」が分かりづらいと感じることはないでしょうか。

本記事は、そうした方向けに、Claude Codeを実際に使い始めるまでの準備を、ひとつひとつ丁寧に説明する前編（準備編）です。

このシリーズは、前編・後編の2本構成になっています。

  • 前編（この記事）
    環境を整え、Figma MCPサーバーと連携できる状態にする
  • 後編（検証編）
    同じ環境を使って、実際にFigmaのデザインカンプからHTMLとCSSを出力し、その精度や使い勝手を検証する

本記事では、Figmaはすでに使っている前提で進めます。Claude Codeについては、インストールから丁寧に説明していくので、初めて触る方でも問題ありません。

それではまず、Claude Codeとは何かから見ていきましょう。

Contents
  1. Claude Codeとは何か
  2. 事前に確認しておくこと
  3. Claude Codeをインストールする
  4. Claude Codeを起動してログイン・初期設定をする
  5. Figma MCPサーバーを連携する
  6. まとめ

Claude Codeとは何か

Claude Code（クロードコード）は、Anthropic（アンソロピック）が開発したAIコーディング支援ツールです。通常の日本語や英語で指示を出すだけで、コードの生成・修正・ファイル操作などをまとめて行ってくれます。

人間がClaude Codeに指示を出してコードが生成・修正される流れを示した図

VS CodeなどのIDEやデスクトップアプリなど複数の環境で利用できますが、本記事ではターミナルから使う方法を解説します。

Web制作においては、以下のような用途に活用できます。

  • 新規ページのHTML・CSS・JavaScriptを一から生成する
  • 既存プロジェクトのルールを読み込ませて、統一感のあるコードを出力する
  • 指示を追加しながら、コードを反復的に修正していく
みなと
みなと

「AIがゼロからページを作った、すごい」という記事はよく見かけますが、Web制作の現場では既存ルールへの適応力の方が大事だったりしますよね。

後述するFigma MCPサーバーと組み合わせることで、FigmaのデザインカンプをAIが直接読み取り、HTML・CSS・JavaScriptをまとめて生成することも可能です。

料金について

Claude Codeを使うには、Claudeのアカウントが必要です。無料プランでは利用できないため、有料プランへの加入が必要です。

無料ProMax 5xMax 20x
Claude Code×○○○

まずはProプランから始めるのが手軽です。使用量が増えてきたらMaxプランへの移行も検討してみてください。

料金の詳細や最新情報については、Claude公式の料金ページをご確認ください。

事前に確認しておくこと

インストールを始める前に、以下の条件を確認しておきましょう。

Git for Windowsが必要（Windowsの場合）

WindowsでClaude Codeを使うには、事前にGit for Windowsのインストールが必要です。Claude CodeがWindows上で内部的にGit Bashというコマンド実行環境を使って動作するためです。

Git for Windows公式サイトからインストーラーをダウンロードして実行してください。インストール中にいくつかの設定画面が表示されますが、すべてデフォルトのままNextを押し続けてインストールして問題ありません。

インストール後の操作はPowerShellから行うので、Git Bashを直接操作する必要はありません。

Claudeのアカウントがあること

Claude Codeを使うには、ClaudeのアカウントとClaude ProまたはMaxプランへの加入が必要です。まだ準備できていない場合は、Claude公式サイトからアカウントを作成してください。

Figmaアカウントがあること（Figma MCP連携を使う場合）

後半で行うFigma MCPサーバーとの連携には、Figmaアカウントが必要です。本記事で使うリモートMCPサーバーはすべてのプランで利用できるため、無料プランでも問題ありません。

公式ドキュメントによると、リモートMCPサーバーは現在ベータ期間中のため無料で利用できますが、将来的には有料機能になる予定とのことです。最新情報はFigma公式ヘルプをご確認ください。

Claude Codeをインストールする

環境が整ったら、インストールに進みましょう。お使いのOSに合わせて、以下のコマンドを実行してください。

Windowsの場合
Macの場合

PowerShellを開いて、以下のコマンドを実行してください。

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

ターミナルを開いて、以下のコマンドを実行してください。

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

インストールが完了したら、以下のコマンドでバージョンを確認します。

claude --version

バージョン番号が表示されればインストール成功です。

Claude Codeのインストール成功とバージョン確認の結果

claude コマンドが見つからない場合

インストールは成功していても、claude コマンドが認識されない場合があります。インストール時のメッセージに以下のような表示が出ていた場合は、PATHを追加する必要があります。

Windowsの場合
Macの場合

インストール時に以下のような表示が出ていた場合は、

C:\Users\{ユーザー名}\.local\bin is not in your PATH.

以下の手順でPATHを追加してください。

  1. スタートメニューから「設定」を開き、左メニューの「システム」をクリックする
  2. 一覧を下にスクロールして「バージョン情報」をクリックする
  3. 「関連リンク」から「システムの詳細設定」をクリックする
  4. 「システムのプロパティ」ウィンドウが開いたら「環境変数」ボタンをクリックする
  5. 「環境変数」ウィンドウが開いたら、上側の「ユーザー環境変数」の中から「Path」を選択して「編集」をクリックする
  6. 「環境変数名の編集」ウィンドウが開いたら「新規」をクリックして C:\Users\{ユーザー名}\.local\bin を入力する
  7. 「OK」をクリックして各ウィンドウを閉じる
  8. PowerShellを新しく開き直す
環境変数名の編集画面でパスを追加した状態

インストール時に以下のような表示が出ていた場合は、

Native installation exists but ~/.local/bin is not in your PATH. Run:
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc

Run: の後に続くコマンドをターミナルで実行してください。

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc

実行後に claude --version を試してバージョン番号が表示されればOKです。

Claude Codeを起動してログイン・初期設定をする

インストールが完了したら、ターミナルで作業するプロジェクトのディレクトリに移動し、Claude Codeを起動します。

cd /path/to/your/project
claude

起動するとウェルカム画面が表示されます。初回起動時はターミナルの表示テーマを選ぶ画面が出てきます。好みのものを選んでください。あとから /theme コマンドで変更することもできます。

Claude Code初回起動時のテーマ選択画面

テーマを選ぶと、次にログイン方法を選ぶ画面が表示されます。Web制作でClaude Codeを使う場合は「1. Claude account with subscription」を選んでください。

Claude Codeのログイン方法選択画面

選択後、ブラウザが開いてClaude.aiのログイン画面が表示されます。GoogleアカウントまたはメールアドレスでClaude.aiにログインしてください。

Claude.aiのログイン画面

「Claude Max または Pro が必要です」と表示される場合

無料プランのアカウントでログインすると、「Claude Codeに接続するにはClaude MaxまたはProが必要です」というメッセージが表示されます。この場合は有料プランへのアップグレードが必要です。別の有料プランのアカウントをお持ちの場合は、一度ログアウトして切り替えてください。

ログインすると「Claude CodeさんがClaude chat accountへの接続を希望しています」という確認画面が表示されます。「承認する」をクリックしてください。

Claude CodeとClaude.aiアカウントの接続承認画面

「Build something great」という画面が表示されたら認証完了です。ブラウザを閉じてターミナルに戻ってください。

Claude Codeの認証完了画面

ターミナルに戻ると「Login successful. Press Enter to continue…」と表示されているので、Enterを押して進んでください。

Claude Codeのログイン成功画面

次に「Security notes」が表示されます。AIの応答には誤りがある場合があること、信頼できるコードにのみ使用することなどが書かれています。内容を確認したらEnterを押して進んでください。

Claude Codeのセキュリティに関する注意事項

続いて「Use Claude Code’s terminal setup?」という画面が表示されます。「1. Yes, use recommended settings」を選ぶと、Option+Enterで改行できるなど、ターミナルの操作性が向上します。あとから /terminal-setup で変更することもできるので、ここは「1」を選んでおくのがおすすめです。

Claude Codeのターミナル推奨設定の確認画面

次に「このフォルダを信頼しますか？」という確認画面が表示されます。自分のプロジェクトであれば「1. Yes, I trust this folder」を選んでください。Claude Codeがそのフォルダ内のファイルを読み取り・編集・実行できるようになります。

Claude Codeのフォルダ信頼確認画面

「Welcome back」という画面が表示されれば、Claude Codeが使える状態になりました。入力欄にプロンプトを入力して使い始めることができます。

Claude Codeのホーム画面

Figma MCPサーバーを連携する

ログインが完了したら、Figma MCPサーバーとの連携設定を行います。

Figma MCPサーバーとは

Figma MCPサーバーは、Claude CodeからFigmaのデザインデータに直接アクセスできるようにする仕組みです。もう少し噛み砕くと、「Figmaの中にある情報を、Claude CodeなどのAIツールが使える形で提供する役割」を担っています。

通常、AIはFigmaの内部情報（レイヤー構造・テキスト・色・余白など）を直接読み取ることができません。Figma MCPサーバーはその橋渡し役として、Figmaのデザイン情報をAIが理解できる形に整理して渡してくれます。

Figma、Figma MCPサーバー、Claude Codeの関係を示した図。Claude Codeがデザインのコード化を依頼し、Figma MCPサーバーがFigmaから選択中のデザイン情報を取得して、AIが理解できる形に整理して渡す流れを表している。

Figma MCPサーバーは、

  1. Figmaのデザイン情報を取得し
  2. AIが理解できる形に整理して
  3. AIツールからのリクエストに応じて返す

という橋渡し役をしています。

みなと
みなと

その情報をもとに、コードをどう生成するかを判断しているのは、Figma MCPサーバーではなく、Claude Code側のAIです。

Figma MCPサーバーには2つの種類がある

Figma MCPサーバーには、大きく分けて2つの種類があります。

  • デスクトップMCPサーバー
    Figmaデスクトップアプリに内蔵されており、ローカル環境でMCPサーバーを起動できます。アプリ上で有効にするだけで使えますが、FigmaのDev席またはフルシート以上の有料プランが必要です。
  • リモートMCPサーバー
    Figmaが提供するホストエンドポイントに接続する方式です。現在はベータ期間中のため、すべてのプランで無料で利用できます。

本記事では、リモートMCPサーバーを使って進めていきます。

デスクトップMCPサーバーを使ったFigma MCP連携については、別記事「Figma MCPサーバーをCursorで使ってみる【準備編】」で解説しています。

Figma Pluginをインストールする

Figma MCPサーバーをClaude Codeで使う最も簡単な方法は、公式プラグインをインストールすることです。Claude Codeが起動中の場合は、Ctrl + C で一度終了してから以下のコマンドを実行してください。

claude plugin install figma@claude-plugins-official

以下のメッセージが表示されればインストール成功です。

Successfully installed plugin: figma@claude-plugins-official (scope: user)

Figmaアカウントと認証する

プロジェクトのディレクトリでClaude Codeを起動した状態で、以下を入力します。

/mcp
Claude Codeのホーム画面で/mcpと入力している状態

MCPサーバーの一覧が表示されるので、plugin:figma:figma · △ needs authentication を選択してください。

/mcpコマンド実行後のMCPサーバー一覧

次に「Authenticate」を選択してください。

Figma MCPサーバーのAuthenticate選択画面

ブラウザが開いてFigmaの認証画面が表示されます。「同意してアクセスを許可する」をクリックして許可してください。

FigmaのAllow Access認証画面

ブラウザに「Authentication Successful」と表示されたらブラウザを閉じてターミナルに戻ってください。以下のメッセージが表示されれば認証完了です。

Authentication successful. Connected to plugin:figma:figma.

接続を確認する

もう一度 /mcp を実行して、plugin:figma:figma の横に ✔ connected と表示されていれば、Figma MCPサーバーとの連携は完了です。

Figma MCPサーバーの接続確認画面
みなと
みなと

準備はここまでです。次回はこの入力欄から、Figmaのデザインカンプを渡して実装を指示していきます。

まとめ

この記事では、Claude Codeのセットアップ手順として、以下を解説しました。

  • Claudeのアカウント準備
  • Claude Codeのインストールとログイン
  • Figma MCPサーバーとの連携設定

これで準備は完了です。

なお、起動直後のホーム画面には「Run /init to create a CLAUDE.md file with instructions for Claude」というヒントが表示されています。/init を実行すると、Claude Codeがプロジェクトのコードを自動で読み取り、CLAUDE.mdを生成してくれます。気になる方はぜひ試してみてください。

次回の【検証編】では、より精度の高いコード出力を目指すために、CLAUDE.mdを手動で作成する方法を解説します。

次回の【検証編】では、実際にFigmaのデザインカンプを渡してHTML・CSS・JavaScriptを出力させ、その精度や使い勝手を現場目線で検証していきます。実務で本当に使えるのか、実際に手を動かして確かめた結果をお伝えします。

押していただけると励みになります！

ABOUT ME
みなと
みなと
フロントエンドエンジニア
Contact
東京のWeb制作会社で15年以上働いている現役フロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました