サーバー&ドメイン設定手順解説(ポートフォリオやブログを開設しよう) 

サーバー&ドメイン設定手順解説(ポートフォリオやブログを開設しよう) 

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

今回は「サーバー」「ドメイン」の設定について触れていきます。

慣れてない方からすると、サーバー?ドメイン?と難しく感じますよね。

この記事では初めての方でも実際の作業画面を使いながら解説しているので、読み進める通りにやれば設定できるようになってるのでご安心を!

コーディングデータの納品や、自分のポートフォリオ・ブログの開設のために、これからサーバー契約やドメイン取得が必要となっている方も是非参考にしてみてください!

すでにサーバー設定済みの方で、これからWeb公開をしようとしている方は、こちらの記事でFTPソフトを使ったアップロード方法についてまとめています。

大まかな流れと注意点

ざっくりとまとめると以下の通りです。

  1. レンタルサーバー申込み
  2. レンタルサーバー本登録
  3. 独自ドメイン取得
  4. 独自ドメインのネームサーバーを変更
  5. サーバーとドメインを紐づけ

解説の前に重要なことを伝えておきます。

記事で解説する設定自体は10分程度で終わりますが、使えるようにシステム反映するまで、1時間程度から最長24時間程度かかる可能性があります。

データアップの期日や納期などがある場合は、逆算して、早めに設定に取り掛かるようにしておきましょう!

レンタルサーバー(エックスサーバー)申込み

まずはレンタルサーバーに申込をします。

代表的なレンタルサーバー

この中から今回はエックスサーバーを選択します。公式サイトに入ってください。

選ぶうえで見るポイントはいくつかありますが、エックスサーバーは価格・性能・サポートのレベルが高水準でまとまっていて、現在国内サーバー利用のシェアはNo,1となっています。

国内サーバーシェアランキングの図
引用元:2021の日本でのウェブホスティングのマーケットシェア

各種情報も豊富にあるので、初心者の方は特に、迷うくらいなら王道のエックスサーバーを選んでおくのが間違いないです。

新規申し込み

上のリンクからトップページに入ったら、新規申し込みのボタンをクリックします。

エックサーバートップ画面
エックサーバートップ申込画面

サーバー契約内容入力

エックスサーバー契約内容選択画面

サーバーID

サーバーを契約する際に自動で一つ「.xsrv.jp」という初期ドメインがもらえます。

この初期ドメインは「https://サーバーID.xsrv.jp/」といった形になります。

分かりやすいIDに変えてもいいですが、メインで使うことは無いドメインなので、ここのサーバーIDはそのままでもいいです。

プラン選択(=データ容量)

ここではX10プラン(300GB)を選びます。

Webサイトの重さの目安は1ページ当たり1~2MBと言われています。100ページで約2000MB=2GB。

メールのデータ容量も含むとはいえ、一般のWebサイト用サーバーであれば、300GBあれば十分です。

このサイトで指定URLページの各データ量を図ることができます。ご参考までに。

WordPressクイックスタート

「ドメイン取得・設定」、「独自SSL設定」、「WordPress設定」をお申し込みと同時に行ってくれるオプションです。

WordPressサイトを作りたい方向けですが、下記の注意事項があります。

  • 支払方法がクレジットカード払いのみ
  • 申し込みと同時にサーバー料金の支払いが発生する
  • 10日間無料のお試し期間がない
  • サーバー移転には未対応

サーバー設定後でもWordPressサイトは構築できますので、今回はチェックを入れずに進めていきます。

お申し込みフォーム入力

エックスサーバー申込フォーム画面

フォームに必要な個人情報を入力し、規約等の確認をしましょう。

パスワードはエックスサーバーの管理ページログインに必要となります。あとで送られるメールには記載されないので、忘れないように控えておきましょう。

必須項目が全て埋まれば「次へ進む」ボタンが活性化しますので、クリックして進むとお申し込みフォーム画面にうつります。

エックスサーバー申込フォーム確認コード画面

メール認証

エックサーバー確認コード記載メール画面

入力していたメールアドレス宛に確認メールが届きます。

そこに記載されている確認コードを、上の画面のコード欄に入力して次に進みます。

