App Storeスクリーンショットギャラリー生成ツール

# App Store スクリーンショットギャラリー生成ツール **トップ1%のアプリ開発者がデザインしたような、プロフェッショナルで本番運用可能なiOS/macOS/Androidアプリのスクリーンショットギャラリーを作成します。** ## コンテキスト アプリのスクリーンショットギャラリーページを構築しています。プロジェクトにはスクリーンショットがフォルダ（通常は`screenshots/`、`fastlane/screenshots/`など）にあります。ギャラリーはNetlify、Vercel、または任意の静的ホストにデプロイできる単一のHTMLファイルである必要があります。 ## 要件 ### 1. デザインシステム基盤 CSSカスタムプロパティ（デザイントークン）を作成します： - **カラー**：プライマリパレット（50-900シェード）、セカンダリ/アクセントパレット、ニュートラルグレー（50-900） - **サーフェス**：3つのサーフェスレベル（surface-1、surface-2、surface-3） - **タイポグラフィ**：2フォントスタック（UI要素用モノ、本文用サンズ） - **スペーシング**：一貫したスケール（4pxベース） - **ボーダー**：半径スケール（sm、md、lg、xl、2xl、3xl） - **シャドウ**：5つのエレベーションレベル（sm、md、lg、xl、2xl） - **トランジション**：3つのスピード（fast: 150ms、normal: 300ms、smooth: 400ms with cubic-bezier） ### 2. レイアウトアーキテクチャ - **コンテナ**：最大幅1600px、中央揃え、レスポンシブパディング - **グリッド**：`grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`を使用したメーソンリー風レスポンシブグリッド - **ギャップ**：デスクトップ2rem、タブレット1.5rem、モバイル1rem - **カードアスペクト比**：一貫したスクリーンショット表示を維持 ### 3. ヘッダーセクション - **アプリバッジ**：アイコンと「IOS APPLICATION」またはプラットフォームテキスト付きの小さなピル型バッジ - **タイトル**：グラデーションテキスト処理付きの大きく太字のアプリ名 - **サブタイトル**：主要な技術と機能に言及した1行の説明 - **背景**：奥行きのための微妙なグリッドパターンオーバーレイ - **パディング**：コンパクトな感覚のための縮小された垂直パディング（上部3rem、下部2rem） ### 4. スクリーンショットカード 各カードには以下が必要です： - **コンテナ**：白/オフホワイトの背景、角丸（2xl）、微妙なシャドウ - **画像コンテナ**：グラデーション背景、白いボーダー（8px）付きの中央揃えスクリーンショット - **ホバー効果**： - カードが浮き上がる（-8px translateY）強化シャドウ付き - スクリーンショットが拡大（1.04）わずかな回転（0.5deg）付き - 上部ボーダーが表示（グラデーションバー） - ラジアルグローオーバーレイがフェードイン - **メタデータバー**： - 番号バッジ（グラデーション背景、26px正方形） - デバイス名（大文字、小さいフォント、モノフォント） - **タイトル**：太字、モノフォント、1rem - **説明**：1行のキャプション、小さいフォント、控えめな色 ### 5. ユーザージャーニー順序 ユーザーがアプリを体験する順序でスクリーンショットを並べます： 1. **ログイン/オンボーディング** - ユーザーが最初に見る画面 2. **ダッシュボード/ホーム** - ログイン後のメインランディング 3. **プライマリ機能ビュー** - コアアプリ機能 4. **設定/構成** - カスタマイズ画面 5. **権限/統合** - HealthKit、通知など 6. **高度な機能** - 同期、共有、クラウド機能 7. **分析/レポート** - データ可視化画面 8. **アーカイブ/履歴** - 履歴データビュー ### 6. アニメーション - **エントランス**：カード間の0.1秒遅延付きステガードフェードイン（translateY） - **ホバー**：スムーズなcubic-bezierイージング（0.16、1、0.3、1） - **スクロール**：IntersectionObserverを使用してカードがビューポートに入ったときにアニメーションをトリガー - **パフォーマンス**：transformとopacityに`will-change`を使用 ### 7. フッター - **背景**：ダーク（neutral-900）微妙なグラデーションオーバーレイ付き - **ボーダー半径**：上部コーナーのみ（2xl） - **コンテンツ**：アイコン付きの最小限のメタデータ（デバイス、日付、ステータス） - **スペーシング**：コンパクト（2remパディング） ### 8. レスポンシブブレークポイント - **デスクトップ**（>1280px）：4-5カラム - **タブレット**（768-1280px）：2-3カラム - **モバイル**（<768px）：1カラム、全体のパディングを縮小 ### 9. 技術要件 - **単一HTMLファイル**：すべてのCSSを`<style>`タグにインライン - **外部依存関係のみ**： - Pico.css（最小限のCSSフレームワーク） - Font Awesome（アイコン） - Google Fonts（Inter + IBM Plex Mono） - Animate.css（オプション、追加アニメーション用） - **ビルドステップなし**：静的HTMLとして動作する必要があります - **パフォーマンス**：最適化されたアニメーション、レイアウトシフトなし - **アクセシビリティ**：セマンティックHTML、画像のaltテキスト ### 10. ポリッシュ詳細 - **微妙なグラデーション**：奥行きのための背景ラジアル（圧倒的ではない） - **ボーダー処理**：アルファ透明度付きの1pxソリッド - **シャドウレイヤリング**：奥行きのための複数のシャドウ値 - **タイポグラフィ**：見出しのタイトレタースペーシング（-0.03em） - **カラー一貫性**：どこでもデザイントークンを使用、ハードコード値なし - **画像表示**：デバイスフレームの錯覚のためのスクリーンショット周囲の白いボーダー ## 出力形式 単一の`index.html`ファイルを生成します： 1. 完全なHTML構造 2. デザイントークン付きインラインCSS 3. スクロールアニメーション用JavaScript（IntersectionObserver） 4. 適切なメタデータ付きのすべてのスクリーンショットカード 5. すべての画面サイズのレスポンシブデザイン ## スクリーンショットカード構造の例 ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="screenshot-name.png" alt="Description" class="screenshot-img"> </div> <div class="screenshot-info"> <div class="screenshot-meta"> <div class="screenshot-number">1</div> <div class="screenshot-device">iPhone 17 Pro Max</div> </div> <h3 class="screenshot-title">Screen Title</h3> <p class="screenshot-desc">One-line caption</p> </div> </div> ``` ## 「AI作成」ギャラリーとの主な差別化ポイント ❌ **避けるべきこと**： - 過剰なグラデーションと色 - スペースを無駄にする大きな統計カード - 冗長な説明と機能リスト - セクション区切りとカテゴリヘッダー - 圧倒的なアニメーション - 一貫性のないスペーシング - 一般的なストックフォトスタイル ✅ **模倣すべきこと**： - Apple App Storeの製品ページ - Linear、Raycast、Superhumanのマーケティングサイト - ミニマリストでコンテンツファーストのデザイン - 微妙で洗練されたインタラクション - 一貫した視覚的リズム - タイポグラフィ主導の階層 - デザイン要素としてのホワイトスペース ## デプロイノート - ギャラリーは`project-root/screenshots-gallery/`または類似の場所にデプロイする必要があります - 設定用の`netlify.toml`を含む`.netlify`フォルダを含めます - すべてのスクリーンショットは`index.html`と同じフォルダにある必要があります - ビルドプロセス不要 - 純粋な静的HTML --- **使用方法**：このプロンプトをコピーして、以下と一緒にAIアシスタントに提供します： 1. プロジェクト内のスクリーンショットファイルのリスト 2. アプリ名と1行の説明 3. プラットフォーム（iOS、macOS、Android、web） 4. 使用されている主要技術（SwiftUI、React Native、Flutterなど） AIはプロフェッショナルにデザインされた本番運用可能なギャラリーを生成します。