プラグインの導入

ドキュメント

開発環境構築

プラグインの導入

Claude Codeにプラグインを導入することで、より高度な編集や分析が可能になります。このページでは、Webサイト作成に役立つ3つのプラグインの導入方法を説明します。

所要時間: 約10-15分
前提条件: Claude Codeがインストール済みであること
推奨プラグイン: Context7、vscode-langservers、Playwright

Claude Code プラグインとは？

Claude Codeのプラグインは、AIの能力を拡張するための追加機能です。Webサイト制作においては、コーディングの精度向上、HTML/CSSの解析強化、ブラウザでの自動テストなど、様々な場面で活躍します。

プラグインを導入することで、Claude Codeがより正確なコードを生成したり、実際のブラウザで表示を確認しながら修正を行ったりできるようになります。

導入するプラグインの紹介

今回インストールする3つのプラグインの役割を確認しましょう。

Context7

vscode-langservers

HTML、CSS、JavaScriptの解析力を強化し、より正確な構文チェックとコード補完を実現します。

Playwright

実際のブラウザを自動起動してページを確認し、デザインの崩れを自動検出・修正します。

プラグインのインストール手順

以下の手順に従って、3つのプラグインをインストールします。

Claude Codeを起動

ターミナルを開き、以下のコマンドでClaude Codeを起動します。

claude

プラグイン管理画面を開く

Claude Codeの起動後、以下のコマンドを実行してプラグイン管理画面を開きます。

/plugin

このコマンドにより、プラグインのインストールや管理ができる専用画面が表示されます。

マーケットプレイスを追加

Claude Code公式のマーケットプレイスだけでは一部のプラグインが見つからないため、追加のマーケットプレイスを設定します。

横矢印キー（→）で「Marketplaces」タブを選択し、「Add Marketplace」にカーソルを合わせてEnterキーを押してください。

表示された入力欄に以下を入力します。

Piebald-AI/claude-code-lsps

入力後、Enterキーを押してマーケットプレイスを追加します。claude-code-lsps が一覧に表示されれば成功です。

確認ポイント: Marketplacesタブの一覧に Piebald-AI/claude-code-lsps が表示されていることを確認してください。

Discoverタブへ移動

横矢印キー（→）で「Discover」タブに移動します。ここでインストール可能なプラグインを検索できます。

Context7プラグインをインストール

このプラグインは、最新のライブラリやフレームワークのドキュメントを参照し、コーディングの性能を大幅に向上させる効果があります。

検索欄に context7 と入力し、表示された「Context7」プラグインを選択します。Enterキーを押し、インストールを実行します。

インストール範囲の選択画面が表示されたら、「Install for you (user scope)」を選択してください。これにより、あなた専用の環境にプラグインがインストールされます。

vscode-langserversをインストール

続いて、検索欄に vscode と入力し、一覧から「vscode-langservers」を選択します。

このプラグインは、HTML、CSS、JavaScriptの解析力をアップさせ、より正確なコード生成と構文チェックを可能にします。

同様に「Install for you (user scope)」を選択してインストールを完了してください。

Playwrightをインストール

最後に、検索欄に playwright と入力し、「Playwright」プラグインを選択します。

Playwrightは、実際のWebブラウザを自動起動してページをチェックし、デザインの崩れや表示問題を自動検出できる強力なツールです。

「Install for you (user scope)」を選択してインストールしてください。

インストール完了！ 3つのプラグインがすべてインストールされました。それぞれのプラグインの使い方を確認しましょう。

Claude Codeの再起動

Escキーで、プラグインのインストール画面を終了します。さらに、 /exit でClaude Codeを終了します。その後、改めて、claude コマンドで、Claude Codeを立ち上げてください。

プラグインの使い方

インストールしたプラグインを効果的に活用する方法を説明します。

Context7の活用方法

Context7は、複雑なレイアウトや細かいデザイン指定が必要な場合に威力を発揮します。

使用方法: プロンプトの最後に以下のテキストを追加します。

use context7

使用例:

ヒーローセクションに複雑なグリッドレイアウトを実装してください。
カード要素は3列で、タブレットでは2列、スマホでは1列にしてください。

use context7

Context7を使用することで、Claude Codeが最新のCSS技術やベストプラクティスを参照し、より洗練されたコードを生成します。

使い分けのコツ: 標準的な実装であればContext7なしでも十分です。複雑なレイアウトや、特定のライブラリを使った実装を依頼する場合にContext7を活用しましょう。

Playwrightの活用方法

Playwrightは、実際のブラウザでページを確認しながら問題を発見・修正する際に使用します。

使用方法: デザインの崩れや表示問題を修正したい場合、プロンプトに以下を含めます。

playwright を使って分析して、修正してください

使用例:

スマホ表示でヘッダーのナビゲーションが崩れています。
playwright を使って分析して、修正してください

このように指示すると、Claude Codeが自動的にブラウザを起動し、実際の表示を確認した上で問題を特定し、適切な修正を行います。

Playwrightのメリット: 単に「崩れています」と伝えるだけでも修正してくれますが、Playwrightを使うことで、Claude Codeが実際の表示を目で見て確認するため、より正確な修正が期待できます。

vscode-langserversの活用方法

vscode-langserversは自動的に動作し、特別なコマンドは不要です。

バックグラウンドで常にコードを解析し、HTML、CSS、JavaScriptの構文エラーや最適化の余地を検出します。Claude Codeがコードを生成する際、このプラグインの情報を活用してより正確なコードを作成します。

トラブルシューティング

プラグインが正しくインストールされたか確認する方法

/plugin コマンドを実行し、「Installed」タブを確認してください。インストール済みのプラグイン一覧が表示されます。

Marketplaceの追加に失敗する場合

入力した文字列に誤りがないか確認してください。正確に Piebald-AI/claude-code-lsps と入力する必要があります。スペースや余分な文字が含まれていないか注意しましょう。

Playwrightが動作しない場合

初回実行時、Playwrightが必要なブラウザファイルをダウンロードすることがあります。インターネット接続を確認し、しばらく待ってから再度試してください。

まとめ

3つのプラグインを導入することで、Claude Codeの能力が大幅に向上します。

Context7: 複雑なレイアウトや最新技術を使った実装で精度アップ
vscode-langservers: HTML/CSS/JavaScriptの解析力が向上し、より正確なコード生成
Playwright: ブラウザで実際の表示を確認しながら自動修正

これらのプラグインを活用して、より高品質なWebサイトを効率的に作成しましょう。

Claudeレッスン検索