レンタルサーバーでWebサイトを公開する手順 - はじめてのWebデザイン【図解たっぷり】
「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。
14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。
（先着限定、5月24日まで）
» 「司令塔」側に回る14日間プランを見る
HTMLやCSSを学習しながら、学習したことを活かしてWebサイトを作ってみる、ということはとても大切。エディタでコードを書いて、ブラウザで確認している場合、制作しているパソコン以外からはアクセスできません。色々な人に自分が作ったサイトを見てもらうためには、作成したWebサイトをインターネット上に公開する必要があります。
もちろん、Webデザイナーとしてお仕事をする場合も、サイト公開まで行うケースはよくあります。お仕事を受ける前の事前練習も兼ねて、自分の作ったサイトをWeb上に公開してみましょう！
ドメインとサーバーを知ろう
Webサイトをインターネットで公開するためには、ドメインとサーバーの２つが必要となります。それぞれ、どんな役割があるか見てみましょう。
ドメインとは
ドメインとは簡単に言ってしまえばURLのこと。
「https://」や「www」を除いた部分です。
ブラウザのURLバー（アドレスバー）に打ち込むと、特定のサイトを表示することが出来るものです。
このためインターネット上の「住所」や「番地」と表現されることもあります。
上図のURLは独自と独自ドメインと呼ばれるURLの構成です。
ドメイン名は、２つのパートから成り立っています。
最後の「.」以下はトップレベルドメインと呼ばれる部分。
.jpなら日本のサイト、.comならば商業組織用など、目的に合わせて選択する形になっています。
社名やサイト名を使えるのは前半、第2レベルドメインの方です。
また、ドメインには「独自ドメイン」と「無料ドメイン」があります。
独自ドメインは、自分で好きな文字列を指定して取得したドメイン名のこと。
そのドメイン名の所有者としての権利を得られます（更新、更新にかかる手数料等が必要）。
無料ドメインはレンタルサーバーなどの会社が持っている独自ドメインの一部を借りている形になっているものがほとんど。間借りをしているイメージです。 アクセス等は問題なくできますが、大元のドメインが無くなると連動して削除されてしまうなどのデメリットがあります。
サーバーとは
サーバーとは、Webサイトを構成するファイルを置いておく場所です。
ドメイン＝Webの住所に対して、サーバー＝土地と表現されます。
実際の土地・住所と異なるのは、同じ土地（サーバー）の上にあるサイトを、複数の住所（ドメイン）に分けることが出来る点。全く違うドメイン名のサイト情報を置いておける、なんてことが出来るのはWebならではと言えるかもしれません。
レンタルサーバーとは
サーバーには様々な種類があります。
自宅サーバー・自社サーバーなどもありますが、セキュリティ等の問題から専門知識が必要となります。管理も大変です。
このため、レンタルサーバー（共有サーバー）にスペースを借りるケースが多いです。
大きなサーバーを持っている会社にレンタル料を払って、土地を借りるわけです。
レンタルサーバー会社も、国内だけでも沢山あります。
最初はユーザー数が多く、知名度の高いレンタルサーバーと契約すると良いでしょう。運営歴・利用者数の多いサーバーの方が、使い方マニュアルやユーザーサポートも充実していることが多いです。
【知名度が高いレンタルサーバー例】
- さくらインターネット
- ロリポップ（ヘムテル）
- エックスサーバー など
レンタルサーバーを借りてみよう
さくらのレンタルサーバーに登録
さくらインターネット株式会社が提供している、さくらのレンタルサーバを使って、実際にサーバーを使ったサイト公開を行ってみましょう。
無料で2週間お試しを申し込む
さくらのレンタルサーバを開きます。
お申し込みはこちら、をクリック。
使用したいプランを選びます。
WordPress等のCMS利用が出来る・容量100GBなど、長く運用していくために必要な機能が揃っているスタンダードプランを選びました。
その下に“初期ドメイン”という項目があります。
ここではレンタルサーバーを使うために必要なドメインを決めます。管理画面にログインする際にユーザーIDのような形で利用しますし、表示されているURLをつかってWebサイトを公開することも出来ます（サブドメイン）。
お好きに入力して、利用可能であれば次に進みましょう。
独自ドメインの欄は「レンタルサーバだけ契約する」のままでOK。
後から独自ドメインを取得することも出来ます。今回は練習用サイトの公開なので、初期ドメインの方が使えれば十分です。
お支払い方法の選択ボタンをクリック。
さくらインターネット会員登録
会員認証画面に切り替わりました。
新規会員登録をしましょう。
メールアドレスを入力、「個人情報の取扱いについて」に同意しますにチェックを入れて、会員登録の案内メールを送信します。
認証コード入力画面に変わります。
登録したメールアドレスの受信トレイを見ると
6桁の認証コードが記載されているメールが配信されています。
送られてきた認証コードを認証コード入力画面に入力。
次に進むのボタンをクリックします。
認証コードの有効期限は発行から30分間なので注意しましょう。
会員登録画面が開きます。
氏名や住所、パスワードなど必要情報を入力してください。
支払情報の選択
会員登録が完了すると、レンタルサーバの支払方法を選択する画面に移動します。
支払いパターンと支払い方法を選択しましょう。
お試しの場合は「銀行振込」にすると、支払いがない＝自動解約されるので無難です。
本格的に自分のサイトをリリースしてからは、支払い忘れでサイトが消えてしまわないようにクレジットカードに変更すると良いでしょう。
「申込内容の確認へ」をクリックすると、今まで登録した内容の確認画面に変わります。入力間違いがないか確認しましょう。
ページ下部にある「約款のご確認」にチェックを入れて、申込むボタンをクリック。お申し込みが完了します。
さくらのレンタルサーバからのメールを確認
しばらくすると登録したメールアドレスに「[さくらのレンタルサーバ] 仮登録完了のお知らせ」というメールが届きます。
このメールには、コントロールパネルへログインするための重要な情報が記載されています。
- ドメイン名
- サーバーパスワード
内容を確認し、誤って消さないよう保管しておきましょう。
コントロールパネルにログイン
届いたさくらサーバーの仮登録完了メールに記載されているサーバコントロールパネルURL、もしくはさくらのレンタルサーバ公式サイトのメニューにある「コントロールパネルログイン」をクリックし、コントロールパネルにログインします。
ログイン画面が開いたら、[さくらのレンタルサーバ] 仮登録完了のお知らせメールに記載されていた情報を使ってログインしてください。
・初期ドメイン
・サーバパスワード
（※さくらの会員パスワードではなく、メールで届いたサーバパスワード）
ログインが完了すると、下図のような“サーバーコントロールパネル ホーム”画面が開きます。
サイトをSSL化する
左側のメニューから、ドメイン/SSL => ドメイン/SSLをクリックします。
“初期ドメイン”で登録したドメインが表示されています。
設定ボタンをクリックしましょう。
オレンジの線で囲った２箇所にチェックが入っているか確認して下さい。
- 共有SSLを利用する
- HTTPSに転送する
チェックを入れた状態で、一番下にある「保存する」ボタンをクリック。
これでレンタルサーバー側の設定は完了です！
FTPクライアントソフトを導入する
FTPとは
FTPはFile Transfer Protocolの略で、簡単に言えばファイルを転送する手段（通信プロトコル）のことです。FTPを利用することで、私達のパソコン内と契約したレンタルサーバーとで、ファイルをやりとりすることが出来るようになります。
Webサイト制作では、主に下記の目的でFTPを使用します。
- ファイルをサーバーにアップロード、ダウンロードする
- サーバーににあるファイルの一覧を確認する
こうした通信を簡単に行ってくれるのが、ファイル転送ソフト(FTPクライアントソフト)です。
今回はFileZilla（ファイルジラ）という、無料・日本語対応・Mac＆WindowsのFTPクライアントソフトを使ってみましょう。
FileZillaをインストール
FileZillaの日本語情報サイトを開きます。
ダウンロードタブの、リリース一覧をクリック。
使用しているパソコンのOSと合致するところをクリックしてください。
ダウンロードが行われます。
自動で開始されない方は「開始されない場合～」のリンク文字をクリックしましょう。
インストーラがダウンロードされました。
ダブルクリックしてインストールを実行しましょう。
インストールする場所などを聞かれますが、基本的にデフォルトのチェックのまま進めてしまって問題ありません。
画面の指示に従ってインストールを完了させましょう。
レンタルサーバーに接続
FileZillaのインストールが完了したら、立ち上げてみましょう。
FileZillaウィンドウの左上にある「サイトマネージャー」のボタンをクリック。
クイックパネルが表示されていない方は、上部メニューのファイル > サイトマネージャーから表示させてください。
サイトマネージャー(接続先の一覧)が表示されます。
「新しいサイト」をクリックしてください。
新規サイトがエントリの選択枠内に作成されます。
管理しやすいように、分かりやすい名前を付けておきましょう。
さくらサーバーの仮登録完了メールを開いてください。
FileZillaサイトマネージャーの右側に、接続に必要な情報を入力します。
- ホスト・・・・・FTPサーバー名
- ユーザー・・・・FTPアカウント
- パスワード・・・サーバーパスワード
入力が終わったら「接続」ボタンをクリックしましょう。
さくらのレンタルサーバに繋がり、ファイルが表示されます。
レンタルサーバーにアップロード＆公開
サーバーにファイルをアップロードし、サイトを公開しましょう！
まず、サイトのURLを開いてみましょう。
アップロードが反映されるURLですね。
さくらサーバーの仮登録完了メール「ホームページ」の横に書かれているURLを開きます。
「Forbidden」と表示されているはずです。
今はこのままで大丈夫。
ファイルをアップロードして、もう一度確認しましょう。
FileZillaに戻ります。
サーバー側（リモートサイト）のパネルの中から、wwwというフォルダを探して下さい。見つかったら、ダブルクリックで開きます。
おそらく、上図のように空っぽの状態でしょう。
このwwwフォルダの中に、作成したサイトのファイルをアップロードします。
アップロードしたいファイルをドラッグしてみましょう。
先程、「Forbidden」だったURLのページをもう一度見てみましょう。
リロードすると、Webページが見られるようになっています。
そういえば、photoshopの使い方編でトップ画像を新しく作っていましたね。
index.htmlの画像のパスを変更し忘れていました。
修正してアップロードし直しましょう。
index.htmlのファーストビュー画像のパスを変更します。
<img src="images/top.png">
↓
<img src="images/top.jpg">
修正したindex.htmlを、アップロードします。
同じファイルがある場合は、上書きしてもよい良いか確認のウィンドウが表示されます。OKをクリックして上書きしましょう。
再び、サイトを再読み込みします。
変更が反映されていることが分かりますね。
このように、FileZillaを使ってレンタルサーバーのファイルを上書きすることができます。
もちろん新しいページを作ったら、追加でアップロードもできますよ。
最初のサーバー契約とFTP接続が終わってしまえば、後はドラッグするだけの簡単操作。画像を変更したり、文字のミスタイプを直したり……気になるところを更新してみましょう。
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月24日まで