frontend-design 使い方｜LPを作らせてスキルなしと比べた結果
「AIにLPやWebページを作らせると、どれも同じような見た目になる。frontend-design スキルを入れれば変わるのか」——自社のページや販促物をAIに作らせる人が、一度は考えることです。
結論から言うと、frontend-design（フロントエンド・デザイン）は、AnthropicがGitHubで公開している「見た目のありきたりな型を避けさせる」ためのスキルです。プログラムではなく、Claudeに渡す「デザイナーの心得」が書かれたファイル1つでできています。架空の会社のLPを作らせて、スキルなしと比べたところ、時間と費用はほとんど変わらず、違いは見出しの組み方や細部に出ました。色のように、依頼メモで指定した部分には差が出ませんでした。
株式会社Fyveは、Claude Codeのスキルを実際に入れ、架空の会社の仕事で試した結果だけを書いています。この記事も、新商品のLPを1枚作らせた実測が中心です。説明書の訳だけでは終わらせません。
frontend-designスキルとは｜デザインの「型」を避けさせる心得
frontend-designは、Anthropic公式のスキル集 anthropics/skills（GitHubのスター数は2026年10月21日時点で182,536）の中の1本です。リポジトリの最終更新は2026年10月9日でした。フォルダの中身は、SKILL.md（約9.4KB）とライセンスファイル（Apache 2.0）の2つだけで、プログラムや付属の資料はありません。
SKILL.mdの冒頭には、スキルの説明が次の趣旨で書かれています（私が訳したものです）。新しい画面を作るとき、または今ある画面を作り直すときに、方向性・書体・「ひな形の既定値に見えない選び方」を手伝う、というものです。
中身は、おおよそ次の4つに分けられます。
- 題材から考える：依頼に「何の商品か・誰向けか・ページの役目は何か」が書かれていなければ、先にそれを提案してから作る。業界・素材・言葉づかいの中から、そのページ専用の選び方を探す
- デザインの原則：書体を「いつもの既定の書体」から選ばない。1行の長さを80字未満にする。見出しの一語だけを太字や別の色にする、ラベルを全部大文字にする、見出しの上に意味のない小さなラベルを置く、といった「生成されたページの目印」を避ける。連番（01・02・03）は、中身が本当に順番のあるときだけ使う
- 進め方：先に設計メモ（色を4〜6色、書体、配置、方針）を作る。次に、それが「どんな依頼にも出す既定の答え」になっていないか見直して、直したら理由を言う。そのあとコードを書く
- 自己点検と文章：画面を撮って見直す。飾りを1つ減らす。ボタンの文言は「送信」でなく「変更を保存」のように、押すと何が起こるかを書く。エラーは謝らず、直し方を書く
SKILL.mdには、AIが作るデザインがよく集まる型の例も挙げられています。たとえば、生成りの背景に高コントラストの明朝体と赤茶色のアクセントの組み合わせ、真っ黒な背景に蛍光色が1つ、といったものです。ただし、これらは「依頼のほうで指定されたなら、指定どおりにする」とも書かれています。依頼文の指定が常に勝つ、というのがこのスキルの前提です。
上の図は、SKILL.mdの「Process」の節の流れを、私が図にまとめ直したものです。コードを書く前に「設計メモ」と「見直し」の2段階を挟むのが、このスキルの特徴です。なお、後の「試した結果」で書くとおり、私の実測では、この2段階は返答からは確かめられませんでした。
仕事での使い道｜自社のLPや案内ページを、ありきたりでなく作らせる
frontend-designは、ページの見た目をAIに作らせる場面で使います。非エンジニアの方なら、たとえば次のような使い方が考えられます。
- 新商品や新サービスのLP（1枚の紹介ページ）を、依頼メモからAIに作らせる
- イベントや採用の案内ページを、1ファイルのHTMLで作らせる
- すでにあるページを「いかにもAIが作った見た目」から、その会社らしい見た目に近づけさせる（この使い方は今回は試していません）
向いているのは、「色や雰囲気の方向性はあるが、細かいデザインまで自分では決められない」場面です。逆に、ブランドのルールや色が細かく決まっている場面では、依頼文の指定が優先されるので、スキルの出番は小さくなります。デザインの全般的な進め方は、次の記事にもまとめています。
frontend-designの入れ方｜READMEにある手順
anthropics/skills のREADMEには、Claude Codeへの入れ方として次の手順が書かれています。
- Claude Codeで、
/plugin marketplace add anthropics/skillsを実行して、このリポジトリをマーケットプレイスとして登録する /plugin install example-skills@anthropic-agent-skillsを実行する（frontend-designは、この example-skills という束に入っています。リポジトリの marketplace.json で確認しました）- 入れたあとは、スキルの名前を出して頼む、またはそのまま頼む
READMEには「プラグインを入れたら、スキルの名前を出して頼めば使える」という趣旨の説明があります。束（example-skills）には、frontend-designのほかにも、canvas-design・webapp-testing・skill-creatorなど、別の用途のスキルが入っています。frontend-designだけを入れたい場合は、リポジトリの skills/frontend-design フォルダを、自分のプロジェクトの .claude/skills/ の下にコピーする方法もあります。今回の実測は、後者の方法で入れました（プラグインとして入れる方法は試していません）。
なお、このリポジトリのREADMEには「これらのスキルはデモと学習のためのもので、Claudeが実際に返す動作はここに書かれたものと異なる場合がある」という趣旨の注意書きがあります。業務で使うときは、出来上がりを自分の目で確認してください。
Claude Codeにこう頼む｜名前を言わなくても動いた
今回は、スキルの名前を言わずに、普通の依頼として頼みました。それでも、Claudeは最初にこのスキルを呼び出しました。頼み方の例は次のとおりです。
- 「work/lp-brief.md に、新商品のLPの依頼メモがあります。会社の概要は company.md です。このメモをもとに、ブラウザで開けるLP（HTML1ファイル）を作ってください。」
- 「ブラウザで開いてスマホ幅でも確認して、気になる所を直してください。」（画面の確認まで頼む言い方。今回は試していません）
- 「外部のフォントは使わず、端末の標準フォントだけで作ってください。」（社内で外部への通信を避けたいとき）
最後の例は、試した結果から必要だと分かった頼み方です。理由は、後の「気をつけること」に書きます。
試した結果｜架空の会社の新商品LPを1枚作らせた
試した条件
- 会社：架空の会社（手作り家具を売る、従業員12名の会社）。人名・電話・メールはすべてダミーです
- 仕事：新商品のダイニングチェア（36,000円・税込）のLPを、HTML1ファイルで作る。依頼メモには、ブランド色3色（生成り・オークブラウン・くすんだ緑）、入れたい要素9つ、入れないもの（根拠のない「日本一」などの表現、他社比較）を書きました
- やり方：Claude Code（モデルはSonnet）に、日本語の依頼を1回だけ出しました。スキルを入れた環境と、入れていない環境で、同じ依頼文を1回ずつ実行しています。1回ずつの比べなので、実行のたびのばらつきは見ていません
頼んだ文と、返ってきた答え
画像は、実際の依頼文と返答の文字を、そのままターミナル風に組み直したものです（パスだけ伏せています）。最初の呼び出しが Skill(frontend-design) で、名前を言わなくても発動しました。かかった時間は73.3秒、費用の目安は約0.22ドルでした。
返答には、色は依頼メモのとおり、依頼メモの9つの要素は全部入っている、という報告がありました。写真が手元にないので、椅子・名前入りの札・テーブルは線画で描き、「写真差し替え予定」と画面に出す、という説明もありました。また、返答は「職人の一言は私が書いた仮の文です」「FAQの『他のテーブルにも合わせられる』には根拠がありません」と、自分で作った文面を申告していました。ここは使うときの確認ポイントです。
できあがったページ
出来上がったHTMLを、ブラウザ（Chrome系）で開いて確かめました。依頼メモの9要素（ファーストビュー・座り心地・職人・使用シーン・比較表・お手入れ・配送と返品・よくある質問・予約ボタン2か所）は、すべて入っていました。「日本一」「最高」などの言葉や、他社との比較表はありません。スマホ幅（390px）でも、横にはみ出すことはありませんでした。
スキルなしとの違い｜入れると何が変わるか
同じ依頼文を、スキルを入れていない環境でも1回実行しました（実行記録に、スキルの呼び出しがないことも確かめています）。数字で並べると、次のとおりでした。
スキルあり | スキルなし | |
|---|---|---|
かかった時間 | 73.3秒 | 68.8秒 |
費用の目安 | 約0.216ドル | 約0.198ドル |
出力の量（トークン） | 10,718 | 10,626 |
依頼メモの9要素 | すべて入っていた | すべて入っていた |
指定色・禁止表現 | 守っていた | 守っていた |
ファーストビューの見出し | 縦書きの大きな明朝体 | 横書きの大見出し |
見出しの上の小さなラベル | なし | あり（座り心地のこだわり、つくり手 など） |
お手入れの3つの手順 | 「1つめ・2つめ・3つめ」 | 「01・02・03」 |
フォント | Google Fontsを読み込む | 端末の標準フォント |
時間は約4.5秒、費用は約0.018ドル（約9%）増えただけです。スキルの本文が入る分、読み込む量は少し増えますが、体感できる差ではありません。
上の画像は、デスクトップ幅（1280px）のファーストビューの並べ比べです。左がスキルなし、右がスキルありです。
スキルなしのほうは、見出し「長く座る時間が、いちばん静かな時間に。」の最後の「に。」だけが、次の行に1文字だけ落ちていました（デスクトップ幅の私の環境での表示です）。スキルありのほうは、キャッチコピーを縦書きで大きく置き、右に椅子の絵と価格、ボタンを並べていました。どちらが良いかは好みの面もありますが、「ありきたりな型を避ける」というスキルの狙いは、ここに表れていると私は感じました。
こちらは、お手入れの節の比べです。スキルなしのほうは、見出しの上に小さなラベル（お手入れ方法）が付き、手順が「01・02・03」の番号つきでした。スキルありのほうは、ラベルがなく、手順は「1つめ・2つめ・3つめ」です。SKILL.mdには、見出しの上の小さなラベルと、連番を「生成されたページの目印」として避ける、という趣旨の指示があります。今回の違いは、その指示と一致していました。ただし、1回ずつの比べなので、これがスキルのせいと言い切れるわけではありません。
差が出なかったこと
- 色：依頼メモで色を3色指定していたので、どちらも、生成り・茶・くすんだ緑にほぼ同じ形でまとまりました。SKILL.mdも「依頼の指定が勝つ」と書いています。色や雰囲気が決まっている依頼では、スキルの効果は小さくなります
- ページの構成と情報量：本文の量は、スキルありが約1,700字、スキルなしが約1,900字でした。要素の抜けや禁止表現の混入は、どちらにもありませんでした
- 画像：どちらも写真がないので、線画で代用しました
つまり、frontend-designを入れて変わるのは「指定のない部分の組み方」です。色や雰囲気を細かく指定する人には、変化が小さいと思います。
frontend-designの安全確認｜何を外に送り、何を実行するか
入れる前に、リポジトリの中身を読んで確かめました。読んだのは、SKILL.md、ライセンスファイル、READMEのスキルの入れ方の節、marketplace.json です。
- 外部への送信：確認できませんでした。SKILL.mdはデザインの考え方を書いた文章だけで、通信を行う記述はありません
- 実行するコマンド：スキル自体にはありません。スクリプトや付属ファイルはなく、
allowed-tools（使ってよい道具の限定）の指定もありません。Claudeが普段の権限で、HTMLなどのファイルを書くだけです - 認証情報：APIキーやトークンを扱う処理はありません
- フック：フォルダの中にありません
私が読んだ範囲では、説明と違う動きは見つかりませんでした。ただし、これは2026年10月21日時点の内容についての確認です。更新のたびに中身は変わるので、新しい版に上げるときは、変更点の確認をおすすめします。
一方で、スキルが作るページのほうには、1点注意があります。今回のスキルありの出力には、Google Fontsを読み込む記述が入っていました。このページを開くと、ページを開いた人のブラウザからGoogleのサーバーへ、フォントを取得するための通信が行われます。社内の資料やプライバシーを気にするページでは、「外部のフォントは使わない」と頼むほうが安全です。
frontend-designが向かない場面と、気をつけること
- 色や雰囲気を細かく指定している依頼では、差が小さいです。今回も、色と禁止表現は、スキルなしでも守られていました
- 手順を守ったかは確かめられませんでした。SKILL.mdには「設計メモを作る、型になっていないか見直す、画面を撮って点検する」と書かれていますが、返答には設計メモも画面確認も出ていませんでした。スキルありの返答は「ブラウザでの表示確認は、まだしていません」と、自分で申告しています。設計メモを見たいときは、「設計メモを先に見せてください」「ブラウザで開いて画面を確認してください」と、頼む側で書き添える必要があるかもしれません（これは推測で、試していません）
- 外部のフォントに通信します。上の安全確認のとおりです
- 文面の一部は、Claudeの創作です。職人のコメント、お手入れの手順、FAQの答えの一部は、依頼メモにない文面でした（返答で「仮」と申告されました）。実際と合っているか、公開前に確認してください
- 写真は作れません。線画で代用されるので、商品写真は自分で用意して差し替えます
- デザインの好みは人によって違います。私は、スキルありの縦書きの見出しは特徴があると感じましたが、読みやすさや好みの面で、スキルなしのほうが良いと感じる人もいると思います
試していないことは次のとおりです。
- すでにあるサイトを作り直させる使い方
- React・Next.jsなどの開発環境での使い方
- デザインの方向性を、こちらから細かく指定した場合の効き方
- 同じ依頼を複数回実行したときの、結果のばらつき
- プラグインとして入れる方法（
/plugin install） - 画面確認まで頼んだときの、設計メモや見直しの出方
あわせて読みたい記事
AIが作るサイトの見た目が似てしまう問題を、別のスキルで扱った記事です。
LPのいちばん上の画面の考え方は、こちらにまとめています。
スキルの使い方そのものは、こちらです。
Claude Code Skillsの使い方｜業務をSkill化する実践手順
まとめ｜frontend-designを使う前のチェックリスト
frontend-designは、AIが作るページを「どこにでもある見た目」から離すための心得集です。試した結果、新商品のLPは、スキルありで73秒・約0.22ドルで、依頼メモの9要素をすべて入れて作ってくれました。スキルなしとの差は、時間も費用も小さく、違いは見出しの組み方や、ラベル・連番といった細部に出ました。使う前に、次を確認してください。
- □ 作りたいのは、新商品のLPや案内ページなど、見た目の組み方をAIに任せたいページか
- □ 色や雰囲気を細かく指定する場合、スキルの効果が小さいことを知っているか
- □ 社内の資料やプライバシーが気になるページでは、「外部のフォントは使わない」と頼んだか
- □ 設計メモや画面確認が必要なら、頼む側で書き添えたか
- □ 職人のコメントやFAQなど、Claudeが作った文面を、実際と照らして確認したか
- □ 写真を自分で用意して、線画と差し替える手順を考えたか
- □ スキルなしで作った結果と比べて、入れる手間に見合うか
- □ 入れる前に、SKILL.mdの中身を自分でも見たか
「デザイン・販促物を作る」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。
仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10
31本を実際に入れて、スキルなしと比べた結果つき（全28ページ）
スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。
- 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
- 1本ごとに、スキルなしと比べた時間・費用・出来
- 実物の画面と、Claude Code にそのまま貼れる頼み方
- 外した5本の理由と、入れる前に確かめる4つのこと
メールアドレス登録で他にも様々な資料を閲覧できます
＋9PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。