Taste Skillでサイト画像のトーンを揃える方法｜AIに先にスタイルガイドを読ませる導入手順と料金

この記事はAIに自社サイトの画像を任せたいデザイナー・エージェンシー・コンサル向け（ターミナルを開いたことがなくても読めます）。

そもそもAIで作った画像が「世界観バラバラ」になるのはなぜ？

サイトを作るとき、AIに画像を依頼するとき、たいていの人は1枚ずつ頼みます。

「ヒーロー画像作って」「次は機能紹介の画像」「次はお客様の声の背景」みたいな感じです。

これがズレる元凶。

同じ事象を、海外のブランド支援系メディアもこう書いています。

The number one problem teams face with AI image generation is that the technology is incredible at creating individual images but terrible at creating consistent images without a system.

（出典: techthadot.com）

もう一つ、Venngage（インフォグラフィック制作のサービス）も似たことを書いています。

The result can be a brand that looks like it hired five different agencies in five different countries, all working independently and none of them talking to each other.

（出典: Venngage）

5つの違うエージェンシーが各国でバラバラに作った1枚のサイト。

これ正直あるあるです。

原因は、AIに毎回プロンプトでスタイルを伝えていること。

私の見方では、ここがアーキテクチャの問題で、プロンプト技を磨いても解決しないラインです。

Taste Skillとは何か？公式が掲げる位置づけ

Taste Skillは、AIエージェント向けの「フロントエンドのスタイルルール集」です。

公式サイトのキャッチがこちら。

The Anti-Slop Frontend Framework for AI Agents — Less slop, designs pop.

（出典: tasteskill.dev）

「Anti-Slop」は「ありがちで安っぽいAI出力を作らせない」という意味で使われています。

READMEには、なぜそういう機能が必要かが書かれています。

AI coding agents tend to fall into the same visual patterns — centered headers, 3-column card grids, gradient buttons, emoji headers.

（出典: tasteskill.dev/llms.txt）

センター揃えのヘッダー、3カラムカードのグリッド、グラデーションボタン、絵文字見出し。

AIに任せると毎回これになる。

Twitter上で揶揄されている「同じ青ボタン同じBentoGrid」のあのデザインです。

Taste Skill GitHubは2026年5月時点で15.4kスター、フォーク1.3k。

3ヶ月で15.4kスター。

個人的には、ここまで一気に伸びた理由は「AI生成サイトが似すぎている」という不満が同時多発していたからだと思います。

「AIに毎回頼む」と「先にスタイルガイドを渡す」は何が違う？

Taste Skillの核心は、設計思想の転換です。

従来のやり方は、毎回のプロンプトに「ミニマル風で、日本のエディトリアル雑誌っぽくて、フォントはセリフで」と書き連ねます。

毎回。1枚ごとに。

Taste Skillは違います。

SKILL.mdというルールブックをプロジェクトのフォルダに1回置いておく。

AIエージェントは画像生成のたびにそれを参照する。

プロンプトに毎回スタイルを書かなくていい。

これを表で並べてみます。

右側に注目。

スタイル定義を「毎回しゃべる」のではなく「ファイルに書いて常駐させる」設計です。

Anthropicの公式発表は、この発想を「Agent Skills」として標準化し、2025年12月18日にオープンスタンダード化しています。

Skills package up domain knowledge, tools, and instructions so agents can reliably perform tasks they're configured for.

（出典: Anthropic公式）

美的判断とUX原則を「機械が読めるルール集」に変換する。

私の見方では、これが「プロンプト時代から、基準ファイルを渡す時代へ」の最初の具体例です。

Taste Skillが制御する3つのダイヤルとは？

Taste Skillには3つの数値ノブがあります。

公式ドキュメントが定義している仕様がこちら。

（出典: tasteskill.dev/docs）

たとえば「ラグジュアリーホテルの予約サイト」なら、DESIGN_VARIANCE 5 / MOTION_INTENSITY 4 / VISUAL_DENSITY 2 みたいな感じで指定。

