レスポンシブ対応
PC、タブレット、スマートフォンで破綻しない画面に調整します。
レスポンシブ対応は、同じ画面を幅の違う端末で使っても、文字、表、ボタン、検索条件、サイドメニュー、入力フォームが読みやすく操作しやすい状態を保つための調整です。Roundtableでは、発注者、実装者、AIに指示する人が、どの端末で誰が何をする画面なのかをそろえてから、PC優先、スマホ優先、横スクロール許容、縦積み表示などの方針を決めます。
この機能でできること
PCでは一覧性を重視した表やサイドメニューを表示し、タブレットでは列数や余白を調整し、スマートフォンでは検索条件、一覧行、操作ボタンを縦に並べるなど、画面幅に合わせて見やすい配置へ切り替えられます。公開ページ、会員ポータル、管理画面、入力フォーム、詳細画面、ダッシュボードなどで、端末ごとの破綻を減らします。
単に縮めるのではなく、操作の優先順位を端末ごとに整理します。
スマホでは頻繁に使う項目を上に出し、確認だけの情報は折りたたむなど、画面幅に合わせて情報量と操作しやすさを調整します。
よくある利用場面
外出先で管理画面を確認したい
スマホから案件状況、予約、問い合わせ、タスクを確認し、必要な行ボタンだけ操作できるようにします。
公開フォームをスマホで入力しやすくしたい
申込、予約、問い合わせ、会員登録などで、入力欄、選択肢、送信ボタンを片手でも使いやすい幅と順番にします。
横長の表が画面からはみ出す
重要列だけを残す、カード表示へ切り替える、必要な表だけ横スクロールにするなど、読み方を整理します。
プロンプト例
対象画面、優先する端末、スマホで必ず見せたい情報、折りたたんでよい情報、横スクロールを許す範囲、ボタン配置をまとめて伝えると、見た目だけでなく実際の操作に合ったレスポンシブ対応になります。
プロンプト
案件一覧画面をレスポンシブ対応してください。PCでは検索条件と一覧テーブルを横並びのまま使い、タブレットでは検索条件を2列にしてください。スマホでは検索条件を縦積みにし、一覧は顧客名、ステータス、期限、主要ボタンだけをカード表示に切り替えてください。詳細、編集、電話ボタンは押しやすい幅にし、不要な列はスマホでは非表示にしてください。
この機能を使うときのポイント
対象端末PC、タブレット、スマホのうち、実際に利用頻度が高い端末を先に確認します。
重要情報狭い画面でも必ず見せる項目、折りたたむ項目、詳細画面へ送る項目を分けます。
操作ボタンスマホで誤操作しないよう、主要操作、補助操作、危険操作の位置と大きさを調整します。
横スクロール表を横スクロールにする場合は、どの列を固定または先頭に置くかを決めます。
この機能を実装するときのコツ
実装では、画面幅ごとのレイアウト、テーブル列の表示順、ボタンの折り返し、フォーム項目の列数、サイドメニューの扱い、固定ヘッダーや固定アクションバーの重なりを確認します。管理画面では一覧性を保ちつつ、スマホではカード化や縦積み表示を使い、公開ページでは入力完了までの導線が途中で隠れないようにします。最後に代表的なPC幅、タブレット幅、スマホ幅でスクリーンショットを取り、文字切れ、横はみ出し、ボタン重なり、操作不能な箇所がないか確認します。