【画像付き】Bubbleに独自ドメインを接続する方法を詳しく解説

この記事のまとめ

お名前.comで取得した独自ドメインをBubbleに接続する方法について、この記事では具体的な手順を解説します。

まずはお名前.comで独自ドメインを取得し、次に、Bubbleの有料プランにアップグレードする必要があります。そして、Bubbleとお名前.comの両方で必要な設定を行うことで、独自ドメインを接続することができます。

初心者でも簡単に理解できるように、ステップごとに丁寧に説明しますので、ぜひ参考にしてください

Walkersでは「開発ノウハウがない」「最大限に効率よく開発を進めたい」企業さまに、事業を成功に導くBubble開発支援を行っています。⇒Bubble開発支援サービスの概要はこちら


執筆者:山口 鳳汰
 

執筆者:山口 鳳汰
ノーコード開発専門メディア「Walkersメディア」編集長。
ノーコードの電子書籍を3冊出版し、1冊はAmazonベストセラーを獲得。

その他、受託開発や教育など多数のノーコード事業に参画している。

運営会社:株式会社Walkers

運営会社:株式会社Walkers
ノーコード専門の開発会社。
300件以上の開発/制作実績、200件以上の企業様を支援。
マーケティングやUI/UXと掛け合わせたサービス開発を得意としている。

執筆者:山口 鳳汰

執筆者:山口 鳳汰
「Walkersメディア」編集長。
ノーコードの電子書籍を3冊出版し、1冊はAmazonベストセラーを獲得。

運営会社:株式会社Walkers

運営会社:株式会社Walkers
ノーコード専門の開発会社。
これまでに300件以上の開発/制作実績、200件以上の企業様を支援。

クリックできる目次

Bubbleに独自ドメインを接続する方法

①お名前.comで独自ドメインを取得する

まずは、お名前.comで独自ドメインを取得する必要があります。

STEP
お名前.comの公式サイトにアクセス
STEP
ドメイン検索欄に希望するドメイン名を入力し、「検索」をクリック
お名前.comのトップ画面
お名前.comのトップ画面
STEP
そのドメイン名が取得可能かどうかが表示される
お名前.comのドメイン取得画面
お名前.comのドメイン取得画面
  • ○:取得可能
  • ×:取得不可能
  • ベルのマーク:登録済みのため取得不可能だが、空いた際にお知らせするメール通知の申し込みが可能

希望のドメインが空いていない場合は、検索欄に別のドメイン名を入れて「再検索」をクリック

STEP
希望のドメインの「○」をクリック→「料金確認へ進む」をクリック
お名前.comのドメイン取得画面
お名前.comのドメイン取得画面
STEP
「決めていない・他社サーバーをご利用予定の方はこちら」をクリック
お名前.comのドメイン使用方法選択画面
お名前.comのドメイン使用方法選択画面

今回はBubble上のサーバーにドメインを接続するためです。

STEP
申込み内容確認画面が表示されるので、初めてお名前.comを使う場合は「初めてご利用の方」を選択して「メールアドレス」と「パスワード」を登録し、「次へ」をクリック
お名前.comのドメイン申込み内容確認画面
お名前.comのドメイン申込み内容確認画面

お名前.comを使ったことがある場合は「お名前IDをお持ちの方」を選択し、「次へ」をクリック。※次のSTEP7はスキップしてください。

STEP
会員情報を入力し、「次へ進む」をクリック
お名前.comの会員情報登録画面
お名前.comの会員情報登録画面
STEP
クレジットカード情報を入力し、「申込む」をクリック
お名前.comのドメイン申込み画面
お名前.comのドメイン申込み画面
STEP
登録したメールアドレス宛に「【重要】[お名前.com] ドメイン 情報認証のお願い」というメールが届くので、「対応期日」と書かれた下にあるURLをクリックしドメインを認証
お名前.comのドメイン情報認証メール
お名前.comのドメイン情報認証メール

ドメイン登録から2週間以内に認証を行わないとドメインが使用できなくなるため、必ず行ってください。

これでドメインの取得は完了です。

②Bubbleを有料プランにアップグレード

Bubbleでは無料プランもありますが、独自ドメインを使うためには有料プランへのアップグレードが必要です。

