今回は、Bubbleにおいてレスポンシブの基礎的な知識について説明していきます。
Bubbleで意外と苦戦する人が多いと言われるレスポンシブ構築は、やはりスマホやパソコンなど、様々な媒体で適切に表示する重要な役割を果たすため、是非この記事を参考にしてみてください！！
概要
Bubbleのページはレスポンシブです。言い換えれば、見ているデバイスの幅に合わせて自動的に調整されます。
Bubbleは、異なる画面での表示を制御するためのいくつかのパラメータを提供しています。
例えば、ラップトップのような広い画面に表示されるべきページのデザインを開始する必要があります。そして、広い画面(「ラップトップ」)でのデザインが終わったら、より狭い画面でのデザインに着手します。これがレスポンシブ・ビューモードです(アプリを実行してブラウザのサイズを変更することもできます)。
レスポンシブ・ビューでは、いくつかのパラメータを変更することで、ページが絞られたときの動作を変更することができます。
レスポンシブ・ビューアーの使用
新規要素パレットの上にドロップダウンがあり、要素を変更したり、新しい要素をドラッグしたり、一部を削除したりすることができるビルダービューと、さまざまな構成でページをテストしたり、各要素のレスポンシブ動作を変更したりすることができるレスポンシブビューの間で切り替えることができます。
このビューでは、ページ領域の上部にあるルーラー(定規のようなものさし)が現在のページ幅を定義しています。
ページのサイズを変更するには、ルーラーをクリックまたはドラッグするだけで、ページがどのように動的に動作するかを確認することができます。
また、画面の左側にあるプリセット幅のアイコンを使って、iPhoneでは縦向き、横向き、iPadでは横向き、ノートパソコンやデスクトップではどのようにページが表示されるかを確認することができます。
要素をクリックすると、その動作に影響を与えるために変更できるさまざまなパラメータがレスポンシブパレットに表示されます。
さまざまな設定を変更すれば、それがページにどのように影響するかをリアルタイムで確認できます。
キーコンセプト
ページがどのようにレンダリングされるかを制御するアルゴリズムは、いくつかのコアとなる原則に従います。
パラメータの影響をリアルタイムで調整して確認することができますが、レンダリング・エンジンがどのように機能するかを全体的に理解しておくとよいでしょう。
①一般的に、ページのサイズが変更されると、要素は余白よりも先に縮小・拡大されます。
Bubbleがマージンを拡大するのは、1行のすべての要素の幅が最大の場合のみであり、マージンを縮小するのは、すべての要素の幅が最小の場合で、次の行へと続く可能性のある要素がすでに次の行にある場合のみです。
②デフォルトでは、ほとんどの要素は縮小と拡大が可能です。
これは、プロパティ・エディタまたはレスポンシブ・ビューアで、要素ごとに制御できます。
③重複する要素は一緒に移動します：一緒に拡大または縮小します(いずれかの要素が固定幅に設定されているか、または最大幅を持つ場合を除く)。
言い換えると、重なっている要素は両方とも壊れているか、どちらも壊れていないかになります。つまり、両方とも表示されているか、どちらも表示/非表示のルールで表示されていないということです。
④グループ (および繰り返しグループなどの他のコンテナ) はミニページのように動作します。
要素はその中で改行して改行することができます。グループに最小幅を設定することで、グループの内容を圧迫できる範囲を制限することで、そのようなことが起こらないようにすることができます。
また、最大幅を設定することで、要素の幅を制限することができます。例えば、ページの幅を画面ほど広くしたくない場合(デザイナーの画面など)、すべての要素をグループに入れて、そのグループに最大幅を適用することができます。
Bubble は、ランモード(debugがオンの場合)とレスポンシブビューア(トップバーのグリッドアイコンをクリック)の両方で、レスポンシブデバッガを提供しています。
このモードを有効にすると、ページがどのように構造化されているか、ページ上の要素がどのようにグループ化されているかを見ることができます。
裏では、Bubbleレスポンシブページはラインとボックスで構成されています。
ページのレスポンシブ動作を改善するには、この2つの概念を理解することが重要です。
・要素はボックスにグループ化されます。
ボックスの中のものはすべて一緒に動きます(例えば、重複する要素は常に同じボックスの中にあります)。
ボックスとは、次の行への改行ができたり、表示されたり非表示になったりするものです。ボックスの中で一番左の要素は、その表示/非表示のルールを制御するものです。
・ラインはボックスの水平方向の行です。
ラインは、その中で最も高いものと同じ高さで、次の行のすべてがその上の行の下にあります。
現在の行にボックスを入れるスペースがない場合、ボックスは新しい行に改行することができます。
レスポンシブパラメータ
レスポンシブ・パラメータを使用して、ページのサイズを変更したときの要素/ページの動作を調整することができます。
これらのパラメータは、プロパティエディタとレスポンシブパレットからアクセスできます(レスポンシブビューアにいるとき)。
Make this element fixed width
このボックスにチェックを入れると、要素の伸縮を完全に停止します。これにより、以下のほとんどのパラメータは無関係になります。
デフォルトではページは固定幅になっているので、レスポンシブパラメータがページと内部要素に適用されるようになるには、このボックスのチェックを外す必要があることに注意してください。
Minimum width (% of current width)
ページが狭くなると、レンダリングエンジンはそれに応じて要素を狭くします。最小幅を設定したい場合は、ここで定義できます。ボタンやリストなどが狭くなりすぎないようにしたい場合に便利です。
Maximum width (% of current width)
ページが引き伸ばされたときに要素に最大幅を適用したい場合は、ここに数値を追加します。100%よりも高い値にしてください。
Collapse margins
コンテナの幅が低く、要素のコンテナ(多くの場合、ページ)の幅がこの数値よりも狭くなった場合、左右のマージンを折りたたむことで、要素がページの端と同じ位置になるようにします。
これはモバイルデバイスで、余白があると全幅の画像を持つのと同じくらい見栄えが悪い場合に便利です。この設定は、レスポンシブビューアモードのルーラーを使って行うことができます。
Keep left/right margins or center
ユーザーがウィンドウのサイズを変更したとき(またはスマホからアプリにアクセスしたとき)に、要素がその左右のマージンを維持するかどうかを設定できます。
設定されていない場合、両方の余白は伸縮し、要素は隣の要素との相対的な中心を維持します。
Hiding rule
画面幅がある数値以下またはそれ以上の場合に、要素を隠すように設定することができます。その場合、要素は非表示になり、ページ内のスペースを取りません。
レスポンシブビューアモードで設定し、「非表示ルールを追加」をクリックします。
すると、設定した幅よりも低い場合は、要素が非表示になり、行の上にスペースが空くようになります。
レスポンシブビューモードでページのサイズを変更すると、画面の左側に現在非表示になっている要素のリストが表示されるので、ルールを削除して再度表示させることができます。
Keep element proportions as the page is resized
横幅に応じて高さを変更し、その比率を保持したい場合は、このボックスにチェックを入れます。これは特に地図や画像などに便利です。
すべての要素にこのオプションがあるわけではないことに注意してください。
Wrap to previous line if page is stretched
ページが引き伸ばされている場合に、与えられた行の要素を前の行に移動させたい場合は、このボックスにチェックを入れてください。
これは、現在編集中の要素ではなく、指定された行の最初の要素に適用されます。
Cut off content
このボックスにチェックを入れると、テキスト要素の高さが高すぎる場合、コンテンツがカットされ、テキストの最後に「…」が追加されます。
Shrink the element height if the text gets shorter
このボックスにチェックを入れると、テキストが変化したとき(フォントサイズが変化したとき)、エディタで設定した元の高さよりも新しい高さが低くなっていても、テキスト要素の高さを調整します。
テクニックとコツ
レスポンシブページの構築は、最初は少し不自然に感じるかもしれません。ページの挙動が不自然だと感じるかもしれません。
しかし、上記の様々なパラメータをマスターしてしまえば、非常にカスタマイズ可能な挙動を持つことができるようになります。
Bubbleのすべてのものがそうであるように、パラメータを変更するとすぐにフィードバックが得られるので、いじってみるのも良い方法です。
しかし、ここではレスポンシブページをデザインする際に便利だと思われるテクニックをいくつか紹介します。
①要素をグループ化することは、ページ上で一緒に移動させたい場合に非常に便利です。いくつかの要素を選択して右クリックするとグループ化されます。
キーボードショートカットの CTRL/CMD + G を使用することもできます。これが完了したら、グループレベルで最大幅、最小幅、整列などを定義できます。
②要素が重なっている場合、その動作は似たようなものになります。
つまり、幅が500pxよりも大きいときにグループを表示し、幅が500pxよりも小さいときに別のグループを表示したい場合、これらの要素を横に並べて、重ならないようにすることが重要です。
③どうしても画面幅のあるストライプが必要な場合は、グループを使って(上部に浮かせて)ビルダービューのページ領域と同じくらいの幅にするといいでしょう。最大幅を設定しないと、自動的に画面の端まで伸びてしまいます。
④ページのサイズ変更に伴って 2 つの要素間の距離を小さくしたい場合は(要素の幅が圧迫されるのではなく)、transparent shapeを使用すると非常に便利です。
アルゴリズムは幅ではなく余白を一定に保つことを覚えておいてください。そのため、見えない図形が 2 つの要素の間にある場合、それは圧迫され、ページが狭くなるにつれて 2 つの要素間の視覚的な距離は事実上小さくなります。
⑤画面の幅に応じてフォントを変更することができます。
各要素の条件タブに「現在のページ幅」のデータソースがあるので、幅に応じてフォントを小さくすることができます。これをスタイルレベルに置くことで、すべての要素が同じルールに従うようにするのが良い方法です。
⑥hiding ruleと、現在のページ幅に基づいて要素を隠す条件付きの状態を使用することには違いがあります。hiding ruleが適用されると、同じ行にある他の要素のためのスペースが解放されるので、より強力です。条件を設定してもこのようなことはできません。
⑦モバイル用に根本的に異なるデザインにしたいのであれば、1つのページに対して別のページを持ち続けることができます。
別のページをデザインして、このページを「モバイル版」にすればいいのです。
まとめ
ここまでで、Bubbleにおけるレスポンシブ構築について沢山解説していきました。プロパティーの種類が多く、混乱してしまった方もいると思います。
しかし、Bubbleでは、要素やデータを追加したり、レスポンシブの設定をした瞬間に、その挙動が確認できるので、一つずつレスポンシブの動きを試してみてください。
