デザイナーのための迅速なエンジニアリング：曖昧な指示から実用的なAI出力へ

AIの出力がストックフォトのようであれば、あなたの指示は単なる願望に聞こえます。

これが、ほとんどのデザイナーがAIツールの使い方を教わってきた方法の根本的な問題点です。「フィンテックスタートアップのヒーローイメージを作ってください」というのは指示ではありません。それは単なる雰囲気です。指示とは、時給400ドルで鋭い質問をしてくるフリーランスのイラストレーターにブリーフィングをする際に使う言葉です。

デザイナーは既にこの方法を知っています。学生時代にブリーフィングを書いていましたし、仕事でも毎週ブリーフィングを書いています。明確さ、参考資料、制約が文章でどのように表現されるかを知っているはずです。AIの指示は、対象者が異なるだけで、同じスキルです。

指示とは、散文で表現されたデザインブリーフ

プロンプトを魔法の言葉のように考えるのはやめましょう。クリエイティブブリーフの最初の段落と、最後に記載される最終仕様だと考えてください。

優れたブリーフは、制作者が誰なのか、何のために制作するのか、ルールは何か、参考資料は何か、そして成果物はどのようなものになるのかを明確に伝えます。これらのいずれかを見逃すと、技術的には的を射ているものの、感情的に的外れな作品になってしまいます。例えば、ジュニアデザイナーに「コーヒーショップのロゴをデザインしてください」と頼んだら、コーヒー豆12粒しか返ってきません。しかし、「フリーランサー向けのサードウェーブコーヒーショップのロゴをデザインしてください。ワードマーク、幾何学的なサンセリフ体、ピクトグラムなし、ブルーボトルコーヒーの抑制されたデザインにインスパイアされたもの」と頼めば、それなりの成果が得られます。

プロンプトも同様です。AIモデルが賢いからといって曖昧にしてしまうのは、AI支援デザインにおいて最も大きなミスです。具体的に指示することは、理屈っぽいことではありません。それが全てなのです。

良いプロンプトはデザインブリーフのようです。悪いプロンプトは単なる願望のようです。

使えるプロンプトの5つの要素

納品可能なデザイン成果物を生み出すプロンプトには、5つの要素があります。これらを暗記したり、テンプレートにまとめたり、付箋に印刷したりできます。その要素とは：

1. 役割 AIは誰になりすましているのか？ （「あなたはニューヨーカー誌で10年の経験を持つベテランの編集イラストレーターです。」）
2. コンテキスト この作品は何のために、誰のために作られたのですか？（「この画像は、デザイナーがAIツールの使い方を学ぶブログ記事のメインビジュアルです。読者は現役のデザイナー、アーリーアダプター、懐疑的だが好奇心旺盛な人たちです。」）
3. 制約 ルールは何ですか？（「編集用であり、企業用ではありません。コンピューターは写さないでください。ストックフォトは使用しないでください。フラットカラー、力強いシルエット、高コントラスト、低ディテール。」）
4. 参考資料 どのような見た目や雰囲気にすべきですか？（「ソール・スタインバーグ風の線画と、1960年代のスイス観光ポスターの抑制された雰囲気を融合させたもの。ブランドカラーパレット：背景色#080404、アクセントカラー#ff6434。」）
5. 出力仕様 納品物の仕様は何ですか？ ("16:9 アスペクト比、1200x630、PNG形式、画像内にテキストなし。")

役割を指定しないと、平凡な出力が得られます。コンテキストを指定しないと、誰にも向けられていない出力が得られます。制約を指定しないと、モデルがあなたの意図を推測した結果、通常はストックフォトのような出力が得られます。参照を指定しないと、出力は学習データで支配的な要素に偏ってしまいます。出力仕様を指定しないと、間違ったサイズの出力が得られます。

| プロンプト部分 | 機能 | 省略した場合の結果 |

|-------------|--------------|-----------------------------|

| 役割 | 好みと専門性レベルを設定します | 一般的な出力 |

| コンテキスト | モデルに作業の目的を伝えます | 間違った問題を解決します |

