Bubbleのレスポンシブ設定はこれで完璧!スマホでも綺麗に表示させよう!

Bubbleレスポンシブゲーム

以前のBubbleでは、テキストやインプット、ボタンなどの要素は絶対位置で配置され、PC画面と携帯画面の両方できれいに表示されるページを制作するのは至難の技でした。

しかし2021年11月、CSS flexboxに対応した新レスポンシブエンジンがβ版として公開され、要素の配置を簡単に制御できるようになりました。

そして2022年6月のアップデートで、これまでβ版であった新レスポンシブエンジンが標準となり、Bubbleのデザイン性が大きく改善されました。

Build beautiful pages with responsive design

アップデート後、Bubble公式から新レスポンシブがゲーム感覚で学べるテンプレートが公開されています。

本記事では、このテンプレートを利用してBubbleの新レスポンシブの操作方法について解説していきます。

そもそもBubbleに登録してない方は、以下の記事を参考に登録して下さい。

 

1.テンプレートの取得

STEP.1
テンプレートのページにアクセスします。

STEP.2
"Use template"をクリックします。

レスポンシブゲームのテンプレート

STEP.3
"Use now"をクリックします。これでテンプレートが取得できました。

テンプレートの取得

STEP.4
Bubbleエディタを開き、アプリを新規作成します。

アプリの新規作成1

アプリの新規作成2

新規作成されたアプリ

これで準備ができました!それでは早速、Bubbleのレスポンシブについて学んでいきましょう!

2.ルール説明

このテンプレートを使用する上で、注意点が3つあります。

1.”Group workspace”と名付けられたグループとその中のエレメントのみを編集します。その他の要素は設定を変更しないで下さい。

Group Workspaceを編集します

2.案内がない限り、”Group Workspace”グループの”Parent container”設定は変更しないで下さい。

親コンテナに対する位置は変更しません

3.ヒントアイコンのメモには答えのヒントが、チェックアイコンのメモには答えが記されています。答えは本記事でも確認できますのでご安心ください。

メモからヒントあるいは答えが確認できます

 

3.Row

Rowコンテナ内の要素は水平方向に並べられます。

レベル1:Stat Here

赤い鳥が、右側の窓に重なるように設定を変更しましょう。

Start Here

Group Workspaceの”Container alignment”を右揃えに変更します。

右揃え

Start Hereの答え2

レベル2:Take two

赤い鳥が、左側の窓に重なるように設定を変更しましょう。

Take two

 

Group Workspaceの”Container alignment”を左揃えに変更します。

Group Workspaceを左揃えに設定

Take twoの解答

 

 

レベル3:Seeing double

赤い鳥2匹がそれぞれ中央の窓に重なるように設定を変更しましょう。

Seeing double

Group Workspaceの”Container alignment”を中央揃えに変更します。

Group Workspaceを中央揃えに設定する

Seeing doubleの解答

レベル4:A few good windows

赤い鳥3匹がそれぞれ窓に重なるように設定を変更しましょう。ここで注目すべきは両端の窓とグループの間には余白があるという点です。

A few good windows

Group Workspaceの”Container alignment”を均等配置(両端にスペース)に変更します。

均等揃え(両端スペース)

この設定では、グループ内要素の両端にスペースを確保した上で、均等に配置することができます。

A few good windowsの解答

レベル5:Just a little bit farther

赤い鳥3匹がそれぞれ窓に重なるように設定を変更しましょう。ここで注目すべきは両端の窓とグループの間の余白がないという点です(窓の画像自体が空白を含んでいるため、余白があるように見えます)。

Just a little bit farther

Group Workspaceの”Container alignment”を均等配置(エレメント間にスペース)に変更します。

均等揃え(エレメント間にスペース)

この設定では、グループの幅をすべて使って均等に配置することができます。

Just a little bit fartherの解答

レベル6:Time to stay aligned

赤い鳥3匹がそれぞれ窓に重なるように設定を変更しましょう。垂直方向にもずれている点に注意です。

Time to stay aligned

