本記事ではノーコードWeb制作ツールのSTUDIOを使用して、独自ドメインでWebサイト(ホームページ)を公開する方法と注意点を解説します。執筆している株式会社caroaでは、STUDIOを使用したWebサイト制作を長年行っていますので、独自の経験をもとに解説していきます。STUDIOでの独自ドメインでのWebサイトの公開は、非常に簡単ですが、一部注意すべきポイントもありますので、悩んでいる方の参考になれば嬉しいです。※独自ドメインの設定は反映までに24時間程度かかる場合があります。公開ギリギリではなく、前もって設定をしておくのがおすすめです。事前準備:有料プランへのアップグレードが必要STUDIOで独自ドメイン接続をする場合は、プロジェクト自体を有料化する必要があります。以下の記事でも解説していますので、事前にStarterプラン以上に有料化をしておきましょう。独自ドメイン接続の注意点STUDIOの1プロジェクトで1ドメインになるSTUDIOではプロジェクトという単位でサイトが区切られています。そのため、複数のドメインのサイトを作りたい場合は、別のプロジェクトを用意しましょう。例えば、caroaでは「caroa.jp」「caroa.co.jp」という2つのプロジェクトで運用しています。既存サイトから移行する場合に、接続できない時間が発生するWordpressやフルスクラッチなどですでにサイト公開をしていて、STUDIOに切り替える場合はサイトにアクセスできない時間(ダウンタイム)が発生します。そのため、休日や夜間などサイトへのアクセス数が少ない時間帯に切り替えるのがおすすめです。独自ドメイン接続して公開までの3ステップSTUDIOで独自ドメイン接続してWebサイトを公開するためには以下のステップとなります。DNSレコードの設定STUDIOでドメイン接続公開今回はすでにドメインを取得している前提で進めますので、ドメインを取得していない場合は、取得ください。ここからはまず「DNSレコード設定」について紹介します。ドメインを管理しているサービスごとに異なるので、ご自身に関連するところをお読みください。Step01:DNSレコードの設定お名前.comの場合1. ログインするIDとパスワードを入力し、お名前.comにログインしてください。ログインURL:https://www.onamae.com/navi/login/2. ドメインのDNS設定ページへいくログインしたら「ネームサーバーの設定」という部分にマウスを移動して、「ドメインのDNS設定」というメニューをクリックしてください。3. ご指定のドメインを選択する取得済みのドメインが表示されます。(複数ある場合は複数表示されます)その中から、今回STUDIOと接続するドメインをの左側の丸いボタンをクリックし、選択します。選択したら「次へ」ボタンをクリックします。4. DNSレコード設定を利用する画像のページに移動したら、「DNSレコード設定を利用する」というテキストの横の「設定する」ボタンをクリックします。5. Aレコードを設定するサイト制作の中に「STUDIO」という選択肢があるので、「設定する」をクリックしてください。「VALUE」となっているところに以下の数字が入っていることを確認してください。34 . 111 . 141 . 225 (更新:2022/11/28 新IPアドレスに変更となりました)※TYPEが「A」となっていることも確認してください。💡 サブドメインをご利用される場合サブドメインとは:通常のドメインが「caroa.jp」の場合にlp.caroa.jpabout.caroa.jpのように前に文字に入るものです。サブドメインをご利用される方は「ホスト名」にその文字を入力ください。以下の例はlp.取得ドメインの場合の例です。「lp」部分はご自身のサブドメインの文字をご入力ください。6. 設定する画面の最下部へスクロールし「確認画面へ進む」をクリックします。確認画面移動後、画面最下部の「設定する」をクリックします。次は、本記事の「Step02:STUDIOでドメイン接続」をお読みください。ムームードメインの場合1. ログインするIDとパスワードを入力しログインしてください。ログインURL:https://muumuu-domain.com/checkout/login2. ドメインのDNS設定ページへいくログインしたら左側のメニュー内の「ドメイン操作」をクリックしてメニューを広げます。「ムームーDNS」というメニューが表示されたら、クリックしてください。3. DNSをカスタムで設定できるようにする4. Aレコードを設定する緑で囲んでいる枠のところを以下のように設定ください。種別:A内容:34.111.141.225 💡 サブドメインをご利用される場合サブドメインとは:通常のドメインが「caroa.jp」の場合にlp.caroa.jpabout.caroa.jpのように前に文字に入るものです。サブドメインをご利用される方は「サブドメイン」にその文字を入力ください。以下の例は「lp.取得ドメイン」の場合の例です。「lp」部分はご自身のサブドメインの文字をご入力ください。入力できましたら「セットアップ情報更新」をクリックしてください5. 確認するこちらの画面が表示されたら設定完了です。OKボタンを押してください。今回追加した情報が設定されていることをご確認ください。これで、ムームードメイン上での設定は終了です。Step02:STUDIOでドメイン接続(再掲)前提条件STUDIOで独自ドメイン接続をする場合は、プロジェクト自体を有料化する必要があります。ここから先は有料化した前提で説明をしていきます。STUDIO 料金プラン1. 公開設定を開くSTUDIOの対象プロジェクトに入ったら、ホームタブの公開設定をクリックします。2. 独自ドメイン設定に切り替えるデフォルトで開かれるのは、.studio.siteというドメインなので、今回は独自ドメイン設定に切り替えます。3. ドメインを入力する接続したいドメインを入力してOKボタンをクリックします。4. 次へ進むここに出ているのは、事前にドメインを管理しているサービスで設定したAレコードになります。本記事を上から読み進めている方は、事前に登録が済んでいると思いますので「次へ」をクリックします。※まだ終わっていない方は、本記事を読み返してDNS設定を完了させてください。しばらく待って「接続を確認しました」というメッセージが出たら、正しく設定されている状態です。もし、ここで以下のようなエラーメッセージが出た場合は、設定が間違っているので、公式ヘルプページを確認して、再設定をお願いします。5. TLS証明書の発行証明書の発行を自動でしてくれています。早い時は数分、長い時は数時間かかることがありますので、のんびり待ちましょう。Step03:公開接続が成功すると画像のような画面に切り替わります。右上の「公開」ボタンを押すと、独自ドメインでのサイトの公開が完了します。STUDIOで独自ドメイン公開は簡単最初に少しだけ設定の大変さがありますが、それ以降は簡単にSTUDIOで独自ドメインでのWebサイト公開は簡単です。もし不明点などありましたら、caroaでは公開サポートも行なっておりますので、お気軽にご相談ください。