mcpField
C
content-image

content-image

github.com/vstorm-coクリエイティブ・メディア2643 回インストール28 週間前に更新
リポジトリ

content-image について

content-image は、ビジュアル素材を作る人向けの Claude スキルです。画像生成は行わず、モデル別のプロンプトや設定、対応モデル向けのネガティブプロンプト、バリエーションを提案します。

主な機能

  1. 01画像モデル別のプロンプト
  2. 02モデルと設定の提案
  3. 03対応モデル向けのネガティブプロンプト
  4. 04複数のプロンプト案
  5. 05ブランドやスタイルとの調整

活用シーン

  1. 01ブログのヘッダー画像用プロンプト作成
  2. 02SNS画像用プロンプトの準備
  3. 03ブランドに沿ったプロンプト調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/vstorm-co/content-skills --skill content-image

インストール後、Claude Code で/content-imageを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

model-specifics.md
style-library/
3d-render.md
editorial.md
film-still.md
flat-illustration.md

詳細

コンテンツ画像スキル

重要:このスキルが生成するのはプロンプトであり、画像ではありません

Claude は画像を生成できません。このスキルは、AI 画像生成モデルに最適化されたそのまま貼り付けて使えるプロンプトを作成します。出力されるテキストを、ユーザーが DALL-E、Midjourney、Stable Diffusion、またはその他の画像生成ツールにコピーします。

各出力には以下が含まれます。

  1. プロンプトのテキスト(対象モデルに最適化)
  2. 推奨モデルと設定
  3. ネガティブプロンプト(モデルが対応している場合)
  4. 試してみるバリエーション

このスキルが有効になる場面

  • ユーザーが画像、イラスト、またはビジュアル素材を求めている
  • ユーザーが画像プロンプトの作成や既存プロンプトの最適化を希望している
  • ユーザーが DALL-E、Midjourney、Stable Diffusion、Flux、またはその他の画像生成ツールについて言及している
  • ユーザーが「……の画像を生成して」や「……のビジュアルが必要です」と言っている
  • ユーザーがヒーロー画像、ソーシャルメディア用グラフィック、ブログ用イラスト、または商品写真を求めている

プロンプトの構成

効果的な画像プロンプトには、次の4つの要素があります。

1. 被写体

画像に何を描くかです。具体的かつ明確にします。

  • 悪い例:「仕事をしている人」
  • 良い例:「デュアルモニターのあるスタンディングデスクに座り、コードを書いているソフトウェア開発者。近くにはコーヒーマグがある」

2人の異なるアーティストが、見て認識できるほど似た画像を制作できるよう、被写体を詳しく説明してください。

2. スタイル

ビジュアルの表現方法です。スタイルライブラリから具体的なスタイルを参照するか、明示的に説明してください。

  • 悪い例:「見栄えのよい」
  • 良い例:「エディトリアル写真、浅い被写界深度、自然な窓からの光、35mm レンズ」

あらかじめ用意されたスタイルの説明については、style-library/ を参照してください。

  • style-library/editorial.md -- クリーンでプロフェッショナルな写真
  • style-library/flat-illustration.md -- 大胆で幾何学的なベクター風
  • style-library/3d-render.md -- 柔らかな照明、滑らかな表面、商品写真のような雰囲気
  • style-library/film-still.md -- 映画のようにドラマチックで雰囲気のある表現
3. ムード/雰囲気

画像が伝える感情的なトーンです。

  • 穏やか、集中した、生産的
  • エネルギッシュ、鮮やか、楽観的
  • ドラマチック、緊迫した、重大な局面
  • 温かく、親しみやすく、近づきやすい
  • ミニマル、静か、思索的
4. 技術仕様

解像度、アスペクト比、モデル固有のパラメーターです。

  • アスペクト比:16:9(ヒーローバナー)、1:1(ソーシャルメディア)、4:5(Instagram の縦長画像)、3:2(ブログ用写真)
  • 品質:高精細、フォトリアルまたはスタイライズ
  • 照明:自然光、スタジオ照明、ドラマチック、フラット、逆光
  • カメラ:広角、クローズアップ、真上から、目線の高さ

生成の流れ

ステップ 1:ブランドの背景を確認する

