ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

BubbleのデザインシステムFramesを使った開発方法

こんにちは!今回は、Bubbleのレスポンシブデザイン開発に役立つモジュール式デザインシステム「Frames」をご紹介します。

Framesは2021年に公開されたばかりのBubbleデザイン実装お助けシステムで、Bubbleのエレメントを組み合わせて構成されたモジュールをコピー&ペーストでページに配置するかたちで使います。すべてのモジュールにレスポンシブデザインの設定がされているので、コピー&ペーストで配置するだけでレスポンシブデザインのサイトを開発することができます。また、ブラウザの拡張機能として提供されているので、PCに大きな負荷なく使用することができるところも嬉しいポイントです。

現時点で利用できるモジュールはダッシュボードやLP向けのものが多いですが、モジュール同士を組み合わせてオリジナルのモジュールを作ることもできます。

また、Bubbleでは2022年6月末から新レスポンシブエンジンがデフォルトとなりましたが、慣れずに苦戦している方もいらっしゃるのではないでしょうか。Framesはそんな方のサイト構築時間を短縮してくれるだけでなく、モジュールのレスポンシブ設定から新レスポンシブエンジンの使い方を学ぶなど、学習材料として利用することもできます。

Framesには無料と有料プラン(月額20.00US$ ※2022/7時点)がありますが、今回の記事では無料プランでできる範囲でFramesの使い方・できることをご紹介していきますので、ぜひご一緒に試してみてくださいね!ちなみに、有料プランでは全てのモジュールを使うことができるので、より開発時間を短縮したい場合は有料プランでのご利用がおすすめです。プランに迷っている方は、本記事を加入プランの検討材料としていただければと思います。

・この記事がおすすめな方

  • 新レスポンシブエンジンを使いこなせていない
  • レスポンシブデザイン対応のページを最短で作りたい
  • 作りたいページはダッシュボード・LPである

まずは、Framesの始め方など基本的な内容をご紹介します。次に、開発時間短縮におすすめのモジュールをいくつかご紹介し、実際に簡単なダッシュボードページを作りながらFramesの具体的な使い方をご紹介していきます。

Framesの使い方

Frames拡張機能をインストール

まずは、Bubbleを使用するブラウザでFramesが使用できるように以下から拡張機能をインストールします。今回はChromeでインストールします。

chrome.google.com

インストール後、ブラウザをリロードしてBubbleアプリのエディターを開きます。すると右下にFramesのアイコンが表示されますので、アイコンを押下してサインアップボタンからサインアップします。

以下のようなパネルが開かれればFramesを使う準備は完了です!ブラウザ右下の「×」アイコンでいつでもパネルを閉じることができます。

パネルの説明

Framesのパネルは3つのタブで構成されています。

・タブ①トップ

UI、Components、Themesと3つのタブで構成されており、ここからモジュールを選択します。

(1)UI

Text elementやSearchbox element、Button elementなど基本的なモジュールはこちらから選択します。ほとんどのモジュールは無料で利用することができます。

(2)Components

複数のBubbleエレメントの組み合わせで構成されているモジュールはこちらから選択します。ヘッダー・フッターやブログカード、FAQなど自分で一から構成するのはちょっと面倒なパーツが利用できます。UIタブのモジュールと比較すると、有料プランのモジュールが多くなります。

(3)Themes

レスポンシブ対応のページのテンプレートを選択できます。ページを新規作成するタイミングで選択します。こちらのモジュールもほとんどが有料です。

・タブ②お気に入り

UIタブからお気に入り登録したモジュールがここに表示されます。

タブ③設定

サブスクリプションやアカウント情報の変更を行うタブです。

おすすめモジュール

実際にFramesではどのようなモジュールが使えるのかをご紹介します。

単品でおすすめのモジュール

・Componentsタブ>「User」(有料)

ユーザーのプロフィールカードです。プロフィールアイコン、ユーザー名、IDを表示できるシンプルなものから、公式バッジやボタンを含めて構成されているものもあります。

・Componentsタブ>「Blog」(一部有料)

ブログ記事や購入履歴などの一覧に使用できるモジュールです。幅広いシーンで活躍しそうです。

・Componentsタブ>「Heroes」(有料)

LPなどに使えるヒーローヘッダーです。ヒーローヘッダーはレスポンシブの設定がやや面倒ですが、モジュールを使えばレスポンシブ対応でなく中身を充実させることに時間を費やせますね。

