Claude Design のデザイナーがアイデア探索に活用

Anthropic のプロダクトデザイナー、ネイト・パロットは、Claude Design（ベータ版）を活用して、製品のプロトタイプからスライド資料、アニメーションまで、視覚的なアイデアを早期に探索し、反復して共有する方法について語ります。

• カテゴリ：Product Claude Design
• 日付：2026 年 7 月 24 日
• 読了時間：5 分
• シェア：リンクをコピー https://claude.com/blog/how-the-product-designer-who-built-claude-design-uses-it-to-explore-ideas-before-building-them

2025 年の秋、私は Claude Code for VS Code の唯一のプロダクトデザイナーとして、ターミナル外でより親しみやすいインターフェースを実現するために、Claude Code が提供する機能をすべて再設計するプロジェクトに携わっていました。エンジニアは 2 名のみでした。

9 月末にベータ版をリリースし、11 月には Opus 4.5 が登場しました。これにより Claude Code チームの開発スピードは劇的に向上し、積極的に新機能の提供を開始しました。エンジニアたちは以前よりもはるかに多くの成果物を次々と生み出していく一方、私は相変わらず従来のペースで作業を続けていました。このままでは遅れをとってしまうため、どうにかして追いつく方法を探さなければなりませんでした。

Claude Code はターミナル上で動作するため、すべてテキストベースの環境です。そのため最初の試みもその前提で行いました。つまり、出力をコピーして Claude に貼り付け、スクリーンショットを追加した上で「追加したい機能があるが、これをデザインしてほしい」と指示しました。しかし、結果は期待外れでした。

約 1 ヶ月間、これはサイドプロジェクトとして位置づけられ、Claude のデザイン出力を改善する方法を探し続けました。

HTML プレイグラウンドを与えてみる

やがて私は答えにたどり着きました。Claude は HTML を扱うのが非常に得意なのです。私たちは通常、HTML をウェブサイトのフォーマットだと考えていますが、実際にはリッチでインタラクティブな視覚メディアでもあります。スライド資料、動画ファイル、PDF でできることは、すべて Web ページでも実現可能です。

そこで私は、Claude に HTML の作成を指示し、左側にチャット画面、右側に出力結果を表示する分割ビューのインターフェースを用意しました。

これは有用でしたが、プロダクトデザインは、自分が携わるプロダクトやブランドに関する知識を適用することで成り立ちます。そこで次のステップとして、Anthropic のブランドの本質（使用しているフォント、カラー、アセット、そして原則）をプロンプトに凝縮することにしました。こうしてツールに入力したプロンプトに基づいて出力されるデザインは、Anthropic のブランドガイドラインに準拠したものになります。

その成果を小さな内部プロトタイプにまとめ、チームと共有しました。製品デザイナーたちは即座にこのツールを活用し、インタラクティブなプロトタイプの作成に取りかかりました。

従来のデザインツールでクリック型のプロトタイプを作るには、各画面のすべての状態を手動でモックアップし、それらを一つずつ接続する必要があります。しかし Claude Design では、素材を渡して「動かしてほしい」と指示するだけです。生成された成果物には共有リンクが付いており、ドキュメントを共有するかのように簡単にチームメンバーと共有できます。

クロード・デザインがビジュアルワークの媒体へと進化していく理由

私が初めて Claude Design の魅力に気づいたのは、Anthropic Labs チームのオフサイト会議中のアイデア提案セッションでした。その場では参加者全員がこのツールを使ってスライドを即座に作成しており、発表前の直前まで作業している姿も珍しくありませんでした。この経験が Labs チームを動かし、Claude Design は単なるサイドプロジェクトから正式なプロジェクトへと成長しました。

今や私たちは、これを製品用のモックアップ作成ツールとしてだけ説明していません。Claude Design はスライド資料、ランディングページ、PDF 印刷用のワンページ、メール、アニメーション、SNS 向けのビジュアルなど、あらゆる種類の視覚的コミュニケーションを生成するためのツールへと進化しました。

私はこれを「製品デザインの次のステップ」と捉えています。Claude と協力して、コミュニケーションやアイデアの創出が主目的となるビジュアルを作成するのです。

