frontend-design Skillは、サイトの目的に合う設計をClaude Codeへ伝える補助になります。
Claude Codeでページは作れた。でも、どのサイトも似た雰囲気になる。少し凝った見た目にすると、今度はスマートフォンで文字やボタンが崩れる。サイト制作では、デザインの方向づけと実装の確認を両方そろえる必要があります。
Anthropicが公開するfrontend-design Skillは、サイトの目的や内容に合わせてデザインを方向づける指示です。背景となる公式解説は2025年11月公開で、今回の新機能ではありません。この記事では公式のSkillをClaude Codeへ導入する手順と、非専門家でも確認したい実装の要点を整理します。
この記事でわかること
- 準備：サイトの目的・実際の内容・変更範囲を先に決める。
- 導入：公式のSkillをプロジェクトに置き、Claude Codeから呼び出す。
- 確認：PCとスマートフォン、操作、動きの少ない表示で実装を点検する。
Skillは「おしゃれにする魔法」ではなく、設計の判断材料
Anthropicの公式解説は、曖昧な依頼では似た見た目に寄りやすいとして、デザインの文脈を必要な場面で読み込むSkillsの使い方を説明しています。現在の公式frontend-design Skillも、題材や読者、ページの役割を踏まえて、書体・構成・動きなどを意図的に選ぶ方針です。
つまり、Skillを入れる前に「誰が、このページで何をするか」を決めるのが近道です。たとえば社内の申請案内なら、華やかな演出より、締切・必要書類・申請先が迷わず分かることを優先します。
会社の色や書体の見本をどう選ぶかは、ブランド資料の準備を整理した記事に分けています。そちらはClaude Designの資料づくりの話で、この記事ではClaude Codeによるサイトの実装と確認に進みます。
まずはローカルのClaude Codeで、対象のサイトだけに導入する
以下は、手元のプロジェクトをClaude Codeのターミナル版で編集できる人向けの手順です。Claude Codeの利用には対応する契約やAPI利用環境などが必要です。初期設定がまだなら、公式クイックスタートから利用条件と導入方法を確認してください。
1．公式のファイルを確認し、プロジェクトへ配置する
Anthropicの公式リポジトリでfrontend-designの内容とライセンスを確認します。プロジェクト内に.claude/skills/frontend-design/を作り、公式のSKILL.mdをその中へ保存します。これは公式のSkills仕様に沿った、プロジェクト単位の配置です。
全プロジェクトへ影響する個人用フォルダーではなく、対象のサイトだけに置けば、試す範囲を狭くできます。会社の端末では導入ルールを確認し、内容を理解しない外部スクリプトや設定を一緒に持ち込まないでください。作業前には元の状態へ戻せるよう、変更前のコードを保存します。
2．Skillを呼び出し、まず変更案を出してもらう
対象プロジェクトでClaude Codeを開き、/frontend-designを指定して依頼します。Skillsは関連する仕事で自動的に使われる場合もありますが、初回は名前を指定した方が適用対象を確認しやすくなります。見つからない場合は保存先、ファイル名、読み込み対象の環境を確認します。
ローカルのSkill配置が、そのままCoworkやクラウドのセッションへ引き継がれるわけではありません。実行場所が違う場合は、公式の読み込み範囲に従って設定し直します。
依頼には「完成したと判断する条件」まで入れる
次の内容は、社内申請案内を想定した編集部の依頼例です。投稿者の実演や検証結果ではありません。自分のサイトに合わせて、対象ファイルや必要情報を置き換えて使ってください。
/frontend-design このプロジェクトの社内申請案内ページを改善してください。 目的：初めて申請する社員が、締切・必要書類・申請先を迷わず確認できること。 既存の本文とリンク先を保ち、架空の制度・締切・実績を追加しないでください。 まず対象ファイルと変更案を説明し、承認前に実装しないでください。 実装後はPC幅とスマートフォン幅で、横スクロール、文字の重なり、ボタンの見切れを確認してください。 キーボード操作と、動きを減らす設定でも重要情報が読めるか確認してください。 公開・送信・外部サービス接続は行わず、確認できた項目と未確認項目を分けて報告してください。
「実装しない」と指定して最初に案を見ることで、既存のページを全面的に作り替える必要があるのか、小さな変更で十分なのかを判断できます。ファイルの変更やコマンドの実行は、利用中の権限設定にも従います。
完成画像ではなく、動くページを確認する
画面幅を変えて情報の優先順位を見る
大きな画面で整っていても、狭い画面では見出しが何行にもなり、重要なボタンが遠くへ押し出される場合があります。画面幅を変えて、最初に読む情報、本文の順番、ボタンの位置を確認しましょう。スクリーンショット一枚だけでは分からない部分です。
操作と動きは、目的を助けているかで判断する
公式Skillは、動きをむやみに増やすのではなく、操作に対して何が変わったかを伝える使い方を重視しています。たとえば項目を開いたことが分かる動きは役立ちますが、説明文が毎回大きく移動すると読みづらくなります。
| 確認する場面 | 合格の目安 |
|---|---|
| スマートフォン幅 | 横にはみ出さず、重要な情報と操作が隠れない。 |
| キーボード操作 | 操作対象へ移動でき、現在位置が分かる。 |
| 動きを減らした表示 | 演出がなくても内容や状態が理解できる。 |
| リンク・フォーム | 見た目だけでなく遷移先や入力エラーが意図どおり。 |
この確認表は実装を受け取る側の目安です。AIが「確認済み」と書いたら、どの画面・操作を実際に見たのかも確かめると、未実施の検査を見落としにくくなります。
実務上の注意
公式リポジトリのSkillsも、利用環境での検証が必要なサンプルです。導入だけで品質やアクセシビリティが保証されるものではありません。外部フォント・画像・ライブラリを追加する場合は利用条件と通信先を確認し、本番への公開は実装・内容・動作の確認とは別の判断にしてください。
まとめ
frontend-design Skillは、サイトの目的に合う設計をClaude Codeへ伝える補助になります。目的と変更範囲を決めて導入し、完成後は見た目だけでなく画面幅と操作を確かめましょう。
よくある質問
Skillを入れれば必ずよいデザインになりますか？
保証はありません。サイトの目的や内容を伝え、実装されたページを実際に確認する必要があります。
Claudeのチャットへ貼るだけで同じ手順になりますか？
ここで紹介した配置と呼び出しはローカルのClaude Code向けです。Claude.aiやCowork、クラウドセッションは読み込み方法や対応条件が異なります。
自動で公開まで進みますか？
Skillの導入と公開は別です。依頼範囲に公開を含めず、最初はローカルでの確認までに絞ると判断しやすくなります。
出典・参考情報
運営元について
AXメディアは、株式会社ジーズ AX事業部が運営しています。AX事業部では、AI研修・AIエージェント開発・ローカルLLM開発・補助金／助成金の活用支援を提供しています。