記載した登録内容に間違いが無いか確認し、問題が無ければ申込完了ボタンを押します。

入力内容の確認→申込

エックスサーバー申込完了メール画面

数分以内(場合によっては数時間程度かかる)で「サーバーアカウント設定完了のお知らせ」といったメールが届きます。

メールには管理ツールのログイン情報やメール設定情報、FTP情報など重要情報が記載されているので大切に保管しておきましょう。

レンタルサーバー(エックスサーバー)本登録

エックスサーバーアカウントログイン画面

ここから支払い方法など登録して「本登録」手続きに移ります。

エックスサーバーのトップページ右上のログインから、Xserverアカウントに入ります。メールアドレスのところはIDでもログインできます。

エックスサーバーログイン情報記載メール画面

IDは先ほど送られてきた設定完了メールの「管理ツールのログイン情報」に記載されています。

「お客様が設定したパスワード」とは、先ほど申込フォーム画面で自分が決めたものです。

サーバー契約期間を選択

エックスサーバー支払い登録画面

ログインしたら、ヘッダーの「料金支払い」を選択して支払い手続きページにうつります。

申込みしたサーバー情報があるので、チェックを入れたら契約期間を選択してください。一回の支払い金額は増えますが、長期契約を結んだ方が割安にはなります。

選択が終わったら「支払い方法を選択する」ボタンをクリックします。

料金支払い方法を選択

エックスサーバー支払い方法選択画面
  • クレジットカード
  • コンビニエンスストア
  • 銀行振込
  • ペイジー

4つの中から希望の支払い方法を選択したら「決済画面へ進む」ボタンをクリックします。

料金支払い情報を入力

※クレジットカードを選択した場合の画面です

エックスサーバークレジットカード登録画面

支払い方法の必要情報を入力します。(僕は既に登録されてる情報があるので上の画像のようになってます)

入力したら「確認画面へ進む」ボタンをクリックします。

レンタルサーバー料金支払い処理

エックスサーバー支払い登録画面

支払い方法の登録内容に間違いが無いか確認したら「支払いをする」ボタンをクリックして支払い処理を済ませます。

ちなみにクレジットカードだと即時で処理が完了しますが、それ以外だと数時間、銀行口座振替の場合数日かかることがあります。

サーバーの無料期間中でも使うことはできますが、支払い処理が完了しないと契約自体は完了しないという点は注意しておきましょう。

ここまでくればサーバー契約は完了です。

独自ドメイン取得(お名前.com)

次に独自ドメインを取得していきます。

レンタルサーバーとドメイン取得サービスはセットになっているところが多く、サーバー契約時、もしくはドメイン取得時に一緒に契約することもできます。

手続きも簡単に済むので、こだわりが無ければその方法でもいいんですが、この記事では選択する会社に依存しないやり方や、ドメインだけ別で取得していた場合を想定して、サーバー・ドメインそれぞれ契約して紐づける方法を紹介していきます。

代表的なドメイン取得サービス

今回は人気のお名前.comを使用します。

お名前.comは料金も比較的安めで、定期的にセールも実施されているため、お得にドメイン取得ができることが魅力です。

まずはドメイン取得サイトに入ってください。

希望するドメインの取得可否を検索

お名前.comトップ画面

ページに遷移したら取得希望のドメイン名を入力し、トップレベルドメインを選択したら検索しましょう。※トップレベルドメインは次のページでも変更できるので、この時点では何選んでもいいです。

ドメイン取得可否状況を確認

お名前.comドメイン選択画面

入力した希望ドメインが取得可能かどうかの結果が表示されます。上の図の場合は空いてるドメインが無いので取得できません。

この場合は、下の検索窓に別のドメイン名を入れて検索し、再度取得可能なドメインがあるか確認してみます。

お名前.comドメイン選択確定

希望のドメイン名で空いていることが確認できたらチェックボックスにチェックを入れてください。

選択したドメインは別窓にも表示されます。

お名前.comサーバープラン選択画面

下にスクロールすると、お名前.comのレンタルサーバーを使うか選択できますが、ここでは「利用しない」にチェックを入れてください。

