SCALE — Build Lab

モバイル対応を改善

UI/UX改善

Improve Mobile Responsive

PC前提で作ったページをスマホ対応する時

コピペ用 指示文
308 文字
この画面をモバイルでも使いやすく改善してください。

【適用するルール】
- 1カラムレイアウトに切替(768px以下)
- ボタンは最小44pxの高さ(指タップ最適化)
- 横スクロールが発生しないように
- テーブルは「カード形式」に変換 or 横スクロール可に
- ヘッダーは固定 + ハンバーガーメニュー化
- フォームの label は input の上に配置
- フォントサイズ最低16px(iOSでズームされない)
- ホバーは tap でも動くように
- 重要操作は画面下部に固定(FAB)

【テスト】
- iPhone SE(375px幅)でも崩れないこと
- 縦スクロールのみで操作完結すること
タグ
#モバイル#レスポンシブ#改善
同じカテゴリの他のプロンプト