Anthropic Labs の **Claude Design** は、Claude との対話を通じて、ビジュアル、インタラクティブなプロトタイプ、プレゼンテーション、その他のデザイン資料を作成するためのツール。

定義

**Claude Design** は、自然言語を使ってビジュアルコンテンツを作成するためのワークスペース。ゼロからデザインするのではなく、必要な内容を説明することで、Claude がデザイン、プロトタイプ、プレゼンテーション、モックアップを生成。

**アイデアの発想、デザイン、反復** を一つの流れで実現。対話を通じて結果を調整し、目標に合うまで洗練可能。

主な利点はスピード。アイデアをすばやく実用的なビジュアルに変換し、白紙から始めることなく複数の方向性を探求可能。

デザイナーが静的なモックアップを、フィードバック収集やユーザーテストのために簡単に共有できるインタラクティブなプロトタイプへ変換。コードレビューやプルリクエストは不要。

**プロダクトのワイヤーフレームとモックアップ**

プロダクトマネージャーが機能フローをスケッチし、Claude Codeに実装を依頼したり、デザイナーと共有してさらに洗練させることが可能。

デザイナーが多様な方向性を迅速に作成し、検討可能。

**ピッチデックとプレゼンテーション**

創業者やアカウントエグゼクティブがラフなアウトラインからブランドに合った完成度の高いデックを数分で作成し、PPTXとしてエクスポートしたりCanvaに送信可能。

マーケターがランディングページ、SNS用アセット、キャンペーンビジュアルを作成し、その後デザイナーが仕上げを担当。

誰でも音声、ビデオ、シェーダー、3D、組み込みAIを活用したコード駆動型プロトタイプを構築可能。

* **Claude Design** を開く。
* プロジェクトピッカーの左下で、現在の組織名をクリック。
* 組織を選択、または新規作成。
* オンボーディングフローを完了。

組織の作成または切り替え

* ブランドやプロダクトを表す素材をアップロード。
* オンボーディング中、または後から組織設定で実施可能。
* Claudeがこれらのアセットを分析し、再利用可能なデザインシステムを作成。
* アップロード可能なもの：
* **コードベース**（例：Reactコンポーネントライブラリ）
* **プロトタイプ**（例：スクリーンショット、Webフロー、デザインファイル）
* **スライドデックやドキュメント**（例：PowerPointファイル、PDF）
* **個別アセット**（例：ロゴ、カラーパレット、タイポグラフィ例）
* 1つのソースでも開始可能だが、複数のアセットがあるとClaudeがより多くの文脈を取得。

ブランド・プロダクトアセットのアップロード

* Claudeが組織向けのデザインシステム（UIキット）を生成。
* 含まれる可能性のある要素：
* **カラーパレット**
* **タイポグラフィ**
* **再利用可能なコンポーネント**
* **レイアウトパターン**
* テストプロジェクトを作成し、出力がブランドに合っているか確認。

生成されたデザインシステムの確認

* 結果に満足したら **公開** トグルをオンにする。
* 公開後、組織内でClaude Designホーム画面から作成されるプロジェクトは、デフォルトではなくカスタムデザインシステムを使用。

チームへの公開

実際の業務シナリオでClaudeを活用するための、簡潔で実践的なコースです。プロジェクトの設定、効果的なプロンプトの作成、ドキュメント管理、再利用可能なワークフローの構築方法を学びます。

Claudeのインターフェース、プロジェクト設定、コンテキスト管理の基本を学び、生産的な作業を実現します。

プロンプト作成の技術を習得し、実際のタスクにおいてClaudeの出力を制御する方法を学びます。

Claudeの機能を活用して、ドキュメントのアップロード、分析、対応方法を学びます。

Claudeを実際のビジネスワークフローに適用し、コミュニケーション、コンテンツ作成、リサーチに活用します。

自動化、設計、システム構築のための高度なClaude機能を探求します。

Claudeデザイン