彼が毎日Claude Designで作成している4つの成果物

最初の例は、彼のアプローチを象徴しています。彼はアニメーターではないため、まずClaude Designに専用の動画エディターを作らせ、そのエディターを使ってアニメーションを作成しました。「まずAIに使いやすいツールを作らせ、そのツールを使って作業を進める」という手順は非常に参考になります。

残りの3つの例も同じ手法に基づいています。まずスライダー操作ができるツールを作成させ、そのツールを使って言葉で表現しにくい要素を調整します。

Claude Design開発者が教える10の実用的テクニック

ここは本記事で最も実践的なセクションです。原文では10の項目がそのまま並べられていますが、本サイトでは作業手順に合わせて「着手前の準備」「作成時のコントロール」「仕上げの手戻り防止」の3段階に再構成しました。各フェーズがそれぞれ異なる無駄を解決します。

1. 要件を固めてからプロンプトを送信する

このノウハウは直感に反するかもしれません。多くの人はPCの前に座り、AIの迅速さと低コストに頼って試行錯誤しながら考えます。しかし彼は逆のアプローチをとり、プロンプトの作成に多くの時間をかけ、PCから離れている間に考えを整理します。

どのような表現方法を使うにしても、重要なのはPCに向かう前に目的を明確にしておくことです。そうすれば、PCの前に座った時にClaudeが確実なアイデアを実行に移せます。

Nate Parrott

2. 繰り返す作業をデザインシステムとして蓄積する

ブランドファイルやアセットをアップロードすると、Claudeがそれらを分析してデザインシステム企業のカラー、フォント、ボタン、カードなどの再利用可能な部品やルールをまとめた仕組み。新規ページ作成時もこの部品ライブラリから使用します。を生成します。これにより、すべての作業を白紙からではなく、定義済みの設定からスタートできるようになります。

3. 手元にある実際のコンテキストを見せる

既存のアプリやWebサイトのデザインを行う場合は、GitHubを連携させます。Claudeは既存のコンポーネントやページを起点として利用するため、数回の試行で既存のデザインとほぼ同じトーンの成果物を作成できます。また、Web検索や社内システムからのデータ取得にも対応しています。

4. 画面上の対象を直接指定して指示する

どの要素を指しているか長文で説明するよりも、キャンバス上の要素をクリックして直接口頭で伝える方が効果的です。

5. フォントとカラーを事前指定し、AI任せにしない

方向性を指定しない場合、Claudeは自身のデフォルトスタイルを選択します。スタイルの指定を怠った際の影響が明確であるため、本記事で最も実践的なテクニックと言えます。

避けるべきデザインとはどのようなものでしょうか。『The New Yorker』の2026年6月の記事では、その典型的な特徴が以下のようにまとめられています。

同記事では具体的な事例が紹介されています。フリーランスデザイナーのMatt Ström-Awnによると、最近2社のクライアントが持参した営業提案資料の構成が酷似していました。1ページ目は明るい背景にミッションステートメントと3つの要点、2ページ目は4つの四角形による市場分析、3ページ目は中央配置の「our move」というキャッチコピーでした。彼は「ロゴが違うだけで、まるで同一企業が作成したかのようなデザインだった」と述べています。

Anthropic自身もユーザー向けガイドラインでこの傾向を認めています。

（モデルは）強力なデザインの傾向を備えており、一貫したデフォルトのスタイルを持っています……このデフォルト傾向は常に存在します。

Anthropicガイドライン（『The New Yorker』より引用）

注意すべき重要な注意点：同ドキュメントでは、「クリーム色を使うな」といった漠然とした否定指示は、モデルを別の固定カラーパレットに切り替えるだけであり、デザインの多様性を生み出さないと指摘されています。そのため、「〜にするな」ではなく「〜にしてほしい」と具体的なフォントやカラーを指定することが重要です。

6. 10個のバリエーションを要求し、良い部分を組み合わせる

彼は一度に10パターンの提案を求めています。大半は採用できなくても問題ありません。優れたものが1〜2つ含まれていれば十分です。その後、「B案のベースにD案の要素を加え、2つを融合させたバリエーションを5つ作成して」と指示します。

7. 言葉で表現できない場合はスケッチを描く

レイアウトのイメージがあっても言葉で説明しにくい場合は、紙に簡単な構成図を描いて写真をアップロードする方が、長文で説明するよりも効果的です。四角枠、矢印、簡単な注記で十分であり、綺麗に描く必要はありません。

8. 詳細が不要な段階ではワイヤーフレームを作成する

ワイヤーフレーム色とフォントを指定せず、枠組みと配置のみを定義したスケッチ。「どの要素をどこに置くか」を決定するために使用します。の作成を指示することで処理速度が向上するだけでなく、Claudeの意識を視覚的な詳細ではなく全体構造に集中させられるというメリットがあります。