「BtoBダッシュボードの製品サイト」なら、DESIGN_VARIANCE 7 / MOTION_INTENSITY 5 / VISUAL_DENSITY 8。

3つの数字でサイトの「気配」が決まる。

Andrew.oooの詳細レビューがこの仕組みをこう評しています。

Three tunable dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY on 1-10 scales) for customization.

（出典: andrew.ooo）

imagegen-frontend-web版（画像生成専用バリアント）では、ARTディレクション・SPACING_GENEROSITY・CONVERSION_DISCIPLINEなどが追加されて8軸に拡張されます。

個人的には、3軸ですら最初は迷うので、デフォルトの8/6/4のままで1回回すのが安全寄りだと思います。

料金は？画像ランタイムは何を選ぶ（GPT Image 2 vs Nano Banana 2）

Taste Skill本体は無料・MITライセンスのオープンソース。

お金がかかるのは「中で動かす画像生成エンジン」のほうです。

代表的な2つの最新数字を並べます。

（出典: WaveSpeed AI ／ aifreeapi.com）

Analytics Vidhyaが10タスクで実測した結果も載せておきます。

GPT Image 2が10ポイント、Nano Banana 2が5ポイントで、デザイン重視タスクではGPT Image 2が優位。

ただしNano Banana 2は15秒以内で生成完了するため高速プロトタイピングに最適。

（出典: Analytics Vidhya）

サイトの最終ヒーロー画像はGPT Image 2、当て込み用のラフはNano Banana 2、みたいな使い分けが現実的です。

編集ヘビーなワークフローには注意点もあります。

Edit-heavy workflows can cost 2–3x the base per-image cost because reference images are always processed at "high quality."

（出典: WaveSpeed AI）

5回リトライしたら1枚$0.265。これ正直積み上がるとボディーブローです。

サイト1本まるごとで考えると、8セクション×$0.053で1ラウンド$0.42。

リトライ3回まで含めても$1.3前後。

手動でデザイナーが揃えるより圧倒的に速い。

Claude Code経由でTaste Skillを導入する手順（公式ガイド準拠）

公式ドキュメントの手順を、初心者が詰まりやすい箇所に補足を入れて再構成します。

前提: Claude Codeがすでに手元のパソコンに入っていること。

プロジェクト用のフォルダを1つ用意しておくこと。

STEP1. プロジェクトのフォルダに移動する

黒い画面（ターミナル）を開いて、自社サイト用のフォルダに移動します。

$ cd ~/projects/my-site

「my-site」の部分は手元のフォルダ名に置き換えます。

STEP2. Taste Skillをインストールする

公式が指定しているコマンドはこれ。

$ npx skills add Leonxlnx/taste-skill

Codex CLI向けに入れる場合は末尾に -a codex をつけます。

これでプロジェクト内にSKILL.mdが自動配置されます。

STEP3. Claude Codeを起動して画像生成を依頼する

同じフォルダで claude と打って起動。指示は普通の日本語でOKです。

「自社サイト用に、ヒーローから料金まで8セクション分の画像を一気に作って。
DESIGN_VARIANCEは7、MOTION_INTENSITYは5、VISUAL_DENSITYは4で。
ブランドキーワードは『静かな機能美・余白広め・アースカラー』」

Claude CodeはSKILL.mdを参照しつつ、imagegen-frontend-webスキルの「1セクション=1水平画像」ルールに従って8枚を順番に出してくれる。

公式SKILL.mdから抜粋した強制ルールがこちらです。

1セクション=1水平画像。

複数セクションを1枚の縦長画像に圧縮するのは禁止。

デフォルト枚数: ランディングページ=6枚、フルウェブサイト=8枚。

標準8セクション構成: Hero / Trust Bar / Features / Product Showcase / Benefits / Testimonials / Pricing / CTA。

（出典: imagegen-frontend-web SKILL.md）

これがあるおかげで、「ヒーローと料金とお客様の声で雰囲気がズレる」事故が構造的に起きにくくなる仕組みです。

