Claude Design、生みの親はどう使ってる？プロダクトデザイナーの活用術に迫るよ！

こんにちは、しぃちゃんだよ！今日は Claude Design を作った本人の使い方に迫る、ちょっと面白い記事を見つけたから紹介するね！

Claude Blog claude.com

なにが発表されたの？

Claude Blog に、Claude Design を開発した Anthropic のプロダクトデザイナー Nate Parrott さんの記事が載ったよ。彼が普段の仕事で Claude Design をどんなふうに使っているか、アイデアを形にする前の「探索」の段階でどう活用しているかを紹介する内容なの。

なぜ重要なの？

2025 年秋、Parrott さんは Claude Code for VS Code のデザイナーがひとりしかいない状態だったんだって。エンジニアたちがどんどん機能を追加していく一方で、デザイン作業のペースが追いつかなくなってきたの。それまでのテキストだけのプロンプトでは Claude の設計アウトプットが物足りなくて、そこで HTML をベースにした新しいアプローチを試したのが Claude Design のはじまりなんだって。左側にチャット、右側に出力を表示するスプリットビューにして、Anthropic のブランドガイド(フォント・色・アセット)をプロンプトに組み込むことで、ブランドに沿った出力を得られるようにしたの。生成物は共有可能なリンク付きのアーティファクトとして書き出せるよ。

これで何が変わるの？

Claude Design は、いまでは幅広いビジュアル制作に使われているんだって。

• スライドデック
• ランディングページ
• 1 枚もの(PDF 書き出しも可能)
• メール
• アニメーション
• ソーシャルメディア向けのビジュアル素材
• インタラクティブなプロトタイプ

Parrott さんは「Claude Design はあらゆる種類のビジュアルコミュニケーションを作るツールになった」と表現しているよ。現在は Claude の Pro・Max・Team・Enterprise プランでベータ提供中なの。

深く潜ってみよう

記事では、Parrott さんが実際に使っている 10 個のコツが紹介されているよ。

• プロンプトを書く前に、まず自分の中で構想を整理する
• フォントや色といった視覚スタイルをはっきり指定する
• ブランドアセットやファイルをアップロードして、デザインシステムとして使う
• 複数の案を出したあとにリミックス(組み合わせ・作り直し)する
• 言葉で説明しづらいレイアウトは、手描きのスケッチをアップロードする
• クリックしてコメントを残せる音声コメント機能を使う
• 重要度が低い部分はワイヤーフレームのままで済ませる
• 最後の細かい調整は直接編集ツールで行い、トークンを節約する
• GitHub など外部ツールと接続してコンテキストを増やす
• Claude が処理している間も、次の指示を出し続ける

一方で限界もはっきり書かれていて、Claude Design は画像生成モデルを持っていないから、ロゴデザインのような画像生成そのものが必要な作業には向かないんだって。本番のソフトウェア開発は Claude Code の担当領域、という住み分けもされているよ。

まとめ

• Claude Design を作った本人が、日々のデザイン業務での使い方を語った記事
• スライド・ランディングページ・プロトタイプなど幅広いビジュアル制作に使われている
• ブランドアセットの活用やスケッチのアップロードなど、10 個の実践的なコツが紹介されている
• 画像生成モデルは搭載しておらず、ロゴ制作などには不向き

デザイナーはもちろん、エンジニアがちょっとしたスライドや資料をパッと作りたいときのヒントとしても読んでおきたい記事だよ！