・Componentsタブ>「Pricing」(有料)

LPなどの料金プランの説明に使用できそうなモジュールです。

上記以外にもFAQやアコーディオンなどLP制作で活躍しそうなモジュールをはじめ、自分で1から構成するとなると少し面倒なモジュールが提供されています。無料で利用できるかも含めてどんなモジュールがあるのかぜひチェックしてみてください。

組み合わせ次第で色々なパーツを作成できるモジュール

モジュール同士をカスタマイズしてオリジナルのパーツを作成するのもおすすめです。

・UIタブ>「Repeat Grids / Lists」(一部有料)

Repeating Groupのモジュールです。水平スクロールのRepeating Gridは有料です。

上記のモジュールは、Blogモジュールと組み合わせて記事やニュースの一覧に、Textモジュールと組み合わせてダッシュボード等の案件一覧を作成することができそうです。

Framesを使ってダッシュボードページを作る

それでは、実際にダッシュボードページを作りながらFramesの使い方をご紹介します。

表示内容

今回は、Framesの使い方を一通り紹介できるよう以下を中心に実装していきます。

  • コンテンツのリスト(Repeat Gridモジュールを使って実装。Data sourceの設定を含む。)
  • 折れ線グラフ(Chartモジュールを使って実装。)
  • ポップアップ(Popupモジュールを使って実装。Workflowの設定を含む。)

合わせて、しっかりレスポンシブ対応ができているかも確認してみましょう!!

実装

ページの作成

まずはThemesタブ>Baseを開き、「Flexbox」をオンにします。するとモジュールの一覧が表示されるので、構築するページの基本画面幅やレイアウトからテンプレートを選択します。

今回はデスクトップ1280pxでページの上部にヘッダーセクションがあるテンプレートを選択します。テンプレートの左下の「+」を押下すると、新規ページの作成ポップアップが表示されるので、ページ名を入力して「CREATE」を押下します。

ページヘッダーの追加

新規で作成したページは、2つのセクションに分かれ、それぞれに「Placeholder」と表示されたText elementがあります。

まずはそのText elementを削除します。

★ポイント★

各モジュールに含まれる「Placeholder」は、「ここに他のモジュールやエレメントを配置して使用する」という目印のText elementなので、モジュールを配置したらまずはPlaceholderを削除してください。

Placeholderを削除後、ヘッダー部分を押下してみると、FloatingGroupで構成されていることが分かります。また、Layoutタブを見るとすでにPaddingが設定されていること、Conditionalタブを見るとレスポンシブデザインとして768px以下になった場合のPaddingが設定されていることが分かります。

また、ページ本体部分も同様にレスポンシブデザイン等が設定されています。

では、ヘッダー部分にヘッダーモジュールを追加してみます。FramesのComponentsタブ>Section Headersからお好みのモジュールを選択し、左下の「+」を押下してコピーします。

次に、ヘッダー部分のFloatingGroupを右クリックし、メニューから「Paste from Frames」を押下してコピーしたモジュールを貼り付けます(通常のコピー&ペーストでも貼り付け可)。

選択したSection Headerモジュールが、「GroupB」としてFloating Group上に配置されました。

では、プレビューでレスポンシブ対応できているか確認してみましょう。

以下の通り、768px以下と769px以上のときで左右のPaddingが異なっているのが分かりますね。

画面幅を大きくしたり小さくしても、レイアウトが崩れることなく表示されています。

セクションヘッダーの追加

では次に、ページ本体部分を構成していきます。まずはSection Headerを配置します。本体部分のPlaceholderを削除したら、Componentsタブ>Section Headersからお好みのヘッダーを選択し、先ほどページヘッダーをコピー&ペーストしたのと同じ手順でモジュールを貼り付けます。

リストの追加

次に、データを繰り返し表示するセクションを追加します。Componentsタブ>Repeat Gridsから4セル表示のRepeat GridsをSection headerの下に追加します。

補足ですが、Themes>Baseから選択して作成したページはColumnレイアウトになっているので、各モジュールのLayoutタブから「Previous」や「Next」を押下することで配置順を変えることができます。必要に応じて配置を変更してくださいね。

Repeat Gridで表示するモジュールを追加します。Repeat GridのPlaeholderを削除し、Componentsタブ>Blogからお好みのモジュールをRepeat Gridに貼り付けます。

