Name: デザイナーがClaudeスキルを使う方法 (How to Use Claude Skills as a Designer)
Uploaded: 2026-03-19T01:44:58.000Z
Duration: 9 min 31 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

So there's a built in feature inside Claude that helps you generate beautiful designs, and

Claudeには、美しいデザインを生成するのに役立つ組み込み機能があり、

程度の副詞

most designers don't even know that this exists.

ほとんどのデザイナーはこの機能の存在を知りません。

これはスキルと呼ばれています。

And in this video, I'm going to break down every single one that matters for designers how to build your own skill from scratch.

このビデオでは、デザイナーにとって重要なすべてのスキルについて、ゼロから独自のスキルを構築する方法を解説します。

And then I'm going to prove to you that these skills work by generating a beautiful landing page live.

そして、ライブで美しいランディングページを生成することで、これらのスキルが機能することを証明します。

では、スキルとは何でしょうか？

Think of it as like a simple plugin for Claude.

Claudeのためのシンプルなプラグインのようなものだと考えてください。

It's a set of instructions and resources that completely changes how Claude approaches specific types of tasks.

これは、Claudeが特定の種類のタスクにどのように取り組むかを完全に変える、指示とリソースのセットです。

And the one that you need to know about first is the front end design skill.

そして、まず知っておくべきは、フロントエンドデザインのスキルです。

This skill is a set of detailed instructions that tells Claude how to think like a designer before it writes a single line of code.

このスキルは、Claudeが1行のコードを書く前にデザイナーのように考える方法を指示する、詳細な指示のセットです。

When you ask Claude to build something, a landing page, a dashboard, a component, whatever it is, the skill kicks in and forces Claude through a design thinking process before it touches code.

Claudeにランディングページ、ダッシュボード、コンポーネントなど、何かを構築するように依頼すると、このスキルが作動し、コードに触れる前にClaudeにデザイン思考プロセスを強制します。

It considers four purpose, tone constraints and differentiation.

目的、トーン、制約、差別化の4つを考慮します。

And here's the part that's blown me away the most.

そして、これが私を最も驚かせた部分です。

The skill has a section called front end Aesthetics Guidelines that reads like it was written by a senior product designer.

このスキルには、「フロントエンドの美的ガイドライン」というセクションがあり、まるでシニアプロダクトデザイナーが書いたかのようです。

It covers typography and not just pick some random font.

タイポグラフィについて、単にランダムなフォントを選ぶだけでなく、説明しています。

It tells Claude to avoid generic fonts like Enter and Arial and instead choose distinctive characterful type pairings.

Claudeに、EnterやArialのような一般的なフォントを避け、代わりに特徴的な個性のあるタイプペアリングを選ぶように指示します。

Then it also covers color, motion, spatial composition and atmosphere.

次に、色、動き、空間構成、雰囲気についてもカバーしています。

でも、ここが一番大事なところです。

The skill explicitly tells Claude what not to do.

このスキルは、Claudeに何をしてはいけないかを明確に伝えています。

AIが生成しがちな「AIスロップ」と呼ばれるものを文字通り禁止しているんです。

Those overused purple gradients, the same rounded corner cards on white backgrounds and Enter font everywhere again.

あの使い古された紫色のグラデーション、白い背景に同じ角丸カード、そしてどこもかしこもEnterフォントというようなものです。

そして、どのデザイナーも一度は見たことがあるはずです。

The skill is specifically designed to avoid that.

このスキルは、まさにそれを避けるように設計されています。

So just by having this one skill installed, you go from obviously AI generated output to something that actually looks designed.

ですから、このスキルを一つインストールするだけで、明らかにAIが生成した出力から、実際にデザインされたように見えるものへと変わるのです。

しかし、これはほんの始まりに過ぎません。

The front end design skill is the real headliner of this video.

フロントエンドデザインのスキルは、この動画の本当の目玉です。

But there are a few other lesser known skills that are incredibly useful for designers.

でも、デザイナーにとって信じられないほど役立つ、あまり知られていないスキルもいくつかあります。

So let me walk you through these ones worth knowing about.

では、知っておくと良いこれらのスキルをいくつかご紹介しますね。

This is an official skill from Figma, and it does exactly what it sounds like.

これはFigma公式のスキルで、その名の通りに機能します。

You give it a Figma URL and it translates your design into production ready code as close as it can to one to one visual fidelity.

FigmaのURLを入力すると、デザインを可能な限り1対1のビジュアル忠実度で、本番準備のできたコードに翻訳してくれます。

You paste a Figma link into Claude for you, it would most likely be a screen you've designed.

FigmaのリンクをClaudeに貼り付けます。あなたにとっては、デザインした画面でしょう。

The skill parses the URL, pulls the file key and node ID and then calls the Figma MCP server To fetch the full design context.

スキルはURLを解析し、ファイルキーとノードIDを取得して、Figma MCPサーバーを呼び出し、完全なデザインコンテキストを取得します。

