mcpField
S
shots

shots

github.com/hypersocialincマーケティング・グロース249225 回インストール26 週間前に更新
リポジトリ

shots について

Shotsは、アプリのポジショニングを調査し、App Store向けのスクリーンショットパネルを作成するスキルです。作成、修正、ローカライズ、ストア情報取得の手順を備え、保存した戦略ブリーフをコピーや画像プロンプトに反映します。

主な機能

  1. 013パネル単位でスクリーンショットを作成
  2. 02ストア掲載情報と競合を調査
  3. 03ポジショニングと訴求点を保存
  4. 04既存画像の修正とローカライズ
  5. 05ストア掲載情報の取得

活用シーン

  1. 01アプリ掲載用スクリーンショットの準備
  2. 02別のロケール向けにコピーを調整
  3. 03既存のスクリーンショット一式を修正

インストール

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

$npx skills add https://github.com/hypersocialinc/shots --skill shots

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

同梱ファイル

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

reference/
create.md
prompting.md
revise.md
scrape.md
strategy.md
translate.md
scripts/
crop.mjs
generate.mjs
package-lock.json
package.json
scaffold.mjs
scrape.mjs

詳細

ショット

App Store でのコンバージョン率を高めるスクリーンショットを生成します。既存の画面を装飾することが目的ではありません。アプリの市場、ビジュアル言語、最も強力な訴求点を推測し、それをインストール促進につながる、トリミングに強いスクリーンショットパネルに仕上げることが目的です。

スクリーンショットの品質が重要な理由

調査によると、最適化された App Store のスクリーンショットは、次の成果を達成できます。

  • コンバージョン率 68.2％（業界平均は 26.4％）
  • インストール率 720％向上
  • 意思決定までの時間は 7 秒 — 最初の 2～3 枚のスクリーンショットが重要です

このスキルは、GPT Image 2 の強み（95％以上のテキスト精度、UI モックアップの優れた品質、4K 出力）と、実証済みのコンバージョンパターン（ストーリーフロー、ハイブリッドキャプション、視覚的階層）を組み合わせ、高いコンバージョン率を実現するマーケティング素材を作成します。

インテントルーター

インテント判定方法アクション
新規作成既存のショットへの言及がない、または「new」「create」「generate」、あるいは App Store の URL がある作成時の質問を実施し、reference/create.md に従います
修正ショット ID を参照している、または「revise」「change」「fix」「redo」と述べているreference/revise.md に従います
翻訳ロケールに言及している、または「translate」「localize」と述べているreference/translate.md に従います
スクレイピングのみURL とともに「scrape」「fetch metadata」「import」と述べているreference/scrape.md に従います
あいまいどのフローを意図しているか判断できないユーザーに希望する操作を尋ねます
引数の解析
  • /shots — 作成時の質問を開始します
  • /shots <url> — リスティングをスクレイピングしてから、作成フローに進みます
  • /shots <description> — 指定されたコンテキストを使って作成します
  • /shots revise [shot-id] — 修正フロー
  • /shots translate [shot-id|run-id] [locale] — ローカライズフロー
  • /shots scrape <url> — スクレイピングのみ

共通のセットアップ

すべてのサブコマンドを実行する前に、次の確認を行ってください。省略しないでください。

  1. npm list --prefix {{scripts_path}} sharp 2>/dev/null を実行します。失敗した場合は、npm install --prefix {{scripts_path}} を実行します。
  2. node {{scripts_path}}/scaffold.mjs --init --output-dir .shots/ を実行します。
  3. 作成、修正、翻訳では、OPENAI_API_KEY または FAL_KEY が設定されていることを確認します。どちらも設定されていない場合は、直ちに中止します。
  4. 存在する場合は .shots/config.json を読み込みます。

{{scripts_path}} は、このファイルと同じディレクトリにある scripts/ ディレクトリです。

scaffold.mjs --init がワークスペースの仕様を定める唯一の情報源です。デフォルトの config.json と manifest.json を作成します。エージェントは独自のスキーマを考案するのではなく、これらのファイルに必要事項を記入してください。

作成時の質問

作成フローの開始時に設定ファイルが存在しない、または不完全な場合は、次のすべてを一度に尋ねてください。

  1. アプリ名
  2. App Store の URL — 明示的に次のように尋ねます。「App Store または Google Play に既存のリスティングはありますか？ある場合は、URL を貼り付けてください。」これは最も価値の高い入力情報です。自動メタデータスクレイピング、競合調査、既存スクリーンショットの分析が可能になります。
  3. 生成するスクリーンショットの枚数
  4. デバイス：iPhone、iPad、Android Phone
  5. 言語／ロケール