ビジョン認識モデルの性能向上に伴い、Claude Design が扱える作業の幅と品質も高まっています。最新の Opus クラスモデルである Claude Opus 5 は、以前の Opus モデルよりもチャートや図表、スクリーンショットの読み取りに優れており、Claude Design と組み合わせることで、プレゼンテーションに耐えうる資料やメモの作成を強力にサポートします。

Claude Design が目指さないこと

Claude Design には画像生成モデルが搭載されておらず、画像生成を目的としたツールではありません。そのためロゴデザインの分野では不向きですが、それでも試す人は後を絶ちません。より現実的なアプローチは、すでに保有しているロゴやアセットを持ち込むことです。

製品の残りの部分も同様で、Claude は選択肢や出発点となる案を作成します。これにより、空白のキャンバスとにらめっこする必要がなくなります。ユーザーは、その中から単独で優れたものを選ぶか、複数のバージョンを組み合わせて最適な形を決定します。

もし本番環境でソフトウェアをリリースする必要があるなら、Claude Code を使い続けてください。Claude Code はコーディングのためのツールであり、Claude Design はそれ以外のデザイン業務、つまり具体的な実装に着手する前の初期アイデア出し、チームでの協働、あるいは方向性への合意形成などに役立ちます。この 2 つは双方向で連携するため、Claude Code で始めたプロトタイプを Claude Design に同期してキャンバス上で反復・編集したり、構築の準備が整ったプロトタイプを Claude Design から Claude Code へ引き渡したりすることが可能です。

モデルの実装能力が高まるにつれて、最も重要な作業はプロセスのより初期段階へと移っていきます。それは「良いアイデアを生み出すこと」「関係者全員の認識を合わせること」、そしてアイデアがまだ萌芽的な段階でフィードバックを集めることです。

日常業務における Claude Design の活用方法

私は毎日、Claude Design をワイヤーフレームによる初期アイデアの作成や、同僚からのフィードバックを得るために 15 バージョンのフローを生成するなど、デザイン業務の中核となる作業に活用しています。以下は最近の実務での具体例です：

Claude Design の紹介アニメーション。Claude Design にサインアップした際に表示されるこのアニメーションは、ツール自体で作成されましたが、直接作られたわけではありません。私はアニメーターではないため、まず Claude Design にカスタムビデオエディターを作成してもらい、そのエディターを使ってアニメーションを制作しました。

地下鉄時刻表アプリの例です。モーションの物理挙動を微調整できるよう、アニメーション制御を調節可能なインターフェースが用意されています。

Instagram 風のカラーコントロール機能です。色を言葉で説明するのではなく、スライダーやプリセットを使ってアプリの色 scheme を直感的に調整できる機能を Claude に依頼しました。

Claude Design 自体のリデザイン案です。私を含め、ヘレンとアンダリューの 3 人で、ツール内で新しいエディターのデザインを議論し続けています。そのままリリースする予定はありませんが、このプロダクトの可能性を探るための探索プロセスとして活用しています。

Claude Design を活用するためのベストプラクティス