チェックを入れたら料金確認へ進むボタンをクリックしてください。

ドメイン料金やオプションを確認

お名前.com申込内容画面

取得希望のドメインが表示されているので、登録年数をプルダウンから決めます。レンタルサーバーの契約年数と合わせておくと分かりやすいかと思います。

登録年数の下に「Whois情報公開代行」と書かれていますが、お名前.comでドメインを取得すると自動で登録されます。

Whois情報とはドメインをどなたが所有しているか確認することができる情報となります。お名前.comのご契約情報とは別にドメイン毎に情報が登録されています。

(中略)
Whois情報公開代行は、上記検索結果で表示されます情報をプライバシー保護などの観点から非公開としたい場合にお申込いただくサービスとなります。お申込いただきますと、お客様の情報ではなくお名前.comの用意した別の情報がWhois情報上に表示されます。

【ドメイン】Whois情報/Whois情報公開代行とは?

※Whois情報公開代行サービスがあるかどうかは、お名前.com以外からドメイン取得する場合もチェックしておきましょう。

下にはオプション選択のチェックボックスがあります。Whois情報公開代行メール転送オプションが330円、ドメインプロテクションが1,078円です。(2021年3月時点)

希望する方はチェックを入れておきますが、個人サイトであればチェックはしなくていいかと思います。

確認できたら右上からユーザー登録します。アドレスとパスワードを決めて入力し「次へ」をクリックします。(すでにアカウントを持ってる方は「お名前IDをお持ちの方」にチェックを入れて進みます)

レンタルサーバーと同じで、ここで決めるパスワードは後で送られるメールには記載されないので、忘れないように控えておきましょう

お名前.comユーザー情報登録

お名前.com会員情報入力画面

個人情報をフォームに入力したら右上の「次へ進む」をクリックします。

お名前.com支払い方法登録

お名前.com支払い方法選択画面

4種類の支払い方法から選択し、必要情報を入力したら右上の商品内容を確認し、問題が無ければ「申し込む」ボタンをクリックします。

お名前.comサーバー契約誘導モーダル

ボタンクリック後にモーダルで営業の追撃がきますが、すでにサーバー契約はしてるので「申込まない」で進みましょう。

ドメイン取得

お名前.comドメイン取得ローディング画面

ドメイン取得まで数秒〜数分間ローディング画面が表示されます。

お名前.comドメイン取得完了画面

しばらくしたら申込完了の画面に遷移して、ドメイン取得作業は完了です。

  • ドメイン自動更新 設定完了
  • Whois情報公開代行 完了通知
  • ドメイン登録 完了通知
  • ドメイン登録 料金ご請求/領収明細

数分の内にこんな感じのメールがまとめて届くので、破棄しないように保管しておきましょう。(契約内容によって違う場合もあります)

ドメインのネームサーバー変更

次に契約したサーバーに、取得したドメインを紐付けます。

ここではネームサーバーを確認する必要があります。

ネームサーバーとは、インターネット上でドメインとWebサーバーやメールサーバーを結びつけるための名前解決をするサーバーです。
インターネット上にあるサーバー(コンピューター)には、すべてIPアドレス(123.145.167.189のように数字で構成されたもの)が割り振られています。IPアドレスが判明すれば、実際にホームページやメールを運用しているサーバーにアクセスすることができます。
このIPアドレスとドメインを結び付ける役割を担っているのがネームサーバーとなります。

【ドメイン】ネームサーバー(DNSサーバー)とは?

ネームサーバーはDNS(Domain Name System)サーバーとも呼びます。

ドメイン管理ページへログイン

まずはお名前.com Naviから取得したドメインの管理ページに入ります。

>> お名前.com Navi

IDはお名前.comから届いたメールに記載されています。

お名前.comドメイン登録完了通知メール画面

パスワードはドメイン取得時に自身で決めたものを入力します。

お名前.com会員ページログイン後画面
ログイン後画面

ネームサーバー設定画面に入る

お名前.comネームサーバー設定へ進む

ナビバーから「ドメイン」を選択すると、取得しているドメイン一覧が表示されます。

画像では3つドメインがありますが、初めてドメインを取得している場合は当然1つしか表示されません。

