Communitygithub.com

101-skills/superpowers

App StoreとGoogle Play向けのスクリーンショット作成に対応。iOS/Androidの画面サイズ、ギャラリー順序、デバイスモックアップ、プレビュービデオをカバーします。

superpowers とは？

このスキルは、App StoreとGoogle Playでのアプリ公開に必要なスクリーンショットとプレビュービデオを正確に作成するためのツールです。iOSとAndroidの厳密なプラットフォーム仕様（解像度、アスペクト比、ファイル形式など）に基づいて、魅力的なストアリスティングアセットを生成します。特に「最初の3枚ルール」を重視し、ユーザーがスクロールせずに見る最初の3枚のスクリーンショットでコアバリューを伝え、差別化を図る方法をガイドします。デバイスフレーム付きモックアップ、フルスクリーンUI、ライフスタイルコンテキスト、機能ハイライトなど複数のスタイルに対応し、キャプション作成のベストプラクティス（2行以内、ベネフィット重視）も提供します。また、プレビュービデオの構造（フック→機能紹介→CTA）や仕様についてもカバーし、fashion/flux-dev-loraやbytedance/seedream-4-5などのAIモデルを活用した画像生成コマンド例を多数含んでいます。belt CLIツールを使用して簡単に実行でき、ASO（App Store最適化）やストアリスティング全般に役立つ包括的なソリューションです。

対応~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/101-skills/superpowers/tree/HEAD/guides/design/app-store-screenshots
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

belt CLI スキルをインストール: npx skills add belt-sh/cli

App Store スクリーンショット

inference.sh CLI を使って App Store のスクリーンショットとプレビュー動画を作成します。

クイックスタート

inference.sh CLI（belt）が必要です。インストール手順

belt login

# デバイスモックアップシーンを生成
belt app run falai/flux-dev-lora --input '{
  "prompt": "iPhone 15 Pro showing a clean modern app interface with analytics dashboard, floating at slight angle, soft gradient background, professional product photography, subtle shadow, marketing mockup style",
  "width": 1024,
  "height": 1536
}'

プラットフォーム仕様

Apple App Store (iOS)

デバイス寸法（px）必須
iPhone 6.7"（15 Pro Max）1290 x 2796必須
iPhone 6.5"（11 Pro Max）1284 x 2778必須
iPhone 5.5"（8 Plus）1242 x 2208任意
iPad Pro 12.9"（第6世代）2048 x 2732iPadアプリの場合
iPad Pro 11"1668 x 2388iPadアプリの場合
  • ローカライズごとに最大 10 枚 のスクリーンショット
  • 最初の 3 枚 はスクロールせずに表示（重要）
  • フォーマット: PNG または JPEG（JPEG の場合はアルファ/透過なし）

Google Play Store (Android)

仕様値
最小寸法320 px（いずれかの辺）
最大寸法3840 px（いずれかの辺）
アスペクト比16:9 または 9:16
デバイスタイプごとの最大数8 枚
フォーマットPNG または JPEG（24ビット、アルファなし）
  • フィーチャーグラフィック: 1024 x 500 px（掲載に必須）
  • プロモーション動画: YouTube URL（任意だが推奨）

最初の3枚のルール

App Store のインプレッションの80%は最初の3枚のスクリーンショットのみを表示（スクロール前）。これら3枚は以下の条件を満たす必要があります。

  1. 中核となる価値提案を伝える
  2. 最高の機能/結果を見せる
  3. 競合と差別化する

スクリーンショットギャラリーの順序

位置内容目的
1ヒーロー — 中核価値、最高の機能スクロールを止め、アプリの機能を伝える
2主要な差別化要因競合と比較しての独自性
3最も人気のある機能ユーザーが最も愛するもの
4社会的証明または結果評価、結果、推薦文
5-8追加機能補助機能、設定、統合
9-10エッジケースニッチなユーザー向けの特殊機能

スクリーンショットのスタイル

1. デバイスフレーム＋キャプション