| 制約 | 避けるべきものを定義します | 嫌いな決まり文句が出力されます |

| 参照 | 視覚的またはトーンの方向性を定めます | 学習データの平均値に偏ってしまいます |

| 出力仕様 | フォーマットと納品物を制御します |サイズもフォーマットも間違っています |

作業例：ヒーロービジュアル用の画像生成

デザイナーなら誰もが一度は入力したことがあるであろう、漠然とした表現：

「デザイナーのためのプロンプトエンジニアリングに関するブログ記事のヒーローイメージを作成してください。」

結果として得られるもの：ノートパソコンに向かうデザイナー、光る脳、鉛筆を持ったロボット、あるいはその3つの組み合わせ。ありきたりで、つまらない。

構造化された表現：

あなたは『ニューヨーカー』と『Wired』で10年間活躍してきたエディトリアルイラストレーターです。「デザイナーのためのプロンプトエンジニアリング」というタイトルのブログ記事のヒーローイメージを作成してください。読者は、AIの誇大広告には懐疑的だが、ツールを真剣に活用しようとしている現役デザイナーです。

構成：フレーム左側にデザイナーのペーパーブリーフ（手書きのスケッチと注釈付き）を配置し、右側にクリーンなテキストのプロンプトへと溶け込むように配置します。クラフトブリーフと構造化されたプロンプトの間の変換を暗示しています。

スタイル：エディトリアル、フラットカラー、力強いシルエット、高コントラスト、低ディテール。紙の質感は許容範囲。コンピューター、ロボット、脳、光る球体は使用不可。

参考資料：ブリーフにはソール・スタインバーグの線画、プロンプト面にはスイス観光ポスターの抑制されたスタイル。ブランドカラーパレット：背景色 #080404、アクセントカラー #ff6434、ニュートラルカラー #d0d3d8。

出力：1200x630ピクセル、画像内にテキストなし。

納品物：実際に納品可能なヒーローイメージ（4回も再生成する必要はありません）。

違いは才能ではなく、構造です。

作業例：v0またはLovableのUIプロトタイプ

曖昧な依頼：

「デザインエージェンシーのランディングページを作成してください。」

納品物：Tailwind風テンプレート、標準グラデーション、3枚のフィーチャーカード、標準ヒーローイメージ、そしてインターネット上の他のエージェンシーと同じようなコピー。

構成：

Brainy（InstagramとThreadsを合わせて200万人以上のフォロワーを持つデザインスタジオ）のランディングページを作成してください。ターゲット層：ブランディング、ウェブ、デザインサービスを必要とするシリーズA～シリーズCのSaaS企業の創業者。彼らはあらゆる代理店サイトを見ており、テンプレート化されたサイトはすぐに離脱します。

レイアウト：1列構成のヒーローセクションに、太字の見出しとCTAボタンを1つ配置。続いて、クライアントロゴの横スクロールストリップ、3部構成のサービス説明（ブランディング、ウェブ、コンテンツ）、bentoグリッドパターン、3つの引用文を掲載した顧客の声セクション、そしてシンプルな連絡先フッターを配置します。

制約：グラデーション、ストック画像、汎用的なヒーローイラストは使用不可。ダークモードのみ、背景色：#080404、アクセントカラー：#ff6434。タイポグラフィ：すべてにサンセリフ体を使用。見出しは太字、本文は細字。すべて4pxのスペーシングスケールを使用。

＞＞参考：Linearのスペーシング制限。Vercelのタイポグラフィの太さ。Appleのベントグリッドセクションパターン。いずれもクローンではありません。

＞＞出力：レスポンシブ、モバイルファースト、SHADCNコンポーネント。

同じツール。全く異なる出力。

作業例：コンポーネントを作成するコーディングエージェント

曖昧な例：

＞「ボタンコンポーネントを作成してください。」

結果：ボタン。バリエーションは1つ。アクセシビリティなし。フォーカス状態なし。指定していない色。

構造化された例：