9. 仕上げの微調整は手動で行い、AIに再指示しない

配置変更、削除、テキスト編集、拡大縮小、カラー変更などの細かな調整は、直接編集ツールを使って手動でドラッグ操作を行い、Claudeへの再プロンプト送信を避けます。

2つ目の理由の背景：「もう少し右に寄せて」と指示しても、モデルは「少し」の具体量を推測する必要があり、結果を確認して再指示する手間が発生します。手動でドラッグすれば、視覚的に確認しながら一回で正確に配置できます。

トークン消費の削減は一見副次的なメリットに思えますが、外部のデザイナーから最も多く寄せられる不満点でもあります。

この記事では言及されていない重要なポイントがあります。「一度に10案を要求する」手法は、最もトークンを消費するアプローチです。2つのテクニックを組み合わせることで本来の成果を発揮します。利用枠は方向性の模索に投入し、ピクセル単位の微調整には使わないという原則です。最初の10案で方向性を確定させ、確定後の位置調整とフォントサイズ変更は手動で行うことで無駄な再生成を防ぎます。

10. キューを活用し、処理完了を待たずに指示を送る

Claudeが完全な出力を完了するのを待つ必要はありません。複数のメッセージをまとめて送信したり、前の処理が実行中の状態で次の指示を出したりすることが可能です。思いついた指示を順次送信すれば、キュー順に処理されます。

10のテクニック チェックリスト

描かれたすべてのものは、「生きている」べきである

記事の最後で、彼はBret Victorによる2012年の講演を紹介しています。彼のスタイルはスライドを使わず、ステージ上でインタラクティブに動くデモを直接実演するというもので、多くのデザイナーが彼のプレゼンテーションに影響を受けてこの業界に入りました。

講演のタイトルは『Stop Drawing Dead Fish』（直訳：「死んだ魚を描くのはやめよう」）です。このタイトルは、絵描きが描いた紙の上の魚は動かない「死んだ魚」であるが、実際の魚は泳ぎ、逃げ、人間の動きに反応する「生きている」存在であるという観察に基づいています。コンピュータには描かれた魚を活かす能力があるにもかかわらず、私たちは静的なコンテンツを作り続けてきました。

人間は生きており、行動し、反応します。コンピュータの中の生成物もまた、許可されさえすれば、生きていて行動し反応することができるのです……。

（中略）私たちが描くすべてのものは、デフォルトで「生きている」べきなのです。

Bret Victor · Stop Drawing Dead Fish（2012）

この言葉を記事の冒頭に照らし合わせると、それが全体を通したメインテーマであったことに気づきます。

彼が最初に直面した課題の本質は何だったのでしょうか。それはデザイン稿が「静的（死んでいる）」であった点です。画面を1コマずつ作成し、各状態を並べて手動でリンクし、動いているかのように見せかけていました。一方、エンジニアが提供する成果物はインタラクティブに反応する「動的（生きている）」なものです。両者の開発スピードの差は、静的コンテンツと動的コンテンツの差に由来していました。

したがって、彼の解決策は「より速く静的デザインを描く」ことではありませんでした。静的デザインを描くのをやめ、直接インタラクティブな成果物を生成するアプローチへ切り替えたのです。HTMLが最適なメディアであった理由は、クリック可能で動き、レスポンシブに対応し、URL共有ですぐに検証できる「動的」な特性を備えていたからです。

彼が好む作品も同様の性質を持っています。インタラクティブなシミュレーションを備えたドキュメント、対話型のスライド、図表であり動画でもあるコンテンツ、デザイン稿であり自らエディターでもあるツールなどです。これらは従来のカテゴリには収まりません。従来のカテゴリは静的コンテンツのために定義されたものだからです。

10のテクニックもこの視点から見ると一貫性を持っています。要件の整理、スタイルの確定、バリエーションの選定、手動での微調整といった意思決定は人間が担当し、大量生成と実行はAIに委ねます。「それがどうあるべきか」を人間が決定し、AIがそれを「活かす」役割を担うのです。

3つのフェーズがそれぞれの無駄を防ぎます。「着手前」は曖昧な指示、「案の作成時」は単一方向への固执、「仕上げ」は微調整のAI依存を防ぎます。②の「デザインシステム」は、ロゴやフォント、配色などのアセットを共通化し、作業を効率化する手法です。

スタイルの非指定は明確なデメリットをもたらします。『The New Yorker』（2026年6月24日、Kyle Chayka記）で報じられた典型的な特徴を左欄にまとめています。

「クリーム色を使うな」といった漠然とした否定指示は、単に別の固定カラーパレットに切り替わるだけであり、具体的なフォントやカラーの指定が必要です。