mcpField
T
thumbnail

thumbnail

github.com/kenneth-liaoクリエイティブ・メディア127141 回インストール31 週間前に更新
リポジトリ

thumbnail について

thumbnailは、カバー画像の生成と調整を支援するスキルです。画像モデル、デザイン資料、プラットフォームの寸法、ブランド上の制約を案内し、動画、ブログ、コース、ソーシャルメディアのサムネイル制作に使えます。

主な機能

  1. 01サムネイル案の生成を案内
  2. 02creator-stack:nanobanana経由でGemini画像モデルを使用
  3. 03プラットフォーム別の寸法を案内
  4. 04参照画像と画像編集に対応
  5. 05レビューとブランド確認を含む

活用シーン

  1. 01YouTubeサムネイルを作成
  2. 02異なるサムネイル案を検討
  3. 03プラットフォーム形式に合わせて画像を調整
  4. 04参照素材を使ってサムネイルを改善

インストール

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

$npx skills add https://github.com/kenneth-liao/ai-launchpad-marketplace --skill thumbnail

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

同梱ファイルreferences/prompting-guidelines.mdreferences/thumbnail-formulas.md

詳細

サムネイルスキル

クリック率(CTR)の向上に最適化された、効果の高いサムネイルやカバー画像を生成するスキルです。サムネイルは好奇心を刺激し、タイトルを引き立て、視聴者にクリックを促すようにデザインされています。

画像生成

画像の生成と編集はすべて、creator-stack:nanobanana スキルを通じて行います。このスキルでは、テキストから画像への生成、画像編集、複数画像を使った参照、高解像度出力に対応した Gemini 画像モデル(Pro と Flash)を利用できます。サムネイルを生成または編集する前に、このスキルを呼び出してください。

サムネイルに使用するモデルの選択
  • Pro(デフォルト)— 最終的な制作サムネイルに使用します。2K/4K 解像度、最大 14 枚の参照画像、より良い構図を実現する思考モードに対応しています。
  • Flash — 素早い試作やドラフト案に使用します。高速かつ低コストで、最終版を決める前にアイデアを反復するのに適しています。

目安:Flash で探索用に 5~10 種類のバリエーションを生成し、その後、最終的な制作画像には Pro を使用します。

重要な参照資料

サムネイルを生成する前に、次の 2 つを必ず読んでください。一般的な画像とクリック率の高いサムネイルの差を生み出すデザインパターンとプロンプト作成テクニックが記載されています。

  1. references/thumbnail-formulas.md — 実証済みの戦略に基づいた、クリック率の高いサムネイルのデザインパターンです。これらの原則はあらゆるプラットフォームに広く適用できます。
  2. references/prompting-guidelines.md — サムネイルは Gemini 画像モデル(NanoBanana)を使って生成します。プロンプト作成ガイドラインに従うと、より予測しやすく、一貫性のある結果が得られます。

これらを省略すると、実証済みのパターンに従わない一般的なサムネイルになってしまいます。必ず最初に読み込んでください。

プラットフォームのコンテキスト

オーケストレーターのスキルから呼び出された場合、プラットフォーム固有のコンテキスト(寸法、安全領域、フォーマット要件)が提供されることがあります。提供されたコンテキストを使用して、適切な出力寸法と制約を設定してください。

デフォルトの寸法: プラットフォームのコンテキストが指定されていない場合は、YouTube サムネイルの寸法(1280x720、アスペクト比 16:9)をデフォルトとして使用します。

一般的なプラットフォームの寸法:

  • YouTube サムネイル: 1280x720(16:9)
  • ブログのアイキャッチ画像: 1200x630
  • コースのサムネイル: 1280x720 または 1080x1080
  • ニュースレターのヘッダー: 1100x220 または 1200x630
  • ソーシャルメディアカード: 1200x675

適切な寸法を確保するため、生成前に必ず対象プラットフォームを確認してください。

参照画像

