はじめに
この記事は DENSO アドベントカレンダー 2025 の16日目の記事です。
今日はClaudeのSkillsを使って、生成AIっぽいデザインを撲滅したお話です。
前提
- Claude Desktop
- 有料プラン（Pro以上）
問題： Claudeに頼むと派手なデザインになりがち
勉強した内容を整理するために、
Claudeに「この内容をWebページ化して」と頼むと、だいたいこうなります。
- 紫やグラデーションの派手な配色
- ダークモード風のモダンUI
- アニメーションや装飾たっぷり
毎回このテイストになり、
業務で使う学習資料や社内ドキュメントには合わないことも多いです。
「落ち着いたデザインで」と毎回指示するのも面倒ですよね。
解決策： Skillsを使う
ClaudeのSkillsを使えば、好みのデザインルールを事前に登録できます。
一度設定すれば、「Webページ作って」と言うだけで、常に同じテイストで出力されます。
- 参考：Skillsとは
↓ 私が作成したSkillsのデザインはこちら。
サンプル： 学習内容 整理用 Skills
私が実際に使っているSkillsを紹介します。
SKILL.mdの内容 (一例)
---
name: learning-guide-html
description: シンプルで読みやすい学習ガイド用HTMLページを作成するスキル。
技術学習コンテンツ、ラボ解説、チュートリアル、研修資料などのWebページを
作成する際に使用。ネイビー・グレー・ブルー系のシンプルな色味で統一。
---
# Learning Guide HTML
技術学習コンテンツ用のシンプルで読みやすいHTMLデザインパターン。
## カラーパレット
:root {
--primary: #2c3e50; /* メインテキスト、ヘッダー背景 */
--secondary: #34495e; /* サブテキスト */
--light: #ecf0f1; /* ページ背景 */
--white: #ffffff; /* カード背景 */
--success: #27ae60; /* 成功ポイント（緑） */
--warning: #f39c12; /* 注意ポイント（オレンジ） */
}
## スタイルルール
- フォント：システムフォント
- 行間：line-height: 1.8
- 角丸：border-radius: 8px
- 絵文字不使用
- レスポンシブ対応必須
・
・
・
ポイント
- カラーパレットを明示：ネイビー・グレー系で統一
- 絵文字不使用を明記 ：ビジネス向けに
- コンポーネント定義 ：フロー図、比較表、ポイントボックスなど
使い方
1. Githubリポジトリからzipデータをダウンロード
2. zipを解凍し、skillファイルを取得
learning-guide-html.skill ファイルを取得
3. アップロード
Claude Desktopの設定 → 機能 → スキル → スキルアップロードで
learning-guide-html.skill ファイルをアップロード
4. 使う
新しい会話で「この内容をWebページにして」と頼むだけ。Skillが自動で適用されます。
たまにスキルを使わないことがあるので、その時は「絶対にスキルを使ってね」と念押しすると良いです。
工夫点
- 最小限のカラーパレット
- 絵文字の禁止
- グラデーションの禁止
- 図の描画はコンポーネント優先（アスキーアートだと崩れるため）
- レスポンシブ対応
まとめ
- Skillsを使えば、自らの好みに合ったデザインを登録できる
- 一度登録すれば、常に一貫したテイストで出力される
公式のSkillsも豊富にあり、自分の好きなスキルを作っていくこともできるため、ぜひ試してみてください。