AIに「サイトをおしゃれにして」と頼んでも、同じような配色やカード型レイアウトになる。そんな悩みに対して、Anthropicが公開しているのがClaude Codeの「frontend-design」だ。この記事では、できること、インストールから操作までの具体的な手順、使えるサイトの条件、そしてミロクAI（mirokuai.net）での活用案を整理する。
先に結論：frontend-designは、Webサイトに入れるWordPressプラグインでも、URLを貼るだけで自動改装するサービスでもない。Claude Codeにデザインの方針を与え、実際に編集できるフロントエンドのソースコードを改善するためのスキルだ。
Claude frontend-designとは？
Claudeの開発元Anthropicが提供する、Claude Code向けの公式プラグイン／スキル。デザイン対象の目的・利用者・トーンを踏まえ、タイポグラフィ、配色、余白、レイアウト、アニメーションなどを一貫した設計に落とし込み、画面の実装コードに反映させる。公式の狙いは、ありきたりな「AIっぽいデザイン」から抜け出すことにある。
- できること：トップページ、ランディングページ、記事一覧、ダッシュボード、設定画面などのUI設計と実装支援。
- 得意なこと：サイトの目的に合わせたデザイン方針、文字組み、色、余白、視覚的な強弱、モバイル対応の提案。
- できないこと：非公開サイトをURLだけで自由に編集すること、サーバーへの自動反映の保証、コンテンツ・SEO・セキュリティ品質の自動保証。
公式情報：Anthropic「frontend-design」／公式GitHub。
導入方法：Claude Codeでインストールする
STEP 1 編集するサイトのプロジェクトを準備
Claude Codeが動くMacなどで、作業対象のフォルダを開く。既存サイトならGitで変更履歴を管理し、作業用ブランチを切っておく。本番サイトをいきなり書き換えないことが重要だ。
STEP 2 プラグインをインストール
Claude Codeの対話画面で次のコマンドを入力する。公式マーケットプレイスが登録済みなら1行目は省略できる。
/plugin marketplace add anthropics/claude-plugins-official
/plugin install frontend-design@claude-plugins-officialインストール後、/plugin で有効化を確認する。初回導入時は、表示される適用範囲（このプロジェクトだけ／ユーザー全体など）を確かめよう。
STEP 3 対象ページとデザイン要件を伝える
最も重要なのは、単に「かっこよく」と伝えないこと。誰に何を届けるページか、守るべき制約、変えてよい範囲をセットにして指示する。
frontend-designを使って、このプロジェクトのトップページをリデザインしてください。
目的：最新AIニュースと実践検証記事を読み分けやすくする。
対象：AIを仕事で使いたい初心者〜中級者。
方向性：信頼できる編集メディア。落ち着いた濃紺と余白を基調にする。
条件：既存の記事URL・見出し構造・計測タグは変更しない。
スマホ320px幅でも読みやすくし、画像の遅延読み込みとキーボード操作に配慮。
まず変更方針と影響ファイルを提示し、承認前に本番へ公開しない。STEP 4 ローカルでプレビューし、修正指示
Claude Codeが編集したファイルの差分を確認し、プロジェクト固有の開発コマンドでプレビューする。たとえばAstroなら、通常は依存関係を導入した後に npm run dev でローカル表示を確認できる。見た目が違えば「スマホのヘッダーが詰まる」「記事カードの文字量を増やす」と具体的にフィードバックする。
STEP 5 検証してから公開
- PC／スマホの表示、メニュー・検索・リンクの動作
- 見出しの階層、文字のコントラスト、代替テキスト、キーボード操作
- 表示速度（Core Web Vitalsなど）と画像サイズ
- GA4・GTM・広告・アフィリエイト表示、既存URLやメタ情報への影響
- Git差分のレビュー、バックアップ、テスト環境から本番へのデプロイ
注意：frontend-designをインストールしただけでは、実際のサイトは変わらない。編集→確認→デプロイという通常の開発工程は必要になる。
どんなサイトでも使える？ 対応条件を整理
答えは「あらゆるサイトに直接使えるわけではない」。鍵になるのは、テーマやコンポーネントなどのソースを編集できるかどうかだ。
- Astro・React・Vue・HTML/CSSの自作サイト：相性がよい。プロジェクト内の画面コードをClaude Codeに編集させられる。
- WordPress：カスタムテーマや子テーマ、ブロックスタイルなどのコードを管理していれば利用可能。ただしWordPress管理画面にそのまま追加するプラグインではない。
- ShopifyなどのEC：テーマコードを編集できる範囲で応用できる。アプリ連携や決済機能への影響に注意。
- Wixや独自CMSなど：ソースの編集権限・エクスポート機能が限定される場合は直接反映できない。デザイン案やコードの参考としての利用にとどまることがある。
- 他社が運営するサイト：編集権限がなければ変更できない。閲覧用URLだけでは不十分。
したがって、初心者にとって重要なのはツールのインストールよりも、サイトのコードをどこで管理し、どの手順で公開するのかを把握することだ。
ミロクAIブログで使うなら、こうする
ミロクAIは現在WordPressで運用しつつ、Astro＋GitHub＋Cloudflareへの移行とUI刷新を検討している。そこで私なら、全面リニューアルを一度に行わず、次の3段階で試す。ここからは今後の実践案であり、frontend-designで改修を実施済みという意味ではない。
第1段階 トップページを「AI情報×実践記録」の2本柱へ
ファーストビューに「AIを使いこなす力は、言葉の力」という編集方針を簡潔に置く。直下には最新AI情報と自分で試した検証記事の2系統を分けて掲載。初訪問の人が「ニュースを読む」「手順を知る」「失敗事例を確認する」を迷わず選べる構成にしたい。
第2段階 記事カードと本文の読みやすさを改善
記事カードにはカテゴリー・公開日・一言の要約を整理し、スマホでの見出しの折り返しを調整する。記事本文は目次、見出し間の余白、コードブロック、注意書き、参考リンクを共通部品として設計。「AIの操作記事をスマホで読みながら、別画面で設定できる」読みやすさを優先したい。
第3段階 Astro移行の検証ページを1ページ作る
既存WordPressはそのまま動かし、Astro側でトップページの試作版を作成。Claude Codeにfrontend-designを使わせてUIを改善し、GitHubで変更を管理。ローカルまたはプレビュー環境で確認してからCloudflareに配信する。本番ドメインの切り替えや旧記事URLの変更は、表示とSEOの検証が終わるまで保留する。
ミロクAI用の具体的な指示文
frontend-designを使い、mirokuai.netのAstro移行用トップページを試作してください。
媒体の目的：最新AI情報＋自分で試した検証記録をわかりやすく発信する。
編集理念：AIを使いこなす力は、言葉の力。
読者：非エンジニアの個人事業主・小規模事業者。
必要セクション：最新記事／実践ログ／人気記事3件／運営方針。
デザイン：編集メディアらしい信頼感。装飾を増やし過ぎず、読みやすい文字と余白を優先。
技術：Astro、モバイルファースト、軽量CSS。不要なJSは使わない。
厳守：記事URL、構造化データ、OGP、GA4・GTM、広告導線を移行計画なしに変更しない。
作業：まずワイヤーフレーム→配色・書体案→実装→スマホ確認の順で進める。
今回は試作のみ。公開・DNS変更・本番上書きは禁止。使う前に知っておきたい注意点
- デザイン品質の保証ではない：AIの提案はあくまで初稿。情報設計、ブランドの一貫性、ユーザビリティは人が確認する。
- 権限の管理：Claude Codeにサイトのリポジトリを読ませる場合、不要なシークレット・鍵・個人情報を含めない。GitHubの権限も必要最小限にする。
- 移行とリデザインは分ける：WordPressからAstroへの移行時にURL・サイトマップ・広告タグまで一括変更すると、不具合の原因を特定しにくい。
- 料金：プラグインの存在と、Claude Code本体の利用料金・利用枠は別問題。契約プランと利用条件を公式で確認する。
まとめ：デザインをAIに任せても、設計の言葉は自分が持つ
frontend-designが興味深いのは、単なる装飾の自動化ではなく「このサイトは誰に何を伝えたいのか」という設計を、コードの形にしてくれる点だ。逆に言えば、目的や読者像が曖昧なままでは、いくらデザインを磨いても伝わりにくい。ミロクAIではまずAstroの試作ページで使い、デザインの意図を言葉にすることが、AIを活かす力になるのか検証していきたい。
コメント