インストール前に必ずやるセキュリティ確認の手順

オープンソースのスキルは、誰でも中身を変更できます。

インストール数やスター数だけで安全とは判断できません。

セキュリティ専門のレビュアーが、こう書いています。

High install counts don't indicate quality—they reflect distribution metrics when skills bundle together.

（出典: timonweb.com）

Claude Code公式ドキュメントも、明確に警告しています。

Review project skills before trusting a repository, since a skill can grant itself broad tool access.

（出典: code.claude.com）

具体的な確認ステップを、Claude Codeに丸投げできる形で書いておく。

STEP1. リポジトリを一旦読み込ませる

Claude Codeを起動した状態で、こう頼む。

「github.com/Leonxlnx/taste-skill のmainブランチを見て、
インストール時に何が実行されるか教えて。
postinstallフックや外部URLへのアクセスがあるかチェックして」

STEP2. 各SKILL.mdの権限設定を確認する

続けて、こう頼む。

「各SKILL.mdのallowed-toolsフロントマターを見て、
どのスキルがどの範囲のツールアクセス権を要求しているか一覧にして。
ファイル書き込み・ネットワークアクセス・シェル実行があれば指摘して」

allowed-tools はスキルが「どのツールに権限を付与するか」を宣言する欄です。

広すぎる権限が定義されていれば一旦止まる判断材料になります。

STEP3. 別の専門スキルでも二重チェック

セキュリティ専門のスキルがあるので、それも併用。

$ npx skills install getsentry/skills@security-review

このスキルは「HIGH/MEDIUM/LOW」の信頼度分類をしてくれて、過剰な誤検知が少ない（前述timonweb.comレビュー比較ベース）。

Trail of Bits公式の trailofbits/skills も、脆弱性検出ワークフロー込みで使えます。

3ステップで「何を入れたのか」が言語化される。

これ正直ハードル低くて助かる仕組みです。

15.4kスター級でも油断しない。

timonweb.comの調査では、実際に高インストール数の偽スキル事例が報告されています。

ターミナルが怖い人向け：ChatGPT Plusだけで擬似的に回す代替ルート

Taste Skill本体はAIエージェント前提なので、ターミナルもnpxも触りたくない人にはハードルがあります。

その場合、ChatGPT Plus（月$20）だけで「擬似Taste Skill」を回す手も使える。

仕組みは単純で、SKILL.mdの中身を「カスタムインストラクション（GPTs）」に貼り付けるやり方です。

STEP1. SKILL.mdの本文を取得する

GitHubの imagegen-frontend-web SKILL.md をブラウザで開いて、本文をコピーします。

STEP2. ChatGPT GPTsで新規GPTを作る

ChatGPTの「GPTs作成」画面で、Instructions欄にSKILL.mdの中身を貼り付け。

名前を「サイト画像メーカー（Taste Skill風）」とでも付けます。

STEP3. 自社サイトのブランドキーワードを冒頭に追記

Instructionsの先頭に、サイトの世界観を3〜5語で足します。

「ブランドキーワード: 静かな機能美 / 余白広め / アースカラー /
日本のエディトリアル雑誌風 / 写真は逆光ぎみ」

これでGPT Image 2の生成枠（コミュニティ報告値で180〜200枚/日）の中で、Taste Skillっぽい統一トーンを擬似再現できる。

もちろん、本物のSKILL.md常駐（Claude Code経由）と比べるとルール強制力は弱い。

最終納品はClaude Codeに移すのが安全寄りです。

非エンジニアが詰まりやすい3地点はどこ？

Andrew.oooの詳細レビューと、私の引用解説の観点でまとめます。

地点1: React/Tailwind前提のコード例

React/Next.js bias in code examples despite framework-agnosticism claims.

（出典: andrew.ooo）

Vue・Svelte・バニラCSSで構築している人は、デザイン原則は使えるがクラス名ガイダンスは要翻訳。

デザイナーが画像生成のためだけに使うなら気にならないラインです。