プレビューで表示すると、画面幅に合わせて1~4段表示になるのが分かりますね。

では、Repeat GridのData sourceを設定します。Repeat Grid(Repeating Group)のAppearanceタブを見ると、Dummy Dataプラグインの先頭4つのデータを表示する設定になっています。

Repeating GroupのData sourceの設定と同様にInsert dynamic dataで表示するデータを動的に設定することができるので、今回は「Test」というData typeを作成し、テスト用データを作成してData sourceに設定しました。

Appearanceタブ>Data sourceを、作成したData type: Testに変更し、セルのImage element(画像を表示)、Text element(大:titleを表示、小:bodyを表示)の設定も変更します。

設定が完了したらプレビューで確認してみます。登録したデータが表示されていますね!

レスポンシブ対応も完璧です。

グラフの追加

次に、グラフを表示するセクションを追加します。Componentsタブ>Section headersからお好みのモジュールを追加します。その下に、Componentsタブ>Sectionから2カラム構成のモジュールをコピーしてページの本体部分に貼り付けます。

2カラムセクションではグラフを表示させたいので、Placeholderを削除しComponentsタブ>Chartsからお好みのモジュールを選択します。なお、Chartsモジュールを使用するには、プラグイン「Chart Element」と「Frames Dummy Data」のインストールが必要になります。Chart Elementはグラフエレメントを使用するため、Frames Dummy DataはData sourceを設定する前にプレビューでページレイアウトやレスポンシブデザインを確認できるようダミーデータを表示するために必要です。

・Chart Element

Frames Dummy Data

両方のプラグインがインストールされていない場合、インストール指示画面がFramesタブ上に表示されるのでそのままプラグインをインストールしてください。

モジュールを選択しプラグインをインストールしたら、2カラムセクションの両方に貼り付けます。貼り付けたらプレビューで2カラムセクションのレスポンシブを確認してみましょう。プレビューではこのように表示されているはずです。

ページ幅を768px以下にしてみると、2カラムのセクションは1カラムになります。

Appearanceタブから分かるようにモジュールを配置した時点ではData sourceにFrames Dummy Dataプラグインのデータが設定されています。Data sourceの設定方法は、Repeat Grid同様に通常のChart elementの設定方法と同じなので解説は割愛します。

ポップアップの追加

次に、ポップアップを実装します。ポップアップを表示するWorkflowも実装しながら、FramesモジュールのWorkflowの設定方法も確認しましょう。

まずはUIタブ>Popupからお好みのモジュールを選択し、ページ上の適当な場所で右クリックしてモジュールを貼り付けます。貼り付けたPopup>Layoutタブから分かるように、Max widthの初期値は320pxに設定されています。この幅はサイトのデザインに合わせて変更してください。今回は、600pxに変更してみました。

Placeholderを削除し、UIタブ>Sectionsから2カラム構成のモジュールを貼り付けます。

Popupを表示させるボタンを配置します。UIタブ>Buttonからお好みのモジュールを、ページ上Repeat Gridの下に配置します。

では、Workflowを設定します。Workflowの設定方法も通常のBubbleエレメントのWorkflow設定方法と同様です。Buttonを押下して新規でWorkflowを作成しElement Actions>ShowをStep1に追加します。表示するElementは先ほど追加したPopupを設定します。

それでは、プレビューで動作とレスポンシブデザインを確認してみましょう。

ボタンを押下するとPopupが表示されました。画面幅を調整してみると、Popupの幅も合わせて変わり、セクションが2カラム構成になったり1カラム構成になったりしていますね。

これで、簡単なダッシュボードページの実装完了です。レスポンシブ対応がしっかりできていることも確認できましたね。

まとめ

今回は、Bubbleのレスポンシブデザイン開発を効率化してくれるデザインシステムFramesの使い方をご紹介しました。レスポンシブデザインのページが数十分で完成しましたね。Framesのモジュールは通常のBubbleのエレメントを組み合わせたものなので、デザインのカスタマイズやData source、Workflowの設定にも特異な点がなく、気軽に試せるツールであることをご理解いただけたかと思います。ぜひ時間短縮のツールとして有効活用してくださいね。

モジュールのLayoutやConditional設定を見ながら新レスポンシブエンジンの学習を進めるのもおすすめですよ!