STEP
ドメインを接続したいBubbleアプリのエディターを開き、左側にある歯車アイコン(Settings)をクリック
Bubbleのエディター画面
Bubbleのエディター画面
STEP
「App Plan」タブ内にある「Change Plan」をクリック
Bubbleのセッティング画面
Bubbleのセッティング画面
STEP
希望するプランの「Upgrade」をクリック
Bubbleのプラン変更画面
Bubbleのプラン変更画面

画像内のプラン情報は執筆時点(2024/10/2)のものであり、今後変更される可能性もありますが、「Custom domain」と書かれているプラン以上ならどのプランでも独自ドメインが使用できます。

STEP
「Link」または別の決済方法を選択し、決済を行う
Bubbleのプラン変更決済画面
Bubbleのプラン変更決済画面
STEP
「Linkを使わずに支払う」を選んだ場合、「Google pay」やクレジットカードが使えます
Bubbleのプラン変更決済画面
Bubbleのプラン変更決済画面

③Bubbleにお名前.comの独自ドメインを接続

Bubble側の設定

有料プランへのアップグレードが完了すると、独自ドメインをBubbleに接続できるようになります。

STEP
「Settings」から「Domain/email」を開く→「Domain name」の横の欄に取得した独自ドメインを入力→「Set up this domain」をクリック
Bubbleの独自ドメイン設定画面
Bubbleの独自ドメイン設定画面
STEP
以下のような画面になるので、ページを開いたままにしておく
BubbleのAレコード画面

Bubbleは独自の「Aレコード」と呼ばれるものを提供します(画像の赤枠で囲んだ部分)。これをお名前.com側に入力する必要があるため、この画面は開いたままにしておきます。

お名前.com側の設定

先述したようにBubble側の「Aレコード」が必要になるので、Bubbleとは別のタブでお名前.com側の設定を進めていきましょう。

STEP
お名前.comにログイン
お名前.comのトップ画面
お名前.comのトップ画面
STEP
左側のメニューにある「ネームサーバー設定」から「ドメインのDNSレコード設定」をクリック
お名前.comのホーム画面
お名前.comのホーム画面
STEP
取得した独自ドメインの左のラジオボタンをクリックし、「次へ」をクリック
お名前.comのDNSレコード設定画面
お名前.comのDNSレコード設定画面
STEP
「DNSレコード設定を利用する」の右の「設定する」をクリック
お名前.comのDNSレコード設定画面
お名前.comのDNSレコード設定画面
STEP
ページをスクロールしていくと、「Aレコード」入力フォームがあるため、Bubbleの「Aレコード」全ての「Value」を入力して「追加」
お名前.comのAレコード入力画面
お名前.comのAレコード入力画面
  • ホスト名:BubbleのAレコードの「Name」を入力。「Name」が空欄のものはホスト名も空欄、「www」の場合は「www」を入力。(※自動で取得したドメインが追加されて入力されます)
  • TYPE:「A」を選択
  • VALUE:BubbleのAレコードの「VALUE」を入力
  • それ以外の項目:デフォルトのままでOK

以下の画像で示したBubbleのAレコードです。(※画像のValueは一例ですので、ご自身のAレコードを参照してください)

BubbleのAレコード画面
STEP
以下のように追加されればOKです
お名前.comのAレコード追加画面
STEP
ページ最下部までスクロールし、「確認画面へ進む」をクリック
お名前.comのAレコード追加画面
お名前.comのAレコード追加画面
STEP
ドメインプロテクションの設定を促す画面が出た場合、これはオプション(別料金)なので、「設定する」と「設定しない」のどちらを選んでも構いません
お名前.comのドメインプロテクションオプション画面
お名前.comのドメインプロテクションオプション画面

どちらを選んでも確認画面に進みます

STEP
設定内容を確認し、問題なければ「設定する」をクリック
お名前.comのAレコード設定確認画面
お名前.comのAレコード設定確認画面

④独自ドメインの接続が完了するまで待機

ドメインの変更がインターネット全体に反映されるまでには、数時間から最大で48時間程度かかることがあります。

完了したか確認するには、ブラウザのアドレスバーに取得した独自ドメインを入力し、Bubbleアプリが正常に表示されるかどうかをチェックしましょう。表示されない場合は、設定が正しいか再確認してください。


弊社Walkersでは成果が実証されたノウハウをもとに、事業を成功に導くためのBubble開発支援を行っています。新規事業開発でお悩みがある方はお気軽にご相談下さい。

Bubble開発支援サービスの概要はこちら>>

Walkersに無料で相談する>>

クリックできる目次