はじめに

こんにちは。DX開発事業部でUIデザイナーをしているYuです。
Anthropicが新しくリリースし、話題になっている「Claude Design」をさっそく使ってみたので、本記事では機能と所感を共有します！

6つの機能をご紹介

Claude Designを実際に使ってみて分かった、6つの機能と特徴をご紹介します！
お急ぎの方や全体像をスピーディーに把握したい方は、まずこちらのグラレコをご覧ください！


1.デザイン生成とヒアリング

Claude Designを開くと、4つの選択肢から選択するか、プロンプトを入力することで使用することができます。

  • ヒアリングから始まるデザイン: AIが「ブランドカラー」「ユーザー層」など、ユーザーの期待に沿ったDesign Systemを構築するための質問事項が多く用意されています。
  • 「期待するもの」とのズレを防ぐ: デザイン案を提示し、納得感のあるビジュアルをスピーディーに作り上げます。

私はよくデザイン生成やモックアップ作成に、Figma Makeを使用していますが、Figma Makeとの違いを感じた1番のポイントは、やはりヒアリング事項の多さです。
プロンプトで最初にある程度指定していても、Claudeからの問いかけによって自分では見落としていた視点を補完できると感じました。

また、プロンプトベースだけでなく、素材のインポートも行うことができます。

現在選べるモデルはこちら↓

2.選べる編集モード

  • チャットによる編集: プロンプトに「全体を暖色系に」などと入力することで、自然言語での変更が可能です。
  • インラインコメント: 「Edit」ボタンで左側にパネルが開き、部分的な変更が可能です。


また、Tweaksという機能もあり、ONにすると、画像のようなパネルが出てきて、そこからスタイルを変えることが可能です。ON/OFFの切り替えはいつでも可能。

3.バージョン管理が可能

これも、他のツールにもありますが、別の案を試したい時も、現在の状態を保存しながら別軸の制作が可能でした。

できたデザインがこちら↓

 

4.Claude Codeへの連携

ここがClaude Designの最大の強みではないかと思います。デザインした成果物は、そのままClaude Codeへ移行することができます！

実際は、青のラインの部分にプロジェクトごとにユニークなURLが記載されています！

試してみた結果、コピーしたコマンドをターミナルに打つだけで、簡単にClaude Codeへ移行することができました！
初稿はClaude Designでデザインベースで。そのあとは開発へ移行して機能の追加やコードもしっかりと書いていきたい場合は、かなりスムーズに移行することができます。
また、このあとにもご紹介しますが、現在は同じプランのTeamメンバーでの共有が可能なので、「デザイナーがClaude Designでデザイン作成　→　エンジニアがClaude Codeで開発」といったこともシームレスに実現します！

5.チーム内外への連携

【チーム内への共有】

チーム内では、URL一つでシームレスな共同作業が可能です。また、権限設定も4パターンあるため、使い分けることができます。

  • 閲覧可能
  • コメント可能
  • 編集可能
  • 閲覧不可

【チーム外への共有】

Claudeプランに入っていない人や、特定の形式で資料が欲しいクライアントに対しても、豊富な書き出しオプションが用意されています。

  • ZIPファイル (HTML/CSSコード一式)
  • PDF / PPTX (PowerPoint)
  • Canvaに送信
  • スタンドアロンHTML
  • Claude Codeへ（上で説明）

6.利用できる人

現在はResearch Previewとして提供されており、以下のプランのユーザーがアクセス可能です。

  • Proプラン
  • Maxプラン
  • Teamプラン
  • Enterpriseプラン

まとめ

今回Claude Designを使ってみて、Claudeは企画から開発までを劇的にスムーズに変えようとしているということを強く感じました。今後は「デザイナーだから」「エンジニアだから」といった従来の職種による境界線に縛られず、領域を横断してプロダクトを形にするスキルがより一層求められるようになるでしょう。
日々のアップデートは凄まじいので、置いて行かれないようにするのは至難の業になってきていますが、新しい技術を活用して、日々の業務を少しでも効率化していきたいと思います！