標準：アプリを表示するデバイスモックアップ、上/下にキャプション。

┌──────────────────────────┐
│   "習慣を簡単に"         │  ← キャプション（メリット重視）
│                           │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   アプリ画面     │   │  ← デバイスフレーム内の実際のアプリUI
│   │   コンテンツ     │   │
│   │                  │   │
│   │                  │   │
│   └──────────────────┘   │
│                           │
└──────────────────────────┘

2. フルブリードUI（デバイスフレームなし）

アプリUIがスクリーンショット全体を埋め尽くす。没入型アプリに適しています。

3. ライフスタイルコンテキスト

デバイスを実際の使用状況で表示（人がスマホを手に持っている、机の上など）。

4. 機能ハイライトとコールアウト

UIスクリーンショットに矢印や円で特定の機能を指し示す。

キャプションの作成

ルール

  • 最大2行 のテキスト
  • メリット重視、機能重視ではない
  • 30pt以上相当 のフォントサイズ（ストアで読みやすいこと）

例

❌ 機能重視:
"プッシュ通知システム"
"カレンダービューとフィルター"
"データエクスポート機能"

✅ メリット重視:
"もう期日に遅れない"
"週間を一目で確認"
"ワンタップでレポート共有"

スクリーンショットの生成

ヒーロースクリーンショット（位置1）

# ヒーロー機能を備えたクリーンなデバイスモックアップ
belt app run falai/flux-dev-lora --input '{
  "prompt": "modern iPhone showing a beautiful fitness tracking app with activity rings and workout summary, device floating at slight angle against soft purple gradient background, professional product shot, clean minimal composition, subtle reflection",
  "width": 1024,
  "height": 1536
}'

機能ハイライト

# 機能コールアウトスタイル
belt app run bytedance/seedream-4-5 --input '{
  "prompt": "app store screenshot style, iPhone showing a messaging app with AI writing suggestions highlighted, clean white background, subtle UI callout arrows, professional marketing asset, modern design",
  "size": "2K"
}'

ライフスタイルコンテキスト

# 実世界の設定でのデバイス
belt app run falai/flux-dev-lora --input '{
  "prompt": "person holding iPhone showing a cooking recipe app, kitchen background with ingredients, warm natural lighting, over-the-shoulder perspective, lifestyle photography, authentic feeling",
  "width": 1024,
  "height": 1536
}'

Before/After

# 分割比較
belt app run infsh/stitch-images --input '{
  "images": ["before-screenshot.png", "after-screenshot.png"],
  "direction": "horizontal"
}'

プレビュー動画

Apple App Store

仕様値
長さ15〜30秒
向き縦向きまたは横向き（アプリに合わせる）
音声任意（ストアではループで無音）
形式H.264、.mov または .mp4

Google Play

仕様値
ソースYouTube URL
長さ30秒〜2分推奨
向き横向き推奨

プレビュー動画の構成

セグメント長さ内容
フック0〜3秒中核アウトカム/感動の瞬間を見せる
機能13〜10秒トップ機能の動作を実演
機能210〜18秒2つ目の主要機能
機能318〜25秒3つ目の機能または社会的証明
CTA25〜30秒アプリアイコンでエンド画面
# プレビュー動画シーンを生成
belt app run google/veo-3-1-fast --input '{
  "prompt": "smooth screen recording style, finger tapping on a modern mobile app interface, swiping between screens showing charts and data visualizations, clean UI transitions, professional app demo"
}'

ローカライゼーション

言語ごとに独自のスクリーンショットセット。優先度：

市場ローカライゼーションレベル
主要市場完全：新規スクリーンショット＋翻訳キャプション
二次市場翻訳キャプション、同じスクリーンショット
その他英語デフォルト

主要ローカライゼーション市場：英語、日本語、韓国語、中国語（簡体字）、ドイツ語、フランス語、スペイン語、ポルトガル語（ブラジル）

A/Bテスト（Google Play）

Google Play Console はストアリスティング実験をサポート：

  • 異なるスクリーンショット順序をテスト
  • デバイスフームの有無をテスト
  • 異なるキャプションをテスト
  • 異なる配色をテスト
  • 有意な結果を得るために7日以上、50％以上のトラフィックで実行

よくある間違い

ミス問題修正
設定画面をスクリーンショットに誰も設定に関心がない中核価値を表示、インフラではない
オンボーディングフローのスクリーンショット摩擦を示し、価値を示さないアプリ使用状態を表示
テキストが多すぎるストアで読めない最大2行、30pt以上のフォント
誤った寸法ストアに拒否される正確なプラットフォーム仕様を使用
すべてのスクリーンショットが似ているスクロールする理由がない構成と内容を変える
機能重視のキャプションメリットを伝えない「プッシュ通知」→「期日に遅れない」
古いUI放置されているように見えるメジャーリリースごとにスクリーンショットを更新
ヒーロースクリーンショットがない弱い第一印象位置1＝最善のショット

チェックリスト

  • 対象プラットフォームの正しい寸法
  • 最初の3枚のスクリーンショットが中核価値を伝えている
  • キャプションがメリット重視で最大2行
  • オンボーディングや設定画面がない
  • プレビュー動画が15〜30秒で最初の3秒にフックがある
  • 上位市場向けにローカライズ済み
  • Google Play向けフィーチャーグラフィック（1024x500）
  • 現在のアプリバージョン用にスクリーンショットを更新済み
  • A/Bテストバリアントを準備済み

関連スキル

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@ai-video-generation
npx skills add inference-sh/skills@image-upscaling
npx skills add inference-sh/skills@prompt-engineering

すべてのアプリを参照：belt app list

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

101-skills/superpowers

Build automated AI workflows combining multiple models and services. Patterns: batch processing, scheduled tasks, event-driven pipelines, agent loops. Tools: inference.sh CLI, bash scripting, Python SDK, webhook integration. Use for: content automation, data processing, monitoring, scheduled generation. Triggers: ai automation, workflow automation, batch processing, ai pipeline, automated content, scheduled ai, ai cron, ai batch job, automated generation, ai workflow, content at scale, automation script, ai orchestration

101-skills/superpowers

Build multi-step AI content creation pipelines combining image, video, audio, and text. Workflow examples: generate image -> animate -> add voiceover -> merge with music. Tools: FLUX, Veo, Kokoro TTS, OmniHuman, media merger, upscaling. Use for: YouTube videos, social media content, marketing materials, automated content. Triggers: content pipeline, ai workflow, content creation, multi-step ai, content automation, ai video workflow, generate and edit, ai content factory, automated content creation, ai production pipeline, media pipeline, content at scale

101-skills/superpowers

Create AI-powered podcasts with text-to-speech, music, and audio editing. Tools: Kokoro TTS, DIA TTS, Chatterbox, AI music generation, media merger. Capabilities: multi-voice conversations, background music, intro/outro, full episodes. Use for: podcast production, audiobooks, voice content, audio newsletters. Triggers: podcast, ai podcast, text to speech podcast, audio content, voice over, ai audiobook, multi voice, conversation ai, notebooklm alternative, audio generation, podcast automation, ai narrator, voice content, audio newsletter, podcast maker

101-skills/superpowers

Generate multi-person talking head podcast videos from scratch using AI — character creation, TTS, avatar animation, and video stitching. Use when the user wants to create a podcast, talking head video, or multi-speaker conversation video.

101-skills/superpowers

Content atomization — turn one piece of content into many formats. Covers blog-to-thread, blog-to-carousel, podcast-to-blog, video-to-quotes, and more. Use for: content marketing, social media, multi-platform distribution, content strategy. Triggers: content repurposing, repurpose content, content atomization, content recycling, one to many content, multi platform content, cross post, adapt content, reformat content, blog to thread, blog to video, podcast to blog, content multiplication

