STUDIO講座

ノーコードツールSTUDIOで独自ドメインを設定する方法を解説

今回は、ノーコードツールSTUDIOで独自ドメインを設定する方法を解説します。

「STUDIOで独自ドメインを設定するためにはどうしたら良いの?」

「ドメインを発行する方法は?」

こういった疑問や不安をこの記事を読めば、解決できます。

yandy
yandy
初心者の方にもわかりやすく解説していきます!

ノーコードツールSTUDIOで独自ドメインを設定する方法

それでは、ノーコードツールSTUDIOで独自ドメインを設定する方法を解説します。

独自ドメインを設定するためには、大きく分けて以下の4つの作業があります。

  1. STUDIOアカウントの発行
  2. ドメインの作成
  3. ドメインの設定
  4. サイトとドメインの紐付け

また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
※本ブログよりも最新版の情報で解説しております。

Youtubeでも解説してます!

Youtubeはこちら

① STUDIOアカウントの発行

それでは、まずはSTUDIOアカウントを発行します。

基本的に、STUDIOアカウントはGoogleアカウントの情報がそのまま反映されるだけです。

ちなみに、すでにSTUDIOアカウントを発行されている方は、「② ドメインの作成」までスキップしても問題ないですが、以下の注意点を読み、必要であれば新たにSTUDIOアカウントを発行しましょう。

コーディングやデザイン作業を第三者に委託する場合、サイト運営者以外の方がgoogleアカウント情報を基にSTUDIOサイトにログインします。そのため、GoogleアカウントをSTUDIOサイト用で新たに作成されることをおすすめします!

Googleアカウントの作成はこちら

Googleアカウントの準備ができたら、こちらのリンク先よりSTUDIOサイトにアクセスし、「無料で始める」をクリックします。

そして、FacebookもしくはGoogleアカウントから登録を行うことができます。

個人的には、Googleアカウントを使った登録の方が簡単なので、「Googleで登録」をクリックします。

すると、すでに登録済みのGoogleアカウントが表示されますので、STUDIOサイト用に作成したGoogleアカウントを選択しましょう。

これで、STUDIOアカウントの発行は完了です。

スポンサーリンク

② ドメインの作成

次に、ドメインを作成していきます。

ちなみに、ドメインとは簡単に言うと、インターネット上の住所みたいなもので、ホームページを開いた際に表示されるURLのことです。

今回は、好きなドメインを作成していきますので、自身のページのドメイン名を何にするか考えておきましょう。

すでに利用されているドメイン名は使えませんので、ご注意ください。ドメイン作成の際に、利用可能のドメイン名かどうか確認します。

ここから先は、このページを別ページで開きながら作業していただけるとわかりやすいです。

②-1 エックスドメインサイトにアクセス

まずは、ドメイン作成のために、エックスドメインのサイトにアクセスします。

現在は、「エックスドメイン」のサービス名が「エックスサーバードメイン」に名前が変更になっておりますが、同サービスですのでご安心ください。(2022/01/09追記)

ちなみに、エックスドメインは、国内シェアNo1のレンタルサーバーが提供しているドメインサービスなので安心してご利用いただけます。

yandy
yandy
わたしもエックスドメインを利用しております!

②-2 ドメインの選択

次に、ドメインを選択します。

まずは、以下の赤枠の部分に作成したいドメインを入力して、「検索」を押します。

ちなみに、私はドメインに「portfolio-yuta」と入力しました。

すると、以下のように取得可能なドメインが表示されます。

各ドメインによって、年間でかかるドメイン費用が異なりますのでご注意下さい。

どのドメインが良いか悩まれると思いますが、一般的に以下の3つの中から取得可能なドメインを選択すれば問題ありません。

  • .com
  • .net
  • .jp

ドメインが決まったら、その横のチャックマークをつけて、ドメインを選択します。

もし、以下のように取得可能なドメインがない場合は、すでに利用されているため、他のドメイン名で検索しましょう。

そして、ドメインが選択できたら、「エックスサーバー」利用申し込みについては、「利用しない」を選択し、「取得手続きに進む」をクリックします。

yandy
yandy
サーバーは、studioのサーバーを利用するため、ここで契約する必要はありません!

②-3 Xserverアカウントの登録

次に、Xserverアカウントの登録を行います。

