【Bubble】PC用のレスポンシブ対応ヘッダーを作る

BubbleでPC用のレスポンシブ対応ヘッダーを作る方法をご紹介します!

プログラミング言語を使ったコーディングをせずにアプリを作れるノーコードツール。
その中でもやや上級者向けのツールがBubbleです。

BubbleでPC用のレスポンシブ対応ヘッダーを作る方法をご紹介します!

下図は768pxでは表示され、320pxでは非表示になるヘッダーメニューの完成例です。

header menu 768px版
768px版
header menu 320px版
320px版
目次

作り方

早速作り方をご紹介していきます!

STEP
新規ページの作成

「Header Menu」など分かりやすい名前で新規にページを作成します。

STEP
ページレイアウトの設定

ページ全体のレイアウトを設定します。Layoutタブの各設定を変更しましょう。

Bubble Header Menu Layout
Container layout

メニューリンクを横並びにするため、Rowを選択します。

Min width

幅の最小値を設定します。
現状、スマートフォンの小さめ機種でも幅は320pxほどのようです。

Min height

メニューの高さを設定します。
好みや表示内容によりますが、通常は80~120ほどに設定します。

必要に応じてページの背景色を変更してください。

LayoutタブのApply gap spacing between elementsにチェックを入れ、”Column gap”にとりあえず24と数字を入力しておきます。
メニューアイテムとして配置するtextやlinkエレメントの間の余白を24pxに設定しています。
この値はメニュー完成後に微調整してください。

STEP
【任意】アプリ名の表示
Bubble アプリ名テキスト表示例
アプリ名テキスト表示例

多くのアプリと同様に、メニューの左端にアプリ名を表示します。
textエレメントを配置し、文字の色や大きさを調整しましょう。

クリックしてホーム画面に戻るアプリもありますが、今回はアプリ名表示のみとします。

STEP
リンクメニューの作成

UIビルダーのVisual elementsにあるLinkエレメントを配置します。

初めに1つリンクを作ったら、先に文字の色やサイズを設定しましょう。
その後、作成したメニューをコピペすると作成時間を短縮することができます!

Bubble Destination Page

また、忘れずにDestination Pageにリンク先ページを設定しましょう。

各リンクをGroupにまとめる方が管理しやすい場合もあります。
メニューアイテムの数やアイテム間の隙間などにより、Groupも活用してください。

STEP
各種調整

パディングやエレメントの大きさなど、レイアウトを最終調整して、一旦メニューは完成です。
少なくともPC(900px以上)ではレイアウト崩れが無い状態にしましょう。

STEP
レスポンシブ対応

通常、PCにはヘッダーメニュー、スマホにはハンバーガーメニューを表示します。(タブレットでどちらを表示するかは好み)
そのため、端末サイズによってヘッダーメニューの表示・非表示を切り替えます。

Conditionalタブから以下の手順で設定します。

1.境界値確認

幅を変えつつ、何pxまで表示が問題ないかを確認しましょう。

画面左、UIビルダーの隣にあるResponsiveタブを選択します。
グレーと白の境界の部分にカーソルを合わせると矢印が出現するので、それをドラッグして動かすと幅が変わります。
レイアウト崩れが起きる大きさを確認しましょう。

境界値確認
境界値確認方法
2.メニュー表示設定

メニュー全体、またはGroupのConditionalタブを設定します。

How to check if your site is responsive1

まずはWhenに「Current page width」「≧」「境界値」を設定。
次にSelect a property to change when trueをクリックし、「This element is visible」を選択。
「This element is visible」にチェックをつける。

3.非表示設定
How to check if your site is responsive2

同様に非表示も設定します。

まずはDefine another conditionボタンをクリックして条件を追加。
次にWhenに「Current page width」「<」「境界値」を設定。
Select a property to change when trueをクリックし、「This element is visible」を選択。
チェックはつけない。

ハンバーガーメニュー作成

ここでは省略しますが、必要に応じてスマホようにハンバーガーメニューを作成してください。
ハンバーガーメニューは、境界値の条件がPCとは逆になります。(境界値以下の場合に表示)

完成

ここまで対応していれば、一定の幅まではメニューが表示され、それ以下の幅になると非表示になるはずです。
デバッグして確認してみましょう!

header menu 768px版
768px版
header menu 320px版
320px版
シェア大歓迎!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次