生産性を10倍にするプロンプト

生産性を10倍にするプロンプト

Claude Designを使いこなすための、実践的なテクニックをまとめます。

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

テクニック1: スタイルガイドを先に宣言する

デザインの最初に「このプロジェクトのルール」を宣言すると、以降の指示が楽になります。

このプロジェクトのデザインルール：
- プライマリカラー: #7C3AED
- フォント: ゴシック系、見出しは太め
- 角丸: 8px
- トーン: プロフェッショナルかつ親しみやすい
以降のデザインは全てこのルールに従ってください。

テクニック2: 参照URLを活用する

「〇〇のようなデザイン」と言うより、参照できるサービス名を挙げると精度が上がります。

Linear（linear.app）のような、ダークでシャープなUIで
Notion風の、余白を多く使ったミニマルなデザインで

テクニック3: まず骨格、次に肉付け

最初からすべてを詰め込まず、段階的に作ります。

# ステップ1: ワイヤーフレームレベルで
「3カラムのダッシュボードレイアウトだけ作って、中身はプレースホルダーで」

# ステップ2: コンテンツを入れる
「左カラムにナビゲーション、中央に売上グラフ、右に通知リストを入れて」

# ステップ3: スタイルを整える
「全体をダーク系にして、アクセントカラーを紫に」

※ワイヤーフレーム: UIの骨格を示す設計図。デザインの初期段階でよく使われる。

テクニック4: 複数バリエーションを同時生成

迷ったときはバリエーションを出して比較します。

同じLPを2バリエーション作って：
A: テキスト中心のシリアス系
B: イラスト多めのフレンドリー系

※LP: ランディングページの略。特定のCTAに向けて設計されたWebページ。

テクニック5: Claude Codeとの連携を意識したプロンプト

実装前提のデザインを作るときは、開発のしやすさを意識した指示を出します。

Next.js + Tailwind CSSで実装しやすいコンポーネント構成で
シンプルなHTMLとCSSで実装できるレイアウトで

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。