brand/VISUAL.md が存在する場合は、以下について確認します。

  • カラーパレット(ブランドカラーに合うプロンプトを提案)
  • ビジュアルスタイルの好み(写真かイラストか、ミニマルか大胆か)
  • ムードとトーン(プロフェッショナル、遊び心のある、技術的)

ブランドの美学が「クリーン、ミニマル、プロフェッショナル」である場合、粗い質感やマキシマリストな構図のプロンプトは提案しないでください。

ステップ 2:ニーズを把握する

次の点を尋ねます。

  • 画像の用途は何ですか? ブログのヘッダー、ソーシャルメディアの投稿、プレゼンテーションのスライド、商品ページ、メールバナー。
  • 何を描く必要がありますか? 被写体。
  • どのような印象を与えたいですか? ムード。
  • 既存のビジュアル参考資料はありますか? 好みの画像へのリンク。
  • 対象モデルは何ですか? DALL-E、Midjourney、Stable Diffusion、または指定なし。

ユーザーの依頼が曖昧な場合(「AI に関するブログ記事用の画像が必要です」など)、プロンプトを作成する前に具体的な内容を尋ねてください。

ステップ 3:スタイルを選ぶ

ブランドと用途に基づいて、スタイルを提案します。

用途推奨スタイル理由
ブログのヒーロー画像(プロフェッショナル)エディトリアル写真クリーンで信頼感があり、出版物に適した品質
ソーシャルメディア用グラフィックフラットイラスト目を引き、拡大縮小しやすく、共有されやすい
商品のランディングページ3D レンダリングモダンで洗練され、商品に焦点を当てられる
ソートリーダーシップ記事映画のワンシーンドラマチックで記憶に残り、共有されやすい
技術ドキュメントフラットイラスト明確で図解的、ブランドにも合う
イベントの宣伝エディトリアル写真または映画のワンシーン雰囲気があり、魅力的
ステップ 4:プロンプトを作成する

4 つの要素(主題 + スタイル + 雰囲気 + 技術仕様)を使ってプロンプトを組み立てます。構成はモデルによって異なります。model-specifics.md を参照してください。

ステップ 5:ネガティブプロンプトを追加する

ネガティブプロンプトに対応しているモデル(Stable Diffusion、Midjourney の一部のモード)では、避けたい要素を指定します。

一般的なネガティブプロンプトの要素:

  • "ぼやけた、低品質、歪んだ、変形した"
  • "テキスト、透かし、署名、ロゴ"(テキストが必要な場合を除く)
  • "ストックフォト、ありきたり、クリップアート"(エディトリアルまたはプレミアムな印象にする場合)
  • "彩度が高すぎる、ネオン、けばけばしい"(プロフェッショナルで落ち着いた美しさにする場合)
ステップ 6:バリエーションを提示する

常にプロンプトのバリエーションを 2~3 種類提示します。

  1. クローズアップ版:フレーミングを狭め、主題の詳細を増やします。
  2. ワイド版:周囲の状況や設定を盛り込みます。
  3. 別のスタイル:比較できるよう、異なるビジュアル表現にします。

ブランドとの整合性

プロンプトを生成する際は、brand/VISUAL.md に記載されたブランドの美的表現に合わせます。

色の整合性

ブランドが温かみのあるアースカラーを使う場合は、次のようなプロンプトを提案します。

  • "温かみのある照明、ゴールデンアワー、アースカラー、琥珀色とテラコッタのパレット"

ブランドが涼しげな青やグレーを使う場合は、次のように提案します。

  • "涼しげな照明、青みがかったグレーの色調、スチールとスレートのパレット、曇り空"

すべての画像にブランドカラーを無理に取り入れる必要はありませんが、美的な方向性は示してください。

スタイルとの整合性
ブランドの美的表現プロンプトの方向性
ミニマルで清潔感がある"整った構図、ネガティブスペース、シンプルな背景、ごちゃつきのない"
大胆で鮮やか"彩度の高い色、躍動感のある構図、高いコントラスト、エネルギッシュ"
企業的でプロフェッショナル"スタジオ照明、ニュートラルな背景、洗練された、シャープな焦点"
遊び心があり創造的"風変わりな要素、明るい色、意外性のあるアングル、手描き風"
技術的で精密"技術イラスト、設計図の美的表現、グリッド線、精密な幾何学形状"
アセット全体の一貫性

