エージェント：ドキュメントエージェント
<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />
@会員情報更新 のユースケースドキュメントを参考に、必要な画面を設計し、 @iOS画面設計書テンプレート の様式に沿って出力して。
</aside>
# iOS画面設計書テンプレート
## 基本情報
| 項目 | 内容 |
| ---- | ----------------- |
| 画面ID | \\[画面を一意に識別するID] |
| 画面名 | \\[画面の名称] |
| 機能概要 | \\[この画面が提供する機能の概要] |
| 作成者 | \\[作成者名] |
| 作成日 | \\[作成日] |
| 更新履歴 | \\[更新日・更新者・更新内容] |
## 画面仕様
### 1. 画面レイアウト
\\[画面のワイヤーフレームまたはモックアップ画像を挿入]
### 2. UI要素一覧
| 要素ID | 要素種類 | 表示名 | 説明 | 入力制限/表示条件 |
| --------- | -------------------------- | --------- | -------- | ------------ |
| \\[ID-001] | \\[Button/Label/TextField等] | \\[表示テキスト] | \\[要素の説明] | \\[入力制限や表示条件] |
| \\[ID-002] | | | | |
| ... | | | | |
### 3. 画面遷移
| 操作 | 遷移先画面 | 遷移条件 | 引き継ぎパラメータ |
| ---------- | --------- | ------------ | -------------- |
| \\[ボタンタップ等] | \\[遷移先画面名] | \\[遷移が発生する条件] | \\[遷移時に引き継ぐデータ] |
| ... | | | |
### 4. バリデーションルール
| 項目 | バリデーションルール | エラーメッセージ |
| ------ | --------------- | --------------- |
| \\[項目名] | \\[必須/文字数制限/形式等] | \\[表示するエラーメッセージ] |
| ... | | |
### 5. APIリクエスト
#### リクエスト情報
| API名 | HTTPメソッド | エンドポイント | 呼び出しタイミング |
| ------- | ------------ | ------------- | ---------------- |
| \\[API名] | \\[GET/POST等] | \\[エンドポイントURL] | \\[APIを呼び出すタイミング] |
#### リクエストパラメータ
| パラメータ名 | 型 | 必須 | 説明 |
| --------- | -------------- | --------- | ----------- |
| \\[パラメータ名] | \\[String/Int等] | \\[Yes/No] | \\[パラメータの説明] |
| ... | | | |
#### レスポンス処理
| ステータスコード | 処理内容 |
| -------- | ---------- |
| 200 | \\[成功時の処理] |
| 400 | \\[エラー時の処理] |
| ... | |
### 6. 状態管理
| 状態名 | 型 | 初期値 | 説明 |
| -------- | ---- | ------ | ------------ |
| \\[状態変数名] | \\[型] | \\[初期値] | \\[この状態が表す内容] |
| ... | | | |
### 7. アニメーション・インタラクション
| 要素ID | イベント | アニメーション内容 | 持続時間 |
| ------- | ------------ | ------------- | ----- |
| \\[要素ID] | \\[タップ/スワイプ等] | \\[アニメーションの詳細] | \\[秒数] |
| ... | | | |
### 8. アクセシビリティ対応
| 要素ID | VoiceOver読み上げテキスト | アクセシビリティヒント | その他対応 |
| ------- | ----------------- | ----------- | ----------------- |
| \\[要素ID] | \\[読み上げテキスト] | \\[ヒント内容] | \\[その他のアクセシビリティ対応] |
| ... | | | |
### 9. ローカライゼーション
| キー | 日本語 | 英語 | その他言語 |
| ------ | ---------- | --------- | ------------ |
| \\[キー名] | \\[日本語テキスト] | \\[英語テキスト] | \\[その他言語テキスト] |
| ... | | | |
### 10. デバイス対応
| 対応デバイス | 画面サイズ | 特記事項 |
| ------------- | -------- | ------- |
| \\[iPhone 14等] | \\[画面サイズ] | \\[特記事項] |
| ... | | |
### 11. ダークモード対応
| 要素ID | ライトモード設定 | ダークモード設定 |
| ------- | -------- | -------- |
| \\[要素ID] | \\[色・画像等] | \\[色・画像等] |
| ... | | |
## 補足情報
### 技術的な実装メモ
\\[実装時の注意点や特記事項]
### デザインガイドライン参照
\\[適用するデザインガイドラインへの参照]
### 関連画面
\\[関連する他の画面への参照]
# 基本情報
| 項目 | 内容 |
| ---- | ------------------------------------------------------ |
| 画面ID | member-update-screen |
| 画面名 | 会員情報更新画面 |
| 機能概要 | 会員がメールアドレス・パスワード・プロフィール画像の変更を行う画面（@documentのユースケースに準拠） |
| 作成者 | ダミー |
| 作成日 | 2025/08/12 |
| 更新履歴 | 2025/08/12・ダミー・初版 |
## 画面仕様
### 1. 画面レイアウト
### 2. UI要素一覧
| 要素ID | 要素種類 | 表示名 | 説明 | 入力制限/表示条件 |
| --------------- | --------- | ---------- | ------------------ | ------------------------- |
| emailInput | TextField | 新しいメールアドレス | メールアドレスの入力欄 | 形式・ユニーク必須 |
| currentEmail | Label | 現在のメールアドレス | 登録済メールアドレス表示 | ログインユーザの現在値表示 |
| passwordInput | Password | 現在のパスワード | 本人確認用パスワード | 必須 |
| newPassword | Password | 新パスワード | 新しいパスワード入力 | 強度・文字数制限 |
| confirmPassword | Password | 新パスワード（確認） | 新パスワード再入力 | newPasswordと一致必須 |
| profileImage | Image | プロフィール画像 | 現在登録中のプロフィール画像 | 画像表示のみ |
| uploadImage | File | 画像ファイル選択 | 新しい画像をアップロード | jpg/pngのみ、サイズ上限2MB |
| saveEmailBtn | Button | メール更新 | メールアドレス変更実行 | 入力必須・変更あればのみenabled |
| savePassBtn | Button | パスワード変更 | パスワード変更実行 | 入力必須 three fields enabled |
| saveImgBtn | Button | 画像変更 | 画像アップロード実行 | 画像選択時enabled |
| cancelBtn | Button | キャンセル | 編集操作の取り消し | いつでもenabled |
| errorMsg | Text | エラー表示エリア | 各種バリデーションor処理エラー表示 | 該当エラー時のみ表示 |
| resultMsg | Text | 処理結果通知 | 成功/失敗などの共通通知枠 | 処理後のみ表示 |
### 3. 画面遷移
| 操作 | 遷移先画面 | 遷移条件 | 引き継ぎパラメータ |
| ------- | ------ | --------------- | --------- |
| 保存ボタン | 現在画面 | バリデーション成功→保存API | 処理結果 |
| キャンセル | 会員詳細画面 | ボタン押下 | なし |
| セッション切れ | ログイン画面 | セッションエラー | なし |
### 4. バリデーションルール
| 項目 | バリデーションルール | エラーメッセージ |
| ------- | ------------------ | ----------------------- |
| メールアドレス | 必須・メール形式・ユニーク | メール形式が正しくありません／既に登録済みです |
| 現在パスワード | 必須・正当性 | 現在のパスワードが違います |
| 新パスワード | 必須・8文字以上・英数字記号混在 | 新しいパスワードが弱いです／8文字以上必須 |
| 確認パスワード | newPasswordと一致 | 新しいパスワードが一致しません |
| 画像ファイル | jpg/pngのみ・サイズ2MB以下 | 許可されていない形式です／サイズが大きいです |
### 5. APIリクエスト
#### リクエスト情報
| API名 | HTTPメソッド | エンドポイント | 呼び出しタイミング |
| ------------------ | -------- | -------------------- | ----------- |
| updateEmail | POST | /api/member/email | メール保存時 |
| updatePassword | POST | /api/member/password | パスワード保存時 |
| updateProfileImage | POST | /api/member/image | 画像アップロード保存時 |
#### リクエストパラメータ
| パラメータ名 | 型 | 必須 | 説明 |
| --------------- | ------ | --- | ------------------ |
| newEmail | String | Yes | 新メールアドレス |
| currentPassword | String | Yes | 現パスワード |
| newPassword | String | Yes | 新パスワード |
| profileImage | File | Yes | 新プロフィール画像（アップロード時） |
#### レスポンス処理
| ステータスコード | 処理内容 |
| -------- | --------------- |
| 200 | 成功時：成功通知表示 |
| 400/422 | バリデーションエラー表示 |
| 401 | セッション切れ：ログイン画面へ |
| 500 | 共通エラー表示 |
### 6. 状態管理
| 状態名 | 型 | 初期値 | 説明 |
| ------------ | ------ | -------------- | ----------- |
| email | String | 現在値（API取得） | 入力中メールアドレス |
| password | String | 空文字 | 現在パスワード |
| newPassword | String | 空文字 | 新パスワード |
| confirmPass | String | 空文字 | 新パスワード（確認） |
| profileImage | String | 現在画像URL（API取得） | 表示用プロフィール画像 |
| uploadFile | File | null | 新規アップロード画像 |
| error | String | 空文字 | エラーメッセージ |
| result | String | 空文字 | 処理結果通知 |
### 7. アニメーション・インタラクション
| 要素ID | イベント | アニメーション内容 | 持続時間 |
| ------------ | ---- | ---------------- | ---- |
| saveEmailBtn | タップ | ボタン押下時プレスアニメーション | 0.2秒 |
| savePassBtn | タップ | ボタン押下時プレスアニメーション | 0.2秒 |
| saveImgBtn | タップ | ボタン押下時プレスアニメーション | 0.2秒 |
| errorMsg | 表示時 | フェードイン通知表示 | 0.5秒 |
| resultMsg | 表示時 | フェードイン通知表示 | 0.5秒 |
### 8. アクセシビリティ対応
| 要素ID | VoiceOver読み上げテキスト | アクセシビリティヒント | その他対応 |
| ------------- | ----------------- | ------------ | --------------- |
| emailInput | 新しいメールアドレス入力 | メール形式で入力 | フォーカス枠カラーコントラスト |
| passwordInput | 現在のパスワード入力 | セキュリティのため非表示 | 自動読上しない |
| saveEmailBtn | メール変更保存ボタン | 入力チェック後有効 | |
| ... | ... | ... | ... |
### 9. ローカライゼーション
| キー | 日本語 | 英語 | その他言語 |
| ------------------ | -------- | ------------- | ----- |
| member.email | メールアドレス | Email Address | |
| member.password | パスワード | Password | |
| member.newPassword | 新パスワード | New Password | |
| member.profile | プロフィール画像 | Profile Image | |
| common.save | 保存 | Save | |
| common.cancel | キャンセル | Cancel | |
### 10. デバイス対応
| 対応デバイス | 画面サイズ | 特記事項 |
| --------- | --------- | ------- |
| iPhone 14 | 390x844px | タッチ操作適応 |
| Android | 主流解像度 | レスポンシブ |
| PC | 1280px以上 | レスポンシブ |
### 11. ダークモード対応
| 要素ID | ライトモード設定 | ダークモード設定 |
| ------------ | -------- | --------- |
| emailInput | 白背景・黒字 | 濃グレー背景・白字 |
| saveEmailBtn | 青背景・白字 | 青背景・白字 |
| ... | ... | ... |
## 補足情報
### 技術的な実装メモ
- メール・パスワード・画像ともAPIバリデーション＋画面バリデーション双方実施
- 重要事項変更時はサーバー側からメール通知等対応
- フロントから入力値は必ず暗号化通信
### デザインガイドライン参照
- 社内基準のフォーム設計ガイド、アクセシビリティガイド参照
### 関連画面
- 会員詳細画面
- ログイン画面