STUDIO 独自ドメインでWEBサイトを公開しよう☆簡単４ステップ！
本記事では、ノーコードWEBサイト制作ツール「STUDIO」で、ご自身のサイトを独自ドメインで公開する方法を解説します。
ドメインの設定やサイト公開の流れはだいたい知っているという方は、 「準備」 から 「簡単4ステップ」 の順に読み進めてください。
サイトの公開は初めてという方は、「簡単4ステップ」で流れをつかんだあとに、その次の章の 「解説＋α」 を読むと、それぞれの設定の意味が理解でき、サイト公開の仕組みがわかるようになっています。
STUDIO 独自ドメイン設定【準備】
STUDIOで独自ドメインの設定をする前に、2つほど準備が必要です。
準備その１ 有料プランへのアップグレード
STUDIOで作ったサイトを独自ドメインで公開するには、 Starter以上のプラン にアップグレードする必要があります。プランのアップグレードは「プラン&お支払い」からできます。
Starter、CMS、Buisinessいずれのプランでも独自ドメインを使うことができます。
※ただし、Starterプランでは、無料で使えていた機能の全てがそのまま使えるわけではないことに注意しましょう。Starterプランでは、使用可能な機能が拡張する代わりにCMSが使えなくなります。
準備その2 ドメインの取得
STUDIO内での設定の前に、あらかじめ外部のサービスからドメインを購入する必要があります。
※STUDIOではドメインの販売・管理サービスは行っておりません。
ドメインを取得できる主なサイト
- ムームードメイン
https://muumuu-domain.com/ - お名前.com
https://www.onamae.com/ - Xserverドメイン（エックスサーバードメイン）
https://www.xdomain.ne.jp/ - Google Domains
https://domains.google/intl/ja%5Fjp/ - さくらのドメイン
https://domain.sakura.ad.jp/
STUDIO 独自ドメイン設定【簡単4ステップ】
前章で解説した準備が整いましたら、次はいよいよSTUDIOで制作したサイトに独自ドメインを設定して公開しましょう！
ステップ１ ドメイン登録
公開したいプロジェクトを開き、 「公開設定」 をクリックします。
すると、以下の画面に移りますので 「独自ドメイン設定」 をクリックします。なお、独自ドメインの設定が完了した後でも、STUDIOドメインに変更することも可能です。
「接続したいドメインを入力して下さい」と出ますので、取得したドメインを入力し、OKをクリックします。
ステップ２ DNSレコード設定
ドメイン登録が完了すると、DNSレコード設定の画面に移ります。ここで現れた レコード（A レコード） をコピーしておきましょう。
注意！）ここからは、ドメインを取得したサイトでの作業になります。
ドメインを取得したサイト（ムームードメインなど）を開き、DNS設定画面での入力作業を行います。
なお、ムームドメインでAレコードを設定する方法については、こちらの記事で詳しく解説しています。
ムームードメインで「独自ドメインのAレコード」を設定する方法！
URL→https://implist.dev/entries/1b3eaa01b0c685468330914c59b822f1
ムームードメインの場合
種別：A
内容：34.111.141.225
※Google Domainsの場合は「タイプ：A、データ：34.111.141.225」となるなど、ドメイン取得先のサイトによって表記が異なる場合があります。
DNS設定が完了したら、STUDIOに戻ります。
STUDIOに戻って、先程の画面の「次へ」をクリックしましょう。
ステップ３ ドメインの接続確認
ドメインの接続確認は自動で行われますので、特に操作をする必要はありません。接続が確認されると、自動的に 「TLS証明書の発行」 に移行します。
ステップ４ TLS証明書発行
この工程も自動で進むため、特別な操作はいりません。
TLS証明書の発行には、時間がかかる場合があります。
※Implist-site.comで独自ドメインを設定したときは、一晩このままにしておいたところ、翌日には完了していました。
TLS証明書の発行が完了すると、以下のような画面になります。ただし、自動で公開されるわけではありませんので、サイトを公開するときは 「公開」 をクリックしましょう。
このとき、画面右下の 「STUDIOのバナーを非表示」 を選択して、WEBサイト上に現れるSTUDIOの宣伝バナーを非表示設定にすることができます。
サイトが公開されると以下の画面が表示されます。
STUDIO 独自ドメイン設定【解説＋α】
ここまでは、サイト公開の流れをある程度知っている経験者の方を対象に、「STUDIOではどう設定するのか」を解説してきました。
未経験の方も、ざっくりした流れは掴めたかと思います。しかし、「そもそもドメインって何？」「AレコードのAは何を表しているの？」「TLS証明なんて聞いたこともない…」というユーザーも少なくないかと思います。
よくわからないものを設定するのは不安ですよね。…というわけで、本章では独自ドメイン設定に関してもう少し詳しく解説していきます。
そもそもドメインって何？
ドメインとは、各WEBサイトのインターネット上の住所のことです。「□□□.com」「□□□.co.jp」「□□□.jp」などが有名ですね。
しかし、本来は各WEBサイトのインターネット上の場所というのは IPアドレス といって「12.345.678.90」のような数字の組み合わせて表されます。ですが、このような羅列は人間には覚えにくくわかりづらいですよね…。
そこで、こういった数字の羅列で表される「WEBサイトの場所」を人間にわかりやすく「住所化」したものがドメインです。
ドメインとIPアドレスの関係は、地図上の座標と住所に例えられます。
インターネット上では、この座標にあたる数字がIPアドレス、住所がドメインにあたります。
DNS・DNSレコードって何？
「DNSは何をするものか？」という疑問については、以下の記事で図解でわかりやすく説明しています。
【DNSの仕組み】を図解でわかりやすく解説してみる。名前解決はどういう流れで行われているのか？
URL → https://www.implist.dev/entries/b72f67157565e2311b49aabf48482ad1
引用
DNSは一言でいうと「ドメイン」と「IPアドレス」を対応付けるためのものです。
ドメインをブラウザに入力してサイトにアクセスできるのは、ドメインとIPアドレスの対応をDNSが持っていて、DNSがドメインに対応するIPを返し、そのIPアドレスが示すサーバーにアクセスしているからです。
ドメイン、IPアドレスというのは、
https://www.example.com/ このExampleサイトを例に取ると、
- ドメインは「www.example.com」
- IPアドレスは「93.184.216.3」
になり、この2つの対応付けがDNSにて行われています。
DNSは「Domain Name System」の略で、ドメイン名をIPアドレスと対応付けるためのものになります。
【DNSの仕組み】を図解でわかりやすく解説してみる。名前解決はどういう流れで行われているのか？より
DNSが持っている「ドメインとIPアドレスの対応表」のようなものが「DNSレコード」 と呼ばれるものです。
Aレコードって何？
独自ドメインを設定する過程で 「Aレコード」 というものが出てきましたね。ここで混乱した方も多いのではないでしょうか。
Aレコードとは、 DNSレコードのうち「ドメイン名とIPアドレスを結びつける」 ためのものです。AレコードのAはAdressに由来します。
「◯◯レコード」と呼ばれるものの中には、Aレコードの他に、AAAAレコード、MXレコード、CNAMEレコード…などがあります。例えば、MXレコード（Mail Exchangeレコード）は、Eメールを特定のメールサーバに配信するために必要なレコードです。
このように、「A」や「MX」「CMAME」といった種別（タイプ）によって、レコードの役割（目的）を区別しています。
おまけ情報
新たに登録したドメインとIPアドレスの紐付けが正常にできているか、また、DNSサーバーの設定が有効であるかを確認するために、以下のようなサービスが利用できます（外部サイト）。
DNSレコード確認：https://rakko.tools/tools/18/
TLS証明って何？
「TLS」 は初めて聞いたけれど、 「SSL」 なら聞いたことがあるぞ…という方もいらっしゃるかと思います。 SSL（Secure Sockets Layer） とは、インターネット上で通信される内容を暗号化することで、外部からの情報盗難を防ぐセキュリティプロトコルです。
TLS（Transport Layer Security） は、簡単にいうと、SSLの脆弱性などの問題を改善し、より 安全性の高いシステムにバージョンアップしたもの です。ですので、役割としては SSL＝TLS と考えて問題ありません。
SSL/TLS化されているWEBサイトは「https://〜」、されていないサイトは「http://〜」から始まります。SSL化されていないサイトに接続しようとすると、このように「保護されていない通信」といった警告が現れます。
TLS証明書とは、WEBサイトの本人確認証 のようなものです。接続しようとしているサイトが偽サイト（例えば個人情報を盗み取ろうとしている）ではなく、実在する正規のサイトであることを証明するためのものです。
個人や組織が、作成したWEBサイトのTSL証明書発行を申請すると、「認証局」がドメインや申請者の情報を調査します。認証されると、そのWEBサイトはいわば身分証をもった状態になります。これによって、信頼できるところ（認証局）から「このサイトは正しく通信を暗号化」していると証明されて、ユーザーが該当のサイトを信頼して使えるようになります。
「https://〜」から始まるサイトでも、この証明書に問題がある場合（暗号化はされているけれど証明書が正しくない）、訪問者がサイトを開こうとすると 「この接続ではプライバシーが保護されません」といった警告 が現れます。
おわりに
WordPressなどでサイトを公開したことがある方は、 「ドメインとセットでサーバーの契約はいらないの？」 と思ったかもしれません。これについて、SUTIOでサイトを公開する場合は、（どのプランでも）STUDIO側でサーバーは提供されるため、個人でのサーバー契約は必要ありません。
しかし、STUDIOではメールサービスの提供はしていないので、独自ドメインのメールを使用したい場合は気をつけましょう。 「ムームードメイン」＋「ムームーメール」 など、 サーバー契約をしなくても独自ドメインのメールを使えるサービス もありますので、そのあたりも考慮してドメイン取得先を選ぶと良いでしょう。
WEBサイトの公開はいろいろ複雑な仕組みによって成り立っており、最初は混乱することも多いかもしれませんが、実践しながら徐々に理解していきましょう。
