関連のツールの紹介、使い方などをやさしく説明しています。Tumblrこんにちは!今回は、Bubbleのレスポンシブデザイン開発に役立つモジュール式デザインシステム「Frames」をご紹介します。Framesは2021年に公開されたばかりのBubbleデザイン実装お助けシステムで、Bubbleのエレメントを組み合わせて構成されたモジュールをコピー&ペーストでページに配置するかたちで使います。すべてのモジュールにレスポンシブデザインの設定がされているので、コピー&ペーストで配置するだけでレスポンシブデザインのサイトを開発することができます。ブラウザの拡張機能として提供されているので、PCに大きな負荷なく使用することができるところも嬉しいポイントです。現時点で利用できるモジュールはダッシュボードやLP向けのものが多いですが、モジュール同士を組み合わせてオリジナルのモジュールを作ることもできます。Bubbleでは2022年6月末から新レスポンシブエンジンがデフォルトとなりましたが、慣れずに苦戦している方もいらっしゃるのではないでしょうか。Framesはそんな方のサイト構築時間を短縮してくれるだけでなく、モジュールのレスポンシブ設定から新レスポンシブエンジンの使い方を学ぶなど、学習材料として利用することもできます。※2022/7時点)がありますが、今回の記事では無料プランでできる範囲でFramesの使い方・できることをご紹介していきますので、ぜひご一緒に試してみてくださいね!ちなみに、有料プランでは全てのモジュールを使うことができるので、より開発時間を短縮したい場合は有料プランでのご利用がおすすめです。プランに迷っている方は、本記事を加入プランの検討材料としていただければと思います。実装ページの作成ページヘッダーの追加セクションヘッダーの追加リストの追加グラフの追加ポップアップの追加まとめまずは、Framesの始め方など基本的な内容をご紹介します。次に、開発時間短縮におすすめのモジュールをいくつかご紹介し、実際に簡単なダッシュボードページを作りながらFramesの具体的な使い方をご紹介していきます。Framesの使い方Frames拡張機能をインストールまずは、Bubbleを使用するブラウザでFramesが使用できるように以下から拡張機能をインストールします。今回はChromeでインストールします。chrome.google.comインストール後、ブラウザをリロードしてBubbleアプリのエディターを開きます。すると右下にFramesのアイコンが表示されますので、アイコンを押下してサインアップボタンからサインアップします。以下のようなパネルが開かれればFramesを使う準備は完了です!ブラウザ右下の「×」アイコンでいつでもパネルを閉じることができます。パネルの説明Framesのパネルは3つのタブで構成されています。・タブ1トップUI、Components、Themesと3つのタブで構成されており、ここからモジュールを選択します。elementなど基本的なモジュールはこちらから選択します。ほとんどのモジュールは無料で利用することができます。(2)Components複数のBubbleエレメントの組み合わせで構成されているモジュールはこちらから選択します。ヘッダー・フッターやブログカード、FAQなど自分で一から構成するのはちょっと面倒なパーツが利用できます。UIタブのモジュールと比較すると、有料プランのモジュールが多くなります。(3)Themesレスポンシブ対応のページのテンプレートを選択できます。ページを新規作成するタイミングで選択します。こちらのモジュールもほとんどが有料です。・タブ2お気に入りUIタブからお気に入り登録したモジュールがここに表示されます。タブ3設定サブスクリプションやアカウント情報の変更を行うタブです。おすすめモジュール実際にFramesではどのようなモジュールが使えるのかをご紹介します。単品でおすすめのモジュール・Componentsタブ>「User」(有料)ユーザーのプロフィールカードです。プロフィールアイコン、ユーザー名、IDを表示できるシンプルなものから、公式バッジやボタンを含めて構成されているものもあります。・Componentsタブ>「Blog」(一部有料)ブログ記事や購入履歴などの一覧に使用できるモジュールです。幅広いシーンで活躍しそうです。・Componentsタブ>「Heroes」(有料)LPなどに使えるヒーローヘッダーです。ヒーローヘッダーはレスポンシブの設定がやや面倒ですが、モジュールを使えばレスポンシブ対応でなく中身を充実させることに時間を費やせますね。・Componentsタブ>「Pricing」(有料)LPなどの料金プランの説明に使用できそうなモジュールです。上記以外にもFAQやアコーディオンなどLP制作で活躍しそうなモジュールをはじめ、自分で1から構成するとなると少し面倒なモジュールが提供されています。無料で利用できるかも含めてどんなモジュールがあるのかぜひチェックしてみてください。組み合わせ次第で色々なパーツを作成できるモジュールモジュール同士をカスタマイズしてオリジナルのパーツを作成するのもおすすめです。Groupのモジュールです。上記のモジュールは、Blogモジュールと組み合わせて記事やニュースの一覧に、Textモジュールと組み合わせてダッシュボード等の案件一覧を作成することができそうです。Framesを使ってダッシュボードページを作るそれでは、実際にダッシュボードページを作りながらFramesの使い方をご紹介します。今回は、Framesの使い方を一通り紹介できるよう以下を中心に実装していきます。Gridモジュールを使って実装。sourceの設定を含む。)折れ線グラフ(Chartモジュールを使って実装。)ポップアップ(Popupモジュールを使って実装。Workflowの設定を含む。)合わせて、しっかりレスポンシブ対応ができているかも確認してみましょう!!実装ページの作成まずはThemesタブ>Baseを開き、「Flexbox」をオンにします。するとモジュールの一覧が表示されるので、構築するページの基本画面幅やレイアウトからテンプレートを選択します。今回はデスクトップ1280pxでページの上部にヘッダーセクションがあるテンプレートを選択します。テンプレートの左下の「+」を押下すると、新規ページの作成ポップアップが表示されるので、ページ名を入力して「CREATE」を押下します。elementがあります。elementを削除します。elementなので、モジュールを配置したらまずはPlaceholderを削除してください。Placeholderを削除後、ヘッダー部分を押下してみると、FloatingGroupで構成されていることが分かります。Layoutタブを見るとすでにPaddingが設定されていること、Conditionalタブを見るとレスポンシブデザインとして768px以下になった場合のPaddingが設定されていることが分かります。ページ本体部分も同様にレスポンシブデザイン等が設定されています。ヘッダー部分にヘッダーモジュールを追加してみます。Headersからお好みのモジュールを選択し、左下の「+」を押下してコピーします。Frames」を押下してコピーしたモジュールを貼り付けます(通常のコピー&ペーストでも貼り付け可)。Group上に配置されました。プレビューでレスポンシブ対応できているか確認してみましょう。以下の通り、768px以下と769px以上のときで左右のPaddingが異なっているのが分かりますね。画面幅を大きくしたり小さくしても、レイアウトが崩れることなく表示されています。セクションヘッダーの追加では次に、ページ本体部分を構成していきます。Headerを配置します。Headersからお好みのヘッダーを選択し、先ほどページヘッダーをコピー&ペーストしたのと同じ手順でモジュールを貼り付けます。次に、データを繰り返し表示するセクションを追加します。headerの下に追加します。補足ですが、Themes>Baseから選択して作成したページはColumnレイアウトになっているので、各モジュールのLayoutタブから「Previous」や「Next」を押下することで配置順を変えることができます。必要に応じて配置を変更してくださいね。Gridで表示するモジュールを追加します。Gridに貼り付けます。プレビューで表示すると、画面幅に合わせて1~4段表示になるのが分かりますね。sourceを設定します。Dataプラグインの先頭4つのデータを表示する設定になっています。sourceに設定しました。element(大:titleを表示、小:bodyを表示)の設定も変更します。設定が完了したらプレビューで確認してみます。登録したデータが表示されていますね!レスポンシブ対応も完璧です。次に、グラフを表示するセクションを追加します。headersからお好みのモジュールを追加します。その下に、Componentsタブ>Sectionから2カラム構成のモジュールをコピーしてページの本体部分に貼り付けます。2カラムセクションではグラフを表示させたいので、Placeholderを削除しComponentsタブ>Chartsからお好みのモジュールを選択します。Data」のインストールが必要になります。sourceを設定する前にプレビューでページレイアウトやレスポンシブデザインを確認できるようダミーデータを表示するために必要です。Data両方のプラグインがインストールされていない場合、インストール指示画面がFramesタブ上に表示されるのでそのままプラグインをインストールしてください。モジュールを選択しプラグインをインストールしたら、2カラムセクションの両方に貼り付けます。貼り付けたらプレビューで2カラムセクションのレスポンシブを確認してみましょう。プレビューではこのように表示されているはずです。ページ幅を768px以下にしてみると、2カラムのセクションは1カラムになります。Dataプラグインのデータが設定されています。elementの設定方法と同じなので解説は割愛します。次に、ポップアップを実装します。ポップアップを表示するWorkflowも実装しながら、FramesモジュールのWorkflowの設定方法も確認しましょう。UIタブ>Popupからお好みのモジュールを選択し、ページ上の適当な場所で右クリックしてモジュールを貼り付けます。widthの初期値は320pxに設定されています。この幅はサイトのデザインに合わせて変更してください。今回は、600pxに変更してみました。Placeholderを削除し、UIタブ>Sectionsから2カラム構成のモジュールを貼り付けます。Popupを表示させるボタンを配置します。Gridの下に配置します。Workflowを設定します。Workflowの設定方法も通常のBubbleエレメントのWorkflow設定方法と同様です。Actions>ShowをStep1に追加します。表示するElementは先ほど追加したPopupを設定します。それでは、プレビューで動作とレスポンシブデザインを確認してみましょう。ボタンを押下するとPopupが表示されました。画面幅を調整してみると、Popupの幅も合わせて変わり、セクションが2カラム構成になったり1カラム構成になったりしていますね。これで、簡単なダッシュボードページの実装完了です。レスポンシブ対応がしっかりできていることも確認できましたね。まとめ今回は、Bubbleのレスポンシブデザイン開発を効率化してくれるデザインシステムFramesの使い方をご紹介しました。レスポンシブデザインのページが数十分で完成しましたね。source、Workflowの設定にも特異な点がなく、気軽に試せるツールであることをご理解いただけたかと思います。時間短縮のツールとして有効活用してくださいね。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。