もし、すでにXserverアカウントを持っている方は、ログイン情報を入力して、「②-4 お支払い情報の入力」までスキップしましょう。

まずは、「Xserverアカウントの登録へ」を押します。

そして、以下8点の登録情報を入力しましょう。

・メールアドレス
・パスワード
・契約者種別
・契約法人名(法人のみ)
・名前
・郵便番号
・都道府県
・電話番号

「WHOIS代理公開サービス」と「インフォメーションメールの配信」については、必要ありませんので、チェックマークを外します。

入力が完了したら、利用規約と公表事項の「同意する」にチェックをつけ、「確認画面へ進む」をクリックします。

すると、先ほど入力したメールアドレス宛に、「【エックスドメイン】ご登録メールアドレス確認のご案内」というメールが届いておりますので、そこに記載の「認証コード」を確認します。

そして、以下の赤枠の部分に先ほど確認した認証コードを入力し、「確認画面へ進む」をクリックします。

次に、入力した内容に誤りがないかを確認し、問題がなければ「SMS認証・電話認証をする」を押します。

そして、認証コードの受信方法が「テキストメッセージ(SMS)で受信」が選択されていることを確認した上で、「認証コードを受信する」をクリックします。

すると、認証コードがSMSに届きますので、その認証コードを入力し、「認証をする」をクリックします。

以下のような画面が表示されたらXserverアカウントの登録が完了です。

重要なメール

ちなみに、Xserverアカウントを登録すると、先ほど登録したメールアドレス宛に、「【エックスドメイン】■重要■Xserverアカウント登録完了のお知らせ」というかなり重要なメールが届きます。

このメールに記載の「Xserverアカウント登録に関する情報」は、Xserverの管理画面にログインする際に、必要な情報なので、忘れないように保存しておきましょう。

■Xserverアカウント登録に関する情報
・XserverアカウントID
・メールアドレス
・Xserverアカウントパスワード

後ほど、この情報を利用した作業があります。

②-4 お支払い情報の登録

次に、お支払い情報を登録していきます。

まずは、先ほど表示された画面より「お支払い方法を選択する」をクリックします。

そして、以下の4つの種類からお好きなお支払い方法を選択し、必要事項が入力できたら「お申し込み内容の確認」をクリックするとお支払い情報の登録が完了です。

②-5 ドメインの作成の完了

最後に、登録情報やお支払い情報、エックスドメイン利用規約、個人情報に関する公表事項を確認し、問題なければ「同意する」にチェックを入れ、「申し込む」を押します。

これで、ドメインの作成は完了です。

③ ドメインの設定

次に、ドメインの管理画面上で先ほど作成したドメインの設定を行います。

今回の設定に関する詳しい中身については理解する必要はありませんが、先ほど作成したドメインでサイトを表示するための下準備だと思って貰えれば結構です。

③-1 Xserverサイトにアクセス

まずは、こちらのリンクからXseverのサイトにアクセスし、「ログイン」をクリックします。

そして、先ほど取得したXserverアカウントのID(もしくはメールアドレス)とパスワードを入力して、「ログイン」を押します。

③-2 Xdomain管理サイトにアクセス

次に、上部メニューのサービス一覧から「Xdomain」をクリックします。

これでXdomain管理サイトにアクセスできました。

この管理画面は、よく利用するのでブックマークに登録しておくことをおすすめします。

③-3 ドメインの設定

次に、この管理画面上でドメインの設定をします。

まずは、以下の赤枠の部分をクリックし、「ネームサーバー設定」を選択します。

そして、「Xdomain」を選択し、「確認画面へ進む」をクリックします。

以下のようにネームサーバーが設定されていることが確認できたら、「設定を変更する」を押します。

これでドメインの設定は完了です。

④ サイトとドメインの紐付け

最後に、サイトとドメインの紐付け作業を行います。

④-1 STUDIOにログイン

まずは、こちらのリンクよりSTUDIOにアクセスし、右上の「ログイン」ボタンからログインします。

そして、今回ドメインを紐づけるサイトを選択し、「Editor」をクリックしましょう。

④-2 STUDIOのプラン選択

次に、ドメインを紐づけるためにSTUDIOのプランを選択します。

まずは、右上にある「公開」ボタンを押しましょう。

そして、「今すぐアップグレード」をクリックします。

すると、契約プランが以下のように3つあります。