Group Workspaceの”Container alignment”を左揃えに変更します。

左揃え

さらに赤い鳥それぞれの”Vertical alignment”を下揃えに変更します。

動物の垂直方向を変更

Time to stay alignedの解答

レベル7:Back to center

赤い鳥が窓に重なるように設定を変更しましょう。垂直方向にもずれている点に注意です。

Back to center

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

さらに赤い鳥の”Vertical alignment”を中央揃えに変更します。

動物の垂直方向を変更

Back to centerの答え

レベル8:Way off base

赤い鳥3匹がそれぞれ窓に重なるように設定を変更しましょう。両端の窓とグループの間には余白があり、垂直方向にもずれている点に注意です。

Way off base

Group Workspaceの”Container alignment”を均等揃え(両端にスペース)に変更します。

均等揃え(両端スペース)

さらに赤い鳥それぞれの”Vertical alignment”を上揃えに変更します。

動物の垂直方向を変更

Way off baseの答え

レベル9:Down they go

赤い鳥3匹がそれぞれ窓に重なるように設定を変更しましょう。両端の窓とグループの間の余白は存在せず、それぞれの垂直方向がばらばらである点に注意です。

Down they go

Group Workspaceの”Container alignment”を均等揃え(エレメント間にスペース)に変更します。

均等揃え(エレメント間にスペース)

さらに赤い鳥それぞれの”Vertical alignment”を窓と揃うように変更します。

動物の垂直方向を変更

Down they goの答え

レベル10:Ferris Wheel

赤い鳥3匹がそれぞれ窓に重なるように設定を変更しましょう。窓それぞれの垂直方向がばらばらである点に注意です。

Ferris Wheel

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

さらに赤い鳥それぞれの”Vertical alignment”を窓と揃うように変更します。

動物の垂直方向を変更

Ferris Wheelの答え

Tips:要素の並び替え

それぞれの要素を選択し、詳細設定から順序を変更することができます。

要素の並び替え

レベル11:Time to re-order…

青いネズミと赤い鳥が、それぞれの影に重なるように設定を変更しましょう。順序を変更する必要があるかもしれません。

Time to re-order...

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

青いネズミの順序を赤い鳥の後ろに変更します。

動物の順序を変更

Time to re-order...の答え

レベル12:Combined

それぞれの動物が、対応する影に重なるように設定を変更しましょう。水平方向、垂直方向、さらには順序も変更する必要があるかもしれません。

Combined

Group Workspaceの”Container alignment”を均等揃え(両端にスペース)に変更します。

均等揃え(両端スペース)

動物の順序を影と一致するように変更します。垂直方向の変更は必要ありませんね。

動物の順序を変更

Combinedの答え

レベル13:To the left…

それぞれの動物が、対応する影に重なるように設定を変更しましょう。水平方向、垂直方向、さらには順序も変更する必要があるかもしれません。

To the left...

Group Workspaceの”Container alignment”を左揃えに変更します。

左揃え

動物の順序を影と一致するように変更します。

動物の順序を変更

さらに動物それぞれの”Vertical alignment”を上揃えに変更します。

動物の垂直方向を変更

 

To the left...の答え

レベル14:To the right…

それぞれの動物が、対応する影に重なるように設定を変更しましょう。水平方向、垂直方向、さらには順序も変更する必要があるかもしれません。

To the right...

Group Workspaceの”Container alignment”を右揃えに変更します。

右揃え

動物の順序を影と一致するように変更します。

動物の順序を変更

さらに動物それぞれの”Vertical aliment”を影と一致するように変更します。

動物の垂直方向を変更

To the right...の答え

4.Columns

Columnsコンテナ内の要素は垂直方向に並べられます。

column

レベル15:Create a tower

それぞれの動物が、対応する影に重なるように設定を変更しましょう。水平方向に並んでいるので、垂直方向に変更する必要があるかもしれません。

Create a tower

Group Workspaceの”Container layout”をColumnに変更します。

column

Create a towerの答え

レベル16:Align