That means it's reading your actual layout properties, your auto layout settings, your typography specs, your color values, your spacing tokens, and

つまり、実際のレイアウトプロパティ、オートレイアウト設定、タイポグラフィの仕様、カラー値、スペーシングトークンなどを読み取っているということです。

そして、デザインのスクリーンショットをビジュアルリファレンスとして取得し、アイコンや画像などのアセットをダウンロードします。

Then it takes a screenshot of the design as a visual reference and downloads any assets like icons or images, and

But it's not just dumping out generic code.

The skill has a whole section on translating Figma output into your project's actual conventions.

しかし、単に汎用的なコードを出力するだけではありません。

So if your code base uses a specific component library or design system, it maps to that.

このスキルには、Figmaの出力をプロジェクトの実際の規約に変換するセクション全体があります。

It reuses your existing buttons, inputs and typography components instead of recreating them.

そのため、コードベースが特定のコンポーネントライブラリやデザインシステムを使用している場合、それにマッピングされます。

And at the end it runs a validation checklist, layout, typography, colors, interactive states, responsive behavior, accessibility, all compared against that one Figma screenshot.

既存のボタン、入力、タイポグラフィコンポーネントを再作成するのではなく、再利用します。

そして最後に、レイアウト、タイポグラフィ、カラー、インタラクティブな状態、レスポンシブな動作、アクセシビリティなど、すべてを1つのFigmaスクリーンショットと比較した検証チェックリストを実行します。

This skill requires the Figma MCP server to be connected, so before you use it, you'll need make sure that's enabled in Claude.

さて、1つ重要な点があります。

It's the bridge that lets Claude actually read your Figma files.

このスキルはFigma MCPサーバーへの接続が必要です。使用する前に、Claudeで有効になっていることを確認してください。

And once that connection is set up, you're good to go.

これがClaudeがFigmaファイルを実際に読み取れるようにする橋渡しとなります。

For designers who've ever given a screenshot to Claude, told it to turn it into code, and

そして、その接続が設定されれば、準備完了です。

ひどい見た目になってしまいます。

This skill is going to help close that gap, and

このスキルは、そのギャップを埋めるのに役立ち、

you don't need to be a developer to use it.

開発者でなくても使用できます。

リンクを貼り付けるだけで、Claudeがあとはやってくれます。

Theme Factory this Skill gives you 10 pre built professional themes.

このスキル「Theme Factory」は、10個の既成のプロフェッショナルテーマを提供します。

Each one is a complete package with a curated color palette and carefully paired fonts.

それぞれが、厳選されたカラーパレットと慎重にペアリングされたフォントを備えた完全なパッケージです。

Think of it like a design system starter kit, except it's not just for UI design.

デザインシステムスターターキットのようなものだと考えてください。ただし、UIデザインだけではありません。

You can can apply any of these themes to slides, documents, web pages, dashboards or reports.

これらのテーマのいずれかを、スライド、ドキュメント、ウェブページ、ダッシュボード、またはレポートに適用できます。

基本的にClaudeが生成するあらゆる成果物に適用できます。

So if you're building a presentation deck and you don't want to spend 20 minutes picking colors and fonts, you just pick a theme and everything stays consistent.

ですから、プレゼンテーションデッキを作成していて、色やフォントを選ぶのに20分もかけたくない場合は、テーマを選ぶだけで、すべてが一貫性を保ちます。

What I like about this one is that each theme has a distinct visual identity.

このテーマの良いところは、それぞれがはっきりとしたビジュアルアイデンティティを持っていることです。

これらは単なるランダムな色の組み合わせではありません。

They're designed for specific contexts and audiences.

特定のコンテキストやオーディエンスのためにデザインされています。

So you've got options that work for corporate presentations, creative pitches, editorial layouts and more.

そのため、企業のプレゼンテーション、クリエイティブなピッチ、編集レイアウトなどに適したオプションがあります。

And because the themes include both header and body font pairings, you get great typographic hierarchy along with harmonious color palettes, brand guidelines.

テーマにはヘッダーと本文のフォントペアリングの両方が含まれているため、調和のとれたカラーパレット、ブランドガイドラインとともに、優れたタイポグラフィの階層構造が得られます。

これは一貫性に関するもので、

it's a concept that every in house or agency designer should pay attention to.

すべてのインハウスデザイナーやエージェンシーのデザイナーが注目すべきコンセプトです。

This skill is set up with Anthropic's brand, their colors, typography and visual identity rules.

このスキルは、Anthropicのブランド、その色、タイポグラフィ、ビジュアルアイデンティティのルールで設定されています。

But the real value here isn't Anthropic's brand.

しかし、ここでの本当の価値はAnthropicのブランドではありません。

Of course, because you don't work for Anthropic, you can still just use this skill as a template.

もちろん、あなたはAnthropic社で働いているわけではないので、このスキルをテンプレートとしてそのまま使うことができます。

