Claude Designを活用して魅力的なサイトを構築する方法

AAI LABS
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00優れたデザインは本当に重要です。なぜなら、顧客を惹きつけたいとき、サイトの見た目は最初に判断される基準だからです.
00:00:05これを手助けするツールは数多くありますが、Claude Designはその中でも現在最も強力なものの1つです.
00:00:09しかし、優れたデザインは単にツールにプロンプトを入力するだけで生まれるものではありません.
00:00:14そこでこの動画では、ご自身でClaude Designを使って実行できる5つのステージのプロセスをご紹介します.
00:00:18Claude Designを一度も開いたことがない方でも、何ヶ月も使い込んでいる方でも、得られるものがある内容になっています.
00:00:22これまで使ったことがなくても全く問題ありません。ツールが一体どのようなものかという基本から解説します.
00:00:27そしてすでにデザイン作成に活用されている方に向けては、Claude DesignをClaude Codeと統合し,
00:00:32さらに強力にする方法を掘り下げます。該当箇所へ直接移動するには、下のタイムスタンプをご利用ください.
00:00:37当チャンネルを初めてご覧の方、ようこそ。私たちは実際はソフトウェア企業であり,
00:00:41社内プロセスに基づいたClaude Design関連の完全なシステムを構築してきました。それでは時間を無駄にせず,
00:00:47本編に入りましょう。このセクションはClaude Designをご存知ない方専用です。すでにご存知の方は次へスキップしてください.
00:00:52このツールは、ClaudeがOpus 4.7モデルをリリースした際のリサーチプレビューとして初めて登場しました.
00:00:57基本的には非常に使いやすいインターフェースを備えたデザインツールであり,
00:01:02専門知識がない人でも、簡単なプロンプトを入力するだけで優れたデザインを作成できるようになります.
00:01:07また、すべての有料プランで利用可能です。対象はウェブサイトだけにとどまりません.
00:01:12スライドやドキュメントのデザイン、さらにはアニメーションの作成まで行うことができます。またClaude Designは,
00:01:17Claudeのデスクトップアプリとウェブサイトの両方で利用できるため、必ずしもデスクトップアプリをインストールする必要はありません.
00:01:22アプリ版を使いたい場合は、ダウンロードしてインストールを実行し、アカウントにログインするだけです.
00:01:27その後、サイドバーを開いて「デザイン」をクリックすれば、インターフェースが立ち上がり使い始めることができます.
00:01:32Claude Designでは、最も高性能なモデルであるFableを含むすべてのClaudeモデルを選択できます,
00:01:37ただしアクセス制限があります。一般利用における主力モデルは依然としてOpusであり,
00:01:42デザイン作成には今でも最適です。しかし、これらのOpusモデルの欠点はトークンを大量に消費してしまうことです.
00:01:46一方、Haikuはそれほどのトークンを消費しませんが、優れたデザインを得るためにはより多くの調整が必要になる場合があります.
00:01:51その上、モデルごとに思考レベルを設定することも可能です.
00:01:55思考レベルは基本的に、モデルが処理を行う前にどれだけ深く考えるかを制御するものです.
00:02:01私たちはデザイン作業において、現時点での最新モデルであるOpus 5の中程度の思考レベルを使用しています,
00:02:06これによりトークンを無駄に消費しすぎることなく、簡単にデザインを進めることができるからです。また、すべてのMCPやスキルを持ち込むことも可能で,
00:02:12自分自身のシステムをその中で非常に使いやすくしてくれます。ご存知ない方のために説明すると,
00:02:18MCPとは、エージェントを他のツールやサービスなどの外部要素と接続できるようにするものであり,
00:02:23スキルとは、段階的なガイダンスや参照情報に従って、エージェントがより良く作業を行う方法を教える一連の手順のことです.
00:02:28さて、始める前に心に留めておくべきことが1つあります。作成できるデザインの数には制限があります.
00:02:33Claude Designは5時間の制限に基づいて動作しますが、これはデザインだけに適用されるものではありません.
00:02:38Claudeで行う他のすべての操作も同じ制限に含まれます。その5時間のウィンドウ内では消費できるトークン数に上限があり,
00:02:44上限に達すると、再び利用できるようになるまで5時間が経過するのを待つ必要があります.
00:02:49また、リリース初期に比べて大幅に改善されたとはいえ、Claude Designは依然として,
00:02:53非常にトークンを大量消費するため、ヘビーに利用する場合は制限に達するのが早くなる点にご留意ください.
00:02:59そのため、過度なトークン消費に対抗するには、いきなりプロンプトを入力する前にいくつかのステップを踏む必要があります.
00:03:04これらのステップは、トークンを無駄に消費することなく望みのデザインを確実に入手するために重要です.
00:03:09最初に行うべきことは、design.mdファイルを作成することです。これは,
00:03:15Googleが提唱したフォーマットであり、ブランドのデザインに関するすべての詳細が記載されています.
00:03:20AIコーディングエージェントは何かを記述する前にそのファイルを読み込むため、提示されるすべての画面がブランドに準拠したものになります.
00:03:25推測に頼ることがないため、ブランドイメージから外れることもありません。Claude Designにはデザインシステムを作成する機能があります.
00:03:30デザインシステムとは基本的にはサイト全体に反映されるスタイルの選択肢の集まりです。フォントや,
00:03:35フォントやカラー、その他デザインを構成するあらゆる
00:03:40要素が含まれており、それを使ってさらに多くのデザインを構築できます。デザインシステムを用いて作られたデザインは
00:03:46しかし、あらかじめ定義されたdesign.mdファイルから始める主な理由は、これらのモデルが出力するデザインがどれも同一に見えてしまう点にあります.
00:03:51Claude Designに独自にデザインシステムを構築させると,
00:03:57Opusモデルがあらゆる場所で使用している汎用的な色やスタイルに頼ってしまいます.
00:04:02その結果、あなたのサイトは世にある他のすべてのAI製サイトと同じような見た目になってしまいます.
00:04:07しかし、デザインシステムの基礎となるdesign.mdを渡せば、そのファイルが希望を正確に伝えるため,
00:04:12はるかにコントロールしやすくなり、デフォルトのスタイルに陥ることはありません。そしてすでに述べたように,
00:04:17もう一つの理由は一貫性です。デザインシステム全体がその1つのファイルに基づいているため,
00:04:22すべてのページが全く同じスタイルに従い、マルチページサイトに一貫性を持たせることができます。そのため私たちは,
00:04:27design.mdを自動で計画してくれるスキルを作成しました。このスキルを使用するには、Claude Code内で実行します.
00:04:33Claude Codeは基本的にAnthropicによるもう1つのツールです。ターミナル上で実行するAIコーディングツールであり,
00:04:39アプリ全体を構築してくれます。インストールするには、公式サイにアクセスしてインストール用コマンドをコピーし,
00:04:45それをターミナルで実行するだけです。それが完了したらターミナルでClaudeと入力し,
00:04:49プロンプトを入力することで使い始めることができます。私たちはClaude Codeでアプリを構築する予定だったため,
00:04:54このスキルを.claudeフォルダ内のskillsフォルダに配置しました。ここは基本的に,
00:04:59Claude Codeの設定や構成ファイルがすべて保存されている場所です。このフォルダは存在しないかもしれませんが,
00:05:05プロジェクト内にスキルをインストールする必要がある旨をプロンプトボックスでClaude Codeに伝えれば,
00:05:10セットアップを行い、自動的にスキルを配置してくれます。.claudeフォルダはFinderで開いた際には表示されません.
00:05:15名前がドットから始まっているためであり、ドットで始まるファイルはシステムファイルとして扱われるため,
00:05:20Finderはデフォルトでこれらを非表示にします。そのためアクセスするにはコードエディタが必要になります.
00:05:25これはプロジェクトの全ファイルを整理された状態で1箇所にまとめて表示できるアプリです。私たちが使用しているのは,
00:05:31Microsoft製のVS Codeであり、その使いやすさから多くの開発者に利用されています.
00:05:36インストールするには、公式サイトにアクセスし、使用しているシステム向けのインストーラーをダウンロードして実行します.
00:05:40その後、その中でプロジェクトフォルダを開けば、隠しファイルを含めてすべてを確認できるようになります.
00:05:45そしてアプリを構築したいときはいつでも、スラッシュコマンドを使ってこのスキルを呼び出します.
00:05:49これはスラッシュを付けて入力することでトリガーし、構築したいものを伝えるためのショートカットです.
00:05:54スキルがあなたにインタビューを行い、製品の視覚的アイデンティティを詳細に計画してくれます,
00:05:59すべてが揃うと、全体のdesign.mdを記述し,
00:06:03さらにスクリプトを実行してGoogleの基準に照らし合わせた検証も行います。このスキルには,
00:06:09AI製サイトであることを露呈させる一般的なパターンであるアンチスロップの参照情報も含まれています.
00:06:15したがって、最初にdesign.mdを計画することが本当に最善の選択肢です。また、このスキルの入手先が気になる方も,
00:06:21心配いりません。動画の後半でお伝えします。さて、この動画で私たちが構築しているアプリは,
00:06:26すべてのコーディングプロジェクトを1箇所で管理できるプロジェクト管理アプリです。始めるにはまず,
00:06:31スキルのスラッシュコマンドを伴うプロンプトをClaude Codeに渡し、構築したいアプリの大まかな概要や,
00:06:36用途を伝えます。すると、アイデアの視覚的アイデンティティの分析から始まります.
00:06:41それが完了すると、ウェブサイト用に考えている色はあるかといった質問を投げかけてきます.
00:06:46ブランドカラーがすでに決まっている場合はそれを渡すこともできますし,
00:06:51ツールに独自に選ばせることも可能です。スキルを使用しているためスロップカラーにデフォルトで設定されることはなく,
00:06:55あの量産型のような見た目を心配する必要はありませんが、それでも事前に決めておく方がより望ましいです.
00:07:00私たちが普段行っているのは、カラーパレットを生成・視覚化するサイトであるcoolersを使用し,
00:07:05色の組み合わせがどのように見えるかを確認することです。気に入った色の組み合わせが見つかったら,
00:07:09エクスポートをクリックし、コードオプションを選択すると、Claude Codeにそのままコピー&ペーストできるテキストが提供されます.
00:07:14Claude Codeはこれをあなたのdesign.mdファイルの中に組み込んでくれます.
00:07:18その後、design.mdファイルを作成し、いくつかの検証ステップを実行します。そしてデザインファイルは,
00:07:24まさにGoogleが規定した通りの形式で出力されます.
00:07:29GoogleのフォーマットはAIモデルにとっては理解しやすいものですが、人間にとっては,
00:07:33ここから生成されるデザインを実際に想像するのが難しいため、希望通りのデザインに仕上がっているのか,
00:07:38変更が必要なのかを判断できません。しかしClaude Design内でテストしてはいけません。そこでデザインを生成し,
00:07:43もし気に入らなかったとしましょう。その場合、design.mdに戻って変更を加え,
00:07:48すべてを再生成する必要があります。その試行錯誤のたびにトークンが消費されます。多くのツールが,
00:07:53design.mdを視覚化してくれます。私たちが利用したものの1つがdesign.md.spaceです.
00:07:59これらを使用すると、デザインファイルがどのように見え、さまざまな領域に選ばれた色がどのように調和しているかを確認できます.
00:08:04すべての要素も視覚化されるため、判断を下すのがはるかに容易になります。さて、これはdesign.mdを作成する1つの方法にすぎませんが,
00:08:10他にも方法はあります。自分で作りたくない場合は、人気のあるウェブサイトのデザインをサンプルとしてコピーするだけでも構いません.
00:08:15正直なところ、リファレンスとして模倣することはすでに多くの人が行っている方法です.
00:08:19それを出発点として取り入れ、自分なりに変更を加えます.
00:08:24ちょうど多くの人がNotionのシンプルな外観を取り入れ、少し調整した上で自分自身のデザインに昇華させているのと同様です.
00:08:29そのためには、多くのブランドとそのスタイルをdesign.mdファイルとして掲載しており
00:08:34多くのブランドやそのスタイルを design.md ファイルとして公開しており、自分で取得して使うことができます。
00:08:39すでに独自の design.md があるので、Claude Design に進んで、そこから新しい
00:08:44デザインシステムを作成できます。新しいシステムを作成する際はプロダクトの詳細を聞かれますが、
00:08:49design.md があればそれをアセットとしてアップロードするだけです。すると、ファイルを読み込んで
00:08:55新しいシステムの生成を開始し、TODO を作成してひとつずつ作業を進めていきます。しばらくすると、Claude Design が
00:09:00デザインシステムを作成してすべてを視覚化し、使用されるアプリの構成要素となるさまざまな要素を構築します。
00:09:06使われるアプリの一部となる要素を構築します。このワークフローを実践するには、この
00:09:10説明欄にリンクを貼っておいたので、無料で入手できます。
00:09:14使い方としては、このリンクをClaude Codeに渡してセットアップを頼むだけで、自動的にインストールされ、
00:09:19何もすることなく自動でインストールされ、.claude フォルダに配置されます。デザインシステムが
00:09:24固定され、実際に使用する段階になったら、サイトの構築を始める前に非常に重要なもう一つのステップがあります。
00:09:29それは、作りたいもののワイヤーフレームを作成することです。ワイヤーフレームは基本的に、
00:09:34すべての要素がどこに配置され、正しく配置されているかを確認できるラフスケッチです。
00:09:39そのままサイトを構築することも可能ですが、それだと問題が生じます。Claude Design は
00:09:43時間がかかります。Claude Designはデザインの生成が遅く、もしそれだけの時間をかけても
00:09:48すべてやり直さなければならなくなります。そのため Claude Design でこれを行うには、作成したばかりの
00:09:53デザインシステムを選択し、ワイヤーフレームオプションを選んで、必要な画面数の詳細を含めたプロンプトを入力します。
00:09:58その後、画面ごとに複数のオプションを作成することもできるため、Claude に各画面の
00:10:03いくつかの異なるスタイルを提案してもらい、そこから選ぶことができます。生成にはそれほど時間はかからず、
00:10:08構造を確認しながら同じページに対して作成されたすべてのバリエーションを確認できます。
00:10:12また、コメント機能もあるため、特定の箇所を変更したい場合はそこにコメントを残すだけです。コメント機能は基本的に、
00:10:18その要素の正確な詳細をプロンプトと一緒に送信するため、Claude はどの領域をどのように変更する必要があるかを正確に把握できます。
00:10:23これにより、単にプロンプトを出して Claude に意図した領域を自分で判断させるよりもはるかに優れたものになります。
00:10:28追加するには、コメント機能を選択し、変更したい特定の場所をクリックして、必要な変更内容を入力するだけです。
00:10:33コメントは必要なだけいくつでも追加できます。一つずつ送信することもできますが、
00:10:38まとめてグループ化して一度に送信する方が、同時に解決されて一度にすべて修正されるためより効果的です。
00:10:42これにより待ち時間を最小限に抑えることができます。構造に満足するまで微調整を続け、
00:10:48ここで完了したら次へ進むことができます。ここまでの動画を楽しんでいただけたなら、
00:10:52チャンネル登録と高評価ボタンをお願いします。この小さなサポートのジェスチャーが私たちにとって大きな力になります。
00:10:57サポートは私たちにとって大きな励みになります。さて、ワイヤーフレームのデザインができたら、次は実際の
00:11:03同じデザイン機能を使用して、いくつかのバリエーションを作成することもできます。通常は
00:11:06Claude に同じデザインのバリエーションをいくつか作成してもらうため、まずは作成したものの中から
00:11:10どのバリエーションを使用するかを選択します。これらの各ページにはコード番号が割り振られているため、
00:11:15それによって選択します。その後、これらの画面を実際の完全な詳細デザインに変換したい旨を伝えるプロンプトを渡し、
00:11:20すっきりとした余白と階層構造を保ちながらワイヤーフレームのレイアウトと構造を維持するように指示します。
00:11:26すると Claude Design は、デザインシステムの構築時に作成されたすべての要素を読み込みます。
00:11:31それらを使用してサイト全体を構築するため、デザインシステムやワイヤーフレームの通りに、
00:11:36まさに必要な形で仕上がります。ワイヤーフレームと同様に、ここでもコメントを残して修正を行うことができます。
00:11:41ボタンの色が適切に選ばれない傾向があるため、おそらく多くの変更が必要になるでしょう。
00:11:46一部のボタンは注意を惹きつける必要があるため、目立つように太字の色にする必要があり、それを修正するように依頼できます。
00:11:50また、ワイヤーフレームをベースに構築されるため、サイト自体はラフスケッチの上に基本的なパーツが追加されただけの
00:11:55少し物足りない状態で出力されます。そのため、より充実した見た目にするためにテクスチャや要素を追加するよう依頼できます。
00:12:00デザイン上で直接編集を行うこともできるため、要素の削除のような小さな変更であれば、
00:12:05Claude にプロンプトで指示することなく、デザイン上で直接行うことができます。
00:12:10そうすることで、待ち時間をなくし、小さなことのためにトークンを無駄にすることなく変更を適用できます。
00:12:15変更の完了後は、Claude Design に全体的な見た目の洗練を依頼することができ、
00:12:20デザインに対して繊細で意味のある変更を行ってくれます。これでアプリの最初のバージョンが完成しましたが、
00:12:25まだ足りないものがあります。それはアニメーションです。アニメーションは、
00:12:29サイトの操作感を向上させ、ユーザーの目を本当に重要な部分へと導くために重要です。
00:12:35スクロールして表示される演出やその他の細かな工夫により、サイトのライブ感がより高まります。
00:12:40そこで、スクロールインやサイトのライブ感を高めるその他の細かな演出など、すべての画面にアニメーションを追加する
00:12:45プロンプトを Claude Design に与えました。また、過度に弾むような演出は違和感を
00:12:50与える可能性があるため、控えめにするよう指示しました。Claude Design の処理が終わると、
00:12:55スクロールインやテキストのポップアップアニメーションが確認でき、サイト全体がよりインタラクティブになります。
00:13:00デザインに満足したら、次のステップであるハンドオフ(引き継ぎ)へ進むことができます。
00:13:05これで Claude Design 内のデザインが確定し、最終的に提供する実際の製品へと落とし込んで命を吹き込む番です。
00:13:10以前の Claude Design にはこの機能はありませんでしたが、現在ではデザインを Claude Code に
00:13:15直接エクスポートできるようになりました。これには Claude Design と Claude Code が相互に
00:13:21通信できるようにする Claude Design MCP が使用されています。しかも片方向だけでなく双方向で機能するため、
00:13:26Claude Design から Claude Code へデザインを移動させるだけでなく、同様に反対方向へも持ち帰ることができます。
00:13:31再度 Claude Code を開き、Claude Design から取得したこのプロンプトを貼り付けます。
00:13:36まずデザインに関する要約情報であるメタデータを読み込み、続いてプロジェクトファイルをリストアップします。
00:13:42デザインが定義されているデザインシステムを最初に読み込み、次にすべての要素をひとつずつ読み込んでいきます。
00:13:47完全なデザインを取得したら、Claude Design に含まれていたすべてのアニメーションとともにプロジェクト内に構築します。
00:13:52ただし、正しく行われていることを確認するために、この変換を二重チェックする必要がありました。視覚的には
00:13:57すべて問題なく見えましたが、Claude Design の生コードが実際のアプリに変換される際には内部的な問題が
00:14:02まだ残っている可能性があります。そこで詳細なレビューを依頼し、実際のビルド結果と design.md を比較して
00:14:08一致しているかの確認を開始しました。このレビューにより、モバイルやタブレットなどの異なる画面サイズで
00:14:12アプリの表示が崩れるレスポンシブの問題など、複数の問題が検出されました。
00:14:17Claude Design が構築するものにはこうした問題が生じる傾向があります。これはまだ初期バージョンであるため、
00:14:22デザインされたものが作成の目的となった正確な環境に対して最も適した形で出力されるためです。
00:14:27ウェブサイト用に作られたデザインはそこで見栄え良く表示されますが、他の画面サイズでは必ずしもそうとは限らないため、
00:14:32修正を実行し、その後にアプリの視覚的部分が正常に動作しレスポンシブに対応するようになりました。
00:14:36さて、このアプリを実際に完成させて動作させるには、データベースと呼ばれるものに接続する必要がありました。
00:14:41現在の問題は、アプリが完全に機能しており、ボタンをクリックすれば動作して新規プロジェクトの詳細を追加できるものの、
00:14:46アプリを再度開き直すと、アプリ内で進めたすべての進行状況が消えてしまうという点です。
00:14:51これが、すべてのデータがアプリ内に保存されユーザーが実際に利用できるようにするためにデータベースが必要な理由です。
00:14:57そのために Supabase を使用しました。これは最も人気のあるバックエンドプロバイダーの一つであり、
00:15:02ユーザーとすべてのデータを管理するうえで最良の方法の一つです。Supabase は私たちにとって新しいものではなく、
00:15:08誰のために構築する場合でもほぼすべてのアプリで使用しており、多くの社内ツールもその全体システムをベースに稼働しています。
00:15:12それは、本来自分たちで行わなければならない多くの作業を肩代わりしてくれるからです。
00:15:17また、Claude Code のような AI エージェントと非常に簡単に接続できるという理由だけでも、最も広く使われているデータベースの一つです。
00:15:22Supabase にはエージェントスキルもあり、エージェントが Supabase をより確実に操作するために使用できる
00:15:28インストラクション、スクリプト、リソースが含まれています。これにより、Supabase のツールを最大限に活用するために
00:15:33必要なすべての知識をエージェントが持つことができます。インストールするには、インストールコマンドをコピーして
00:15:39エージェントに渡すだけでよく、そのバンドル内には 2 つのスキルが含まれています。1 つ目は Supabase スキルで、
00:15:43基本的に使い方のガイドであり、もう 1 つはベストプラクティススキルで、アプリのパフォーマンスを最適化するための
00:15:48最適な方法が収められています。インストールが完了すると、両方の新しいスキルがプロジェクトに追加されたことが確認できます。
00:15:53Supabase スキルは、データベースやログインに関するタスクが発生するたびにトリガーされ、
00:15:58ベストプラクティススキルは、プロンプト内で「optimize performance」という言葉に言及して
00:16:04Claude Code にアプリの高速化を行わせたい場合に機能します。これらのすべてが、
00:16:08あらゆる問題に対する膨大なリファレンスライブラリによって裏付けられています。これらのスキルがインストールされると、
00:16:13Claude Code にバックエンドを構築し、既存のデザインをそれに接続してアプリ全体が実際に動作するように
00:16:18指示するプロンプトを与えることができます。さて、エージェントにアプリのデータ整理の構造を作らせたくなかったため、
00:16:22あらかじめ自分たちで事前に作成し、プロジェクトのメインフォルダに追加してありました。
00:16:27スキルは単なるインストラクションの束であるため、Supabase サーバー上のプロジェクトにアクセスしてそこを変更することはできません。
00:16:32エージェントにすべきことを伝えるテキストに過ぎず、エージェントの外部にあるものを操作できるツールは含まれていません。
00:16:36そのため、Supabase スキルでは、ターミナルから実行するツールである CLI か、
00:16:41あるいは MCP のいずれかを接続するように求められます。
00:16:46どちらを使用しても、エージェントに Supabase プロジェクトを直接操作するツールが提供されるため、手動で何かを行う必要がなくなります。
00:16:51私たちは、セットアップがより簡単で、CLI がアカウントにログインするために必要なキーを
00:16:56管理せずに済むという理由から MCP を選びました。接続するには、公式ウェブサイトにアクセスして
00:17:01使用しているエージェント用のインストールコマンドをコピーし、プロジェクトフォルダで開いている
00:17:05ターミナルで実行します。その後、Claude Code の中で /mcp コマンドを実行すると接続されていることが確認できますが、
00:17:10ログインしていないためすぐには使用できません。そのため、Authenticate(認証)を選択するとブラウザに
00:17:15ルーティングされてログインが行われ、その後 MCP が接続されます。
00:17:20MCP が接続されると、Claude Code はスキルを読み込んでアプリの作業に取り掛かりました。
00:17:25多くの変更を加え、データベースリクエストに対するテストを実行して、最適なバージョンが構築されていることを確認しました。
00:17:30また、スキルのガイドラインのおかげで、すべてのユーザーがアクセスすべきではないすべての領域が
00:17:34確実にロックダウンされるようにしました。このようにして、Supabase はスキルの働きにより
00:17:39バックエンド全体を処理してくれます。これでアプリ全体の構築が完了し、実際に動作するようになりました。
00:17:44残るステップはデプロイメント(公開)のみで、誰もが利用できるようにオンラインにアップロードする作業です。
00:17:49しかし今回はそこまでは扱わないため、詳細を解説する今後の動画を引き続きチェックしてください。
00:17:53今回提供したスキルは、私たちがプロジェクトで実際に社内利用している大規模なデザインシステムの一部です。
00:17:59そのため、そのシステムにアクセスしたい場合は、私たちのコミュニティである AI Labs Pro で入手できます。
00:18:04そこでは、動画内で紹介している他のスキルやリソースを見つけることができ、私たちのチームと交流する場所もあります。
00:18:08私たちの活動に価値を見出し、チャンネルをサポートしたいと考えてくださるなら、これが最善の方法です。
00:18:14リンクは説明欄にあります。これで今回の動画は終了となります。
00:18:18チャンネルをサポートし、このような動画の制作を続けられるよう協力していただける場合は、
00:18:23下のスーパーサンクスボタンを使用して行うことができます。いつものように、
00:18:28ご視聴いただきありがとうございます。また次回の動画でお会いしましょう。