＞あなたはシニアデザインシステムエンジニアです。当社のデザインシステムでボタンコンポーネントを作成してください。

コンテキスト：このボタンは、12のマーケティングページに散在する既存のアドホックなボタン スタイルを置き換えるものです。プライマリ、セカンダリ、ゴーストのバリアント、3つのサイズ（sm、md、lg）、ローディング、無効、フォーカス状態をサポートする必要があります。

制約：tokens.css の既存のトークンを使用してください（新しい色は追加しないでください）。フォーカス リングは 2px オフセットの --color-accent にする必要があります。間隔には px を使用せず、常に --space トークンを使用してください。フォントは常に --font-sans で、サイズに応じて --text-sm または --text-base を使用します。ローディング状態ではスピナーが表示され、クリックが無効になります。

参照：アクセシビリティ パターンについては Radix UI のプリミティブを参照してください。ファイル構造の参照として、既存の Card コンポーネント（/components/Card.tsx）を参照してください。

出力：TypeScript、Tailwind、すべてのバリアントと状態をテストする Storybook ストーリー。無効、ローディング、フォーカス状態の動作を網羅するテスト。

コーディングエージェントにこれを渡せば、本物のボタンが生成されます。「ボタンを作って」とだけ渡せば、手作業で書き直すことになるものが出来上がります。

すべてのデザイナーが盗むべき制約ライブラリ

制約は秘密兵器です。同時に、デザイナーが最も活用していない部分でもあります。このライブラリをコピーし、関連する行をプロンプトに貼り付け、ブランドに合わせて調整してください。

| ドメイン | 含めるべき制約 |

|--------|------------------------|

| イラスト | フラットカラー、強いシルエット、高コントラスト、低ディテール、画像にテキストなし、明示的に要求されない限りコンピューター/電話/ロボット/脳は使用しない、企業向けではなく編集用 |

| 写真スタイル生成 | ストックフォト風ではない、光沢のある照明ではない、要求されない限り3Dレンダリングではない、自然な構図、現実世界の欠点は歓迎 |

| UI生成 | 既存のコンポーネントを使用する、トークン以外の新しい色は使用しない、モバイルファースト、アクセシビリティ必須（フォーカス状態、コントラスト比）、ブランドが要求しない限りグラデーションは使用しない |

|タイポグラフィ | UIにはサンセリフ体1種類のみ使用。セリフ体はブランド指定がある場合のみ使用。1つのフォント構成で3種類以上のウェイトを使用せず、両端揃えは使用しない。4単語を超える大文字のテキストは使用しない。

| 色 | 16進数ではなくトークンを使用。純粋な黒地に白文字、純粋な緑地に純粋な赤文字は使用しない。本文のコントラストは最低4.5:1とする。

| レイアウト | 4pxまたは8pxのスペーシングスケールを使用。本文は中央揃え、両端揃えは使用しない。1行あたりの文字数は最大75文字。構成上必要な場合を除き、画像は左揃えとする。

| コード | TypeScript を厳格に適用。エクスポートはデフォルトではなく名前付きを使用。許可なく新たな依存関係を追加しない。すべての新規コンポーネントについてテストカバレッジを実施。

これらをそのまま貼り付けられるブロックとして使用してください。最初は戸惑うかもしれませんが、すぐに出力品質が2倍になることに気づくでしょう。

AIワークフローの詳細な解説をご覧になりたい場合は、Brainy 論文をご覧ください。ランダムなChatGPT履歴ではなく、チームのブランドに合わせた本格的なプロンプトライブラリが必要な場合は、Brainy を雇用するをご覧ください。

最初からやり直さずに反復する方法

プロンプトエンジニアリングにおける最悪の習慣は、出力がうまくいかないときにプロンプ​​ト全体を削除して書き直すことです。10回中9回は、プロンプトは惜しいところまで来ていました。たった1つの変数が間違っていただけです。

慎重に反復しましょう。一度に1つの項目だけを変更します。

1. プロンプトを1回実行します。 何が間違っているかを記録します。

