モバイル対応を改善
UI/UX改善Improve Mobile Responsive
PC前提で作ったページをスマホ対応する時
コピペ用 指示文
308 文字
この画面をモバイルでも使いやすく改善してください。
【適用するルール】
- 1カラムレイアウトに切替(768px以下)
- ボタンは最小44pxの高さ(指タップ最適化)
- 横スクロールが発生しないように
- テーブルは「カード形式」に変換 or 横スクロール可に
- ヘッダーは固定 + ハンバーガーメニュー化
- フォームの label は input の上に配置
- フォントサイズ最低16px(iOSでズームされない)
- ホバーは tap でも動くように
- 重要操作は画面下部に固定(FAB)
【テスト】
- iPhone SE(375px幅)でも崩れないこと
- 縦スクロールのみで操作完結すること 同じカテゴリの他のプロンプト