デザイン＆AI ワークフロー
Claude Designを使いはじめてわかった３つの注意点
Entifyデザインチーム著
·
所要時間 5分
·
5/12/2026
Claude Designは2026年5月現在でまだベータ版ですが、私のような従来の手で作るスタイルのプロダクトデザイナーを含め、Anthropicの最新AIツールが実際どのくらいデザインの現場で使えるか、気になっている人は多いのではないでしょうか。この記事は、私のはじめてのハンズオンで、何が上手くいって、何が上手くいかなかったのか、そしてその学びから、次からはどう使うかを考察していきます。
3つのフェーズで構築するLull
私は現在、AIツールを使用して、アンビエントミュージックアプリ「Lull」を開発しています。
1. コンセプトの検証 — 迅速なプロトタイプ作成とサウンドのイテレーションにClaude Chatを使用
2. 体験のブラッシュアップ — ビジュアルおよびインタラクションデザインにClaude Designを使用
3. プロダクトの構築 — 本番環境レベルの開発にClaude Codeを使用
Claude Designに移行する前に、Claude ChatはFigmaで以下の下準備をすることも推奨していました。Figma デザインファイル
- カラープロパティ（トークン）、スペーシングシステム、タイポグラフィ、コンポーネントの状態を定義する
- FigmaネイティブのVariablesエクスポートやToken Studioなどのプラグインを使用してデザインシステムのトークンをエクスポートする
- Claude DesignはFigma連携を介してFigmaファイルを直接読み取り、デザインをコードに変換できる
デザインシステムを準備し、トークンをエクスポートし、Figmaファイルの用意も完了しました。にもかかわらず、Claude Designのオンボーディングは私を予期せぬ方向へと進んでいったのです。
失敗１：Figma MCPがまだサポートされていなかった
デザインシステムとAIコーディングのギャップを埋める中で興味深い課題に直面しました。
どれほど完璧で詳細なデザインシステムを持っていても、Claude Designを使用している場合、現時点ではFigmaのモックアップをネイティブに精査するできません。JSONファイル経由でトークン変数を読み込ませたとしても、Claude Designは各カラーやスペーシングの変数がどこに属するのかを自動的に理解できません。PNG画像をアップロードするのも十分ではありません。AIの画像認識精度は、厳格なトークン実装にはまだ不十分だからです。
現在の回避策：
- FigmaのVariablesをJSONに出力しClaude Chatに入力する。
- その情報とデザインモックアップを使って
DESIGN.mdハンドオフファイルを生成する。 - 構造化された
DESIGN.mdをClaude Codeに渡して実装する。
この問題があるため、私は現在、ビジュアルデザインの工程をClaude Designだけに依存できないと考えています。とはいえ、Figma MCPがサポートされれば、インタラクションやモーションデザインのブラッシュアップを検証するためにテストするつもりです。
FigmaのトークンをAIデベロッパーツールに直接渡す信頼性の高いパイプラインを構築した方は他にいますか？
失敗２：SonnetやOpusではなくHaikuを使用し、1回のプロンプトで利用上限を使い果たした。
これが文字通り最も高くついた失敗でした。Claude DesignはデフォルトでHaikuに設定されており、軽量で効率的な選択肢のように思えます。しかし直感に反して、Haikuはより優秀なモデルよりも大幅に多くの週間AI割り当て枠を消費してしまいました。たった1回のプロンプトで、私の1週間分のアロケーション（使用枠）全体を消費するのに十分だったのです。
代わりに推奨するアプローチ：まずは Sonnet から始めてください。初期段階のデザイン探求においてOpusよりも高速で集中して作業でき、使用枠をより効率的に消費します。Opus は、複雑なコンポーネントロジック、エッジケースの処理、最終的な仕上げなど、最も深い推論が必要な瞬間のためにとっておきましょう。
得られた学び： デフォルトのモデルが最も経済的な選択肢であると決めつけないこと。開始する前に選択されているモデルを確認し、意図を持って選択してください。
失敗3：Claude Designに「やってはいけないこと」を伝え忘れた。
Claude Designのオンボーディングでは、プロジェクトの基盤を確立するために多くの質問が出されます。意図は良いのですが、実際には質問が曖昧に感じられ、簡単に読み飛ばしてしまいがちです。私はClaude Designに探索してほしくない方向性を一切指定することなく、それらに素早く答えて次に進んでしまいました、。
その結果、頼んでもいないデザインイテレーションが大量に生成されてしまいました。Claude Designは自律的に広範囲のデザインオプションを生成し、そのそれぞれがAIの使用枠を消費したものの、その段階で私が必要としていたものは一つもありませんでした。
修正策：
オンボーディングを単なるフォーム入力ではなく、「指示（ブリーフィング）」として扱ってください。目標と同じくらい制約についても具体的に記述します。Claude Designに対して明確に伝えましょう：「これらの方向性は探求しないこと」「複数のレイアウト案を生成しないこと」「このコンポーネントのイテレーションはまだ行わないこと」。これらを DESIGN.md に記載します。事前に境界線を明確に定義すればするほど、出力はより焦点を絞った、経済的なものになります。
次からどう工夫するか。
これら3つの過ちが重なった結果、私が必要としていた成果物を得られないまま、1セッションだけで1週間分のAI使用枠を消費してしまいました。リセットは週単位で行われるため、損失は金銭的なものだけでなく「時間」でもありました。
初めてClaude Designを使用することを計画している場合、私が事前に持っておきたかったチェックリストがこちらです。
- ✅ デフォルトに頼らず、手動でSonnetまたはOpusを選択する
- ✅ オンボーディングを始める前に、やってほしくないことの明確なリストを作成する
- ✅ 最初のセッションは幅の広い検証ではなく、焦点を絞った限定的な検証として扱う
Claude Designは本当に優秀なツールです。しかし他の強力なツールと同様、出力の質はブリーフ（指示）の質に左右されます。まずセットアップを正しく行えば、その努力に応えてくれるはずです。
この記事は、Claude Chat、Claude Design、Claude Codeで構築されたアンビエントミュージックアプリ「Lull」のデザインと開発をドキュメント化する連載シリーズの一部です。