優れたデザインは簡単に見分けられます。ビジュアルとユーザー フローは、アプリや Web サイト内で実行できるアクションを説明なしで脳に伝えます。しかし、良いデザインを実現するのは難しい 建てる。新しいデザインを何日も見つめても、ページが味気ない、ナビゲーションがわかりにくい、重要な情報が閲覧者の注意を引いていないなどと感じることがあります。
Cloud Design は、デザイン初心者の競争の場を平等にし、AI を活用したデザイン、プロトタイプ、スライドデッキを作成できるようにして、最初のドラフトをより早く作成できるようにします。微調整されたエディターを使用する代わりに、手順とリファレンスを実行して、ページを構築する準備が整うまでページを磨きます。 クロード・コード 迅速に行動に移せるよう配信します。
目次：
クロードデザインとは？
Cloud Design は、アプリのモックアップ、Web サイトのプロトタイプ、機能デッキ、ランディング ページなどのデザイン オブジェクトを作成する新しい Anthropic 製品です。 Anthropic の AI モデル。テキストまたはコンテキストとしてファイルを追加して必要なものを説明し、統合されたプレビュー ウィンドウで AI 出力を確認して、デザインを微調整したり、対象の編集に注釈を付けたりすることができます。
Research は現在、Claude の有料購読者向けにプレビュー段階にあり、claude.ai/design にある別のエントリ ポイントから追加料金なしでアクセスできますが、週ごとの使用量は非常に制限されています。
クロード・デザインはどのように機能しますか?
Cloud Design の核心は、仮想ワークスペースに接続されたチャット ウィンドウです。モバイル アプリのダッシュボードまたは Web サイトのランディング ページを作成する指示を送信すると、AI エージェントはすべてのアセットの構築を開始し、ワークスペースに保存します。完了したら、対話型プレビュー ウィンドウで結果をプレビューでき、再度リクエストする前に変更を加えたりコメントを追加したりできます。
作業スペース
Cloud Design に作成またはアップロードしたものはすべて、プロジェクト ワークスペースに保存されます。すべてのファイルをタイプ別に追跡します。SVG ファイルを含むフォルダー、貼り付けた画像参照用の別のフォルダー、およびすべての HTML および CSS ファイルが見つかります。 AI エージェントは構築時にこれらをコンテキストとして使用します。いつでもダウンロードできます。
システム統合設計
アカウントを設定するときの最初のステップの 1 つは、デザイン システムを作成することです。 Cloud Design はここでさらに深くなります。GitHub リポジトリへのリンク、ローカル ファイルのアップロード、Figma 参照、フォントや画像などのアップロードされたアセットを受け入れます。特別なリクエストや指示を詳細に記載したテキスト メッセージにまとめることができ、エンジンが作動します。
約 5 分後、クロードはシステムを構成するすべての設計要素の詳細なリストを持って戻ってきました。これには、色、タイポグラフィ、コンポーネント、UI キットを含む、手動で確認して承認する必要がある数十のファイルが含まれています。 OK に投票することも、別のオプションに反対票を投じることもできます。確認が完了すると、デザイン システムをプロジェクトのベースとして使用する準備が整います。
デザイン セットは必要な数だけ作成できますが、世代ごとに毎週のトークン使用量が消費されることに注意してください。
出発点
メイン ダッシュボードでは、開始するプロジェクトのタイプ (プロトタイプ、スライド デッキ、または以前に保存したテンプレート) を選択できます。既存のデザイン システムの 1 つを選択してプロジェクトのルック アンド フィールを確立するか、ゼロから開始して必要に応じて選択します。 ワイヤーフレーム または高忠実度モデル。ワークスペースが開き、ベースとして使用するスケッチを描画するオプションが表示されます。このオプションはワークスペースの左上隅に常にあります。
プロンプトを表示する際のテキストの制限はありません。画像、ドキュメント (.docx、.pptx、.pdf など)、Figma ファイル (.fig) をアップロードしたり、音声入力を使用してアイデアについて話すこともできます。これらに加えて、少し使い方が難しいですが、既存の Web サイトやアプリからブランド要素を簡単に取得するのに便利な Web キャプチャ ツールもあります。
-
ブックマークをブラウザのツールバーにドラッグし、リンク先のサイトに移動し、ブックマークをクリックしてキャプチャ モードをアクティブにします。
-
キャプチャ ペインが左下隅に表示されます。ページ要素の上にマウスを置くと、そのコンテナが強調表示されます。クリックするとキャプチャに追加されます。
-
完了したら、結果をコピーして Cloud Design に貼り付けます。結果は JSON ファイルとして到着し、すぐにリクエストできます。
このツールは画像、ロゴ、複雑なレイアウトを再現しませんが、使用可能な構造の近似値を作成するので、それを参照または開始点として使用できます。
微調整、メモ、描画による編集
Cloud Design の独自の微調整機能では、現在のページの一連の微調整を含むカードがプレビュー画面の右下隅に配置されることがあります。
例: 複数のセクションを含むフォームを作成しました。フォーム スタイル (カード内でセクションを折り返すか、仕切り線のみを使用する)、入力フィールド スタイル、およびフォーム幅に関するオプションが提供されました。各オプションをクリックすると、デザインがリアルタイムで更新されるため、AI に追加のオプションを生成するよう依頼することなく、その場で意思決定を行うことができます。
モディファイアには、プレビューしているページの種類に応じて異なる設定があり、単純なデザインの場合はまったく存在しない場合もあります。
クイック編集オプションを要約します。 編集 左上隅のボタンを押すと、背景色、フォント、ベース サイズのセレクターが表示されます。対象を絞った変更を行う場合は、 述べる ボタンをクリックし、任意の視覚要素またはコンテナをクリックして考えを記録します。これは 2 つの機能を果たします。これを使用して、鋸を使用してチームと共同作業できます。 コメント タブをクリックするか、編集のためにクロードに直接送信します。
テキストが変更したい内容を完全に表現していない場合は、代わりに描画ツールを使用してインターフェイスをマークし、任意の場所から入力を開始してテキストを残すことができます。これはコンテキストとして渡されるため、モデルは変更を加えることができます。
エクスポートオプション
Cloud Design で現在利用できるすべてのエクスポートおよび共有オプションは次のとおりです。
-
Cloud Design に出席: 何もエクスポートせずに、プラットフォーム上でスライドデッキを表示できます。
-
URL共有 (チーム プランおよびエンタープライズ プランの場合): アクセス レベルを表示、コメント、または編集します。これはチーム メンバーと共有できます。
-
PDFとPPTX: デッキとドキュメントに使用されます。
-
スタンドアロン HTML: クロードは、出力をコンパイルされたアプリとして単一のポータブル ファイルにパッケージ化します。サーバーや依存関係は必要ありません。これは機能的なプロトタイプであり、生産用の足場ではありません。実際の使用に適応させる前に、統合作業を行うことが予想されます。
-
カンナ: これには、Canva コネクタのインストールが必要です (右上隅のプロフィール アイコンをクリックし、 著者）。エクスポートでは、ファイルがコードとしてプッシュされます。 Canva では表示できますが、完全に編集することはできません。
-
クロードコード配信: 配信では、システム ガイダンスとプロジェクト コンテキストを含むパッケージがパックされているため、それをコピーしてローカルのコーディング エージェントに貼り付けるか、Web 上のクロードのコードにプッシュできます。この配信パッケージでは、標準的なスターター プロジェクト構造がそのまま適用されるわけではない (たとえば、HTML と CSS が分離されていない) ため、さらに構築する前にベスト プラクティスから始めることをお勧めします。
例を参照する
クロード・デザインの 例 このタブには、プラットフォームの機能を強調する 9 つの開始点が表示され、新しいプロジェクトに導入できるきらびやかなビジュアルが表示されます。これらには、アニメーション、パーティクル エフェクト、完全なワークフロー、またはシェーダーのコレクションが含まれます。これは、クロードが基本的なフォームやダッシュボード以上のものを処理でき、より野心的なプロジェクトも処理できることを示しています。
Cloud Design は実際に誰を対象としているのでしょうか?
Cloud Design に対する「デザイナーは死んだ」から「ただのことだ」に至るまでの強い反応にもかかわらず、 人工知能」では、よりバランスの取れたコミュニティの見方により、このツールが UI/UX の Canva デザインとして位置付けられます。 カンナ 設計作業を中断しませんでした。参入障壁を下げました。
Pygma に何時間も費やしたくないビルダーや開発者は、特にコード クラウド配信で大きな価値を見つけるでしょう。これは、実際にコーディングに移る前に、製品がどのようなものになるかについてのアイデア段階として使用できます。
プロダクト マネージャーや創設者は、これを使用してアイデアを検証し、機能の実装がどのようになるかを繰り返し検討し、他のユーザーと共有して賛同を得たり、開発を開始したりできます。デザイナーはこれを使用して、新しい美学を迅速にブレインストーミングし、後で改良できる最初のドラフトを作成できます。
アニメーションやスライドデッキを含むビジュアルプロジェクトを持っている人なら誰でも参加できます。 雰囲気づくり このタイプのコンテンツは、仮想ワークスペースを使用してすべてを整理し、そこから直接表示します。
クラウド設計の限界
現時点での最大の制限は週ごとの使用量で、Pro プランを利用している場合は 1 時間以内にトークン割り当て量全体を使い切ってしまう可能性があります。使用制限が高いプランにはより多くの変更余地があり、いつでも従量課金制の追加使用量を有効にすることができますが、クラウドの他の機能と比較すると依然として高価です。
しばらく Cloud Mockups を使用してオブジェクトと UI を作成している場合は、Cloud Design に独自の視覚言語があることに気づくでしょう。セリフ フォント、黄色の配色、カードベースのレイアウト、随所にあるハイライト バーに大きく依存していることです。見た目は良いですが、すぐに繰り返しになってしまうため、独自のデザイン システムを追加することが非常に重要です。
クラウドデザインを始める方法
Claude Design は、Claude Pro、Max、Team、Enterprise のサブスクライバーが利用できます。無料レベルはありません。 clude.com/design からアクセスすると、既存のサブスクリプション内の製品として表示されます。
チャットやコード クラウドの制限とは関係なく、7 日ごとにリセットされる独自の週次使用量許容量が設定されています。 Sonnet 4.6 を使用している場合、各プロンプトは毎週の Pro プランの使用量の約 5 ～ 10% を消費します。これまでに使った金額を確認できます 練習する クロードの通常のチャット アプリのタブ (定義 > 練習する）。
より早く始めるためのヒント:
-
ページへの変更をリクエストするたびに、変更を確認するにはタブを更新する必要があります。ただし、ブラウザ全体を更新する必要はありません。プレビュー ウィンドウの左上隅を見て、Claude Design 更新ボタンを見つけてください。
-
複数の画面がある場合は、各ページ内のリンクをクリックして画面間を移動できます。場合によっては、これが機能しないことがあります。代わりに、タブを閉じて、ワークスペース ファイル リストから目的のページを開くことができます。
-
使用量の多いプランにアップグレードするか、複数の有料アカウントを使用する以外に、週ごとの上限を無料で解決する現実的な解決策はありません。
あなたの新しいデザインアシスタント
Cloud Design は AI 設計ツールの世界における大きな進歩であり、Figma で何時間も費やさずに組み立てることができるレベルを引き上げます。今のところ、洗練されたデザインを出荷する経験豊富なデザイナーと競合することはありませんが、作業を自動化できます。つまり、人々がより従来型のユーザー インターフェイスの構築を計画するような作業です。
こうしたツールがさらに市場に登場するにつれて、見た目は良くても個性に欠け、あたかも互いに似ているかのような多くのビジュアル エクスペリエンスが目に入るかもしれません。スムーズなスタートアップのデザインがテーブルの目玉になる場合、デザインの専門家にとってどのような差別化の選択肢が開かれるでしょうか?そして、デザイナーではない人は、セリフ フォントやカラフルなアクセントの海の中でどうやって自分のビジョンを主張できるのでしょうか?
関連書籍:
