roedyrustam/app-promo-media-expert

Appプロモーションメディアエキスパート（2026年版）

English | Bahasa Indonesia

---

英語

オーケストレーションと統合

• ai-media-generation-expert: AI画像生成（Flux 1.1 Pro）、動画Bロール（Sora、Runway Gen-3）、合成音声ナレーション（ElevenLabs v3）を生成します。
• svg-animation-motion-expert: 高性能SVGアニメーション、Framer Motionのトランジション、キネティックタイポグラフィを実現します。
• file-upload-media-expert: CDNアセット配信、可逆/非可逆画像圧縮（Sharp）、ビデオトランスコーディングを行います。
• seo: 動的Open Graph（og:image）、Twitter Cardメタデータ、ソーシャルクローラープレビューを生成します。
• ui-ux-pro-max: デザイントークン、タイポグラフィ階層、プロモーションカードのレイアウトスタイリングを担当します。
• visual-ui-auditor: マーケティングスクリーンショットのマルチモーダルビジョン監査、コントラスト、デバイスフレームをチェックします。
• anti-slop: アンチスロップマーケティンググラフィックを作成し、一般的なストックモックアップや偽のUIアーティファクトを排除します。
• senior-frontend / tailwind-expert: 忠実度の高いCSSデバイスフレーム、キャンバスコンポジット、レスポンシブレイアウトスタイリングを実現します。
• zero-to-prod-orchestrator: フェーズ5（ビジュアルアセットとUIブランディング）とフェーズ8（ローンチ、デプロイ、マーケティングアセットの引き継ぎ）を調整します。
• クロスドメインシナジーとサブエージェントスウォーム統合: mobile-expo-expert、design-system-architect

説明

プロダクショングレードのエンジニアリングガイド。アプリのプロモーションメディアを、静止画グラフィック（App Storeスクリーンショット、ソーシャルメディアカード、動的OGバナー）と動的モーションメディア（Remotionによるプログラム動画ティーザー、キネティックなアプリウォークスルー、AIナレーションによるローンチデモ）にわたって作成するためのものです。

トリガー条件

• Apple App StoreおよびGoogle Play Store向けのプロモーションスクリーンショットをデバイスモックアップ付きで生成する場合。
• Product Hunt、Twitter/Xバナー、LinkedInショーケース、Instagram/TikTokカルーセル広告用のローンチグラフィックを作成する場合。
• Satori / @vercel/og を使用した動的Open Graph（OG）ソーシャルカード画像の生成を実装する場合。
• Remotion（Reactベースの動画）を使用して、プログラムによるアプリプロモーションビデオ、ティーザートレーラー、プロダクトツアービデオを作成する場合。
• AI音声を使用した30秒の高コンバージョンアプティーザーストーリーボードをスクリプト化および合成する場合。
• ヘッドレスブラウザ自動化（Playwright/Puppeteer）を使用したマルチ解像度スクリーンショットキャプチャパイプラインを自動化する場合。

---

コアアーキテクチャとメディア制作の柱

                     ┌──────────────────────────────────────────────┐
                     │          APP PROMOTIONAL MEDIA ENGINE         │
                     └──────────────────────┬───────────────────────┘
                                            │
               ┌────────────────────────────┴───────────────────────────┐
               ▼                                                        ▼
   STILL IMAGERY & GRAPHICS                                MOTION & VIDEO CREATION
 ├── App Store & Google Play Screenshots                   ├── Remotion Programmatic Videos (React)
 ├── Social Cards (X, LinkedIn, Product Hunt)              ├── 30s High-Converting Teaser Formula
 ├── Dynamic OpenGraph Banners (@vercel/og)                ├── Kinetic Typography & Cursor Trails
 └── Pure CSS/SVG Device Mockups (iPhone/Pixel)            └── AI Voiceover & B-Roll Synchronization

---

1. App StoreおよびGoogle Playのスクリーンショットマトリックス

A. 解像度と仕様標準（2026年）

対象プラットフォーム	ディスプレイサイズ	ネイティブ解像度	アスペクト比	フォーマット要件
Apple iOS（iPhone 16 Pro Max）	6.9インチ Super Retina	1320 × 2868 px	19.5:9	24ビットPNG、RGB、アルファなし、最大10MB
Apple iOS（iPhone 16 / 15 Pro）	6.7インチ Super Retina	1290 × 2796 px	19.5:9	24ビットPNG、RGB、アルファなし、最大10MB
Apple iPadOS（iPad Pro 13インチ）	13.0インチ Liquid Retina	2064 × 2752 px	4:3	24ビットPNG、RGB、アルファなし
Google Play電話	標準フラッグシップ	1080 × 2400 px（または1080 × 1920）	20:9 / 16:9	PNG/JPEG、最短辺1080px以上
Google Playフィーチャーグラフィック	ヒーローバナー	1024 × 500 px	~2:1	24ビットPNG/JPEG、アルファなし、最大1MB
App Storeプロモーションビデオ	プレビュービデオ	1080 × 1920 px（縦）/ 1920 × 1080	9:16 / 16:9	MP4/ProRes、最大30秒、偽のOSオーバーレイなし

B. 高コンバージョンスクリーンショット構成の公式

シーケンス内の各スクリーンショットは、4部構成のビジュアル階層に従う必要があります。

1. 見出し（パンチの効いたメリット）: 最大4〜6単語。技術機能ではなく、変革に焦点を当てます（例：「請求書を3秒で自動化」 vs 「請求書生成フォーム」）。
2. サブ見出し（コンテキストアンカー）: ワークフローを明確にする短い文。
3. フローティングUI / フレーム入りモックアップ: コントラストが高く、ピクセルパーフェクトなデバイスモックアップ。5°〜12°傾けるか、正面に向けて、フレーム下部の65%に中央揃えします。
4. アンビエントキャンバス / グラデーション: ブランドテーマにマッチした、ソフトなラジアルグローを持つ控えめなOKLCH背景グラデーション。

---

2. ソーシャルローンチグラフィックの仕様

• Product Huntローンチキット:
  • ギャラリー画像: 1270 × 760 px（5:3比）。シャープなタイポグラフィと実際のUI画面でトップ3機能を紹介。
  • アニメーションギャラリーティーザー: 240 × 240 pxのGIFまたはMP4（3MB未満）。プロダクトカードのサムネイル用。
• Twitter / Xカード:
  • フィード内プロモーションカード: 1200 × 675 px（16:9）または 1200 × 630 px（1.91:1）。
  • プロフィールバナー: 1500 × 500 px（3:1比）。
• InstagramおよびTikTokの投稿:
  • カルーセルフィードスライド: 1080 × 1350 px（4:5縦比）。
  • ストーリーと縦型ティーザー: 1080 × 1920 px（9:16比）。

---

3. 動的Open Graph（OG）画像ジェネレーター

動的OG生成により、Twitter/X、Discord、Slack、WhatsApp上のすべてのリンク共有に、カスタムの高解像度ブランドカードがレンダリングされます。

// app/api/og/route.tsx（Next.js 15 + @vercel/og / Satori）
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || '次世代AIワークスペース';
  const subtitle = searchParams.get('subtitle') || 'VibesPlug Swarmアーキテクチャで構築';
  const tag = searchParams.get('tag') || 'v3.0 プロダクション準備完了';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          padding: '64px',
          backgroundColor: '#090a0f',
          backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 60%)',
          fontFamily: 'Inter, sans-serif',
          color: '#ffffff',
        }}
      >
        {/* 上部バッジ */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div
            style={{
              padding: '6px 16px',
              borderRadius: '9999px',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              fontSize: '20px',
              fontWeight: 600,
              color: '#818cf8',
            }}
          >
            {tag}
          </div>
        </div>

        {/* メインタイトルとサブタイトル */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '850px' }}>
          <h1
            style={{
              fontSize: '60px',
              fontWeight: 800,
              lineHeight: 1.1,
              letterSpacing: '-0.02em',
              background: 'linear-gradient(135deg, #ffffff 40%, #94a3b8 100%)',
              backgroundClip: 'text',
              color: 'transparent',
              margin: 0,
            }}
          >
            {title}
          </h1>
          <p
            style={{
              fontSize: '26px',
              color: '#94a3b8',
              lineHeight: 1.4,
              margin: 0,
            }}
          >
            {subtitle}
          </p>
        </div>

        {/* フッターブランド */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
            paddingTop: '24px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div
              style={{
                width: '32px',
                height: '32px',
                borderRadius: '8px',
                background: 'linear-gradient(135deg, #6366f1, #a855f7)',
              }}
            />
            <span style={{ fontSize: '22px', fontWeight: 700 }}>MyApp.io</span>
          </div>
          <span style={{ fontSize: '18px', color: '#64748b' }}>今すぐ無料トライアル • クレジットカード不要</span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

---

4. Remotion（React）によるプログラム動画作成

Remotionを使用すると、開発者はコードから完全にMP4プロモーションビデオをレンダリングでき、アニメーション化されたUIコンポーネント、キネティックタイポグラフィ、スプリング物理、デバイスの回転が可能になります。

// src/remotion/AppPromoComposition.tsx
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';

export function AppPromoComposition({
  headline,
  subheadline,
  screenshotUrl
}: {
  headline: string;
  subheadline: string;
  screenshotUrl: string;
}) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // デバイスモックアップのエントランススプリングアニメーション
  const deviceEntrance = spring({
    frame,
    fps,
    config: { damping: 14, stiffness: 90 },
  });

  const translateY = interpolate(deviceEntrance, [0, 1], [400, 0]);
  const scale = interpolate(deviceEntrance, [0, 1], [0.85, 1]);

  // エントリー後のフローティング連続ホバー効果
  const hoverY = Math.sin(frame / 20) * 12;

  // テキスト表示アニメーション
  const textOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
  const textTranslateY = interpolate(frame, [0, 20], [30, 0], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0a0d14',
        backgroundImage: 'radial-gradient(ellipse at 50% 10%, rgba(99, 102, 241, 0.35) 0%, transparent 70%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'Inter, sans-serif',
        overflow: 'hidden',
        padding: '60px',
      }}
    >
      {/* キネティック見出し */}
      <div
        style={{
          opacity: textOpacity,
          transform: `translateY(${textTranslateY}px)`,
          textAlign: 'center',
          marginBottom: '40px',
          zIndex: 10,
        }}
      >
        <h1
          style={{
            fontSize: '56px',
            fontWeight: 800,
            color: '#ffffff',
            margin: '0 0 16px 0',
            letterSpacing: '-0.02em',
          }}
        >
          {headline}
        </h1>
        <p style={{ fontSize: '26px', color: '#94a3b8', margin: 0 }}>
          {subheadline}
        </p>
      </div>

      {/* フローティングデバイスコンテナ */}
      <div
        style={{
          transform: `translateY(${translateY + hoverY}px) scale(${scale})`,
          width: '720px',
          height: '1100px',
          borderRadius: '48px',
          padding: '16px',
          backgroundColor: '#1f2937',
          boxShadow: '0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.25)',
          border: '4px solid #374151',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {/* 動的ノッチ/アイランド */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
          <div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
        </div>
        
        {/* 画面コンテンツ */}
        <img
          src={screenshotUrl}
          alt="アプリ画面"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            borderRadius: '32px',
          }}
        />
      </div>
    </AbsoluteFill>
  );
};

Remotion CLIレンダリングコマンド

# 9:16縦型プロモティーザーをレンダリング（Reels / TikTok / Shorts）
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"Ship Apps in Minutes","subheadline":"Autonomous Swarm Intelligence","screenshotUrl":"/assets/screen.png"}'

---

5. 30秒の高コンバージョンティーザービデオの公式

タイムスタンプ	フェーズ	ビジュアルキュー	音声/ナレーションガイダンス
00:00 - 00:04	フック	問題への素早いズーム（例：乱雑な手動スプレッドシートや失敗したビルド）。赤/琥珀色の警告バッジ。	「まだ手動でリリースをデプロイするのに何時間も費やしていますか？」（パンチの効いた、エネルギッシュなナレーション）。
00:04 - 00:12	リビール	シームレスな3Dデバイス傾斜トランジション。アプリダッシュボードがグローするインタラクティブなアクセントとともに表示されます。	「[アプリ名]をご紹介します。自律型のゼロからプロダクションへのエンジンです。」
00:12 - 00:20	キーパワー	コア機能を紹介する3つの素早いカット：1. ワンクリックセットアップ 2. ライブ分析 3. 即時同期	「ワンクリックでワークフローが変わり、リアルタイムデータが同期され、人為的エラーが排除されます。」
00:20 - 00:26	社会的証明	5つ星バッジ、G2/Product Huntバッジ、フローティングする testimonial アバターピル。	「世界中の10,000人以上の開発者に信頼されています。」
00:26 - 00:30	コールトゥアクション	大きくて輝くCTAボタン、App StoreおよびGoogle Playのバッジ、目立つURL。	「今すぐApp Storeからダウンロードするか、myapp.ioにアクセスして無料で始めましょう。」

---

6. 自動化されたマルチデバイススクリーンショットキャプチャ

…（翻訳のため省略）