それぞれの動物が、対応する影に重なるように設定を変更しましょう。動物は垂直方向に並んでますが、右に寄せたいところです。

Align

動物それぞれの”Horizontal alignment”を影と一致するように変更します。

垂直方向の位置を変更

Alignの答え

レベル17:Re-order

それぞれの動物が、対応する影に重なるように設定を変更しましょう。動物は垂直方向に並んでますが、位置と順序を変更する必要があるかもしれません。

Re-order

動物の順序を影と一致するように変更します。

動物の順序を変更

動物それぞれの”Horizontal alignment”を影と一致するように変更します。

垂直方向の位置を変更

Re-orderの答え

レベル18:One more time

それぞれの動物が、対応する影に重なるように設定を変更しましょう。動物は垂直方向に並んでますが、位置と順序を変更する必要があるかもしれません。

One more time

動物の順序を影と一致するように変更します。

動物の順序を変更

動物それぞれの”Horizontal alignment”を影と一致するように変更します。

垂直方向の位置を変更

One more timeの答え

5.Align to parent

Align to parentコンテナ内の要素は、親コンテナを9分割したエリアのいずれかに配置できます。コンテナのサイズが変わっても配置エリアは変わらないため、要素は互いに重なり合います。

Align-to-parent

レベル19:Pin the tail

それぞれの動物をコピー&ペーストし、対応する影に重なるように設定を変更しましょう。

Pin the tail

動物をコピー&ペーストし、位置を変更します。

Align to parentの位置変更

Pin the tailの答え

レベル20:Overlap!

それぞれの動物が、対応する影に重なるように設定を変更しましょう。

Overlap!

動物それぞれの位置を変更します。

Align to parentの位置変更

Overlap!の答え

レベル21:Can you do both?

それぞれの動物をコピー&ペーストし、対応する影に重なるように設定を変更しましょう。

Can you do both?

動物をコピー&ペーストし、位置を変更します。

Align to parentの位置変更

Can you do both?の答え

6.Margin

Margin(マージン)は要素の外周に設定できる余白です。ページ全体に対する要素のサイズ感や周囲の要素との距離感を設定するために使用します。

Margin

レベル22:Pixel Perfect

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Pixel Perfect

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

Pixel Perfect2

これだけではまだ影と一致していないので、マージンを設定してぴったり合わせます。

Marginを設定する

Pixel Perfect3

レベル23:Two pixel too perfect

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Two pixel too perfect

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

Two pixel too perfect-2

これだけではまだ影と一致していないので、マージンを設定してぴったり合わせます。

Marginを設定する

Two pixel too perfect-3

レベル24:Skooch over

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Skooch over-1

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

Skooch over-2

これだけではまだ影と一致していないので、マージンを設定してぴったり合わせます。

Marginを設定する

Skooch over-2

レベル25:No margin for error

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

No margin for error-1

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

No margin for error-2

これだけではまだ影と一致していないので、マージンを設定してぴったり合わせます。

Marginを設定する

No margin for error-3

レベル26:Sometimes you need a little nudge

それぞれの動物が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Sometimes you need a little nudge

Group Workspaceの”Container alignment”を中央揃えに変更します。

中央揃え

Sometimes you need a little nudge-2

これだけではまだ影と一致していないので、マージンを設定してぴったり合わせます。

Marginを設定する

Sometimes you need a little nudge-3

レベル27:All jumbled up

それぞれの動物が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。順序や位置など変更する設定がいくつかあるかもしれません。

All jumbled up-1

Group Workspaceの”Container alignment”を均等配置(エレメント間にスペース)に変更します。

均等揃え(エレメント間にスペース)

All jumbled up-2

動物の順序を影と一致するように変更します。

動物の順序を変更

All jumbled up-3

動物それぞれの”Vertical alignment”を影と一致するように変更します。

動物の垂直方向を変更

All jumbled up-4

マージンを設定してぴったり合わせます。

Marginを設定する

All jumbled up-4

7.Padding

Padding(パディング)は要素の内周に設定できる余白です。パディングを設定することで、要素内の使用可能なスペースを定義することができます。