2. 5つの要素のうち、どれが失敗しているかを特定します。 出力が汎用的すぎる場合は、参照が弱いです。間違った要素が含まれている場合は、制約に「Xは不可」という条件が欠けています。対象とするオーディエンスが間違っている場合は、コンテキストが不十分です。

3. その部分だけを編集してください。 全体を書き直さないでください。

4. もう一度実行してください。 最初の出力と比較してください。良くなりましたか？悪くなりましたか？それとも同じですか？

5. 繰り返してください。 通常は3～5回繰り返せばうまくいきます。

関連情報：コンテキスト腐敗は実在します。同じチャットで繰り返し作業しているのに、出力が良くなるどころか悪くなる場合は、セッションが汚染されています。新しいチャットを開き、現在の最良のプロンプトを貼り付けて、作業を続けてください。

ゴミを生成する3つの間違い

毎週のように目にする3つのパターンがあり、どれも出力品質を著しく低下させます。

間違い1：「もっと良くしてください。」 モデルはあなたにとって「もっと良くする」が何を意味するのかを理解していません。「もっと良くする」とは、モデルが考える「もっと良くする」の平均値、つまり平均への回帰を意味します。具体的に指示してください。「色のコントラストを強くしてください。」「構図をもっと非対称にしてください。」「背景のディテールを半分にしてください。」

間違い2：一度に5つの選択肢を求めること。 良い選択肢が1つではなく、平凡な選択肢が5つも得られてしまいます。まずは1つだけ求め、繰り返し検討し、最初に良い選択肢を受け入れましょう。

間違い3：参考資料を提供しないこと。 参考資料はモデルの好みを決定づける重要な要素です。参考資料がないと、学習データの平均値しか得られません。厳選された3つの参考資料があれば、求めていたものに近い結果が得られます。

よくある質問

プロンプトエンジニアリングは本当に必要なスキルですか、それとも誇大広告ですか？

プロンプトエンジニアリングは確かに必要なスキルであり、優れたクリエイティブブリーフを作成するスキルと同じです。フリーランサーにブリーフを書けるなら、モデルにプロンプ​​トを書くこともできます。誇大広告では「エンジニアリング」と呼ばれていますが、実際には「明確な指示」と呼ぶべきものです。

どのツールがプロンプト処理に最も優れていますか？

画像の場合、詳細なテキストプロンプトにはMidjourneyとGemini Proが最適です。 UIに関しては、v0とLovableは構造化された制約によく反応します。コーディングに関しては、Claude CodeとCursorが最も強力で、特にCLAUDE.mdが適切に記述されている場合はなおさらです。ツールよりもプロンプトの質の方が重要です。

プロンプトライブラリを使うべきでしょうか？

はい。作成しましょう。ユースケースごとに整理してください。プロンプトがうまく機能したら保存し、失敗した場合はその理由を記録してください。3か月後には、どんなツールのサブスクリプションよりも価値のあるライブラリができあがるでしょう。

プロンプトの長さはどれくらいが適切でしょうか？

5つの要素を網羅できる長さで、かつ各文が意味を持つ長さです。私のプロンプトのほとんどは100～300語です。これより短いと仕様が不十分になり、長すぎると重複している可能性が高くなります。

temperatureやtop_pのような技術的なプロンプトのテクニックを学ぶ必要はありますか？

ほとんどのデザイン作業では必要ありません。それらはチャットインターフェースではなく、API呼び出しで使用されます。まずは5つの要素を正しく理解しましょう。 API呼び出しを行う段階になってから、パラメータについて考えれば良いでしょう。

意図を込めた記述を心がけましょう

曖昧なプロンプトは、無駄な時間を費やすだけの10分間の回り道です。構造化されたプロンプトは、10分間の投資で成果物を生み出すことができます。

役割、コンテキスト、制約、参照、そして出力仕様を記述しましょう。変数は一つずつ検証し、うまく機能するものは保存してください。

あなたは既にブリーフィングの書き方を知っています。モデルは、そのブリーフィングの相手側で活躍するジュニアエンジニアです。

意図を込めた記述を心がけましょう。