このページでは、Bubbleのレスポンシブデザインについて記載

①レスポンシブデザインとは

デバイスに併せ、表示画面を綺麗に表示させる手法を指す

②レスポンシブデザインの設定方法

以下の設定をすると仮定して記載

Appleの公式サイトを参考に、クローンヘッダーを作ってレスポンシブの設定をする
ただし、フォントや色などの静的なデザインは後回しで、機能の実装を優先する

www.apple.com

作成方法

1.新規ページを作成する

responsiveと名前をつけてわかりやすくする
1. 背景色をAppleと同じ色にあわせる（カラーコード：FBFBFD）

2.エレメントの準備をする

「どんなヘッダー構成なのか？」をWFなどで以下を確認する
1. スクロールした時、ヘッダーは常時固定表示
2. メニューは等間隔に並列表示
3. ヘッダーのメニュー数：13
4. アイコン：3、テキスト：10
5. ヘッダーのメニュー名称と種類（テキストorアイコン）
FloatingGroupを設置する
1. サイズ：1000×120px
Groupをページ内に設置する
1. Appleは、2段&2色で構成されている
  1. 色：黒（313132）、グレー（F5F5F7）
  2. サイズ：1000×60px
2. テキストエレメントでのメニューを配置する
3. アイコンエレメントを設置する
  1. Bubleには、アップル公式アイコンもデフォルトで入っている
  2. サイズ：24px
4. Group Elements in a Fixed container を選択>グループ化する>グループのサイズを88×40にする
  1. アイコンの幅を、テキストの幅88にそろえたいため
  2. グループ化して正しく配置するため
5. アイコンを右クリック>縦横中心配置にする
  1. アイコンを、「d.」で作成したGroupの内中心に配置するため
6. メニューアイコン>最初に、左端と右端だけ位置を調整して配置
7. メニューアイコンすべて選択
8. 右クリック>Distribute horizontally選択>等間隔配置になる
  1. Distribute horizontally
    1. 左端と右端のエレメントを起点として等間隔に並列させることができる機能
    2. この機能を使用する場合、先に「エレメントをグループ化→等間隔に並べる」という手順のほうがスムーズ

3.レスポンシブの設定をする

画面上メニュー>UI Builder >Responsiveをクリックする
表示された画面をクリックする
1. デフォルトでは、固定画面になっていることから、編集画面にするため
UI builserに画面が戻り、プロパティエディターを開く
Make this element fixed-width のチェックを外す
1. Preset page widthでは、選択肢ごとにpage幅を変更できる
2. レスポンシブでは、ここは「full wide」
preset page width>Customにする
エディターのWidthを1000にする

4.レスポンシブ画面編集をする

Responsiveをクリックしてレスポンシブの編集画面へ移動
各エレメントをクリックし、それぞれの情報を表示させる
1. Container:親エレメント
2. Element：現在選択しているエレメントのサイズ
3. Page states：ユーザーログイン/ログアウトの状態を設定する
全てのエレメントエディターにある「Fix width」のチェックを外す
1. ページ幅の縮小と共にエレメントも縮小するように設定するため
2. 「Fix width」は、形状保持の機能であるため、以下の観点でわけると良い
  1. 大きいエレメントグループ→チェック外す
  2. 小さいエレメントグループ→チェックは外さない
Current minimum widthで、どのくらいまでページ幅を縮小させるか？をレスポンシブ画面で確認する
1. Current minimum width
  1. ここで入れた値は、「最小値」となり、この最小値以下になった時、エレメントは「下段に移動」して表示される
ページ幅750px前後から、ヘッダーアイコンの表示がなくなってしまうことが確認できる
1. 原因：親エレメント幅の最小値が、750px前後より縮小しない設定になっているため
親エレメントの「Current minimum width」を30にする
1. 小さめのスマホは、幅が300px前後であるため
ページ幅が一定幅よりも小さくなった時、「テキストエレメントの非表示にする」という設定をしていく（ハンバーガーメニューとして表示するため）
1. 「ページ幅800px以下からヘッダーテキストは非表示」の設定
  1. テキストエレメントを選択
  2. Add higing ruleをクリック
  3. HIde when parent widthに「800」と入力
  4. saveで保存
  5. 「ページ幅800px以下からヘッダーテキストは非表示」という設定完了
    1. この設定を、一括で全てのエレメントに反映させる
      1. 「子エレメントは親エレメントの真似をする」というGroupの特徴を活かす
  6. UI Builser画面に移動
  7. 幅800px以下から非表示にしたいエレメントを選択>グループ化する
  8. レスポンシブ編集画面に移動
  9. UI Builser画面グループ化したまとまりをクリック選択
  10. Add higing ruleをクリック
  11. HIde when parent widthに「800」と入力>saveで保存
  12. 「ページ幅800px以下からヘッダーテキストは非表示」という全てのテキストエレメントへの設定も完了
2. 「テキスト非表示時：アイコンを左右の端に表示」の設定
  1. アイコンの横幅調整：アイコンを左右の端に表示させるようにする
    1. アイコンをクリック
    2. エディター表示させる
    3. 表示最大値を決める、「Appky a max width」に「100」を入力する
      1. Appky a max width
        
        グループ化したら、グループ化したエディターで必ずここにチェックする
        
        チェックをいれないと、エレメントはどこまでも横に伸びてしまう
        
        画面に合わせて伸びてほしいエレメント
        
        チェックを入れない
        
        画面に合わせて伸びてほしくないエレメント
        
        チェックを入れる
    4. アイコン表示の横幅の調整完了
  2. 補足：アイコンの位置調整「Fixed mergin」の効果は、「左右、どの余白を固定にするか？」である

5.ページ幅「800px」以下の時、「ハンバーガーメニューを表示させる」設定をする

UI画面に戻り、左端に配置したエレメントを2つコピーする
1. Appleの場合、アイコンが配置されているため、サイトに倣ってiconエレメントを使用する
コピーした一つのエレメントは、中央に配置する
コピーしたもう一つのエレメントを、ハンバーガーメニューアイコンに変更する
1. ハンバーガーメニューアイコンは、「choose an icon」で検索ヒットする
レスポンシブ画面に移動
「b.」で中央に配置したエレメントは、「800px以上の時に非表示」という設定をする
HIde when parent widthに「800」と入力>saveで保存
同様に、ハンバーガーメニューアイコンも「800PX以上の時に非表示」という設定を行う
レスポンシブのスライダーを稼働させ、設定通りに各アイコンが表示⇔非表示になればOK