こちらの記事ではノーコードツールのSTUDIOを使って、独自ドメインのWebサイトを公開する方法と注意点について解説します。STUDIOでは、独自ドメインの接続から公開まで簡単に行うことができますが、特に既存サイトからドメインを移行する場合、思わぬトラブルが発生するケースもありますので、設定は慎重に行いましょう。

また、ドメインの接続は、通常数時間で終えることができますが、DNSの反映やTLS証明に時間がかかると、24時間〜48時間程度かかる場合もあるので、公開日が決まっている場合はなるべく余裕を持って設定を行いましょう。

STUDIO導入のメリット・デメリットや、導入前に確認しておくべきことを資料にまとめました。STUDIOを活用したサイト制作をご検討中の方は、下記リンクよりぜひご覧ください。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOで接続できるドメイン

STUDIOではルートドメイン（例：noroshi.design）とサブドメイン（例：blog.noroshi.design）の接続に対応しています。STUDIOではドメインを取得することはできないため、お名前.comやGoogle Domainsといった外部のドメイン管理サービスで事前にドメイン（サブドメイン）を取得する必要があります。

また、STUDIOのプロジェクト（サイト）ごとに１つのドメイン（サブドメイン）を紐付ける必要があります。そのため、複数のプロジェクトを一つのドメインで公開したり、WordPressなどの他サービスで公開しているサイトのドメインのサブディレクトリ以下のページのみをSTUDIOで公開するといったことはできません。

独自ドメインの接続には有料プランへのアップグレードが必要

STUDIOで独自ドメインを接続するには有料プランへのアップグレードが必須です。詳しい料金体系は以下の通りです。現時点（2023年3月）では、Starterプラン以上の全てのプランで独自ドメインの接続に対応しています。

（引用元：STUDIO公式HP)

💡 関連記事
STUDIOの料金・プランの選び方から連携可能な外部サービスの料金までを徹底解説！

また、もし無料プランのままサイトを公開したい場合は「studio.site」のサブドメインを自由に指定してサイトを公開できます。この際、既に使用されているサブドメインは指定できません。

独自ドメイン接続の注意点

STUDIOでは比較的簡単に独自ドメインを接続しサイトを公開できますが、注意が必要な点があるので解説していきます。トラブルを避けるためにも、事前に注意事項を確認した上で取り組みましょう。

既存サイトからの移行の場合、ダウンタイムが発生する

現行のサイトをSTUDIOに移行する際には、必ずダウンタイム（サイトにアクセスができない時間）が発生してしまいますので、祝日や夜間など、サイトのアクセス数が比較的少ない時間帯に実行するようにしましょう。

・ダウンタイムが発生するタイミング

DNSレコードの設定を変更してから、STUDIOでの公開設定が完了しサイトを公開するまでの間、既存のサイトのサーバーが落ちてしまうことで発生します。ダウンタイムが発生するタイミングは、この後の公開までのステップ解説の中にも注意書きを入れていますので、そちらをご参照ください。

・ダウンタイムは何時間になるのか？

通常は数時間程度のダウンタイムで公開できる場合が多いですが、DNSレコードの反映やSTUDIOでのTLS証明書の発行に時間がかかった場合、24時間〜48時間程度ダウンタイムが発生する可能性もあります。

そのため、ドメインの移行はサイトのアクセスが少ない夜間や休日などに行うのがおすすめです。また、公開日が決まっている場合、ダウンタイムを考慮して、なるべく余裕を持って接続を行う必要があります。

同じドメインでメールを使用している場合、設定の確認が必要

STUDIOに接続する独自ドメインでメールアカウントを使用している場合には、メールの送受信ができなくなる恐れがあるので接続の際に注意が必要です。多くの場合、AレコードをSTUDIOに向け、MXレコードをお使いのメールサービスに向けることで、継続して独自ドメインでメールの送受信を行うことができます。

ただし、お使いのメールサービスやドメイン管理サービスの設定によっては、DNSの設定ができない場合がありメールアカウントの移行やドメイン移管が必要になる場合があります。詳しくは、STUDIO公式ヘルプ記事をご参照ください。

独自ドメインの取得から公開までのステップ

STUDIOで独自ドメインを接続するには、大きく分けて下記の４ステップの手続きが必要になります。

1. ドメインを取得

2. DNSレコードを設定

3. STUDIOにドメインを接続

4. 公開

※本記事では、お名前.comで取得したドメインをSTUDIOと接続する方法について解説します。Google Domainsで取得したドメインを使用したい方は、STUDIOの公式ヘルプぺージに解説がありますので、こちらを参考にしてみてください。

① 外部サービス（お名前.comやGoogle Domainsなど）でドメインを取得

STUDIOではドメインを取得することができないため、お名前.comやGoogle Domainsなどの外部サービスを使って事前にドメインを取得する必要があります。ドメインには、取得と更新に費用がかかり、年間で数千円程度の費用がかかります。取得するドメインによっては、より高額な費用がかかる場合もあります。

また、ドメイン取得の際は、ご自身でレンタルサーバーを契約する必要はありません。STUDIOで制作したサイトは、STUDIOのサーバーで公開されますので、誤ってレンタルサーバーを契約しないように注意しましょう。