同じプロジェクト向けに複数のプロンプト(例:一連のブログ記事用画像)を生成する場合は、一貫性を保ちます。

  • すべてのプロンプトで同じスタイルと雰囲気にする
  • 同じアスペクト比と品質設定にする
  • 色温度と照明の方向を統一する
  • シリーズ内のすべてのプロンプトで、同じスタイルライブラリの項目を参照する

モデル別の最適化

詳しいガイダンスは model-specifics.md を参照してください。概要は次のとおりです。

DALL-E 3
  • 自然言語による説明に対応しています
  • 長く、より詳細なプロンプトが効果的です
  • スタイル、雰囲気、技術的な詳細を完全な文で指定します
  • ネガティブプロンプトには対応していません(望むものを説明し、望まないものは説明しません)
Midjourney
  • スタイルを表すキーワードや美的表現の参照に効果的に反応します
  • アスペクト比には --ar、スタイライズには --s、品質には --q を使用します
  • 短く、キーワードを中心としたプロンプトが効果的な場合があります
  • バージョン固有のパラメーター(v6、v6.1)
Stable Diffusion
  • 重み付きトークンに対応しています。強調する場合は (important detail:1.3) のように指定します
  • 品質を高めるにはネガティブプロンプトが重要です
  • サンプラーとステップ数が出力に影響します
  • LoRA とチェックポイントの選択が重要です

出力形式

各プロンプトのリクエストに対して、次の形式で提示します。

## Prompt

[The full prompt text, ready to paste]

## Model & Settings

- **Recommended model**: [DALL-E 3 / Midjourney v6.1 / SDXL]
- **Aspect ratio**: [16:9 / 1:1 / 4:5 / etc.]
- **Quality/Steps**: [model-specific settings]

## Negative Prompt (if applicable)

[Negative prompt text for SD/MJ]

## Variations

### Variation 1: [Description]
[Alternative prompt]

### Variation 2: [Description]
[Alternative prompt]

## Notes

[Any tips for getting the best result: regenerate if X, adjust Y for Z]

よくあるプロンプトのパターン

「人物が何かをする」パターン

[属性の詳細] [人物の説明] [動作] in [設定]、[スタイル]、[照明]、[雰囲気]

例:「30 代半ばの東南アジア人女性が、モダンなオープンオフィスでタブレット上のデータを確認している。エディトリアル写真、左側から差し込む自然な窓明かり、集中して生産的な雰囲気」

「製品写真」パターン

[製品] on [表面/背景]、[カメラアングル]、[照明設定]、[スタイル]

例:「ミニマルな白いデスクの上に置かれたマットブラックのワイヤレスキーボード、45 度のアングル、かすかな影を伴う柔らかなスタジオ照明、3D 製品レンダー、清潔感のあるモダンな印象」

「抽象的な概念」パターン

[概念を視覚化した比喩]、[スタイル]、[カラーパレット]、[雰囲気]

例:「相互につながる光るノードがニューラルネットワークのパターンを形成している。暗い背景、青と紫のグラデーション、アイソメトリックな 3D レンダー、未来的ですっきりした印象」

「環境」パターン

[場所の説明]、[時間帯]、[天候/雰囲気]、[スタイル]、[カメラの位置]

例:「天井から床まで届く窓のあるコワーキングスペース。ゴールデンアワー、デスクに植物、暖かい自然光、エディトリアル写真、入口からの広角」


このスキルでできないこと

  • 実際の画像を生成すること(Claude はテキストモデルです)
  • SVG グラフィックを作成すること(その場合は content-infographic を使用してください)
  • ロゴやブランドマークをデザインすること(デザイナーまたは専門ツールを使用してください)
  • 既存の写真を編集すること(Photoshop、Lightroom、または同様のツールを使用してください)

ユーザーが SVG またはインフォグラフィックを必要としている場合は、content-infographic スキルに案内してください。プレゼンテーション用のビジュアルが必要な場合は、content-presentation に案内してください。

コメント