00:00:00デザインシリーズの別のエピソードへようこそ。ここではAIを使ったデザインをより良くするための新しいAIツールを実際に見つけています。Opus 4.5やGemini 3 Proのようなモデルにより、
00:00:10シングルプロンプトデザインは大きく進化しました。しかし、
00:00:13このビデオで紹介する様々なツールやワークフローを使用することで、
00:00:16本当に素晴らしいデザインを作成するのに役立つものがまだたくさんあります。ShadCNは、
00:00:21美しくて完全にカスタマイズ可能でアクセシブルなUIコンポーネントを提供するライブラリであり、
00:00:26ReactとNext.jsプロジェクトにシームレスに統合されます。新機能により、
00:00:30プロジェクトにインポートするためのプリセットを作成できます。
00:00:33「New Project」
00:00:34をクリックするとページの片側にサンプルコンポーネント、
00:00:37反対側にプリセットが表示されます。そこで遊びながら実験してあなたに最適なコンポーネントスタイルを見つけることができます。インポートするスタイルを決定したら
00:00:45「Create Project」
00:00:47をクリックして、
00:00:48プロジェクトのフレームワークを選択し、
00:00:50インストールコマンドをコピーしてターミナルに貼り付けます。するとプリセット付きの新しいプロジェクトが即座にプロジェクトにインストールされます。コーディングエージェントに行く前にウェブサイトのデザインを用意しておくことが常に重要です。そうしないと望みの見た目にするために何度も変更をお願いする必要になります。このためにGoogle Stitchが最高のデザインツールです。というのも、
00:01:10Gemini 3 Proの思考機能とNano Bananaを直接統合し、
00:01:13生成画像を使用してデザインを強化できるようになったからです。デザインに入る前に、
00:01:18アプリケーションのカラーテーマを決めることが最も重要なステップです。そのために最適な場所がCoolersです。カラーパレットジェネレーターで、
00:01:25複数の色を並べて実験し、
00:01:26それらの組み合わせを分析できます。
00:01:28気に入ったものが見つかるまで調整を続けて、
00:01:30あなたに最適な形式でカラーパレットをエクスポートします。約4分後、
00:01:34Stitchで作成されたUIは非常にミニマルで、
00:01:36メインカラーとアクセントカラーの間に明確なバランスが取られていました。Google Stitchの新機能の1つは、
00:01:42デザインのすべての画面を選択してテスト目的でプロトタイプを生成できることです。プロトタイプは基本的にプロジェクトの動作のデモで、
00:01:49ウェブアプリまたはモバイルアプリのいずれかです。ナビゲーションフローを自動的に調整し、
00:01:53クリック可能なエリアを見つけて、
00:01:55完全に機能するプロトタイプをデザインから直接作成します。AIが自力で非常に優れたデザインを作成できたとしても、
00:02:01良い参考元からインスピレーションを得ることは決して無駄ではありません。そのために、
00:02:05ヒーローセクション、
00:02:06ナビゲーションバー、
00:02:07フッター、
00:02:08さらにはカスタム404ページなどを含む複数のギャラリーがあります。そこから創造的で魅力的なインスピレーションの参考元を見つけることができます。これらのリソースのリンクはすべて下の説明欄にあります。私はSuperheroをヒーローセクションデザインのインスピレーション参考元として使用し、
00:02:22ページのスクリーンショットをStitchに提供して、
00:02:25私たちのウェブサイトに合わせてデザインを再現しました。
00:02:28もう1つの重要な新機能があります。Google Stitchはデザインのエクスポート方法を改善しました。AI Studio、
00:02:34彼らのAIコーディングエージェントJulesに直接エクスポートしたり、
00:02:37コードをクリップボードにコピーしたり、
00:02:39ZIPファイルとしてエクスポートしてClaudeにインポートできるようになりました。
00:02:43Claudeでサブエージェントを使用する場合、
00:02:45他のエージェントが作業を処理している間、
00:02:47多くの時間を無駄にしていました。これは重大な遅延を引き起こしていました。Claudeはこの問題を最近解決し、
00:02:52サブエージェントがバックグラウンドで実行される機能を追加しました。私はPuppeteer MCPをブラウザテストのために設定しました。これによりClaudeがブラウザアクセスを介してUIをテストできます。ブラウザテストには多くの時間がかかるため、
00:03:04このタスクをバックグラウンドで実行して、
00:03:06その間にエージェントに別のタスクを割り当てることができます。こうすることで、
00:03:09複数のエージェントが同時に異なるタスクで作業でき、
00:03:12時間をより効率的に活用できます。ただし、
00:03:14これらのエージェントはトークンを使用するため、
00:03:16トークン使用量とコストを監視する必要があります。複数のエージェントを並行して実行し、
00:03:20必要に応じてタスクを割り当てることができます。各エージェントは実装を完了すると出力を返します。これらのバックグラウンドエージェントについては別のビデオで詳しく説明する予定なので、
00:03:29ご期待ください。Claudeはどんなに何度頼んでも小さなUIの問題を修正するのに苦労することがあります。そこで登場するのがDrawbridgeという本当に素晴らしいツールです。私たちは以前このチャンネルで既にこれを紹介しました。以前はCursorでのみ動作していましたが、
00:03:42現在はClaude コード統合と他の素晴らしい更新があります。彼らは以前のリリースの1つで私たちに感謝してくれましたし、
00:03:48この素晴らしいプロジェクトに本当に感謝しています。私たちのチャンネルにアクセスしてDrawbridgeの使用方法についてのビデオを見ることができます。ただし、
00:03:55以前のビデオ以降、
00:03:56機能が改善されており、
00:03:57以前よりもセクションをより正確に選択できるようになったため、
00:04:00非技術系ユーザーが問題をより簡単に伝えることができます。以前直面したスクリーンショットの問題も修正されました。
00:04:06さらに、
00:04:06Claude codeのスラッシュコマンドを自動的に設定しました。これは以前は手動で行う必要がありました。これらの改善を総合すると、
00:04:13ワークフローがより効率的で印象的になります。何百万人にAIでの構築方法を教えた後、
00:04:18私たちはこれらのワークフローを自分たちで実装し始めました。以前よりも速くより良い製品を構築できることに気づきました。アプリやウェブサイトなど、
00:04:25あなたのアイデアを現実にするのを支援します。「素晴らしいアイデアはあるけど、
00:04:29それを構築するテックチームがない
00:04:31」と思いながら私たちのビデオを見たことはありませんか？それが私たちが活躍する場所です。私たちをあなたの技術的なコパイロットと考えてください。何百万人に教えた同じワークフローを直接あなたのプロジェクトに適用し、"
00:04:42採用や開発チーム管理の面倒さなしにコンセプトを実際に機能するソリューションに変えます。あなたのアイデアを現実に加速させる準備はできていますか？hello@autometer.devまでご連絡ください。
00:04:52これでこのビデオの終わりになります。チャンネルをサポートしてこのようなビデオを作り続けるのを支援したい場合は、
00:04:57下のスーパーサンクスボタンを使用してください。いつものように、
00:05:00ご視聴ありがとうございました。次のビデオでお会いしましょう。