MENU

ニュース

デザインの民主化!Anthropicが「Claude Design」を公開。指示一つでインタラクティブなUIを生成

  • URLをコピーしました!

アップデートされたAnthropic LabsのClaude Designは、チャットを介してデザインやインタラクティブなプロトタイプ、プレゼンテーションを作成できる機能です。左にチャット、右にキャンバスがあり、指示に応じてキャンバス上に動作するデザインが生成されます。Pro、Max、Team、Enterpriseの各プランで研究プレビューとして利用可能で、Enterpriseでは初期設定がオフです。組織のデザインシステムが前提となり、ブランドの色やタイポグラフィ、コンポーネントが自動適用されます。これにより追加設定なく標準に即した成果物を出力できます。以下、プロジェクト作成から反復、エクスポートまでの実務手順をまとめます。

基本構造とフローを理解する

Claude Designはチャットとキャンバスで構成され、作りたいものを説明するとデザインが生成されます。まずプロジェクトを作成し、スクリーンショットやコードベースなどの関連コンテキストを追加します。次に構築したい内容を説明し、生成物を確認します。調整が必要な点はチャットやインラインコメントで指示して反復します。完成したらエクスポートまたは共有で関係者に展開します。この流れによって要件定義から成果共有までを一貫して進められます。

プロジェクト作成とコンテキスト追加

新規プロジェクトでは組織のデザインシステムが自動的に継承され、ブランドアセットの個別設定は不要です。精度を高めるには十分なコンテキストの添付が有効です。既存のデザインや競合のスクリーンショット、ワイヤーフレーム、スライドデッキなどをアップロードします。コードリポジトリをリンクすると既存のコンポーネントやスタイリングパターンをClaudeが理解し、プロトタイプが本番対応に近づきます。既存の製品デザインのインポートにも複数の方法が用意されています。

効果的なプロンプト作成

プロンプトには目標、レイアウト、コンテンツ、オーディエンスを具体的に含めると成果が安定します。たとえば月間収益を地域と製品ラインでフィルタリングするダッシュボードや、四画面で機能説明を行うモバイルオンボーディングなど、要件を明示します。ランディングページの構成要素や条件付き質問を含むフォーム、レビュー用の内部ツールなども具体化が有効です。情報が不足している場合は明確化の質問が提示されます。

反復の進め方と使い分け

全体の構造変更や美的調整はチャットで指示すると広範な変更を反映できます。色調の変更、ダッシュボードの再配置、設定パネルの追加、代替レイアウトの提示が該当します。特定コンポーネントの調整はインラインコメントが高速です。ボタンのパディング、入力方式の変更、ブランドカラーの適用、折りたたみ機能の追加などを直接指定します。コメントが反映されない場合は内容をチャットに貼り付ける回避策があります。

バージョン管理とエクスポート

別方向を試す際は現状を保存して新しいアプローチに切り替えるよう依頼できます。完成後はプロジェクト画面のエクスポートからZIP、PDF、PPTX、Canva送信、スタンドアロンHTMLが選べます。Claude Codeへの引き継ぎやローカルコーディングエージェント、Claude Code Webへの送信にも対応します。共有リンクは表示のみ、コメント、編集の権限を設定できます。

既知の制限と対処

インラインコメントが時々消えるため、回避としてチャットに貼り付けます。コンパクトレイアウトモードでエラーが保存される場合はフルビューに切り替えます。非常に大きなリポジトリはラグの原因となるため特定サブディレクトリのリンクが推奨されます。チャットアップストリームエラー時は同じプロジェクト内で新しいチャットタブを開始します。利用可能プランはPro、Max、Team、Enterpriseで、Enterpriseはデフォルトでオフです。

詳しくは「Anthropic Labs」の公式ページまで。レポート/DXマガジン編集部

シェアはこちらから
  • URLをコピーしました!
  • 週刊SUZUKI
  • 日本オムニチャネル協会
  • 公式LINEメンバー

お問い合わせ

取材のご依頼やサイトに関するお問い合わせはこちらから。

問い合わせる