# 動画2分分割Webアプリ 開発プロンプト

## 概要

家族共有アルバムアプリが2分までの動画しかアップロードできないため、任意の長さの動画を2分ごとに自動分割するWebアプリを作成してください。

## ターゲット

- デバイス: iPhone（Safari）
- 想定動画長: 5〜10分程度
- ユーザー: 個人利用（自分用）

## 必須機能

1. **動画選択**: カメラロールから動画を選択できる
2. **自動分割**: 選択した動画を2分（120秒）ごとに自動分割
3. **ダウンロード**: 分割された動画を1本ずつカメラロールに保存できる

## 技術要件

- **フロントエンドのみ**（サーバーレス）
- **ffmpeg.wasm** を使用してブラウザ内で動画処理
- **PWA対応**（ホーム画面に追加できるように）
- レスポンシブデザイン（iPhone最適化）

## UI仕様

### 画面構成（シンプルに1画面）


┌─────────────────────────┐
│   📹 動画を2分で分割    │  ← タイトル
├─────────────────────────┤
│                         │
│   [ 動画を選択 ]        │  ← ファイル選択ボタン
│                         │
│   選択中: video.mov     │  ← 選択後に表示
│   長さ: 7分30秒         │
│   → 4本に分割されます   │
│                         │
│   [ 分割開始 ]          │  ← メインアクションボタン
│                         │
│   ━━━━━━━━━░░░░ 60%     │  ← 処理中プログレスバー
│                         │
│   ✅ part1.mp4 [保存]   │  ← 分割完了後、各ファイルの
│   ✅ part2.mp4 [保存]   │     ダウンロードボタン
│   ✅ part3.mp4 [保存]   │
│   ✅ part4.mp4 [保存]   │
│                         │
│   [ 全部まとめて保存 ]  │  ← 一括ダウンロード（任意）
│                         │
└─────────────────────────┘


### デザイン指針

- 背景: 白または薄いグレー
- メインカラー: 青系（#007AFF など iOS風）
- フォント: システムフォント
- 角丸ボタン、十分なタップ領域（44px以上）
- シンプル＆クリーン

## 処理フロー


1. ユーザーが動画を選択
2. 動画のメタデータ（長さ）を取得して表示
3. 「分割開始」ボタンで処理開始
4. ffmpeg.wasmで2分ごとに分割
   - 再エンコードなし（-c copy）で高速処理を優先
   - 無理なら再エンコードでもOK
5. 分割完了後、各ファイルのダウンロードリンクを表示
6. ユーザーが1本ずつ保存


## ファイル命名規則

- 元ファイル名_part1.mp4
- 元ファイル名_part2.mp4
- ...

## エラーハンドリング

- 動画以外のファイルが選択された場合 → エラーメッセージ
- 2分以下の動画 → 「この動画は分割不要です」と表示
- 処理中にエラー → リトライを促すメッセージ
- メモリ不足（大きすぎる動画） → 警告メッセージ

## PWA設定

- manifest.json を作成
- アイコン（シンプルなもので可）
- 「ホーム画面に追加」対応
- オフライン対応は不要

## ディレクトリ構成（例）


video-splitter/
├── index.html
├── style.css
├── app.js
├── manifest.json
├── icon-192.png
├── icon-512.png
└── sw.js (Service Worker、最小限でOK)


## 注意事項

- iPhoneのSafariはメモリ制限があるため、10分を超える動画では警告を出す
- ffmpeg.wasmの初回ロードは時間がかかるので、ローディング表示を入れる
- 動画のコーデックによっては処理に時間がかかる可能性あり

## 優先度

1. **必須**: 動画選択 → 2分分割 → ダウンロード（基本機能）
2. **推奨**: PWA対応、プログレス表示
3. **任意**: 一括ダウンロード、分割秒数のカスタマイズ

---

まずは基本機能を動かして、動作確認してから細かい調整をお願いします。