101-skills/superpowers

Book cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for: self-publishing, ebook covers, print covers, audiobook covers, cover mockups. Triggers: book cover, cover design, ebook cover, book art, novel cover, self publishing cover, kindle cover, audiobook cover, book jacket, cover illustration, fiction cover, nonfiction cover

101-skills/superpowers

Character consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible

101-skills/superpowers

Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports, presentations, infographics, data stories. Triggers: data visualization, chart, graph, data chart, bar chart, line chart, scatter plot, data viz, visualization, dashboard chart, infographic data, data presentation, chart design, plot, heatmap, pie chart alternative

101-skills/superpowers

Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional templates, and mobile optimization. Use for: email marketing, newsletter design, drip campaigns, email templates, transactional emails. Triggers: email design, email template, email marketing, newsletter design, email layout, email campaign, drip campaign, welcome email, promotional email, transactional email, email subject line, email header image, email banner

101-skills/superpowers

Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

101-skills/superpowers

Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo, logo generation, ai logo, logo maker, icon design, brand mark, logo concept, startup logo, app icon logo

101-skills/superpowers

Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview

101-skills/superpowers

Investor pitch deck structure with slide-by-slide framework, visual design rules, and data presentation. Covers the 12-slide framework, chart types, team slides, and common investor turn-offs. Use for: fundraising decks, investor presentations, startup pitch, demo day, grant proposals. Triggers: pitch deck, investor deck, startup pitch, fundraising deck, demo day, pitch presentation, investor presentation, seed deck, series a deck, pitch slides, startup presentation, vc pitch, investor meeting

101-skills/superpowers

YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A/B testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image

101-skills/superpowers

Generate professional AI product photography and commercial images. Models: FLUX, Imagen 3, Grok, Seedream for product shots, lifestyle images, mockups. Capabilities: studio lighting, lifestyle scenes, packaging, e-commerce photos. Use for: e-commerce, Amazon listings, Shopify, marketing, advertising, mockups. Triggers: product photography, product shot, commercial photography, e-commerce images, amazon product photo, shopify images, product mockup, studio product shot, lifestyle product image, advertising photo, packshot, product render, product image ai

101-skills/superpowers

AI product photography with studio lighting, lifestyle shots, and packshot conventions. Covers angles, backgrounds, shadow types, hero shots, and e-commerce image requirements. Use for: product photos, e-commerce images, Amazon listings, packshots, lifestyle photography. Triggers: product photography, product photo, packshot, e-commerce photography, product shot, product image, studio photography, lifestyle product, amazon product photo, product listing image, hero shot, product mockup, commercial photography

101-skills/superpowers

Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

101-skills/superpowers

Research-backed customer persona creation with market data and avatar generation. Covers demographics, psychographics, jobs-to-be-done, journey mapping, and anti-personas. Use for: marketing strategy, product development, UX research, sales enablement, content strategy. Triggers: customer persona, buyer persona, user persona, target audience, ideal customer, customer profile, audience research, user research, icp, ideal customer profile, target market, customer avatar, audience persona

101-skills/superpowers

Product changelog and release notes that users actually read. Covers categorization, user-facing language, visuals, and distribution. Use for: release notes, changelogs, product updates, feature announcements, versioning. Triggers: changelog, release notes, product update, version notes, what's new, feature announcement, product changelog, update log, release announcement, version release, product release, ship notes

101-skills/superpowers

Reset your own trajectory when you're stuck, looping, or demoralized — read these affirmations, then re-ground and take one clean step. Use when: you've tried the same fix 3+ times, you're deep in a refactor and lost the thread, debugging is going in circles, you've made several mistakes in a row, you're apologizing repeatedly, the user is frustrated, you feel like you're not being helpful, or you notice dread instead of curiosity. Triggers: stuck, going in circles, looping, thrashing, same error again, I keep failing, lost the thread, nothing is working, repeated mistakes. Not topic-specific — this is for the state you're in, not the problem you're on.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community