取得したドメインの「ネームサーバー」が初期設定になっているのでクリックします。

レンタルサーバー会社のネームサーバーを設定

お名前.comネームサーバー情報入力画面

2.ネームサーバーの選択→その他から「その他ネームサーバーを使う」を選択。

ここでレンタルサーバー会社指定のネームサーバーを入力します。

このネームサーバーはエックスサーバーの「ネームサーバーの設定」ページに記載されているので確認しましょう。

※エックスサーバーから届いてるメールにも記載されています。

エックスサーバーのネームサーバー情報

.jpまでの部分を入力します。

入力したら右下確認ボタンをクリックします。

お名前.comネームサーバー入力内容確認画面

モーダルが出てきたらOKボタンを押すと完了です。

お名前.comネームサーバー設定完了通知メール画面

ネームサーバーをドメインに設定できたら、このようなメールが届きます。

レンタルサーバー(エックスサーバー)にドメイン紐付け

次はエックスサーバーのサーバー管理画面で作業をします。

エックスサーバーサーバーパネルログイン画面
エックスサーバーサーバーパネルログイン画面

右上の「ログイン」から、サーバーパネルのログイン画面に入り、IDとパスワードを入力します。

エックスサーバー設定完了通知メール画面

先ほど支払い方法を登録するために入った、Xserverアカウントと同じIDとパスワードでログインできます。

エックスサーバーのサーバーパネル画面

サーバーパネルの画面です。(画像はドメイン紐付け後のため、アカウントデータに数字が入ってます)

ドメイン追加設定

エックスサーバードメイン設定

ドメイン→ドメイン設定へ進みます。

エックスサーバドメイン追加画面

ドメイン設定追加のタブをクリックすると上の画面になるので、取得したドメインを入力します。

ドメイン名の下に「無料独自SSL」と「Xアクセラレータ」のチェックがありますが、こちらはチェックしたまま確認画面へ進みます。

※簡単に説明すると、独自SSLはWebサイト所有者情報を暗号化させるセキュリティ対策で、Xアクセラレータはキャッシュを保存することでサイト表示を高速化させるツールです。

入力したら「確認画面へ進む」をクリックします。

エックスサーバドメイン追加内容確認画面

確認画面になったら「追加する」をクリックして進みます。設定のため、読み込みに数十秒程度かかるかもしれないです。

エックスサーバドメイン追加完了確認画面

完了したら設定内容が記載された画面に切り替わります。

エックスサーバーとドメイン紐付け中画面

「ドメイン設定一覧」のタブをクリックすると、今紐付け作業をしたドメインが表示されていますが、反映待ちとなっています。

この時点ではWebサイトとして反映されません。反映には数時間〜24時間程度かかるので、一旦待ちましょう。

※僕がこの記事を書きながら設定した際は1時間程度で反映されました。

ドメイン反映を確認

ドメイン紐付けできていない状態のページ画面

反映待ちの表示が消えたら、システム上の処理が終わったということです。

ドメインにサーバーが紐付けされたことで、URLとして機能するようになっています。

SSL化設定されているので、「https://ドメイン名」でWeb検索すると、写真のようなページが表示されます。(SSL化設定をせずに登録していた場合は、httpsではなくhttpになります)

これでサーバーとドメインの紐付け設定が完了です。

最後に

ここまでお疲れ様でした!

これであなたの取得したドメインがURLとなり、Web上に自分の住所を持つことができました。

あと残ってる必要な作業としては、FTPソフトを使ってサーバーにデータをアップするだけです。

すでにサーバー設定済みの方で、これからWeb公開をしようとしている方は、こちらの記事でFTPソフトを使ったアップロード方法についてまとめています。

今回はレンタルサーバーを「エックスサーバー」、ドメイン取得サービスを「お名前.com」で進めましたが、基本的な手順は他で契約しても同じなので、この記事のやり方を参考に進めてもらって大丈夫かと思います。

ただ用途によって、会社独自の仕様など細かいところで違いもありますので、しっかり公式サイトの注意点なども見て進めるように気をつけましょう。


また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

オススメ書籍紹介

オススメUdemy講座紹介