Claudeで導入すると便利なスキル集・第1回
ClaudeにWebページを作ってもらったとき、「整っているけれど、どこかで見たようなデザインだな」と感じたことはないでしょうか。
大きな見出し、同じ形のカード、目立つボタン。必要な要素はそろっていても、自分たちのサービスらしさが伝わるとは限りません。
そこで紹介したいのが、Anthropicが公開している「frontend-design」というスキルです。
スキルとは、Claudeに専門的な作業の進め方を伝えるための手順書のようなもの。frontend-designには、Webサイトや画面を作る際のデザインの考え方がまとめられています。
単に色や装飾を足すのではなく、「誰に向けた画面なのか」「何を伝えたいのか」を踏まえて、見た目の方向性を考えるためのスキルです。公式のスキル定義
Web版とClaude Code、何が違う？
最初に整理しておきたいのが、使う場所です。同じClaudeでも、チャット画面で試作する場合と、制作中のサイトを直接編集する場合では、導入方法や作業の進め方が異なります。
| 使う環境 | 向いている使い方 | この記事で紹介する導入方法 |
|---|---|---|
| Web版・デスクトップ版のチャット | ページの構成を相談し、画面やコードの試作を作る | スキルをZIPファイルで登録 |
| Claude Code | プロジェクトのファイルを読み、既存サイトの実装や修正を進める | 公式プラグインを導入 |
この記事では、チャットと、手元のプロジェクトを扱うClaude Codeを取り上げます。まず形を見ながら相談したいならチャット、手元のサイトに組み込みながら進めたいならClaude Code、という使い分けが考えられます。
なお、デスクトップアプリの「チャット」と「Code」タブは区別してください。Codeタブで作業する場合は、Claude Code側の手順を使います。Claudeのスキル利用ガイド、Claude Codeのプラグイン導入ガイド
チャットで有効にしたスキルは、同じClaudeアカウントでログインしたターミナル版Claude Code（v2.1.273以降）にも同期されます。APIキーやクラウドプロバイダー経由では同期されません。両方の手順を必ず行う必要はなく、すでに登録済みなら、Codeの /skills にある「claude.ai sync」を先に確認してください。スキルの同期について
Web版・デスクトップ版のチャットに導入する
チャットで使う場合は、公式に公開されたスキルを、カスタムスキルとして登録する方法があります。2026年10月27日時点で、チャットのSkillsはFree・Pro・Max・Team・Enterpriseで利用でき、コード実行の有効化が前提です。この対応プランの説明は、Claude Codeの利用条件を示すものではありません。対応プランと前提条件
- Anthropicの公式リポジトリを開き、「Code → Download ZIP」から全体をダウンロードして展開します。
- 展開したフォルダ内の
skills/frontend-designを取り出し、このfrontend-designフォルダごとZIPに圧縮します。SKILL.mdとLICENSE.txtは名前を変えずに含めます。 - Claudeの「Settings → Capabilities」で「Code execution and file creation」（新しい設定画面では「Create and edit files」）を有効にします。
- 「Customize → Skills」から「＋」「Create skill」「Upload a skill」と進み、ZIPをアップロードします。
- 登録したスキルを有効にします。
ZIPの中身は、次のような構造です。GitHubのリポジトリ全体をダウンロードしたZIPを、そのまま登録するのではありません。
frontend-design.zip
└─ frontend-design/
├─ SKILL.md
└─ LICENSE.txt
Teamでは組織側の機能は既定で有効ですが、組織の設定や権限によって登録が制限される場合があります。Enterpriseでは、管理者側でコード実行・ファイル作成とSkillsが有効になっているかも確認してください。画面が見つからない場合は、まず組織の管理者へ確認しましょう。スキルの登録手順、ZIPの作成方法
登録できたら、チャットで「frontend-designスキルを使って、サービス紹介ページを試作してください」と頼んでみましょう。最初はサイト全体より、1ページに絞ると確認しやすくなります。
Claude Codeに導入する
Claude Codeでは、スキルが入った「プラグイン」という配布用パッケージを、公式マーケットプレイスから導入できます。ここではClaude Codeが導入済みであることを前提に、プラグインを追加します。
ターミナルでClaude Codeを起動し、Claude Codeの入力欄に次のコマンドを入力します。
/plugin install frontend-design@claude-plugins-official
このコマンドで開く詳細パネルから、適用範囲を選びます。自分の全プロジェクトで使う「user」、リポジトリで設定を共有する「project」、自分のこのリポジトリだけで使う「local」があります。個人で1つのサイトに試すなら「local」が分かりやすいでしょう。
導入後に「Plugin is now active.」と表示されれば、そのセッションで利用できます。再読み込みを求められた場合は、表示に従って /reload-plugins を実行します。/pluginの「Installed」で有効な状態になっていることと、入力欄に / を入れたときにfrontend-designのスキルが候補に出ることを確認してください。
上の /plugin install はClaude Codeの入力欄用です。起動済みのClaude Codeで進めるなら、これだけで構いません。PowerShellなどのシェルから追加する場合は、先頭に claude を付けた claude plugin install frontend-design@claude-plugins-official を使います。シェルから導入する際、公式マーケットプレイスが見つからなければ、先にターミナルでClaude Codeを一度起動してください。
デスクトップアプリのCodeタブでは、入力欄付近の「＋」から「Add plugins」（または「Plugins → Browse plugins」）を開いて探す方法もあります。公式プラグイン、導入手順
導入後は、依頼内容に応じてClaudeがスキルを選びます。自分から使用を指定するなら、チャットでは「frontend-designスキルを使って」と伝え、Claude Codeでは / の候補から該当スキルを選んで依頼を続けます。プラグイン経由のスキルは /プラグイン名:スキル名 の形式で表示されるので、自分の画面に出た候補を選びましょう。Claude Codeのスキル呼び出し
導入したら、何を伝えるとよい？
スキルを入れても、こちらのサービスやお客さまのことが自動的に伝わるわけではありません。
たとえば、「おしゃれなページを作って」という依頼に、次のような情報を足してみます。
frontend-designスキルを使って、
地域の小さなパン教室の紹介ページを作ってください。
読者：
パン作りが初めてで、一人で参加することに不安がある人。
ページの目的：
体験レッスンの内容と料金を理解し、日程を確認してもらうこと。
雰囲気：
温かさと清潔感を大切にしてください。
写真を主役にし、装飾は控えめにしてください。
掲載内容：
レッスンの流れ、講師紹介、料金、持ち物、よくある質問。
未提供の料金や実績は作らず、仮置きだと明記してください。
最初に、配色・文字・情報の並べ方を提案してください。
スマートフォンでの読みやすさも考慮してください。
これは説明用の架空の例ですが、考え方は企業サイトにも応用できます。
「温かい雰囲気」だけでなく、「初めての参加に不安がある人」と伝えることで、写真の選び方や説明の順番にも判断の材料が生まれます。
既存サイトの改善なら、現在の画面やブランドのルールも渡しましょう。Sofriaのようにサイト全体の雰囲気をそろえたい場合は、参考ページの画像、使っている色、文章の調子を共有すると相談が具体的になります。
公式の比較例から、使いどころを考える
Anthropicの公式Cookbookには、デザインに関する指示を加えた場合と加えない場合を比較する例が公開されています。題材は、サービス紹介ページ、ブログ記事のレイアウト、ユーザー・権限・操作ボタンを並べた一覧表です。
ただし、これは関連するデザイン指示の比較例であり、現在のfrontend-designプラグインを導入した効果を、そのまま測定した実験ではありません。公式の比較例
ここからは、実施済みの事例ではなく、日々の制作での使い方の提案です。
- サービス紹介ページ：何を最初に見せ、どこで詳しい説明へ進んでもらうかを検討する。
- ブログ記事ページ：本文の読みやすさと、関連記事への移動のしやすさを整える。
- 管理画面：情報の優先順位や、操作ボタンの見つけやすさを見直す。
最初から全面的なリニューアルを任せるより、「記事ページの冒頭だけ」「申し込み部分だけ」と区切って試すと、変更の良し悪しを判断しやすくなります。
チャットで試作ができても、それだけで運用中のサイトが更新されるわけではありません。この記事の手順では、試作をサイトへ組み込む作業が別途必要です。Claude Codeでプロジェクトを編集する場合も、Gitなどで変更前後の差分を見て、意図した箇所だけが変わっているかを確認してから反映しましょう。
最後は、自分の目と操作で確かめる
見た目が整うと、それだけで完成したように感じることがあります。しかし、きれいな画面と使いやすい画面は、必ずしも同じではありません。
スマートフォンで文章を読めるか。ボタンを押すと期待した場所へ進むか。キーボードでも操作できるか。載っている料金や実績は正しいか。
試作を見ながら、「この見出しでは内容が分からない」「この情報を先に読みたい」と具体的に返していく。そのやり取りまで含めて使いたいスキルです。
まずは、いまのサイトで少し気になっている1ページを選んでみてください。「誰に、何を伝えたいのか」を言葉にするところから、Claudeとの制作が始まります。
導入手順は2026年10月27日に確認した公式情報をもとにしています。公式資料との照合による説明であり、本記事のために両環境で導入操作を実機検証したものではありません。画面名や操作方法は更新されることがあります。