サムネイルの生成時にも編集時にも、参照画像を含めることができます。サムネイルのテンプレート、顔写真、アイコン、ロゴ、スタイル変換用の画像などがその例ですが、これらに限定されません。詳細は上記のプロンプト作成ガイドラインを参照してください。

すべての参照画像は、必ず絶対パスを使って渡してください。

公式ロゴの使用

企業ロゴを使用する場合は、単に説明するのではなく、画像ファイルの絶対パスを渡して実際の画像を使用してください。Nanobanana は一般的な企業ロゴの見た目を把握していません。

企業ロゴがローカルにない場合は、オンラインで検索して curl を使ってダウンロードし、プロンプトにダウンロードした画像の絶対パスを渡してください。ダウンロードした画像はすべて ./downloads/ に保存し、ディレクトリが存在しない場合は作成してください。

避けるべきよくある間違い

誤り:「Claude AI のロゴ(オレンジ色の C 字型)を作成する」 正しい:実際のロゴファイルを参照画像として渡す

誤り:「Python のロゴを追加する」 正しい:参照画像として /absolute/path/to/python-logo.png を使用する

実績のあるデザイン

コンテンツのタイトルやテーマがわかっている場合は、関連するOUTLIERコンテンツを検索します。OUTLIERを重視してください。すでに高い効果が実証されており、クリック率も高い可能性が非常に高いためです。チャンネル登録者数に対して再生回数が多い動画は、外れ値とみなされます。たとえば、チャンネル登録者数が5,000人未満なのに再生回数が10,000回以上の動画は外れ値です。

外れ値の動画をリストアップしたら、そのサムネイルにアクセスし、スタイル転送に使用できます。

動画IDが「rmvDxxNubIg」の標準解像度サムネイルのURL例を以下に示します。 https://img.youtube.com/vi/rmvDxxNubIg/sddefault.jpg。curlを使用して画像を./downloads/outliers/にダウンロードし、画像ファイルを読み込んで内容を確認できます。スタイル転送で使用する際は、参考画像として使用してください。

ブランドガイドラインへの準拠

The AI Launchpadのビジュアル素材を作成するときは、creator-stack:brand-guidelinesを呼び出して、適切なデザインシステムを確認し、避けるべきパターンをチェックしてください。これにより、すべてのサムネイルが確立されたブランドアイデンティティ、カラーパレット、ビジュアルスタイルに一貫して沿うようになります。

ほかのブランドの場合は、~/.claude/skills/にブランドガイドラインのスキルがあるか確認し、該当するデザイン上の制約を適用してください。

ワークフロー

サムネイルのコンセプトを作成する

最初のサムネイルのコンセプトまたはプロンプトを作成したら、Thumbnail Reviewerエージェントを使ってコンセプトをレビューし、フィードバックを得てください。レビュアーは批評を行い、改善案を提案します。レビュアーのフィードバックを検討し、次に進む前に反映してください。生成・レビュー・再生成のサイクルは1回に制限してください。追加の反復では効果が次第に薄れ、最初の批評で最も大きな改善点が提示されるためです。

サムネイルを最適化する

creator-stack:nanobananaは画像編集に対応しているため、すでに生成したサムネイルを繰り返し修正し、改善できます。元のサムネイルを参考画像として渡し、希望する変更内容を説明してください。

生成したサムネイルは、完全なデザインの定石と元の意図を満たしていることを必ず確認してください。満たしていない場合は、元のサムネイルを編集して反復できます。生成・レビュー・再生成のサイクルは1回に制限してください。追加の反復では効果が次第に薄れ、レビュアーの最初の批評で最も大きな改善点が提示されるためです。

ユーザーのアセット

ユーザーがローカル環境で使用するアセット(サムネイルのテンプレート、顔写真、アイコン、ロゴなど)を指定している場合は、関連性があればサムネイルに取り入れることを優先してください。たとえば、実在の人物を含むサムネイルは、より高い効果を上げることが示されています。

コメント