- オブジェクトモデル（Video, SplitResult, VideoPart）
- 4画面の詳細設計
- ナビゲーションフロー図
- デザイントークン（スペーシング、カラー、タイポグラフィ）
- アクセシビリティ要件
- 実装優先順位

┌─────────────────────────────────┐
│ ナビゲーションバー                │
│ 「動画ライブラリ」                │
├─────────────────────────────────┤
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ 🎬    │ │ 🎬    │ │ 🎬    │ │
│ │サムネ │ │サムネ │ │サムネ │ │
│ │5:30   │ │12:45  │ │3:20   │ │
│ │旅行   │ │誕生日 │ │公園   │ │
│ └───────┘ └───────┘ └───────┘ │
└─────────────────────────────────┘

Design a cute and simple iOS app icon for "2分ちょっきん" (a video splitting app that cuts videos into 2-minute segments).

Style:
- Flat design with soft, rounded shapes
- Kawaii/cute Japanese aesthetic
- Minimalist and clean

Elements:
- A pair of cute scissors (main motif) with rounded, friendly appearance
- Film strip or video frame being cut
- The number "2" subtly incorporated
- Soft pastel color palette (light pink, mint green, or soft purple as main color)

Requirements:
- iOS app icon format (rounded square)
- Simple enough to be recognizable at small sizes
- Friendly and approachable feeling
- No text in the icon

:root {
  /* ブランドカラー */
  --color-primary-mint: 
#A8E6CF;   /* 背景など */
  --color-accent-pink:  
#FF8B94;   /* ボタン、強調 */

  /* テキスト・ボーダー */
  --color-text-main:    
#6D5D5D;   /* メインテキスト */
  --color-border:       
#8C7A7A;   /* 薄めの境界線用 */

  /* 背景・ベース */
  --color-surface:      
#F7FBF9;   /* カード背景 */
  --color-white-pure:   
#FFFFFF;   /* 必要時の白 */
}

# iOS App Visual Redesign Prompt for Claude Code

## 🎯 目的
動画分割アプリ「ちょきっと」のiOSアプリを、OS標準のUIコンポーネント（UIKit/SwiftUI）を最大限活用しながら、指定のブランドカラーパレットでビジュアルリデザインする。

---

## 🎨 Design Tokens（必須適用）

以下のカラーパレットをアプリ全体に一貫して適用してください。

swift
// MARK: - Brand Colors (Assets.xcassets または Extension で定義)

extension Color {
    // ブランドカラー
    static let brandMint = Color(hex: "A8E6CF")       // Primary - 背景、ナビゲーション
    static let brandPink = Color(hex: "FF8B94")       // Accent - CTA、強調
    
    // テキスト・ボーダー
    static let textMain = Color(hex: "6D5D5D")        // メインテキスト
    static let textSecondary = Color(hex: "8C7A7A")   // サブテキスト、ボーダー
    
    // サーフェス
    static let surfaceCard = Color(hex: "F7FBF9")     // カード背景
    static let surfacePure = Color.white              // 必要時の白
    
    // 派生色（自動生成または手動調整）
    static let mintLight = Color(hex: "C8F0DF")       // ミント薄め
    static let pinkLight = Color(hex: "FFB5BB")       // ピンク薄め
}

// UIKit用
extension UIColor {
    static let brandMint = UIColor(hex: "A8E6CF")
    static let brandPink = UIColor(hex: "FF8B94")
    static let textMain = UIColor(hex: "6D5D5D")
    static let textSecondary = UIColor(hex: "8C7A7A")
    static let surfaceCard = UIColor(hex: "F7FBF9")
}


---

## 📐 デザインルール

### 1. 角丸（Corner Radius）
すべてのUIコンポーネントで統一した角丸を適用：

| コンポーネント | Corner Radius |
|---------------|---------------|
| 大きなカード、モーダル | 24px |
| ボタン（大） | 16px または capsule |
| ボタン（小）、入力フィールド | 12px |
| サムネイル、アイコン背景 | 12px |
| 小さなバッジ | 8px |

### 2. シャドウ
柔らかいシャドウで奥行きを表現（iOS標準の.shadowより控えめに）：

