【目次】

アプリ作成

1. Bubbleにログインし、Appsページにある「Create an app」をクリック

   

2. アプリ名を入力し、「Get started」をクリック

   出来るまで少し時間がかかるので気長に待ってね

   <aside> ⚠️ アプリ名は後ほど変更することが出来るが、ドメインは変更できないので要注意！

   （今はもしかすると登録したメールアドレスの@前＋自動採番されたアプリidがドメインになるのかも？）

   </aside>

   

   ※ 無料プランだとプレミアム機能を使わないかと宣伝ポップアップが表示される。無料のままでよければ下に表示される「Start with basic features」をクリック

3. ガイダンスが表示されるが、これらは適当にスキップしてOK

4. 開発画面が表示されれば成功！

   

開発ページに罫線（グリッド）を入れたい場合

以下のように罫線を入れたい場合

上部にある「Grid & borders View」を開き、「Show grid」にチェックを入れればOK

環境構築（Styles等基本設定）

ページの基本幅設定

PCデザインから始めるにしても、SPデザインから始めるにしても、デザインカンプにあわせて横幅を設定するかと思う。その設定方法について紹介する。

1. ページそのものをダブルクリックし、設定画面を表示させる

2. Layoutタブを開き、「Preset page width」から好きなものを選択する

   なお以下の選択肢があり、選択すると自動で横幅が設定される（らしいが、現状、選択しても自動調整されない。なぜ）

   • Custom: デフォルト設定。
   • Full width: ページ幅を 1200 に設定します。
   • Centered: ページ幅を 980 に設定します。
   • Mobile: ページ幅を 380 に設定します。

   

3. 「Width for UI builder」で任意の幅に設定することも可能

   

   ※ここで設定すると、上記で説明した「Preset page width」は自動でCustomに再設定されるみたいだが、現状私の方では何も起こらなかった。一応手動でCustomに変更しておいた方がいいかも？