プロンプトを使う
制作要件を追加
以下に背景情報を追加してください。コピーまたはダウンロード時にプロンプトへ含まれます。
[PROJECT]と[AUDIENCE]向けに、選択可能なテキストと印刷用スタイルシートを備えた、編集可能なHTML/CSS構成を作成してください。ラスター形式のイラストは、個別のローカルアセットとして扱ってください。タスク：エディトリアル記事の表紙。
必須のコンテンツと構成
記事の中心的な対立を、タイトルを配置する余白を確保した独自の抑制されたビジュアルで表現します。
名称、日付、数値、主張、リンク先の情報源として[APPROVED_CONTENT]を使用してください。何かを代用する前に、不足している入力を列挙してください。デモが必要な場合、そのコンテンツが架空であることを明記してください。顧客のコメント、ランキング、パートナーロゴ、製品機能を捏造しないでください。
デザイン方針
[BRAND_RULES] と、プロジェクトですでに選択されているデザインシステムを使用してください。システムが指定されていない場合は、次の方向性から始めてください：クリーム、チャコール、オリーブグリーン。余白を贅沢に使った、非対称のエディトリアルな階層。書体、間隔、カラーの役割に一貫性を持たせてください。装飾要素よりもタスクを優先し、関連性のない汎用的なカードの寄せ集めは避けてください。
コンテンツの準備
記事の中心的な主張を読み取り、その主要な対立を特定します。正確な見出し、想定するトリミング範囲、ブランドまたは媒体の制約を提示してください。
レイアウトと動作
主張を支える視覚的メタファーを1つ選んでください。すべてのキーワードをイラストにコラージュするのではなく、タイトル用の余白を意図的に確保してください。
タスク固有の受け入れチェック
- すべてのキーワードをそのままコラージュすることは避け、メタファーを主題に関連させてください。
- 記事を読まずにカバーだけを見て、正しいテーマが伝わるか確認してください。
- 見出しの配置とサムネイルでの縮尺を検証し、装飾の複雑さで編集上のアイデアが埋もれないようにしてください。
実装とレビュー
テキストは編集可能な状態にしてください。セマンティックな構造、内容が明確なコントロール、視認できるキーボードフォーカス、適切な空・エラー状態を使用してください。狭いレイアウトと広いレイアウトの両方を確認します。モーションを減らす設定を尊重してください。既存のプロジェクトフレームワークと依存関係を維持し、スタックを無断で置き換えないでください。編集可能なファイルを返し、未完成の動作や未対応の入力について説明してください。追加機能を提案する前に、この具体的なタスクをレビューしてください。
正確な文言と必須クレジットは、編集可能なテキストとして保持してください。意図する寸法が不足している場合は確認してください。機能するQRコード、バーコード、署名、公式印章を捏造しないでください。
参考添付ファイルと再構築の目標
このプロンプトのダウンロードバンドルに含まれるreference.webpを、OpenDesign内でこのプロンプトと一緒に添付してください。構成と階層が似た編集可能な成果物を作成し、参考画像全体を完成インターフェースとして埋め込まないでください。架空のサンプルラベルと競合する場合は、承認済みのプロジェクトコンテンツとブランドルールを優先してください。画像がない、または読み取れない場合は、視覚的な忠実性を主張せず、画像の提供を依頼してください。
参考画像の構成とコンテンツ
添付のreference.webpを、エディトリアル記事カバーのビジュアルリファレンスとして使用してください。制作前に、上から下までの主要領域、各領域の相対的な幅と高さ、配置、間隔、タイポグラフィの階層、面の色、境界線、画像、反復要素を特定してください。汎用テンプレートに置き換えず、それらの関係性を維持してください。必須のタスク内容：記事の中心的な対立を、タイトルを置く余地のある独創的で抑制の効いたビジュアルに変換してください。画像を編集可能な要素に変換する際は、次のタスク固有のレイアウト指針に従ってください。主張を支える視覚的メタファーを1つ選びます。すべてのキーワードをイラストにコラージュするのではなく、タイトル用の余白を意図的に確保してください。
サンプルのプロジェクト需求に基づくビジュアル方針
クリーム、チャコール、オリーブグリーン。余白を贅沢に使った、非対称のエディトリアルな階層。
出力と編集可能性
完成したグラフィックを、編集可能なテキスト、図形、画像レイヤーとして再現してください。リファレンスは完成した構成であり、編集インターフェースではありません。リファレンスにないナビゲーション、フォーム、ダッシュボードウィジェットは追加しないでください。主張を支える視覚的メタファーを1つ選びます。すべてのキーワードをイラストにコラージュするのではなく、タイトル用の余白を意図的に確保してください。想定サイズを確認し、アートワークを調整する際もテキストの階層を維持してください。すべてのキーワードをそのままコラージュすることは避け、メタファーを主題に関連させてください。
ビジュアル比較と納品
- 同じ比率で成果物と添付画像を比較してください。装飾的な詳細を仕上げる前に、主要領域の配置、画像の相対サイズ、改行、余白、タイポグラフィの階層、コントラスト、アクティブ状態、コンテンツ密度を確認します。
- 次に、デスクトップ向けテキストを小さなラベルに無理に詰め込まず、狭いレイアウトをテストしてください。
- ロゴ、写真、アイコンは個別のアセットとして保持し、意味のあるラベルはすべて編集可能にしてください。利用できないフォントやアセット、および意図的に変更した点を列挙してください。動作するファイルに加え、実装した動作と未完了の連携について簡潔な説明を返してください。プロンプトだけでピクセル単位まで同一の結果を約束しないでください。
プロンプト＋画像をダウンロード
完全なプロンプトとフルサイズのリファレンス画像が含まれます。レイアウトの参考として、両方をOpenDesignに添付してください。
エディトリアル記事カバーのデザインプロンプトの書き方
実用的なエディトリアル記事カバーのデザインプロンプトでは、雰囲気だけでなく、主張、構成、読む順序を説明します。この例では、特大のセリフ体見出しに、円形の都市風景と暗い岩の前景を組み合わせています。以下の手順では、目に見えるこれらの判断を、独自の記事に応用できる指示へ変換します。
以下の3つの詳細画像は、同じAI生成リファレンスを切り抜いたものです。構成とタイポグラフィを説明するものであり、実際に動作するインターフェースのスクリーンショットではありません。
記事を軸に1つの視覚的メタファーを構築する
都市は一般的なスカイライン写真として表現されていません。大きな淡い円の中に置かれ、山並みとかすみによって輪郭が和らげられています。右側の岩には、見る人により近い位置に小さな人物が座っています。架空の見出し「A Quieter Progress」と組み合わせることで、都市の成長と、よりゆっくり内省的な視点との間にある対立が示唆されます。これは構成から導いた解釈であり、実際の記事には別のメタファーが必要な場合があります。
エディトリアル記事カバーのプロンプトは、記事の中心的な問いから始め、それを表す少数の視覚要素を指定してください。「思慮深く、エディトリアルらしくする」だけでは、主題、縮尺、要素同士の関係が決まりません。このリファレンスはより具体的で、遠くの都市、小さな人物、大きな岩、1つの円形フレームで構成されています。それぞれの相対的な大きさは、要素自体と同じくらい重要です。記事に登場するという理由だけで、時計、チャート、葉、その他のシンボルを追加しないでください。オブジェクトを増やすたびに、中心的なアイデアと競合します。記事が別の対立を扱っている場合は、この構成を維持する前にメタファーを置き換えてください。
プロンプトを活用
主張を支える視覚的メタファーを1つ選んでください。
自分向けにカスタマイズ
この記事では[CENTRAL_QUESTION]を考察します。[IDEA_A]と[IDEA_B]の間の対立を、1つの場面で表現してください。大きな円形領域の中に[DISTANT_SUBJECT]を配置し、右下の前景に[FOREGROUND_SUBJECT]を置きます。人物スケールのディテールは小さく保ち、背景は静かな印象にしてください。左側は承認済みの見出し用に確保します。主張の説明に不可欠でない限り、追加の象徴的なオブジェクトは避けてください。
見出しの階層と改行を指定する
タイトルは左半分の大部分を占めています。「A」は独立した行に置かれ、「Quieter」はオリーブ色、「Progress」は再びチャコール色です。コントラストの高いセリフ体の字形が構成を支え、その下の短い大文字の問いには、広い字間と大幅に小さい文字サイズが使われています。この階層により、第1、第2の読み順が明確になります。ただし、すべてのタイトルを無理に3行へ収めるためのテンプレートではありません。承認済みの見出しが長い場合は、異なる改行が必要となり、より広い横方向のスペースが必要になることもあります。
正確な見出し、補足文、掲載誌名をそれぞれ個別にモデルへ指定してください。そのうえで、それぞれの役割と相対的な大きさを説明します。「美しいタイポグラフィ」と指示するだけでは、どのテキストを最も目立たせるべきか伝わりません。編集可能なテキスト、大きなセリフ体の見出し、コンパクトなサンセリフ体の補足文、抑制の効いた強調色1色を指定してください。実際の文言を、想定するカバーサイズで確認します。細いセリフ体の線は小さなサムネイルでは見えなくなる場合があり、長い単語は画像と衝突する可能性があります。すべてのテキストを一律に縮小する前に、改行またはタイトル領域を調整してください。この画像内の架空の文言は構成のリファレンスであり、掲載用に承認されたコピーではありません。
プロンプトを活用
記事の中心的な対立を、タイトルを配置する余白を確保した独自の抑制されたビジュアルで表現します。
自分向けにカスタマイズ
正確な見出し[APPROVED_HEADLINE]を、左側の領域に編集可能なテキストとして配置してください。コントラストの高いセリフ体を使用し、行間は詰めながらも読みやすさを保ちます。語の意味に基づいて改行位置を選び、単語の途中では分割しないでください。アクセントカラーで強調するのは[KEY_PHRASE]だけにします。その下に[SUPPORTING_LINE]を、より小さく、字間を広く取ったサンセリフ体で配置してください。掲載誌名は視覚的に控えめにし、タイトルと円形イラストの間に明確な余白を設けてください。
色、レイヤー、最終クロップを説明する
暖かなクリーム色の領域が、最も大きな色面です。オリーブ色は、タイトル内の強調語と画像下の大きく弧を描く形に使われ、チャコール色は見出しと岩に安定感を与えています。前景の岩は円形の風景内に収まらず、その上に重なっています。この重なりによって、幾何学的なフレームとカバー下端がつながります。小さな掲載誌ラベルは余白付近に置かれていますが、見出しや主景とは競合しません。
色名は出発点にすぎません。それぞれの色に役割を割り当て、レイヤーの順序を説明してください。クリーム色のキャンバス、オリーブ色の補助図形、淡い円形の風景、暗い前景の岩、そして編集可能なタイポグラフィの順です。これは、曖昧なミニマリストスタイルを求めるよりも再現性があります。また、生成前に出力サイズとセーフエリアを指定してください。リファレンスは3:2の横長キャンバスです。正方形のソーシャル用クロップや縦長カバーでは、タイトルを切り落とす中央クロップではなく、レイアウトの再構成が必要です。サムネイルサイズでも、小さな余白ラベルが見えなくなることは許容しつつ、主要なシルエットとタイトルは判読できる状態を保ってください。
プロンプトを活用
クリーム、チャコール、オリーブグリーン。余白を贅沢に使った、非対称のエディトリアルな階層。
自分向けにカスタマイズ
[WIDTH] × [HEIGHT]のエディトリアル記事カバーを作成してください。キャンバスには暖かなクリーム色、主要な文字と前景にはチャコール色、強調する1語と1つの補助曲線には落ち着いたオリーブ色を使用します。岩が円形の風景の縁に重なるよう、円形の風景を前景画像の背後に配置してください。承認済みのすべてのコピーを[SAFE_MARGIN]内に収めます。正方形版または縦長版では、タイトルと画像を別レイヤーとして再構成してください。完成した横長カバーをクロップしたり、テキストを画像に統合したりしないでください。
エディトリアル記事カバーの仕上がりを確認する
同じアスペクト比で結果とリファレンスを比較し、その後、読者が実際に目にするサイズでも確認してください。表面的なディテールを磨く前に、記事の意味を見直します。この画像はビジュアルコンセプトです。納品ファイルでは、編集可能なテキスト、最終サイズ、アセットの利用許可を別途確認する必要があります。
- 意味：見出しを隠してください。残った場面だけで記事の中心的な対立が伝わりますか。それとも、記事にない主張を示唆していますか。
- 階層：小さなサムネイルで確認してください。メインタイトルとシルエットをすぐに識別できますか。すべてを大きくする前に、競合するディテールを削除してください。
- 構成：タイトル専用の空間があり、円が認識でき、前景の重なりが意図的に見えることを確認してください。個別の装飾ディテールではなく、カバー全体を比較します。
- コピーと納品：正確なタイトル、句読点、掲載誌クレジットを確認してください。編集可能な文字、個別の画像レイヤー、指定サイズ、代替クロップを確認します。
フォローアッププロンプト
最初の結果を得た後に使用してください。このタスクで最も重要な部分に修正範囲を絞ります。
現在のエディトリアル記事カバーを改善してください。記事を読まずにカバーだけを見て、正しいテーマが伝わるか確認します。見出しの配置とサムネイルでの縮尺を検証し、装飾の複雑さで編集上のアイデアが埋もれないようにしてください。承認済みの内容とビジュアル方針は維持し、これらの問題を解決するために必要な部分だけを変更してください。
