BubbleでPC画面ができても、スマホで文字やボタンがはみ出すことがあります。レスポンシブ対応は最後に縮小する作業ではなく、コンテナの幅と並び方を設計する作業です。
01最初に画面幅を決める
PC、タブレット、スマホの代表的な幅でプレビューし、各幅で何を優先して見せるか決めます。横並びのカードをスマホでも同じ列数にする必要はありません。読み順が自然になるよう、狭い幅では縦並びにします。
02コンテナと子要素を確認する
親コンテナのレイアウト設定と、子要素の最小幅・最大幅を確認します。固定幅の画像や長い見出しがはみ出す場合、要素単体だけでなく親の幅制約や折り返し設定を見直します。ボタンは文字が切れず、指で押しやすい余白を確保しましょう。
03内容が増える場合も試す
短いダミーテキストで整っていても、実際の日本語の長いタイトルやエラーメッセージで崩れることがあります。データが0件、1件、多数件の場合、入力エラーが出た場合も確認します。画像は縦横比と切り抜き方を決めておくと、端末ごとの差を抑えられます。
04公開前の確認手順
エディターのプレビューだけでなく実機でも確認します。横スクロール、文字の重なり、メニュー操作、フォームの入力を一画面ずつ見てください。端末ごとの違和感はスクリーンショットと幅を記録し、修正後に再確認しましょう。
05具体例：三列の案件カードをスマホで一列にする
PCの案件一覧でカードを三列に並べているとします。スマホでは同じ列数に固執せず、親コンテナの並びを狭い幅で一列に変え、カードの最小幅が画面幅を超えないようにします。各カードには長い案件名、状態、担当者、詳細ボタンがあり、読む順番が「案件名 → 状態 → 担当者 → 操作」になるか見ます。画像を使うなら縦横比と切り抜き位置も決めてください。
幅320pxでは「株式会社〇〇向け新規業務アプリ導入相談」のような長い日本語、英数字が続くメールアドレス、エラー文を入れ、横スクロールとボタンの重なりを確認します。幅768pxでも二列にする必要があるかは、実際の内容を見て決めます。見出しだけ小さくして収めると、本文と操作の読みやすさを損なうことがあります。
最終確認は、データ0件の空状態、1件、20件、入力エラー時の四状態を同じ幅で撮影し、最初の表示・スクロール中・フォーム送信後を見ます。Bubbleのレスポンシブ設定は親子コンテナと幅制約の組み合わせなので、崩れた要素だけでなく親の設定から追うと原因を絞れます。
参考資料
内容は公開時点の公式資料をもとに構成しています。仕様は変更されることがあるため、導入時は最新の公式情報をご確認ください。