# AIで作るWeb画面のテンプレート感を減らす Taste Skillの使い方

- 媒体: 知能圏（CHINOUKEN）
- 公開日: 2026-08-31
- カテゴリー: エージェント・ソフトウェア
- タグ: Taste Skill、エージェントスキル、Webデザイン、フロントエンド
- 想定読了時間: 約8分
- 調査基準日: 2026年8月31日
- 出典: 5件（末尾の「参照リンク」に番号順で記載）
- ページ: https://www.chinouken.com/articles/taste-skill-frontend-design
- このMarkdown: https://www.chinouken.com/articles/taste-skill-frontend-design.md
- 利用条件: 引用する場合は出典として「知能圏（chinouken.com）」と該当ページのURLを明記してください。本文の再配布は行わず、要約や引用の範囲で使ってください。

AIが作るWeb画面のテンプレート感を減らすには、Taste Skillでコードを書く前に、構図、動き、情報量の基準を決めます。同じ写真と文章で比べると、均等なカード中心の画面が、製品写真を大きく見せる左右非対称の構図へ変わりました。用途に合うスキルの選び方、一画面だけで試す依頼文、完成後の確認項目を紹介します。

![Taste Skillの三つの基準と、大きく配置したコーヒー器具の写真を示す図](https://www.chinouken.com/images/articles/taste-skill-frontend-design/hero.png)

*Taste Skillは、構図、動き、情報量をコード生成前に決めます。*

## AIへ任せると似た画面になりやすい

AIへ「モダンな製品ページを作って」と頼むと、中央に大きな見出しがあり、その下に丸いボタン、さらに同じ大きさのカードが三枚並ぶ画面になりがちです。配色や文章を変えても構図が同じなら、別の製品へ差し替えても成立する画面に見えます。

AIは、依頼に書かれていないことを自分で補います。最初に何を目立たせるか、写真をどれくらい大きくするか、余白を広く取るか。指定がなければ、よく使われる無難な構図が選ばれます。

Taste Skillは、Codex、Claude Code、Cursorなどのコーディングエージェントへ読ませるデザイン指示書の集まりです。エージェントはコードを作る前にデザインの方針を決め、よくある構図を理由なく繰り返さないようにします。[1][3][5]

## 見た目が整ってもリンク先は未完成だった

2026年9月5日に保存済みの適用後ページをブラウザで開き、「製品を見る」を押すと、製品詳細へ移らず同じページに残りました。URLの末尾へ付いたのは#だけで、画面にある六つのリンクもすべて同じ仮のリンク先でした。これは構図を比べるために作った試作です。実際に商品を探して購入できるサイトの完成例には使えません。

写真と文章を固定した比較から判断できるのは、構図と見せ方の変化までです。デザインの指示を採用した後には、リンク先、フォームの送信後、入力エラーなど、次の操作が終わる場所を実画面で確かめます。今回のように見た目の検討で止める場合も、動かない部分を先に共有すると、制作の完了条件を取り違えずに済みます。

## コードを書く前に三つの基準を決める

標準スキルの`design-taste-frontend`は、作るページの種類、最初に伝える内容、既存のロゴや色、参考にしたい画面、使いやすさの条件を先に確認します。たとえば、購入を検討する担当者へ価格と導入条件を伝える製品ページと、素材の質感を見せる消費者向けページでは、写真や文章の大きさまで同じにする理由はありません。[2][3]

そのうえで、構図、動き、情報量を1から10の範囲で決めます。

| 基準 | 数字が小さい | 数字が大きい |
| --- | --- | --- |
| 構図の変化量 `DESIGN_VARIANCE` | 左右対称で整然 | 左右非対称で変化が大きい |
| 動きの強さ `MOTION_INTENSITY` | ホバーなど最小限 | スクロールに連動する演出まで使う |
| 一画面の情報量 `VISUAL_DENSITY` | 余白を広く取る | 情報を詰めて配置する |

三つの数字は高いほどよいわけではありません。商品写真を大きく見せたいなら構図の変化量を上げ、落ち着いて文章を読ませたいなら動きは抑えます。企業向けの製品ページなら、見た目の意外性より、価格や導入条件の見つけやすさを優先する場合もあります。

標準スキルには、青紫の光を何にでも使わない、均等な三枚カードを繰り返さない、実際の製品画面に見せかけた空の枠を作らない、といった規則も含まれます。すべてを禁止するためではなく、ページの内容に合う構図を選び直すための規則です。[3]

## 同じ素材でも写真の役割が変わる

画面のどこが変わるかを見比べるため、コーヒー器具の製品ページを二つ作りました。写真、文章、リンクは変えず、片方だけに標準スキルの方針を適用しています。

| 見比べる場所 | 最初の画面 | Taste Skillを使った画面 |
| --- | --- | --- |
| 最初に目に入るもの | 見出しとボタン | 製品写真 |
| 画面の分け方 | 中央寄せと均等なカード | 大きな写真と左右非対称の文章欄 |
| 色の使い方 | 背景に青い光を置く | 製品写真のコバルト色だけを使う |
| 特徴の見せ方 | 三つのカード | 罫線と余白で区切る |

標準スキルを使った画面では、製品写真が画面の約半分まで広がり、文章より製品そのものが先に目へ入ります。ただし、この比較だけで読みやすさや購入率が上がったとは判断できません。採用するかどうかは、最初に伝えたい内容が見つけやすくなったかで決めます。

![同じコーヒー器具の写真と文章を使い、均等なカード中心の画面と、大きな写真と左右非対称の構図を採用した画面を並べた比較図](https://www.chinouken.com/images/articles/taste-skill-frontend-design/figure-layout-edit.png)

*文章、写真、リンクを変えず、写真の大きさ、左右の比率、色の使い方を変えました。*

## 作るものに合うスキルを選ぶ

Taste Skillには、コードを作るスキルと、実装前の参考画像を作るスキルがあります。最初から全部を組み合わせず、いま作りたいものに合う一つで十分です。[1]

| 作りたいもの | 選ぶスキル | 何を任せるか |
| --- | --- | --- |
| 新しいランディングページや作品紹介サイト | `design-taste-frontend` | 構図、動き、情報量の方針を決めて実装する |
| 既存サイトの見た目を直す | `redesign-existing-projects` | 現在の画面と機能を確認してから再設計する |
| Codexで構図と動きを強く変える | `gpt-taste` | 標準より大胆な構図と動きを指定する |
| 参考画像を作ってから実装する | `image-to-code` | 参考画像の生成、分析、実装を順に進める |
| Web画面の参考画像だけを作る | `imagegen-frontend-web` | コードを作らず、画面の完成イメージを作る |
| ミニマル、柔らかな高級感、無骨な表現へ絞る | `minimalist-ui`など | 決めた見た目に合う規則を追加する |

迷う場合の第一候補は`design-taste-frontend`です。既存サイトでは、見た目だけを変えるつもりでも、ナビゲーション名、リンク先、フォーム項目まで変わると、そのWebページを使う人が困ります。既存機能を守りながら直すなら、現在の画面を先に確認する`redesign-existing-projects`が合います。

標準の`design-taste-frontend`は、現在v2の実験版です。同じインストール名のまま内容が更新されます。以前のv1と同じ動きを保ちたい場合は、`design-taste-frontend-v1`を選びます。[1][4]

標準v2が扱うのは、ランディングページ、作品紹介サイト、既存サイトの再設計までです。ただし、既存のリンクやフォームなどの機能を守る必要がある場合は、専用の`redesign-existing-projects`を選びます。数字を比較する確認画面、データ表、入力が何段階も続く製品画面は標準v2の対象外です。こうした画面では、非対称な構図より、必要な数字と次の操作がすぐ見つかる情報設計を優先してください。[3]

## 最初は一画面だけで試す

初めて使うときは、サイト全体ではなく、対象ページを開いて最初に見える一画面だけを作り直す方法が分かりやすいです。ランディングページならファーストビューが該当します。文章、写真、ロゴ、リンク先、フォーム項目を変えないと決めておけば、Taste Skillが変えた構図を見比べやすくなります。

標準スキルは、公式READMEにある次のコマンドで追加できます。[1]

```bash
npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend"
```

依頼文には、ページを見る人、最初に伝えること、変えてはいけないもの、作り直す範囲を書きます。

```text
design-taste-frontendを使い、このランディングページの最初の一画面を再設計してください。
このページは、請求書作成ソフトを初めて検討する小規模事業者向けです。
最初に「請求書を10分で作れる」と伝えてください。
ロゴ、文章、写真、リンク先、フォーム項目は変えません。
コードを書く前に、構図、動き、情報量をどう設定するか説明してください。
```

「いい感じに」「高級感を出して」だけでは、AIが足りない条件を補い、別のテンプレートへ寄ることがあります。誰が見るページで、何を先に伝え、何を残すかまで書くと、修正の理由を確認できます。

## 見た目と元の機能を一緒に確認する

Taste Skillを使っても、完成した画面の確認は必要です。今回の比較でも、適用直後は大見出しが三行になり、写真とのバランスが崩れました。文章欄の幅と文字サイズを調整し、二行へ収めています。

確認するのは、見た目の好みだけではありません。

1. 最初に伝えたい内容が、写真や装飾に埋もれていないか
2. 見出し、本文、ボタンを無理なく読めるか
3. スマートフォンでも文章と写真の順序が自然か
4. 元のリンク、ナビゲーション、フォーム項目が残っているか
5. 動きを減らす端末設定でも、内容と操作が失われないか

Taste Skillを使い続ける基準は、派手な画面になったかではありません。ページで最初に伝える内容が明確になり、写真を大きくした理由や動きを抑えた理由を説明できるなら、次の修正でも同じ方針を保てます。目的とのつながりを説明できない場合は、AIのよくある型を別の型へ置き換えただけです。

## 参照リンク

1. [Leonxlnx: Taste Skill README](https://github.com/Leonxlnx/taste-skill/blob/ccbc15639c97057cbfcf32ecebc38ef716e4bb37/README.md)
2. [Taste Skill: Documentation](https://www.tasteskill.dev/docs)
3. [Leonxlnx: design-taste-frontend v2 SKILL.md](https://github.com/Leonxlnx/taste-skill/blob/ccbc15639c97057cbfcf32ecebc38ef716e4bb37/skills/taste-skill/SKILL.md)
4. [Leonxlnx: Taste Skill CHANGELOG](https://github.com/Leonxlnx/taste-skill/blob/ccbc15639c97057cbfcf32ecebc38ef716e4bb37/CHANGELOG.md)
5. [Agent Skills: Specification](https://agentskills.io/specification)

2026年8月31日時点の公式資料を確認しています。仕様は更新される可能性があります。

---

© 知能圏 https://www.chinouken.com/articles/taste-skill-frontend-design