Padding

レベル28:Room to breath

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Room to breath

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Room to breath-2

これだけではまだ影と一致していないので、”Group Padding Workspace”に右パディングを40ピクセル設定します。

パディングを設定する

Room to breathの答え

レベル29:Going around

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Going around

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Going around-2

これだけではまだ影と一致していないので、”Group Padding Workspace”に左パディングを40ピクセル設定します。

パディングを設定する

Going aroundの答え

レベル30:Ceiling Height

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Ceiling Height

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Ceiling Height-2

これだけではまだ影と一致していないので、”Group Padding Workspace”に上パディングを40ピクセル設定します。

パディングを設定する

Ceiling Heightの答え

レベル31:Off the ground

赤い鳥が影に重なるように設定を変更しましょう。1ピクセルのずれも見逃さないようにしましょう。

Off the ground

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Off the ground-2

これだけではまだ影と一致していないので、”Group Padding Workspace”に下パディングを40ピクセル設定します。

パディングを設定する

Off the groundの答え

レベル32:More than meets the eye

赤い鳥が影に重なるように設定を変更しましょう。Group Padding Workspaceの囲み線もしっかり合わせます。1ピクセルのずれも見逃さないようにしましょう。

More than meets the eye

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

More than meets the eye-2

これだけではまだ影と一致していないので、”Group Padding Workspace”の上下左右にパディングを80ピクセルずつ設定します。

パディングを設定する

More than meets the eyeの答え

レベル33:Double time

赤い鳥それぞれが影に重なるように設定を変更しましょう。Group Padding Workspaceの囲み線もしっかり合わせます。1ピクセルのずれも見逃さないようにしましょう。

Double time

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Double time-2

これだけではまだ影と一致していないので、”Group Padding Workspace”のパディングを設定してぴったり合わせます。

右側のグループに上下左右80ピクセルのパディングを設定すれば、左側のグループも影と一致します。

パディングを設定する

Double timeの答え

8.Gap Spacing

Gap(ギャップ)を設定すると、RowあるいはColumnコンテナ内の要素間にスペースを入れることができます。あるコンテナ内の複数要素に一定のスペースを入れる場合、ギャップを利用することでまとめて設定ができます。

ギャップは”Apply gap spacing between elements”を有効化すると、設定可能になります。

Gap

レベル34:Room to breath

それぞれの動物が影に重なるように設定を変更しましょう。ギャップを使って位置を調節します。

Room to breath

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Room to breath-2

Columnギャップを20ピクセルに設定してぴったり合わせます。

ギャップの設定

Room to breathの答え

レベル35:More space is necessary

赤い鳥それぞれが影に重なるように設定を変更しましょう。ギャップを使って位置を調節します。

More space is necessary

Columnギャップを40ピクセルに設定してぴったり合わせます。

ギャップの設定

More space is necessaryの答え

レベル36:

それぞれの動物が影に重なるように設定を変更しましょう。ギャップを使って位置を調節します。

Many animals

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Many animals-2

Columnギャップを20ピクセルに設定してぴったり合わせます。

ギャップの設定

Many animalsの答え

レベル37:Bubble Bird

それぞれの動物が影に重なるように設定を変更しましょう。ギャップを使って位置を調節します。

Bubble Bird

Group Workspaceの”Container alignment”を中央配置に変更します。

中央揃え

Bubble Bird-2

ColumnギャップとRowギャップをそれぞれ20ピクセルに設定してぴったり合わせます。

ギャップの設定

Bubble Birdの答え

9.まとめ

どうでしょうか?これでBubbleのレスポンシブ設定が掴めたのではないでしょうか?

Bubbleのレスポンシブ設定に慣れてしまえば、このテンプレートの全レベルの設定は5分とかからずに終わると思います。

レスポンシブを正しく理解していると、開発時間も大きく短縮できます。何度か繰り返してみても良いかもしれません。

最後まで読んでいただき、ありがとうございました。

Bubbleに関する最新情報を受け取りたい方は、以下のフォームからメルマガ登録を行ってください。