本記事ではノーコード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.jp
about.caroa.jp
のように前に文字に入るものです。サブドメインをご利用される方は「ホスト名」にその文字を入力ください。
以下の例はlp.取得ドメインの場合の例です。
「lp」部分はご自身のサブドメインの文字をご入力ください。
6. 設定する
画面の最下部へスクロールし「確認画面へ進む」をクリックします。
確認画面移動後、画面最下部の「設定する」をクリックします。
次は、本記事の「Step02：STUDIOでドメイン接続」をお読みください。
ムームードメインの場合
1. ログインする
IDとパスワードを入力しログインしてください。
ログインURL：https://muumuu-domain.com/checkout/login
2. ドメインのDNS設定ページへいく
ログインしたら左側のメニュー内の「ドメイン操作」をクリックしてメニューを広げます。
「ムームーDNS」というメニューが表示されたら、クリックしてください。
3. DNSをカスタムで設定できるようにする
4. Aレコードを設定する
緑で囲んでいる枠のところを以下のように設定ください。
種別：A
内容：34.111.141.225 💡 サブドメインをご利用される場合
サブドメインとは：
通常のドメインが「caroa.jp」の場合に
lp.caroa.jp
about.caroa.jp
のように前に文字に入るものです。サブドメインをご利用される方は「サブドメイン」にその文字を入力ください。
以下の例は「lp.取得ドメイン」の場合の例です。
「lp」部分はご自身のサブドメインの文字をご入力ください。
入力できましたら「セットアップ情報更新」をクリックしてください
5. 確認する
こちらの画面が表示されたら設定完了です。
OKボタンを押してください。
今回追加した情報が設定されていることをご確認ください。これで、ムームードメイン上での設定は終了です。
Step02：STUDIOでドメイン接続
（再掲）前提条件
STUDIOで独自ドメイン接続をする場合は、プロジェクト自体を有料化する必要があります。ここから先は有料化した前提で説明をしていきます。
1. 公開設定を開く
STUDIOの対象プロジェクトに入ったら、ホームタブの公開設定をクリックします。
2. 独自ドメイン設定に切り替える
デフォルトで開かれるのは、.studio.siteというドメインなので、今回は独自ドメイン設定に切り替えます。
3. ドメインを入力する
接続したいドメインを入力してOKボタンをクリックします。
4. 次へ進む
ここに出ているのは、事前にドメインを管理しているサービスで設定したAレコードになります。
本記事を上から読み進めている方は、事前に登録が済んでいると思いますので「次へ」をクリックします。
※まだ終わっていない方は、本記事を読み返してDNS設定を完了させてください。
しばらく待って「接続を確認しました」というメッセージが出たら、正しく設定されている状態です。
もし、ここで以下のようなエラーメッセージが出た場合は、設定が間違っているので、公式ヘルプページを確認して、再設定をお願いします。
5. TLS証明書の発行
証明書の発行を自動でしてくれています。
早い時は数分、長い時は数時間かかることがありますので、のんびり待ちましょう。
Step03：公開
接続が成功すると画像のような画面に切り替わります。
右上の「公開」ボタンを押すと、独自ドメインでのサイトの公開が完了します。
STUDIOで独自ドメイン公開は簡単
最初に少しだけ設定の大変さがありますが、それ以降は簡単にSTUDIOで独自ドメインでのWebサイト公開は簡単です。
もし不明点などありましたら、caroaでは公開サポートも行なっておりますので、お気軽にご相談ください。
STUDIOをもっと学びたい方
STUDIOのゴールドエキスパートの「caroa」では、ノーコード（STUDIO）でWeb制作を学ぶオンラインスクール「caroa camp」をやっています！
現場で実践している知識や小話が入ったオリジナルの動画教材に加えて、講師による充実の1on1（フィードバック）、1日みんなで学ぶブートキャンプ方式など色々なコンテンツを用意しています。
