creative-direction について
creative-direction は、製品やマーケティングサイトの画像を作る人向けのビジュアル制作スキルです。プロンプトのテンプレートやモデル選びの指針を示し、具体性とスタイルの統一を助けます。
主な機能
- 01素材別の画像プロンプト
- 02画像モデル選びの指針
- 03スタイル統一のフレームワーク
- 04ありきたりな表現を避ける方法
- 05質感とリアリティを加えるプロンプト技法
活用シーン
- 01ランディングページのヒーロー画像の企画
- 02統一感のある機能イラストの制作
- 03ビジュアル素材に使うモデルの選定
- 04ありきたりな生成画像の改善
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ dylanfeltus/ skills --skill creative-directionインストール後、Claude Code で/creative-directionを入力して読み込まれたか確認します。
同梱ファイルREADME.md
詳細
クリエイティブディレクション
ビジュアルアセットを生成するための画像プロンプトテンプレート、モデル選択のガイダンス、ありきたりな表現を避けるパターンを紹介します。ヒーロー画像、機能のイラスト、推薦コメント用の写真、OG 画像などを扱います。
使用するタイミング
- ランディングページ、アプリ、マーケティングサイト用の画像が必要な場合
- 「ヒーロー画像」「機能のイラスト」「OG 画像」を求めている場合
- ストックフォトのように見えない、AI 生成ビジュアルを求めている場合
- 画像生成モデルを選んでいる場合
- 現在の AI 画像がありきたりで、方向性を定める必要がある場合
基本理念
- ありきたりな表現は敵です。「ノートパソコンを使う人」では、印象に残らない画像になります。具体性が記憶に残る画像を生み出します。
- すべての画像には役割があります。 ヒーロー画像=感情+憧れ。機能画像=明快さ。推薦コメント用画像=信頼。プロンプトを作る前に役割を把握しましょう。
- モデルが重要です。 モデルごとに得意分野が異なります。適切なツールを選びましょう。
- 一貫性は品質に勝ります。 統一感のある 7/10 の画像セットは、統一感のない 10/10 の画像 1 枚と 6 枚の画像より優れています。
モデル選択ガイド
各モデルの使いどころ
| モデル | 得意分野 | 弱点 | コスト |
|---|---|---|---|
| GPT-4o / DALL-E 3 | 画像内のテキスト、図、インフォグラフィック、正確な構図 | 「イラスト風」に感じられることがあり、フォトリアリズムはやや劣る | API クレジット |
| Gemini Imagen | フォトリアリズム、自然な風景、製品写真 | 構図の制御が難しく、テキスト描画の品質にばらつきがある | API クレジット |
| Midjourney | 芸術性、雰囲気、映画のようなショット、ブランド画像 | API なし(Discord 専用)、細部の指定に一貫性がない | サブスクリプション |
| Flux (via Replicate) | フォトリアリズム、顔、柔軟なスタイル | Replicate アカウントが必要 | 画像ごと |
| Unsplash / Pexels | 実際の写真、AI らしさが強すぎる場合 | 素材の種類に限りがあり、ポーズがありきたり | 無料 |
判断フロー
Need text in the image? → DALL-E 3 / GPT-4o
Need photorealistic people? → Flux or Gemini
Need artistic/cinematic mood? → Midjourney
Need a specific real-world scene? → Unsplash/Pexels
Need consistency across many images? → Pick ONE model, same style prompt prefix
Need diagrams/UI mockups? → DALL-E 3 / GPT-4o
アセットの種類別プロンプトテンプレート
ヒーロー画像
役割: 感情に訴える第一印象を作ります。製品の雰囲気を 2 秒で伝えます。
テンプレート:
[Art style], [subject doing something specific and aspirational],
[environment with mood-setting details], [lighting description],
[color palette constraint], [composition note]
例 — SaaS 製品:
Cinematic photograph, a product designer reviewing a clean dashboard
on a large monitor in a sunlit corner office, morning golden hour
light casting long shadows, muted blue and warm cream color palette,
shot from over the shoulder with shallow depth of field, 35mm lens feel
ありきたりな表現を避けるパターン:
- ❌「コンピューターを使う人」→ ✅「超ワイドモニターで分析データを確認するデザイナー。机には付箋が散らばっている」
- ❌「楽しそうに働くチーム」→ ✅「ホワイトボードを囲む 3 人のエンジニア。そのうち 1 人はマーカーを手に笑いかけており、午後遅くの光が差し込んでいる」
- ❌「抽象的なテクノロジー」→ ✅「テーブルの上で実物のカードを並べる手元のクローズアップ。各カードには小さなワイヤーフレームのスケッチが描かれている」
機能/製品のイラスト
役割: 機能の内容を説明します。美しさより明快さを優先します。
テンプレート:
[Clean/minimal style], [the feature's core concept as a visual metaphor],
[simple background], [brand colors], [no text unless needed]
例 — 分析機能:
Minimal 3D illustration, a translucent glass cube containing floating
data points that form a rising trend line, soft gradient background
from white to light blue, subtle shadows, isometric perspective
ヒント:
- 文字どおりのスクリーンショットではなく、視覚的なメタファーを使います
- 背景はシンプルにします。イラストはどのページセクションでも使える必要があります
- すべての機能イラストでスタイルを統一します(同じ描画スタイル、同じ視点、同じ色使い)
推薦コメント/ソーシャルプルーフ
役割: 信頼を築きます。実在の人々をリアルに感じさせます。
方法: 可能であれば、許可を得たうえで実際の写真を使います。生成する場合:
Professional headshot, [specific person description with age/style details],
[neutral or office background], [natural lighting], [warm but professional mood],
shot at eye level, slight smile, [avoid uncanny valley — add imperfections]
ヒント:
- 多様性が重要です。年齢、民族、スタイルに変化をつけます
- 「企業風のヘッドショット」は避けます。少し自然な雰囲気のほうが信頼感につながります
- ⚠️ 推薦コメントに AI 生成の顔を使うのは、倫理的に疑問があります。実際の写真を優先してください。生成する場合は、そのことを明示してください。
Open Graph(OG)/ソーシャルカード
役割: フィードでクリックを促します。小さいサイズでも機能する必要があります。
テンプレート:
[Bold, high contrast], [simple central element],
[large readable text area (left or center)],
[brand color background or gradient], [16:9 aspect ratio],
minimal detail — this will be viewed at 600×315px
主な制約:
- サムネイルサイズでも読みやすくする必要があります
- テキストは別途生成して合成します(AI によるテキスト描画は信頼性に欠けます)
- 背景とテキスト領域のコントラストを高くします
- 複雑なシーンよりシンプルな形状を優先します
アイコン/ロゴのコンセプト
役割: 小さなスペースでブランドアイデンティティを伝えます。
Minimal vector icon, [object/symbol], [single or two-color],
clean lines, works at 32px, [style: geometric/rounded/sharp],
white background, no gradients, no shadows
ヒント:
- コンセプトを生成し、製品版は Figma/SVG で作り直します
- AI 生成ロゴは最終成果物ではなく、出発点です
- 小さいサイズで確認します。32px で判別できない場合は、シンプルにします
背景/テクスチャ
役割: コンテンツと競合せずに奥行きを加えます。
Abstract [texture type], [color palette], subtle variation,
tileable/seamless, low contrast, [usage: dark background with light text / light background with dark text]
テクスチャの種類: グラデーションメッシュ、ノイズグレイン、幾何学模様、有機的な形状、地形図の等高線、ドットグリッド
スタイルの一貫性を保つフレームワーク
プロジェクト用に複数の画像を生成する場合は、スタイルプレフィックスを作成し、すべてのプロンプトの先頭に追加します。
STYLE PREFIX: "Minimal 3D illustration, soft matte materials, isometric perspective,
pastel color palette with [brand blue] accents, subtle ambient occlusion shadows,
white background —"
各プロンプトは次のようになります。
[STYLE PREFIX] a shield icon representing security features
[STYLE PREFIX] a speedometer showing performance optimization
[STYLE PREFIX] a connected graph showing team collaboration
一貫性チェックリスト
- アートスタイル(3D、フラット、写真風など)が同じ
- カラーパレット(またはその一部)が同じ
- パース(アイソメトリック、正面向きなど)が同じ
- 光の方向が同じ
- ディテールや複雑さのレベルが同じ
- 背景の処理が同じ
ありきたりな表現を避けるためのガイド
具体性の段階
段階が上がるごとに、印象に残りやすくなります。
- 一般的: 「ワークスペース」❌
- 具体的: 「ペンタブレットのあるデザイナーのワークスペース」⬆️
- 雰囲気がある: 「ゴールデンアワーのデザイナーのワークスペース。Wacom のタブレットに暖かな光が当たっている」⬆️
- 物語性がある: 「ゴールデンアワーのデザイナーのワークスペース。タブレットには描きかけのイラストがあり、机には口紅の跡が付いたコーヒーカップ、モニターにはヘッドフォンが掛かっている」✅
常にレベル3~4を目指してください。
避けるべき、AI 画像でよく使われるお決まりの表現
| ❌ ありきたりな表現 | ✅ 代替案 |
|---|---|
| 光るオーブ/粒子 | 実物の質感、天然素材 |
| 浮かぶホログラム UI | 実際のデバイス、紙のプロトタイプ |
| 何でも紫/青のグラデーション | アースカラー、ブランドに合わせたカラーパレット |
| アイソメトリックな街並み | 単一のオブジェクトに焦点を当てた構図 |
| 完全な対称性 | 意図的な非対称、三分割法 |
| 彩度が極端に高い色 | アクセントカラーを1色使った、落ち着いた低彩度のパレット |
| 「AI アート風」の光沢 | マットな素材、フィルムグレイン、不完全さ |
AI 画像にリアリティを加える
プロンプトに次の要素を含めます。
- フィルムグレイン: 「わずかなフィルムグレイン、35mm フィルムで撮影」
- 不完全さ: 「端が少しすり減っている」、「机にコーヒーの染みがある」
- 自然光: 「明るいスタジオ照明」ではなく「曇り空の拡散光」
- 被写界深度: ピントを合わせるには「浅い被写界深度、f/1.8」
- テクスチャ: 「マット仕上げ」、「リネンの質感」、「コンクリートの表面」
出力形式
クリエイティブの方向性を示す際は、次の形式で出力します。
### Creative Direction: [Asset Type]
**Purpose:** What this image needs to communicate
**Model recommendation:** [Model] — [Why]
**Style:** [Art direction notes]
**Prompt:**
[Full prompt ready to paste]
**Variations to try:**
1. [Alternative angle/mood]
2. [Alternative style]
**Post-processing notes:**
- [Any needed adjustments — cropping, overlay, text addition]
例
例1:「プロジェクト管理 SaaS のヒーロー画像が必要です」
目的: 複雑なプロジェクトを明確に把握し、管理できることを伝えます モデル: Midjourney(映画のような品質)、または DALL-E 3(テキストが必要な場合)
プロンプト:
Cinematic overhead photograph of a large wooden desk with neatly organized
project cards, color-coded sticky notes in a kanban layout, a MacBook
showing a clean dashboard, a ceramic mug, natural window light from the left,
shallow depth of field focusing on the cards, muted warm palette with
one accent color (brand blue), 35mm film aesthetic with slight grain
例2:「主要な4つの機能のイラストを生成してください」
スタイルプレフィックス:
Minimal 3D illustration, soft matte clay-like materials, front-facing
perspective, brand indigo (#6366F1) as accent, light gray (#F9FAFB)
background, gentle directional shadow to the bottom-right —
プロンプト:
[prefix] 書類が整然と並んだグリッドの上に浮かぶ虫眼鏡[prefix] つなぎ目に小さな火花を散らしながらつながる2つのパズルピース[prefix] 時間の割り当てを示す、異なる色の区分で構成された時計の文字盤[prefix] 小さなチェックマークが付いた、少し傾いた盾
例3:「AI 画像がありきたりに見えます。改善方法を教えてください」
現在の画像を、ありきたりな表現を避けるためのガイドに照らして確認します。よくある改善方法は次のとおりです。
- 具体性を高める(段階のレベル3~4)
- お決まりの表現を置き換える(光るオーブ → 実物の質感)
- プロンプトにフィルムグレインや不完全さを加える
- カラーパレットを限定する
- すべての画像で一貫したスタイルプレフィックスを使う