# 年賀スマホ・タブレット対応について

## 課題

### 全体
アプリがインストールされているかどうかを判定した方が良い

### ポータル

#### アプリダウンロード導線
- アプリダウンロード + ブラウザから注文 の２つのボタンを掲載する？
- ブラウザ注文時に制限がある場合はここで注意喚起する？

<img src="https://i.imgur.com/Qsmyhgu.png"
width="300">

----

#### よくあるご質問
<img src="https://i.imgur.com/9lAND8Y.png" width="300">

- 今まではスマホアクセスの場合はアプリ用のよくあるご質問へ遷移していた
- スマートフォン + ブラウザ注文用のFAQを用意する必要あり？
- パターンA：アプリでの注文か、ブラウザでの注文かを選択するインデックスを設ける
- パターンB：パソコン・スマホブラウザ・スマホアプリの三つから選択するインデックスを設ける

<img src="https://i.imgur.com/0LiHOpe.png" width="300">

----

### マイページ

#### トップ
- PC・スマホでマイページが違う
- PC版ベース
- 機能的にはフル機能閲覧可能
- 全てのマイページコンテンツをスマホに最適化する必要あり
- スマホ版ベース
- 編集中データと宛名機能がないので追加する必要あり
- タブレットでは表示が間延びするか、崩れるので要調整？
- 作り直し
- PC・タブレット両方で最適化されるよう作り直す

<img src="https://i.imgur.com/ASsJYJP.png" width="300">


----

#### 宛名
- タブレット・スマートフォンでの表示を最適化する必要あり

現状
<img src="https://i.imgur.com/43Snbz0.png" width="300">


- 若干調整
- viewport指定
- ボタンの折り返し調整
- その他微調整
- 所要時間5m程度

<img src="https://i.imgur.com/To4iul2.png" width="300">

---

- 新規追加モーダル
- スクロールの挙動がおかしい
- レイアウト調整の難易度は高そう

<img src="https://i.imgur.com/Fk1Vzbx.png" width="300">

---
- ダウンロード関連機能をどうするか
- スマホ・タブレットの場合xlsデータのアップロードは難しそう
- スマホ・タブレット時は削除の方が良い？

<img src="https://i.imgur.com/2AXxhOD.png" width="300">

---

### 編集
- プレビューのサイズを調整
- ボタンサイズ・位置を調整
- iCloud画像について
- 大・中・小を洗濯してダウンロードするiOSのUIが表示される
- 選択してアップロードはできた
- 画像サイズについてはフロントでバリデーションをかけることが可能
- 合成に正しいデータが送信されるかは要検証

<img src="https://i.imgur.com/ou5kQlx.png" width="300">

- 各要素の編集モード時のUIの表示崩れ調整

<img src="https://i.imgur.com/SdGKcYA.png" width="300"><img src="https://i.imgur.com/cWQNqyY.png" width="300">

---
### カート
- レイアウトさえ整えれば動きそう

<img src="https://i.imgur.com/BVIc144.png" width="300">