【Bubble】のレスポンシブ完全ガイド！スマホ対応もバッチリ

「PCで見ると綺麗なのに、スマホで見るとレイアウトが崩れてしまう…」

Bubbleでアプリ開発をしていると、誰もが一度はぶつかる壁が「レスポンシブデザイン」です。

現代のアプリ開発において、スマホやタブレットなど様々な画面サイズに対応させるレスポンシブ化は必須のスキルです。

この記事では、BubbleのResponsiveタブの使い方から、レイアウト崩れを防ぐ具体的な設定方法までを徹底解説します。

Bubbleのレスポンシブ設定：基本画面の使い方

Bubbleでレスポンシブ対応を行うには、エディタの「Responsive」タブを使用します。

Designタブの隣にある「Responsive」をクリックすると、画面幅を変えた時の表示プレビューや、レスポンシブ専用の設定パネルが表示されます。

【スマホ対応】画面幅が狭まるときの崩れを防ぐ

画面幅を狭めた時に要素がはみ出したり、意図しない配置になったりする原因と対策を見ていきましょう。

• fixed widthのチェックを外す。
• current minimum width を調節する。
• Collapse margins を設定する。

この３点を行うことで、エレメントのデザインやページのレイアウトを崩さない設定にできるようになります！

1. 固定幅（Fixed width）を解除する

エレメント（要素）の設定画面（Layoutタブ）にある「Make this element fixed-width」にチェックが入っていると、画面幅に関わらずサイズが固定されます。

レスポンシブ対応させるには、基本的にこのチェックを外します。

2. 最小幅（Min width）を調整する

固定幅を解除すると、要素は画面に合わせて縮小しますが、小さくなりすぎてデザインが崩れることがあります。

これを防ぐために「Min width（最小幅）」を設定します。

例えば、スマホ（iPhone SEなど）の最小幅である「320px」や「375px」を設定しておくと、それ以上は縮まらず、安全なレイアウトを保てます。

3. 余白の削除（Collapse margins）

「Collapse when hidden」や「Collapse margins」の設定を使うと、要素が非表示になった際や、幅が狭まった際に不要な余白を自動で詰めることができます。

スマホ画面を有効活用するために重要な設定です。

【PC対応】画面幅が広がるときの設定

逆に、ワイドモニターなどで画面幅が広がりすぎた場合の対策も必要です。

最大幅（Max width）を設定する

要素が横に伸びすぎて間延びしてしまうのを防ぐには、「Max width（最大幅）」を設定します。

例えば、本文テキストやコンテナグループに「1200px」などの最大幅を設定し、画面中央に配置（Center align）することで、見やすいレイアウトを維持できます。

これを設定することで、エレメントの最大幅をあらかじめ決めておくことができます！

「Apply a max width」を設定することで、画面幅を広げてもエレメントの最大幅が固定されレイアウトが崩れなくなります！！

【実践】PCとスマホで表示要素を切り替えるテクニック

「PCではボタンを表示したいけど、スマホではアイコンだけにしたい」

このように、画面サイズによって表示する要素自体を切り替える方法を解説します。

Conditional（条件）設定を使う

Bubbleの強力な機能である「Conditional」タブを使います。

1. PC用ボタンの設定： Conditionalタブで「Current page width < 768（スマホサイズ）」という条件を追加し、プロパティで「This element is visible」のチェックを外します。
2. スマホ用アイコンの設定： 同様に「Current page width >= 768（PCサイズ）」の条件で非表示にします。
3. レイアウト設定： 両方の要素について、Layoutタブで「Collapse when hidden」にチェックを入れます。これで、非表示になった方の要素のスペースが詰められ、自然な配置になります。

まとめ：レスポンシブ対応でユーザー体験を向上させよう

レスポンシブデザインは一見複雑に見えますが、「固定幅を解除」「最小・最大幅の設定」「条件付き表示」の3つをマスターすれば、大抵のレイアウトは実現できます。

まずはプレビュー画面のバーを動かしながら、どの設定がどう影響するかを触って確かめてみましょう。

スマホでもPCでも快適に使えるアプリを目指して、ぜひ実装にチャレンジしてみてください。