Claude Code オリジナルスキル講座
AIには、
毎回"指示"するより
"スキル"を渡した方が速い
インターネット黎明期からWeb制作の現場に立ち続け、Web制作関連書籍の執筆・監修やFigmaの企業研修講師も務める著者が、実務の時間単価を最大化するために作ったオリジナルスキル群を一挙公開。プロンプトの書き方ではなく、エージェントが理解できる「スキル」の作り方・使い方を学ぶ講座です。
36個
収録スキル数（一般非公開のものを含む）
31本
解説動画の本数
3h20m
総再生時間（2026年7月18日時点）
その"やり取り"、
毎回ゼロからやっていませんか。
- 同じような指示を、案件のたびにゼロから書き直している
- 思った通りの結果になるかは、そのときの運と勘に左右される
- うまくいった手順を、チームや将来の自分に共有できない
スキルは、うまくいった手順をAIエージェントが理解できる形で保存し、何度でも呼び出せる「型」にする仕組みです。プロンプトを都度書く代わりに、スキルを渡すだけで再現性のある結果が得られます。
講座の中身
「使い方」だけでなく「そのスキルの中身」まで解説する、実践と学習の両面を持つパッケージです。
専門性・実績に裏打ちされた内容
黎明期からWeb制作の現場に立ち続け、書籍の執筆/監修やFigmaの企業研修講師としての実績を持つ著者の実務知見をそのまま形にしている。
36スキル × 動画31本のボリューム
一般非公開のスキルを含む全36個を日本語化し、そのスキル解説を動画にして約3時間20分に凝縮。スキルは不定期で機能改善・強化のため更新予定。
プロンプトではなく"スキル"形式
Figmaを使う実務現場でそのまま活用できる実践的スキル集であると同時に、自分の業務に合わせて改善・開発する教材にもなる。
収録スキルの一例
全36スキルのうち、代表的なものを紹介します。残りは講座内で公開しています。
全スキル一覧を見るTailwind最適化系
css-to-tailwind
オリジナルのプレーンなCSS / Sass・SCSS のコードベースから Tailwind CSS v4 への初回移行を支援。
Figma連携・品質チェック系
figma-layer-rename
Figmaのフレーム/セクション全体を走査し、自動生成されたレイヤー名を意味のある名前にリネーム。
Figma連携・品質チェック系
figma-tokenize
変数なしのFigmaでハードコードされた色・フォントサイズ・スペーシングをトークン化して変数バインド。
モックアップ作成系
create-mockup
Figmaなしで、サイトの種類・デザインスタイル・ページ構成をヒアリングしながらUIをゼロから組み上げる。
Figma連携・品質チェック系
figma-audit / figma-weather
Figmaフレームの構造がAIにとって実装しやすいかを4つの観点で検査し、天気予報形式でスコアを提示する。
Tailwind最適化系
tailwind-review
Tailwind CSSのv3→v4移行チェックやアクセシビリティ構造の検証・自動修正まで一括で行う。
日本語サイト品質ガイドライン
japanese-web-guideline
見出しの折り返し・行間・文字サイズなど、日本語サイト特有にAIが陥りやすい実装のクセを補正する。
オーケストレーション系
mockup-pipeline / full-pipeline
セットアップからモックアップ生成、仕上げの調整までを一括で自動実行するパイプラインスキル。
講師紹介
こもりまさあき
1990年代前半、都内のDTP系デザイン会社でアルバイトを始め、大学卒業後にそのまま正社員として入出力・デザイン・ネットワーク関連の業務に従事。2001年に独立し、以降フリーランスとして活動を続けている。
案件ごとに担う役割が異なるため、単一の職域的な肩書きは持たない。Web制作関連書籍の執筆を多数手がける一方、近年はフロントエンド周りの制作業務に関わりながら、Figmaの企業研修講師やデザインシステム構築、Shopifyの運用サポート、コンサルティングなど幅広く活動中。本講座のスキル群も、こうした実務の中から生まれたものをそのまま形にしている。
これまでの執筆・監修書籍一覧（Amazon）
プロンプトを書く技術ではなく、AIと働くための「仕組み」を作る技術を届けたい。
期間限定オファー
スキル増量！
週末ディスカウント
スキルが36個に増量し、定価19,800円（税込）に改定。クーポンコードの入力で、期間限定4,400円オフの15,400円（税込）に。
7月26日 23:59までの期間限定価格。
残り時間を計算しています…
- 全36スキル（非公開のものを含む）
- 解説動画31本・約3時間20分
- 使い方だけでなく、作り方の解説付き
- 買い切り・視聴期限なし
公式LINE友だち登録で、さらに10%OFFクーポンも配布中
LINEで10%OFFクーポンを受け取るFAQ
よくある質問
スキルはどんな環境で使えますか？▾
主にClaude Code環境と、Vite + Tailwind CSS v4構成のフロントエンドプロジェクトを想定しています。利用環境やツールのバージョンによっては、正常に動作しない場合があります。個別のスキル修正・動作サポート対応は行っておりませんので、あらかじめご了承ください。
購入前にスキルの動作を試すことはできますか？▾
軽量版スキル「create-mockup-lite」をGitHubにて無料公開しています。購入前にお使いの環境で動作をご確認いただけます。使い方はこちらの記事でも動画付きで紹介しています。
プログラミング未経験でも受講できますか？▾
Figmaやコーディングを日常的に行うWeb制作者・フリーランスを主な対象としています。スキルの「作り方」も解説するため、AI活用ワークフローを学びたい方にも役立つ内容です。
クーポンはどこで使えますか？▾
商品ページのチェックアウト画面でコード「FK05ANQ7HZHZ」を入力してください。直接リンクからアクセスすると自動的に適用された状態でページが開きます。
講座の詳細な内容はどこで確認できますか？▾
全スキルの詳細・依存関係を紹介するスキル紹介ページを別途ご用意しています。詳しくはこちらからご確認ください。
このページ自体、コードに触れず本講座収録スキルのみで約1時間30分で作成されました（使用モデル: Sonnet 5 - High）
