これはTOFU BASEの表示確認用デモ記事です。

PCで使いやすい管理画面でも、スマホではボタンが小さかったり、横スクロールが発生したりすると一気に使いづらくなります。最初からiPhoneで触る前提にすると、設計の基準が変わります。

操作対象を大きくする

スライダーやボタンは、見た目よりもタップできる範囲を優先します。細いアイコンだけを押させるより、ラベルごと押せる方が操作ミスを減らせます。

変更結果をその場で見せる

数値を入力して保存してから別ページで確認するより、変更した瞬間にプレビューへ反映される方が調整しやすくなります。

特に余白、文字サイズ、画像位置のような視覚的な値は、ライブプレビューとの相性が良い項目です。

一度に全部の設定を見せない

設定項目が増えるほど、1画面に全部並べる設計は使いづらくなります。

  • ページごとに分ける
  • セクションごとに折りたたむ
  • よく触る項目を上へ置く
  • 危険な操作は別枠にする

このように優先度で整理すると、スマホでも迷いにくくなります。

保存と公開を分ける

編集途中の状態をローカルに残せるようにして、本番反映は明示的な「公開」操作に分けると安全です。プレビュー中の変更がそのまま公開されないため、試しやすくなります。

スマホで最後まで確認する

レスポンシブ対応をCSSだけで済ませず、実機で「片手で操作できるか」「キーボード表示中も重要ボタンが押せるか」まで確認すると、実用性が上がります。