- Webデザイナーとして作品を制作したが、Webサイトへの載せ方が分からない
- そもそもWebサイトが一般に公開される仕組みが分からない
このような方向けに、ポートフォリオサイトをWebサイトへ載せるための手順を解説します。
自分が制作したポートフォリオサイトを、制作会社やクライアント等に見てもらうためには、Webサイトへ載せる必要があります。
しかし、未経験の方は、そもそもWebサイトがどうやって一般に公開されるのかが分からず、悩んでいる方も多いのではないでしょうか？
そこで本記事では、ポートフォリオをWebサイトに載せるための具体的な手順を、画像付きで丁寧に解説します。
ポートフォリオをWebサイトへ載せるメリット
制作したポートフォリオを制作会社やクライアント等に見てもらうためには、Webサイトへ載せる必要があります。
紙に印刷して郵送するという方法と比較して、Webサイトへ載せることで、以下のメリットがあります。
- 時間がない制作会社やクライアントにも見てもらいやすい
- 一度Webサイトへ載せてしまえば、URLを教えるだけで複数の制作会社やクライアントにすぐに実績を見てもらえる
- Webデザイナーとして、Webサイトを公開するための知識を習得しているアピールになる
このように、紙で印刷して郵送する方法よりも、多くのメリットがあります。
Webサイトが一般に公開される仕組み
Webサイトを一般に公開するには、サーバーと契約し、ドメインを取得する必要があります。
Webサイトを「お店」に例えると、「サーバー」「ドメイン」は、それぞれ以下のような役割になります。
- サーバー：土地
- ドメイン：住所
- Webサイト：お店
Webサイトを公開するには、まずはサーバー（土地）を契約し、ドメイン（住所）を取得する必要があります。
本記事では、サーバー契約〜Webサイト公開までの流れを画像付きで分かりやすく解説しており、サーバー契約〜Webサイト公開まで20分程度で完了しますので、是非参考にしてみたください！
ポートフォリオをWebサイトへ載せるための具体的な手順
具体的には以下の手順でポートフォリをWebサイトに載せることができます。
- レンタルサーバーを契約する
- ドメインを取得する
- ドメインとサーバーを紐付ける
- サーバーへファイルをアップロードする
それぞれ、具体的に手順を説明していきます。
レンタルサーバーを契約する
尚、今回は人気が高くておすすめのレンタルサーバーである「エックスサーバー」を利用した手順をご紹介します。
本サイトもエックスサーバーを利用しています。
- 国内シェアNo.1のため、信頼性が高い
- サーバー性能が良く、高速・安定稼働が可能
- 管理画面が分かりやすく、初心者でも使いやすい
レンタルサーバーを契約する手順
まずはエックスサーバー
の公式サイトにアクセスし、右上の「お申し込み」ボタンをクリックします。
「10日間無料お試し 新規お申込み」をクリックします。
（※10日間無料で利用することもできますし、継続して利用することもできます。）
「スタンダード」にチェックが入っていることを確認します。
「Xserverアカウントの登録へ進む」をクリックします。
メールアドレス・パスワードなどのアカウント登録に必要な情報を入力します。
利用規約と個人情報の取扱いにするページを確認し、チェックを入れ、「次へ進む」をクリックします。
先ほど登録したメールアドレス宛に確認コードが届くので、コードを入力し、「次へ進む」をクリックします。
入力内容を確認し、「SMS・電話認証へ進む」をクリックします。
電話番号を入力し、好きな取得方法を選択選択し、「認証コードを取得する」をクリックします。
先ほど入力した電話番号に認証コードが通知されるので、コードを入力し、「認証して申し込みを完了する」をクリックします。
申し込み完了画面が表示され、登録したメールアドレスに「サーバーアカウント設定完了のお知らせ」というタイトルのメールが送信されます。
こちらのメールには、管理画面にログインするための重要な情報が含まれているので、消さないように注意しましょう。
メールが届いているのを確認したら、右上の「✖️」をクリックして閉じます。
管理画面が表示されます。
このままだと、10日間無料お試し期間が適用された状態で、10日間が経過すると自動的に利用できなくなります。
10日間後以降も利用を継続したい場合は、「料金支払い」をクリックして継続利用の登録を行います。
対象サーバーにチェックを入れ、好きな契約期間を選択し、「支払方法を選択する」をクリックします。
契約期間はあとからの変更ができませんが、契約更新時に期間を変更することは可能です。
※2023年1月11日時点の価格です。価格は時期によって異なります。
好きな決済方法にチェックを入れ、「決済画面へ進む」をクリックします。
あとは、選択した決済方法で支払いを行うと、申し込みが完了です。
ドメインを取得する
次に、ドメインを取得します。
ドメインとは、サイトのURLに使用される文字列です。
本サイトを例に挙げると、「https://inaka-shine.com」がURLですが、https://の後に記述されている「inaka-shine.com」の部分がドメインです。
サーバーを契約し、土地を取得することができたので、次は、他の人がアクセスしやすいようにドメイン（住所）を取得していきます。
ドメインを取得できるサイトはたくさんありますが、どのサイトで取得してもあまり違いがありませんので、今回はサーバー契約でご紹介した「エックスサーバー」で取得する手順を説明します。
ドメインの取得手順
エックスサーバーの管理画面の「ドメイン取得」をクリックします。
ドメインは、早い者勝ちの仕組みになっており、他の人が取得済みのドメインは使用することができません。
好きなドメインを入力して、「ドメインを検索する」をクリックします。
どれにしてもほとんど違いはありませんので、よく利用されている「.com」「.net」「.jp」あたりを選択するとよいでしょう。
使用可能なドメインは、左側にチェックボックスが表示されますので、好きなドメインにチェックを入れます。
利用規約に関するチェックボックスにチェックを入れ、「お申込み内容の確認とお支払いへ進む」をクリックします。
エックスサーバーは、1個目に取得するドメインは年間1円で取得することができます。
好きな決済方法にチェックを入れ、「決済画面へ進む」をクリックします。
選択した決済方法での支払いが完了すると、管理画面に取得したドメインが追加されます。
これで、ドメインの取得は完了です。
サーバーとドメインの紐付け
サーバー（土地）とドメイン（住所）の取得が完了したので、次はサーバーとドメインを紐づける作業を行います。
サーバーとドメインの紐付け手順
エックスサーバーの管理画面で、ドメインと紐付けたいサーバーの「サーバー管理」をクリックします。
「ドメイン設定」をクリックします。
「ドメイン設定追加」をクリックします。
2つのチェックボックスにチェックを入れたまま、「確認画面へ進む」をクリックします。
「追加する」をクリックします。
これで、サーバーとドメインの紐付けが完了しました。
サーバーにファイルをアップロードする
サーバー（土地）とドメイン（住所）の紐付けが完了し、これで世界中の人がURLを入力することで、あなたのWebサイトを閲覧することができるようになりました。
次は、作成したポートフォリオのファイルをサーバーにアップロードしていきます。
サーバーにファイルをアップロードする手順
サーバーにファイルをアップロードするには、FTPと呼ばれるファイル転送ソフトを使用する必要があります。
以下の記事で、FTPソフトを使用してサーバーにファイルをアップロードする手順を詳しく解説していますので、こちらもぜひ参考にしてみてください。
FTPソフト「FileZilla」のインストール方法や使い方が詳しく知りたい このような方向けに、FTPソフト「FileZilla」の使い方をご紹介します。 FileZillaは、FTPソフトの中でも人気のあるソフトで、様々な[…]
常時SSL化
次に、サイトを常時SSL化していきます。
SSL化されていないサイトは「http://」から始まりますが、SSL化されたサイトは「https://」から始まります。
本記事の手順でサイト公開を進めた場合は、すでに自動的にSSL化が完了していますが、何らかの原因でユーザーが「http://」でアクセスした場合、SSL化されていないサイトを表示されてしまいます。
そのため、ユーザーが「http://」「https://」のどちらでアクセスしても、「https://」のSSL化されたサイトに自動的に転送（リダイレクト）されるように設定を行います。
常時SSL化の手順
エックスサーバーの「サーバー管理」画面で、「.htaccess編集」をクリックします。
常時SSL化を設定したいドメインで「選択する」をクリックします。
「.htaccess編集」をクリックします。
「.htaccess」の入力欄の前半に、以下のコードを追加し、「確認画面へ進む」をクリックします。
## Always On SSL
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
「実行する」をクリックします。
これで、設定が完了しました。
問題なく「http://」→「https://」へのリダイレクトが完了しているかを確認します。
リダイレクトチェックサイトにアクセスし、ドメインを入力して「チェックする」をクリックします。
「301リダイレクト設定をしています」と表示されていたら、問題なくリダイレクト設定ができています。
これで、ポートフォリオをWebサイトに載せることができました。
あとは、URLをお知らせすることで、ポートフォリオを他の方に見ていただくことができます。
まとめ
初めてWebサイトを公開するという方は、ポートフォリオをWebサイトに載せるのは難しく感じる方も多いと思いますが、本記事のような手順で進めると、20分程度でポートフォリオを公開することができます。
ポートフォリオをWebサイトに載せる手順をまとめると、
- サーバーを契約する
- ドメインを取得する
- サーバーとドメインを紐づける
- サーバーにファイルをアップロードする
- 常時SSL化する
このような手順になります。
一度Webサイトを公開する流れを体験しておくことで、Webデザイナーとして働く際にも役に立ちますので、是非この記事の手順に沿って進めてみてください！