② ドメインを取得したサービスでDNSレコードを設定(お名前.comでの操作)

次に、接続したいドメインを取得したサービス（お名前.comやGoogle Domainsなど）上でDNSレコードの設定を行います。設定方法はサービスごとに異なりますが、行う作業としては、ドメインのDNS設定で、種別でAレコードを選択し、内容に「34 . 111 . 141 . 225」を設定します。本記事では、お名前.comでの設定方法を解説します。

2-0　DNS設定を行う前の注意事項

現行のサイトからSTUDIOにサイトを移行する場合、DNSレコードの設定を変更しSTUDIOで公開するまでは、旧サイトは表示されなくなり、ダウンタイムが発生します。そのため、DNS設定は、夜間や祝日に行うことをお勧めしております。

2-1　ログインしDNS設定画面へ

お名前.comにログインしたら、上部メニューの「ネームサーバーの設定」の「ドメインのDNS設定」を選択します。

2-2 　接続したいドメインを選択

お名前.com上で取得しているドメイン一覧が表示されるので、STUDIOに接続したいドメインを選択して、下部にある「次へ」のボタンを押しましょう。

※ STUDIOでサブドメインを紐付けたい場合
例えば、blog.noroshi.designというサブドメインをSTUDIOで公開したい場合は、noroshi.designというドメイン(ルートドメイン)を選択しましょう。

2-3 DNSレコードの設定画面へ

画面を少し下にスクロールすると、「DNSレコード設定を利用する」という項目が出てきますので、右の「設定する」ボタンを押してください。

2-5　STUDIOのAレコードを設定する

新たに追加したいレコードの情報をこのBOXに入力していきます。

種別：Aレコードを選択

内容：34 . 111 . 141 . 225

上記を設定していきますが、お名前.comには、デフォルトで上記のSTUDIOのレコード情報を追加できるボタンがあるので、「STUDIO」と書いてあるオレンジのBOXにある「設定する」ボタンを押してください。

すると、BOXの中の「VALUE」の値が自動的に入力されました。

※サブドメインを紐付けたい場合
接続したいドメインがサブドメインの場合は、「ホスト名」の部分にサブドメインを入力しましょう。例えば、blog.noroshi.desginというサブドメインをSTUDIOに接続したい場合、「blog」のみをホスト名に入力します。

ここまで設定できたら、右端の「追加」ボタンを押します。

すると、「・追加」の部分に設定した列が追加されました。

これを確認できたら、画面下部「確認画面へ進む」ボタンを押し、最後に「設定する」ボタンを押せば、お名前.com側での操作は完了です。

③ STUDIOと接続

続いては、STUDIOでの操作となります。こちらからまずは、STUDIOにログインしましょう。

3-1  STUDIOにログインし、ダッシュボードへ

ログインすると、このような画面が開くので、公開設定をしたいプロジェクトを選択しダッシュボードを開きましょう。

3-2  ドメインの登録

ダッシュボード > ホーム > 全体設定を開き、「公開設定」ボタンを押してください。

「独自ドメイン設定」のボタンを押します。

こちらに接続したいドメインを入れます。ルートドメインまたはサブドメインを設定しましょう。設定できたら、右の「OK」ボタンを押します。

3-2 DNSレコード設定

すでにお名前.com側でレコード設定を終えているので、「次へ」ボタンを押しましょう。こちらのDNSの反映には、数時間〜数日程度かかる場合があります。

⚠️ また、Aレコードに別のサービスのレコードが同時に設定されていると接続できない場合があるため、反映が遅い場合は確認してみてください。

3-3 ドメイン接続を確認

接続が終わると、このような画面になります。接続の所要時間ですが、STUDIO公式によれば、数時間かかる場合もあると記載があります。

※ レコード設定の反映には数時間かかる場合がありますので、サイトを公開したい日時が決まっている場合は、予め前日までにレコード設定の完了を済ませていただくことをお勧めします。

引用元：STUDIO公式ヘルプページ

3-4　TLS証明書の発行

ドメインの接続が確認できたら、TLS証明書の発行に移ります。証明書はSTUDIOが自動で発行してくれますので、ご自身での設定は必要ありません。通常は、3時間以内で証明書が発行されます。もし3時間以内で完了しなかった場合は、STUDIOのサポートに連絡しましょう。

もし、接続できなければ、レコード反映に時間がかかっているか、設定が間違っている可能性があります。エラーメッセージの内容を確認して、再度ドメインを取得したサービスでレコード設定を見直しましょう。エラーメッセージごとの対処法はSTUDIO公式の記事で詳しく解説されています。

④ 公開

TLS証明書が発行できたら、このような画面になるので、公開ボタンを押して公開しましょう。その際、STUDIOのロゴを非表示にしたい方は、非表示設定を忘れないようにしましょう。これで、サイトの公開が完了します。

まとめ

STUDIOでは、簡単に独自ドメインのWebサイトを公開できますが、一部注意が必要な点もあるので、接続は余裕を持って慎重に行うようにしましょう。