swift
.shadow(color: Color.textMain.opacity(0.08), radius: 12, x: 0, y: 4)


### 3. ボーダー
アクセントとして太めのボーダーを使用する場面あり（2-3px、textSecondary色）

### 4. タイポグラフィ

**フォント: SF Rounded（システム標準）を使用**

swift
// 見出し（大）
.font(.system(.largeTitle, design: .rounded, weight: .bold))

// 見出し（中）
.font(.system(.title2, design: .rounded, weight: .bold))

// 見出し（小）
.font(.system(.headline, design: .rounded, weight: .semibold))

// 本文
.font(.system(.body, design: .rounded))

// サブテキスト
.font(.system(.subheadline, design: .rounded))

// キャプション
.font(.system(.caption, design: .rounded))


**フォントルール:**
- Dynamic Type完全対応を維持（`UIFontMetrics`自動適用）
- カスタムフォントの埋め込み禁止（アプリサイズ肥大化防止）
- ロゴ「ちょきっと」のみ画像またはSVGで対応可
- `#000000`は使用禁止 → `textMain`に置換
- `#666666`等のグレーは → `textSecondary`に置換

**UIKit使用時:**
swift
// UIKitでSF Roundedを使用する場合
let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .body)
    .withDesign(.rounded)!
let font = UIFont(descriptor: descriptor, size: 0) // size: 0 でDynamic Type追従


---

## 🧩 コンポーネント別 適用ガイド

### NavigationBar / ToolBar

swift
// SwiftUI
.toolbarBackground(Color.brandMint, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
.tint(Color.textMain)

// UIKit (AppDelegate or SceneDelegate)
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .brandMint
appearance.titleTextAttributes = [.foregroundColor: UIColor.textMain]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.textMain]
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
UINavigationBar.appearance().tintColor = .textMain


### TabBar

swift
// SwiftUI
.tint(Color.brandPink)

// UIKit
let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithOpaqueBackground()
tabBarAppearance.backgroundColor = .surfaceCard
UITabBar.appearance().standardAppearance = tabBarAppearance
UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
UITabBar.appearance().tintColor = .brandPink
UITabBar.appearance().unselectedItemTintColor = .textSecondary


### Buttons

swift
// Primary CTA Button（最も目立たせたいボタン）
Button("動画を分割") { }
    .buttonStyle(.borderedProminent)
    .tint(Color.brandPink)
    .foregroundColor(.white)
    .clipShape(Capsule())

// または カスタムスタイル
struct PrimaryCTAButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.headline)
            .foregroundColor(.white)
            .padding(.horizontal, 32)
            .padding(.vertical, 14)
            .background(Color.brandPink)
            .clipShape(Capsule())
            .shadow(color: Color.brandPink.opacity(0.4), radius: 8, y: 4)
            .scaleEffect(configuration.isPressed ? 0.96 : 1.0)
            .animation(.easeInOut(duration: 0.15), value: configuration.isPressed)
    }
}

// Secondary Button（枠線のみ）
struct SecondaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.subheadline.weight(.medium))
            .foregroundColor(Color.textMain)
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color.surfaceCard)
            .overlay(
                Capsule()
                    .stroke(Color.textSecondary, lineWidth: 1.5)
            )
            .clipShape(Capsule())
    }
}


### List / Form

swift
// 背景色の適用
List {
    // ...
}
.scrollContentBackground(.hidden)
.background(Color.brandMint)
.listRowBackground(Color.surfaceCard)

// セクションヘッダー
.headerProminence(.increased)
.foregroundColor(Color.textMain)


### Cards（カスタムコンポーネント）

swift
struct CardView<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        content
            .padding(16)
            .background(Color.surfaceCard)
            .cornerRadius(16)
            .shadow(color: Color.textMain.opacity(0.08), radius: 12, x: 0, y: 4)
    }
}


### Progress / Slider

swift
ProgressView(value: progress)
    .tint(Color.brandPink)

Slider(value: $value)
    .tint(Color.brandPink)