• プロンプトを入力する前に、思考を整理しましょう。Claude の出力を自分のビジョンに近づけ、最も効率的な方法を得るには、事前に必要な情報を明確に伝えることが重要です。私はデザイン作業に入る前に、プロンプトの作成に多くの時間を費やしています。時には Claude Design の音声ボタンを使って口頭で指示を出したり、ソファからスマホのメモアプリに入力したり、散歩中にボイスメモを録音して後でテキストに変換して貼り付けたりすることもあります。どのコミュニケーション方法が自分に合っているかを見極めれば、PC から離れている間に何をしたいかを整理できるため、いざ作業を開始した際に Claude があなたのビジョンを正確に実行してくれます。
• Claude に対して「どのような見た目にしてほしいか」を指示しましょう。何も指示しないと、Claude はお気に入りのデザインスタイルのいずれかを勝手に選択します。おそらくそのスタイルはよく見慣れたものですが、事前にフォントや色を指定したり、インスピレーション源として画像のムードボードを提供したり、フォントと色の組み合わせについてブレインストーミングして「しっくりくる」までやり取りを重ねたりすることで、そのような事態を防げます。
• 繰り返し行う作業はデザインシステム化しましょう。ブランドファイルやロゴ、スライド資料、スクリーンショット、タイポグラフィ仕様の詳細など、再利用するあらゆる素材をアップロードすれば、Claude がそれらを分析してデザインシステムを生成します。こうすれば、その後に作成するすべての成果物が白紙の状態からではなく、あなたの設定に基づいてスタートできます。
• 10 の案を求めて、その後で組み合わせましょう。多くの案は期待外れかもしれませんが、それで構いません。1 つか 2 つが気に入るはずです。「B と D を組み合わせたような、5 つのバリエーションを作って」と指示すれば、Claude がその方向性をさらに発展させてくれます。
• 言葉にできないレイアウトはスケッチしましょう。頭の中にイメージはあるが、それを説明する言葉が見つからない場合は、紙に描いて写真を撮り、アップロードしてください。
• 指差して話しかけましょう。どの要素を指しているのかを文章で説明する代わりに、その要素をクリックして音声で指示を出せます。デバイス上で音声入力機能を有効にし、「コメント」を選択してコメントボックス内をクリックすれば、キーボード入力をしているかのように発言がテキストとして表示されます。
• 詳細度よりも構造が重要なら、ワイヤーフレームから始めましょう。ワイヤーフレームの作成を依頼する方がはるかに速く、Claude がデザインの視覚的なディテールに囚われることなく、より高レベルな構造に集中できます。これは、さまざまなアイデアを素早く試すのに最適な方法です。
• 最終調整は手動で行いましょう。直接編集ツール（配置の入れ替え、削除、テキスト編集、サイズ変更、色の変更など）を使って微調整を行うのがおすすめです。プロンプトで指示を出すよりも効率的です。また、サイズやアライメントのような細かい調整は、結局のところ人間の目で確認したほうが適切です。
• Claude には実際の文脈を与えましょう。既存のアプリやウェブサイトの機能デザインを行っている場合は、GitHub を接続します。Claude がコンポーネントや既存の画面を取得し、それを出発点として活用します。数回試行するだけで、既存のデザインを高い精度で再現することも可能です。デザインが外部情報に依存する場合、Web 検索や MCP 接続も Claude Design で利用できます。
• Claude と並行して作業を進めましょう。Claude が完成した結果を出すまで待ってから次の指示を出す必要はありません。複数のメッセージを一度にキューイングしたり、Claude が前のタスクを処理している最中にも新しい指示を出し続けたりできます。

命を吹き込もう

すべてのデザイナーが一度は見るべき Bret Victor の講演があります。そのタイトルは『止まってしまう死んだ魚を描くのをやめよう』です。要約すると「私たちが描くものは、デフォルトで生きているものであるべきだ」というメッセージです。

私は、Claude Design であろうと他のツールであろうと、デザイナーには自分の作品に命を吹き込む方法を考えることをお勧めします。私が最も気に入っている Claude Design の成果物は、既存の枠組みに収まらないものです。インタラクティブなシミュレーションを組み込んだドキュメント、語りかけるスライド資料、動画でもある図解、そして自分自身で編集できるデザインなどです。

コード、特に HTML はクリエイティビティのための素晴らしい媒体であり、ついにデザイナーがこれを使って創作することが容易になりました。

Claude Design が現在の形になったのは、Anthropic の人々が私が想定していなかった用途を見つけ続けたからです。現在は Claude Pro、Max、Team、Enterprise プランでベータ版として利用可能です。試してみてください そして、私たちがまだ考えもつかない場所へ連れていってください。

*この記事は Anthropic のプロダクトデザイナーである Nate Parrott によって書かれ、Claude Design に関する彼の意見、使用パターン、アドバイスが述べられています。*

‍

見つかったアイテムはありません。

0/5

電子書籍

imageimage

見つかったアイテムはありません。

クロードを使って組織の業務運営を変革する

開発者向けニュースレターを購読しよう

製品アップデート、ハウツー記事、コミュニティ紹介などをお届けします。毎月あなたのメールボックスへ。

月次ニュースレターの配信を受けたい場合は、メールアドレスをご入力ください。いつでも登録解除が可能です。

ありがとうございます！登録が完了しました。

申し訳ありませんが、送信に問題が発生しました。後ほど再度お試しください。