プラン 値段 ドメイン設定 記事数
Free 0円 不可能 5
Basic 1,280円(月プラン)
980円(年プラン)
可能 5
Pro 3,280円(月プラン)
2,480円(年プラン)
可能 1,000

今回は、ドメイン設定を行うため、BasicかProを選ぶ必要があります。

記事数が5記事以内であればBasicプランを選択してください。

また、Basicプランの中に以下の2つのプランがあります。

  • 月プラン・・・1,280(円/月)
  • 年プラン・・・980円(円/月)

1年以上サイトを運営する方は、年プランで契約した方がお得ですので、Basicの年プランを契約しましょう。

ちなみに、年プランは左上のタブから「年払い」を選択し、Basicの「アップグレード」をクリックすると、年プランのお支払いページに移動します。

以下のようなお支払いページが表示されますので、「お住まいの国または地域を選択」をクリックし、お支払い情報を登録します。

そして、クレジットカード情報の入力が完了したら「支払いを確定する」をクリックします。

以下のように画面が表示されたら「BASICプラン」にアップグレードされました。

④-3 ドメインの紐付け

次に、サイトにドメインの紐付けを行います。

まずは、「公開設定」をクリックします。

そして、「独自ドメイン設定」を選択します。

次に、以下の赤枠の部分に、先ほど「②ドメインの作成」で作成したドメインを入力し、「OK」をクリックします。

すると、以下の赤枠の部分にレコードが表示されますので、そのレコードをコピーしてください。

そして、先ほど「③ ドメインの設定」で利用したXdomainの管理画面を再び開き、「DNSレコード設定」をクリックします。

もし、管理画面を閉じてしまっている人は、先ほど紹介した「③-1」と「③-2」の手順を参考に管理画面にアクセスして下さい。

次に、「DNSレコード設定を追加する」をクリックします。

するとDNSレコード設定の画面が表示されますので、それぞれ以下のように入力しましょう。

  • ホスト名:空欄
  • 種別:A
  • 内容:STUDIOでコピーしたレコード
  • 優先度:1

入力が完了したら、「確認画面へ進む」をクリックしましょう。

そして、内容を再度確認し、問題がなければ「設定を追加する」をクリックします。

これでドメインの管理画面上の作業は終了したので、再びSTUDIOのページに戻り、「次へ」を選択します。

すると、ドメインが接続され、TLS証明書を発行中になりますので、約10分ほど待っていてください。

以下のような画面が表示されたら、右下の「STUDIOバナーを非表示」にチェックマークを入れ、「更新」ボタンを押すとドメインの紐付け作業は終了です。

これで、以下のように作成したドメインをクリックすると、STUDIOで作成したサイトに遷移します。

https://portfolio-yuta.net

まとめ

今回は、ノーコードツールSTUDIOで独自ドメインを設定する方法を解説しました。

独自ドメインを設定するためには、大きく分けて以下の4つの作業があります。

  1. studioアカウントの発行
  2. ドメインの作成
  3. ドメインの設定
  4. サイトとドメインの紐付け

サーバーの契約は、STUDIOのサーバーを利用するため必要ありません。

これからノーコードツールstudioでWEBサイトを作成し、独自ドメインで公開したい人は、ぜひ参考にしてみてください。

2021年12月よりYoutubeデビュー!

WEB制作初心者の方に向けて、STUDIO講座を配信してます!

一緒に勉強していきましょう!

STUDIO DESIGN CHANNEL

他にもSTUDIOの色んな機能の使い方をまとめておりますので、気になる方はどうぞ。

初心者にもわかりやすいSTUDIO講座まとめ【40件以上納品した私が解説】ノーコードツールSTUDIOのわかりやすいSTUDIO講座を知りたいですか?本記事では、私がこれまでYoutubeやブログで発信してきたおすすめのSTUDIOの講座を紹介しました。ご自身のスキルに合わせたおすすめの講座を紹介しております。これからSTUDIOのスキルを高めたい方は、是非記事をご覧ください。...
サイトを簡単に更新・管理できるKARTE Blocksとは??サイトを簡単に更新・管理できるKARTE Blocksについて知りたいですか?本記事ではKARTE Blocksについて紹介しました。 KARTE Blocksがおすすめになる方や使い方、サポートなどについて解説しています。 これからKARTE Blocksを利用してみたい方は、是非記事をご覧ください。...