### TextField / Input

swift
TextField("動画のタイトル", text: $title)
    .textFieldStyle(.plain)
    .padding(14)
    .background(Color.surfaceCard)
    .cornerRadius(12)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(Color.textSecondary.opacity(0.3), lineWidth: 1)
    )


### Alert / Sheet

swift
// Sheetの背景
.presentationBackground(Color.surfaceCard)
.presentationCornerRadius(24)

// Alert - システム標準を使用（tintColorのみ変更）
.tint(Color.brandPink)


---

## 🖼️ Assets.xcassets 設定

### AccentColor
- Any Appearance: `#FF8B94`
- Dark Appearance: `#FF8B94`（または少し明るめに調整）

### Color Set を追加
以下の名前でColor Setを作成：
- `BrandMint` → `#A8E6CF`
- `BrandPink` → `#FF8B94`
- `TextMain` → `#6D5D5D`
- `TextSecondary` → `#8C7A7A`
- `SurfaceCard` → `#F7FBF9`

---

## ⚙️ Global Appearance Setup

swift
// App.swift または AppDelegate で実行
func setupGlobalAppearance() {
    // NavigationBar
    let navAppearance = UINavigationBarAppearance()
    navAppearance.configureWithOpaqueBackground()
    navAppearance.backgroundColor = .brandMint
    navAppearance.titleTextAttributes = [.foregroundColor: UIColor.textMain]
    navAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.textMain]
    UINavigationBar.appearance().standardAppearance = navAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
    UINavigationBar.appearance().tintColor = .textMain
    
    // TabBar
    let tabAppearance = UITabBarAppearance()
    tabAppearance.configureWithOpaqueBackground()
    tabAppearance.backgroundColor = .surfaceCard
    UITabBar.appearance().standardAppearance = tabAppearance
    UITabBar.appearance().scrollEdgeAppearance = tabAppearance
    UITabBar.appearance().tintColor = .brandPink
    UITabBar.appearance().unselectedItemTintColor = .textSecondary
    
    // Global Tint
    UIView.appearance().tintColor = .brandPink
    
    // Switch
    UISwitch.appearance().onTintColor = .brandPink
    
    // Slider
    UISlider.appearance().minimumTrackTintColor = .brandPink
    UISlider.appearance().maximumTrackTintColor = .textSecondary.withAlphaComponent(0.3)
}


---

## 🚫 禁止事項

1. **`#000000`（純黒）の使用禁止** → `textMain`を使用
2. **`#FFFFFF`（純白）の多用禁止** → 背景は`surfaceCard`、必要時のみ白
3. **iOS標準以外のカスタムナビゲーション実装禁止** → 標準UINavigationController/NavigationStackを使用
4. **過度なアニメーション禁止** → iOS標準のspringアニメーションを基本とする
5. **Dynamic Type無効化禁止** → アクセシビリティを維持

---

## ✅ 実装チェックリスト

- [ ] Color Extension を作成し、全カラーを定義
- [ ] Assets.xcassets に Color Set を追加
- [ ] AccentColor を `#FF8B94` に設定
- [ ] Global Appearance を AppDelegate/App.swift で設定
- [ ] NavigationBar のスタイル適用確認
- [ ] TabBar のスタイル適用確認
- [ ] 全ボタンのスタイル統一
- [ ] List/Form の背景色適用
- [ ] TextField のスタイル適用
- [ ] ダークモード対応（必要に応じて）

---

## 📝 追加指示

実装時に以下を意識してください：

1. **OS標準コンポーネント優先**: カスタム実装より標準UIKit/SwiftUIコンポーネントの見た目を変更する形で対応
2. **一貫性**: 同じ役割のUI要素は同じスタイルを適用
3. **アクセシビリティ**: コントラスト比、Dynamic Type、VoiceOverを考慮
4. **パフォーマンス**: 不要な再描画を避ける（Color定義はstaticに）

何か不明点があれば、このドキュメントを参照しながら質問してください。

fastlane beta  # TestFlight配布
fastlane release  # App Store提出