핵심 요약

Claude DesignとClaude CodeをMCPで統合し、design.mdファイルによる一貫したデザインシステムを活用することで、高品質なWebアプリの構築からバックエンド連携までを効率的に実行できる。

하이라이트

  • Claude Designはデザイン作成からアニメーション、コードエクスポートまで対応するツールである。

  • design.mdファイルを事前に作成することで、AI特有の汎用的なスタイルや量産型の見た目を回避できる。

  • Claude Codeのスキル機能を用いてデザインの視覚的アイデンティティやdesign.mdを自動生成できる。

  • design.md.spaceなどのビジュアライザーを使用することで、出力されるデザインを事前に確認し、トークンの無駄な消費を防ぐことができる。

  • Claude Designで作成したデザインは、Claude Design MCPを介してClaude Codeへ双方向でエクスポートできる。

  • Supabase MCPとスキルを連携させることで、データベースの接続やバックエンドの構築を自動化できる。

타임라인

Claude Designの基本概要とモデル選定

  • Claude DesignはWebサイトだけでなくスライドやアニメーションの作成にも対応している。
  • 主力モデルであるOpusは優れたデザインを生成する一方で大量のトークンを消費する。
  • 利用時は5時間のトークン消費制限に基づいて動作するため、過度な利用には事前のステップが必要である。