任意（推測内容を上書きしたい場合のみ尋ねます）：

  1. ビジュアルスタイルの上書き指定
  2. ブランドカラー
  3. 差別化要素の上書き指定

デフォルト：

  • panelCount: 3
  • devices: ["iphone"]
  • locales: ["en"]
  • 3 枚を超えるスクリーンショットは、3 パネルの合成画像を複数作成して出力します。

リサーチ契約

コピーの作成や画像の生成を始める前に、.shots/config.json に strategyBrief を作成して保存してください。これは、ベネフィットとプロンプトの組み立てにおける信頼できる唯一の情報源です。

以下の順序で情報源を確認してください。

  1. ユーザーが提供したブランド、色、スタイルに関する指定
  2. App Store の URL とスクレイピングした掲載情報
  3. ローカルリポジトリ：README、オンボーディング、ナビゲーション、モデル、ルート画面、既存のコピー
  4. .shots/app-screenshots/
  5. .shots/inspo/
  6. 競合アプリの掲載情報とレビューで使われている表現
  7. 推測できない最も価値の高い不明点に限って、ユーザーに質問する

App Store の URL がある場合は、掲載情報、スクリーンショット、直接の競合、レビューで使われている表現を含め、デフォルトでフルスタックのリサーチを行ってください。URL がない場合は、まずリポジトリから推測してください。リポジトリから手がかりが得られない場合は、スクリーンショットや参考資料から推測してください。それでもアプリの内容が不明な場合は、ユーザーに質問してください。

reference/strategy.md に従って、以下を行ってください。

  • テーマ、色、対象ユーザーを特定する
  • 競合状況を整理する
  • 市場で一般的な表現や、繰り返し現れる悩みの言葉を抽出する
  • 戦略ブリーフを保存する
  • インストール意向の高い順に、6～8 個のベネフィット案を作成する

プロンプト契約

保存済みの strategyBrief と承認済みのベネフィットを使って、必ずプロンプトを作成してください。reference/prompting.md に従ってください。

必須ルール：

  • デフォルトでは、1 つの合成画像につき 3 パネルのバッチでスクリーンショットを生成してください。
  • 各合成画像は、切り出したときに単独の縦向きスクリーンショットとしてきれいに仕上がる必要があります。
  • コンセプトがテキストのみ、またはライフスタイルを表現したパネルに明確な利点を持つ場合を除き、3 パネル中少なくとも 2 パネルにはデバイスを表示してください。
  • 見出しのテキストは短く、コントラストが高く、サムネイルでも読めるものにし、文言を一字一句変えずに表示してください。
  • デバイス画面には、汎用的なプレースホルダーのアプリ画面ではなく、具体的な UI を表示してください。
  • 曖昧な称賛の言葉ではなく、視覚的な事実を使ってください。
  • 装飾的な奥行き要素は、訴求する機能を補強するものにしてください。
  • App Store のバッジ、ダウンロードボタン、偽のプラットフォーム画面要素は含めないでください。

既存のショットフロー

修正や翻訳を行う場合：

  • ショット ID が指定されていない場合は、.shots/manifest.json を読み込み、最近のショットを一覧表示してください。
  • ユーザーがポジショニング、対象ユーザー、またはビジュアルの方向性を明示的に変更しない限り、保存済みの strategyBrief を再利用してください。
  • 元のプロンプトを基本成果物として扱い、変更点や維持する点について、正確な指示を追加してください。

寸法

デバイス合成画像最終パネルキー
iPhone3456x24001284x2778iphone
iPad6144x27322048x2732ipad
Android Phone3240x19201080x1920android

設定の形式

初期化された config.json には以下が含まれます。

  • アプリのメタデータ：appName、appStoreUrl、devices、locales、panelCount
  • 生成時のデフォルト設定：generation.provider、generation.quality、generation.timeoutMs、generation.partialImages
  • ブランドカラー：brandColors
  • App Store データ：aso、ratings、scrapedAssets
  • 戦略の状態：strategyBrief
  • コピーの状態：benefits

エージェントの指示に新しいスキーマを手作業で記述しないでください。生成されたファイルを読み込み、内容を入力してください。

参考資料

コメント

Markdown 対応