リファレンス画像の使い方

リファレンス画像の使い方

Claude Designに参考画像をアップロードすることで、「このデザインに似た雰囲気で」という指示が可能になります。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

使えるリファレンスの種類

• スクリーンショット（既存のUIや競合サービス）
• ムードボード（雰囲気の参考）
• 手書きのラフスケッチ
• 既存のデザインファイルのエクスポート画像

リファレンスの渡し方

画像をアップロードしながら指示します。

（画像を添付して）
このデザインと同じレイアウト構成で、
色だけブランドカラー #7C3AED に変えてください。

活用シーン

競合分析から改善案を出す

（競合サービスのスクリーンショット）
このサービスのUIを参考に、より使いやすい改善案を作ってください。
特に検索機能まわりを強化したいです。

既存デザインの延長を作る

（現在のサイトのスクリーンショット）
このデザインに合わせた新しい「料金プラン」ページを作ってください。
既存のスタイルを踏襲してください。

スケッチをデザインに変換する

（手書きラフスケッチの写真）
このラフスケッチを元に、実際のUIデザインに仕上げてください。
モダンでクリーンなスタイルで。