Claude Designは専門知識がなくてもプロンプトだけで優れたデザインを作成できるインターフェースを提供する。Opusモデルや思考レベルの調整によって品質とトークン消費のバランスをとることができる。ただし制限に達すると5時間待つ必要があるため、事前の計画が不可欠である。

design.mdファイルの作成と視覚化

  • design.mdを用いることでAI特有の汎用的なスタイルを防ぎ、ブランドの一貫性を保つことができる。
  • Claude Code内の専用スキルを使用することで、インタビューを通じて自動的にdesign.mdを構築できる。
  • 生成されたGoogle形式のデザインファイルはdesign.md.spaceなどで事前に視覚化して確認できる。

いきなりプロンプトを入力すると汎用的な見た目になるため、ブランドのデザイン詳細を記したdesign.mdを最初に用意する。Claude Codeのスキル機能を活用すれば自動で計画や検証が行われ、ビジュアライザーを通じて生成結果を事前に把握することで試行錯誤によるトークン消費を抑えられる。

ワイヤーフレームの作成とコメント機能による修正

  • デザインシステムを基にワイヤーフレームを作成して全体構造を事前に確認する。
  • コメント機能を使用することで、特定の要素や領域を指定して正確な変更指示を送ることができる。
  • 最終的なデザインにスクロールインやポップアップなどの控えめなアニメーションを追加する。

デザイン生成に時間がかかるため、まずはワイヤーフレームを作成してレイアウトと構造を検証する。変更が必要な箇所はコメント機能を用いて詳細を指定し、Claudeに正確に伝えられる。満足するまで微調整を行った後、適切なアニメーションを追加してライブ感を高める。

Claude Codeへのエクスポートとバックエンド構築

  • Claude Design MCPを介して、作成したデザインとアニメーションをClaude Codeへ直接エクスポートできる。
  • ビルド結果のレビューを行い、レスポンシブデザインなどの潜在的な問題を修正する。
  • Supabase MCPとスキルを連携させてデータベースを構築し、アプリのデータを永続化する。

Claude Design MCPを使用することで、確定したデザインをClaude Codeへ双方向で移行し製品として落とし込むことができる。ビルド後のレビューでレスポンシブ表示の崩れなどを修正したのち、SupabaseのMCPとスキルを導入してバックエンドを接続し、データを永続化させてアプリケーションを完成させる。

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기