So think about what this skill actually does.

では、このスキルが実際何をするのか考えてみましょう。

It takes a set of brand rules like hex codes, font stacks, spacing values, logo usage, tone, and

これは、16進コード、フォントスタック、スペーシング値、ロゴの使用方法、トーンなどのブランドルール一式を取り込み、

enforces them automatically across everything.

それらをすべてにわたって自動的に強制します。

Claude generates every artifact, every landing page, every deck comes out on brand without you having to check it.

Claudeは、すべてのアーティファクト、すべてのランディングページ、すべてのデッキを、確認することなくブランドに沿って生成します。

Now imagine building one of these for your own company.

さて、あなたの会社のためにこのようなものを作ることを想像してみてください。

You take this skill as a reference, have Claude swap in your own brand tokens, your primary and secondary colors, your heading and body fonts, your spacing scale, your do's and don'ts, and

このスキルを参考に、Claudeにあなたのブランドトークン、プライマリおよびセカンダリカラー、見出しと本文のフォント、スペーシングスケール、やっていいこととダメなことを置き換えてもらうと、

suddenly Claude knows your brand just as well as Do.

突然、Claudeはあなたと同じくらいあなたのブランドをよく知るようになります。

And this is especially powerful if you're on a small team where there's no dedicated design system person enforcing consistency.

これは、専任のデザインシステム担当者がいない小規模チームでは特に強力です。

You could even share it with non designers on your team, marketing, sales, whoever, so that anything they generate in Claude automatically follows your visual standards.

チーム内のデザイナー以外の人、マーケティング担当者、営業担当者など、誰とでも共有できるので、Claudeで生成するものはすべて自動的にあなたのビジュアルスタンダードに従うようになります。

Realistically, connecting Claude to Figma via an MCP is going to get you more accurate results.

現実的に考えると、MCPを介してClaudeをFigmaに接続すると、より正確な結果が得られます。

And if you'd like a video on how to do that, let me know in the comments.

そして、その方法についての動画をご希望でしたら、コメントでお知らせください。

But this skill is a quicker way to get UI that follows your desired style guidelines.

しかし、このスキルは、ご希望のスタイルガイドラインに従ったUIをより迅速に作成する方法です。

The skill itself is pretty simple to set up once you understand the format.

スキル自体は、フォーマットを理解すれば設定はかなり簡単です。

And I'll show you how to create one from scratch.

そして、ゼロから作成する方法をお見せします。

Scratch in a minute, using the skill Creator Canvas Design.

スキル クリエイター キャンバス デザインを使って、1分でゼロから。

This last one is different from everything else I've shown you.

この最後のアプローチは、これまでお見せしてきたものとは異なります。

It's not for ui, it's for creating actual visual art, like posters, graphics, static design pieces as real PNG and PDF files.

これはUI用ではなく、ポスター、グラフィック、実際のPNGおよびPDFファイルとしての静的なデザインピースのような、実際のビジュアルアートを作成するためのものです。

And the way it works is genuinely unique.

そして、その仕組みは本当にユニークです。

First, Cloud creates a written design philosophy.

まず、Cloudは書面によるデザイン哲学を作成します。

まるで実際のアートマニフェストのように。

It defines a visual movement, describes the principles behind it, the forms and colors and composition rules it'll follow.

それはビジュアルムーブメントを定義し、その背後にある原則、従うべき形態、色、構成ルールを説明します。

Then in step two, it takes that philosophy and expresses it on a canvas as a real image file.

次にステップ2で、その哲学を取り込み、実際の画像ファイルとしてキャンバス上に表現します。

So it's designing from real principles, comes up with a creative direction, and

つまり、実際の原則からデザインし、クリエイティブな方向性を考え出し、

then executes it for things like event posters, social graphics, abstract art for presentations, or visual concepts you want to explore quickly.

そしてイベントポスター、ソーシャルグラフィック、プレゼンテーション用の抽象アート、あるいはすぐに探求したいビジュアルコンセプトなどのためにそれを実行します。

This is a really interesting tool and it won't replace Photoshop or Illustrator, because that isn't Claude's main use case.

これは非常に興味深いツールで、PhotoshopやIllustratorを置き換えるものではありません。なぜなら、それがClaudeの主なユースケースではないからです。

But it does give you a way to explore visual directions in seconds in a way that you wouldn't otherwise be able to with Claude.

しかし、Claudeではこれまでできなかった方法で、数秒でビジュアルの方向性を探求する方法を提供してくれます。

So between front end design and these other skills that I've showed you, you've got a complete creative toolkit inside Claude.

ですから、フロントエンドデザインと、これまでお見せしてきた他のスキルを組み合わせることで、Claude内に完全なクリエイティブツールキットが揃います。

UI generation Figma to code theming, brand enforcement and visual art.

UI生成、Figmaからコードへの変換、テーマ設定、ブランドの適用、そしてビジュアルアート。