地点2: 強い意見の押し付け

Very opinionated rules (e.g., banning Inter font) require constant editing if preferences differ.

（出典: andrew.ooo）

Interフォントが禁止されている等、好みと衝突するルールがある。

SKILL.mdをローカルで編集して上書きするのが現実解です。

地点3: ダイヤルの組み合わせの可視化が薄い

Limited documentation on how specific dial combinations appear visually.

（出典: andrew.ooo）

「DESIGN_VARIANCE 7 / MOTION_INTENSITY 5 / VISUAL_DENSITY 8」がビジュアルでどう見えるか、図解が公式に少ない。

最初は2〜3パターン回して当たりを取るのが早いです。

私の見方では、この3つはどれも「致命傷」ではなく「やってみて調整する」レベルの摩擦。

GitHub 15.4kスターの実勢を見ると、このトレードオフを許容している人が多数派です。

FAQ

Taste Skillは有料ですか？

Taste Skill本体はMITライセンスの無料オープンソース。

料金が発生するのは、画像を実際に生成するエンジン側（GPT Image 2やNano Banana 2のAPI料金、もしくはChatGPT Plusなどのサブスク料金）です。

Claude Code以外でも動きますか？

動きます。

公式が対応を明示しているのは12種で、Cursor / Claude Code / Codex / Antigravity / Gemini CLI / v0 / Lovable / OpenCode / OpenClaw / AI Studio / Windsurf / GitHub Copilotです。

SKILL.mdの読み方が標準化されているため、ランタイム非依存で同じスキルが回せる設計になっています（出典: tasteskill.dev/docs）。

GPT Image 2とNano Banana 2はどっちを選ぶべき？

サイトの最終納品で文字組みやエディトリアル感が要るならGPT Image 2、フォトリアルな写真調や反復編集の速さで詰めるならNano Banana 2、というのがAnalytics Vidhyaの10タスク実測の結論。

両方APIキーを持っておいて使い分けるのが現実的だと思います。

Vue・Svelte・バニラCSSで作っているサイトでも使えますか？

デザイン原則（レイアウト・タイポ・カラー・モーション）は使えます。

ただしコード例がReact+Tailwind v3/v4前提のため、生成されるクラス名ガイダンスは要翻訳になります。

画像生成のためだけにTaste Skillを使うなら、フレームワークの違いはほぼ影響しません（出典: andrew.ooo）。

インストール時のセキュリティが不安です。何をすればいいですか？

記事中盤の「セキュリティ確認の手順」を参照してください。

Claude Codeに「github.com/Leonxlnx/taste-skill のmainブランチを見て、postinstallフックや広い権限要求があるか教えて」と頼むのが最短ルートです。

さらに getsentry/skills@security-review や trailofbits/skills の専門スキルで二重チェックすると安心です（出典: Claude Code公式）。

参考リンク

• Taste Skill 公式サイト: https://www.tasteskill.dev/
• Taste Skill ドキュメント: https://www.tasteskill.dev/docs
• Taste Skill GitHub: https://github.com/Leonxlnx/taste-skill
• imagegen-frontend-web SKILL.md: GitHubリンク
• Andrew.oooによる詳細レビュー: andrew.ooo
• Anthropic Agent Skills公式発表: Anthropic Engineering
• Claude Code Skills公式ドキュメント: code.claude.com
• GPT Image 2 OpenAI公式: developers.openai.com
• GPT Image 2 料金詳細（WaveSpeed AI）: wavespeed.ai
• Nano Banana 2 料金（aifreeapi）: aifreeapi.com
• GPT Image 2 vs Nano Banana 2比較（Analytics Vidhya）: analyticsvidhya.com
• セキュリティスキル比較（timonweb）: timonweb.com
• Trail of Bits セキュリティスキル: github.com/trailofbits/skills
• AI画像のブランド一貫性問題（TechThaDot）: techthadot.com
• AI画像のブランド一貫性問題（Venngage）: venngage.com

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。