メニュー
あおい
Webデザイナー
Webデザイン学習者向けノウハウを発信しています。
26歳からWebデザインを開始。副業時代を経て2021年からフリーランスに転身。現在はLPデザイナーとして活動中。
ブログでは購入経験があるおすすめ商品・サービスだけを本音でレビューしています。

ポートフォリオサイト公開!HTMLデータをサーバーにアップロードする方法【初心者向け】

悩む人

自作のWebサイトをサーバーにアップロードしたい

悩む人

ポートフォリオサイトってどうやって公開するの?

今回は「HTMLで作ったデータを、サーバーへアップロード(ネット上に公開)する方法」を解説します。

Web制作の初心者向けに、初歩的なところから解説していきますね。

こんな内容になっています。

  • ポートフォリオの作り方おさらい
  • Webサイトとサーバー・ドメインの関係性
  • サーバーとドメインの準備方法
  • HTMLデータをアップロードする際の注意点
あおい

この記事を書いた人
あおい(@aoidesign

25歳でWebデザインの学習をスタート。
副業時代を経て、現在はフリーのLPデザイナーとして活動中。
LP制作実績は200件以上。
メンター・講師の仕事もおこなっています

目次

【前提として】ポートフォリオの作り方のおさらい

アップロード方法をすぐに知りたい方は、ここからお読みください

まずポートフォリオについて、ザッとおさらいしましょう。

Webデザイナー向けポートフォリオには、いくつか作り方があります。

たとえば、

  • ポートフォリオ作成サービス(folioなど)を使う
  • PhotoshopやIllustratorで作る
  • ノーコードツール(STUDIOなど)を使う

もしポートフォリオでアピールしたいのが、「バナー」や「Webサイトの見た目のデザイン」なら、サーバーは必ずしも必要ありません。

作ったデザインを画像で保存し、folioのようなサービスにアップロードする方が、簡単にポートフォリオが作れます。

あおい

ちなみに私は、LP(ランディングページ)を作るデザイナーですが、ポートフォリオには画像で載せています

こんな感じ↓

なぜなら、LPでは「見た目のデザイン」を作る力で実力を判断されるからです。

実際のところ、コーディングスキルをチェックされることは、ほぼないです。

では、逆にサーバーを用意した方がいいのはどんな場合でしょうか?

それは、コーディングスキル(HTML/CSS/JavaScriptなど)をポートフォリオでアピールしたい場合ですね。

実際にサーバーにアップすることで、生きたコードとして実力をしっかりチェックしてもらえます。

あおい

というわけで、まずは自分がどういった形のポートフォリオを作るべきか決めてから、サーバーの用意に取りかかりましょう。

こちらも参考に

自分のサーバーを持っておくメリットとは?

では、ここからはサーバーについて解説していきます。

もしかしたら、こう考えている方がいるかもしません。

悩む人

ポートフォリオのためだけにサーバーを用意するのが面倒

悩む人

できれば無料のサーバーで済ませたい

確かに、サーバーは通常、月額費用がかかるので、使用頻度が少ない場合はコストがもったいないですよね。

一方で、これからWeb制作を始める方にとって、サーバーを持っておくことはメリットがたくさんあります。

たとえば

  • 実案件の納品練習ができる
  • 実案件のテスト環境として使える
  • ポートフォリオを公開できる
  • WordPressでオリジナルブログが作れる
  • WordPressサイトを作る練習ができる

もしあなたが、バナーやサムネなどの画像作りだけをやりたいなら、サーバーの知識はなくても構いません。

ただ今後、ホームページやランディングページなどのWeb制作を本格的にやっていきたいなら、サーバー周りの知識は必須になります。

特に、フリーランスや個人でサイト制作を受注したい方。

なぜなら実案件では、納品の際に「サーバーのアップロードまでお願い」されることが多いからです。

さらに、お客さんのサーバー(本番環境)へ納品する前には、別で用意したテストサーバー上で、実際の見え方を確認してもらうのが一般的です。

自分のサーバーを持っていると、このテストサーバーとして使えるので便利です。

このような理由から、Web制作を本格的にやる場合は、自分のサーバーを持っておくことはほぼ必須といえます。

あおい

ちなみに無料のサーバーは、
・広告表示
・容量制限
・セキュリティの脆弱性
などがあるので、あまりおすすめできないです

Webサイトとサーバー・ドメインの関係性

すでにサーバーとドメインの用意がある方は、こちらからお読みください

まず、Webサイト(HTMLデータ)をインターネットで見れるようにするには、

  • サーバー
  • ドメイン

この2つが必要です。

よく言われるイメージは

  • サーバー:インターネット上の「土地」
  • ドメイン:インターネット上の「住所」

になります。

家(Webサイト)を建てるには、土地(サーバー)と住所(ドメイン)が必要なわけですね。

あおい

この2つを、もう少し詳しく見ていきましょう

HTMLデータ公開に必要なもの①サーバー

サーバーは簡単にいうと、Webサイトのデータを保管しておく場所です。

たとえば、画像データやテキストデータなどですね。

サーバーには大きく分けて2つの種類があります。

  • 共有サーバー:1台のサーバーを複数のユーザーが共有
  • 専用サーバー:1台のサーバーを1人のユーザーが独占

個人や小規模でWeb制作をしている場合は、「共有サーバー」を利用することがほとんどです。

月額費用も圧倒的に安いし、スペックや機能の面でも十分なので。

この共有サーバーを提供している「レンタルサーバー会社」がたくさんあります。

後ほど、おすすめをご紹介しますね。

HTMLデータ公開に必要なもの②ドメイン

ドメインは前述したように、インターネット上の「住所」です。

Webサイトを見るときに、インターネット上のどこにいるのかを特定するために使われます。

たとえば、当ブログのドメインは「aoidesign21.com」になります。

また、ヤフーのドメインは「yahoo.co.jp」であり、Amazonだと「amazon.co.jp」となっています。

初心者

ってことは「URL」って理解でいいのかな?

あおい

URLとも似ていますが、少し違います。
ドメインは、URLの一部分のことを指します

例:https://aoidesign21.com/server-domain

赤い部分がドメインです

ドメインは、自分の好きな文字列を使える

一般的には、会社名や屋号、商品・サービス名を使います。

あおい

私は「あおいデザイン」という屋号で、2021年から活動を始めたので「aoidesign21.com」にしました

ここで注意点として、同じドメインは重複できません。

欲しいドメインがすでに誰かに使われていたら、そのドメインは使えないということ。

また「.com」の部分は、他の文字列も使えますが、用途によって決まりがあります。

ドメイン名の種類

.com商業目的のサイト
.netネットワーク関連のサイト
.info情報提供を目的としたサイト
.org非営利団体や組織向けサイト
.jp日本国内で運営されているサイト
.co.jp日本の企業向け、法人のみ取得可能
ドメインの種類

特別な理由がない限り「.com」または「.net」を選ぶのがおすすめです。

取得自体がしやすいし、取得費用や更新費用も安いので。

サーバー・ドメインの契約方法とおすすめサービス

ここからは、おすすめのサービスや契約方法を解説していきます。

まず最初に、これからサーバー・ドメインを契約する場合は、同時に同じサービスから取得する方がお得です。

後々の設定が便利だし、しかも同時取得でドメインが無料になるサービスがあります。

あおい

今回は、私がおすすめする2つのサービスをご紹介します!

それが、

この2つです。

どちらも知名度と評価が高く、利用者も多いです。

あおい

私自身はエックスサーバー利用者ですし、私のクライアントの6〜7割も、どちらかを利用していますね

比較表

スクロールできます

エックスサーバー

ロリポップ
特徴国内シェアNo,1のレンタルサーバー。超高速表示、大量アクセスにも強い。月額99円〜と低価格が売り。WordPressの表示速度がNo.1。
おすすめ度
初期費用無料無料
月額料金スタンダード:990円〜
プレミアム:1,980円〜
ビジネス:3,960円〜
エコノミー:99円〜
ライト:264円〜
スタンダード:495円〜
ハイスピード:550円〜
エンタープライズ:2,200円〜
こんな方に
おすすめ
シェア率・信頼性重視の方安さ重視の方
無料体験10日間無料10日間無料
特典対象ドメインが2つ永久無料ハイスピードプラン以上で
ドメイン2つ永久無料
公式サイト公式サイト公式サイト
各サービスの比較(2024.10現在の情報に基づきます)

無料ドメインに関しては、

上記より安いプランだと、ドメインが無料でついてきません。

サーバーは基本的に長期で利用するものなので、最短でも12ヶ月で契約しましょう。

料金はこのようになってます

ロリポップの方が、若干お安いですね。

さらにロリポップは、より長い契約期間で申し込むと

  • ハイスピードプラン24ヶ月の契約:月額935円
  • ハイスピードプラン36ヶ月の契約:月額550円

かなり安くなります。

あおい

結論、安さとスペックを重視するなら「ロリポップ」がおすすめです
初心者でいきなり長期契約が不安な場合は、まずは12ヶ月で申し込むのがいいかなと思います

\ コスパNO,1のレンタルサーバー /

ロリポップの契約方法

https://lolipop.jp/

ここからは、ロリポップの契約方法を解説していきます。

まずロリポップのトップページからお申し込みを行いましょう。

\ コスパNO,1のレンタルサーバー /

申し込みと同時にドメインも取得する

先ほど解説したように、サーバーと同時にドメインも取得しましょう。

申し込みフォームにて、「お申し込みと同時に、無料で「独自ドメインを取得できます」の箇所で「取得する」にチェックを入れます。

ロリポップのドメインサービスは「ムームードメイン」という名前です。

ここでムームードメインのアカウント作成と、取得するドメイン名を決めます。

ドメインの決め方は「ドメインは、自分の好きな文字列を使える」を参考にしてください。

その後、SMS認証やクレジットカード情報の入力などがあります。

流れに沿って進めていけばOKです。

HTMLデータをサーバーへアップロードする方法

ここからは、自分で作ったHTMLデータを、サーバーへアップロードする方法を見ていきます。

ただし!その前に、2つ設定をしておくことがあります。

  • サーバーとドメインの紐付け作業
  • SSL化
あおい

それぞれ、サーバーの管理画面から簡単に設定ができます

【前提①】サーバーとドメインの紐付け作業

サーバーとドメインは契約しても、お互いを紐付ける設定をしなければ、Webサイトを表示できません。

Webサイトとサーバー・ドメインの関係性」で話した「土地」「住所」を考えると分かりやすいと思います。

Webサイトに辿り着くには、土地と住所が紐づいていないといけません。

この記事で紹介したロリポップとエックスサーバーの場合は、管理画面から簡単に紐付け作業が行えます。

その他のサーバーも合わせて、公式ヘルプを載せておきますね↓

【前提②】SSL化

SSL化とは、インターネット上の情報を暗号化して保護するための技術のことです。

第三者によるデータの盗聴やなりすまし、改ざんを防げます。Googleも推奨しているので、SEO対策としても重要です。

サイトがSSL化されているかどうかは、URLを見ればすぐ分かります。

あおい

つまり、SSL化すると「http〜」が「https〜」に変わります

どのレンタルサーバーでも、管理画面から無料でSSL化の設定が可能です。

公式ヘルプを載せるので、サクッと設定しておきましょう。

FTP接続を使ってデータをアップロードする

さて、ここまで来たらいよいよデータをアップロードします。

今回ご紹介するのは、FTP(File Transfer Protocol)を使ったアップロード方法になります。

FTPとは簡単にいうと、ファイル転送の決まり事のことです。

FTP接続のイメージ図
あおい

実案件においても、納品時にFTPを使ってデータをアップロードすることが一般的です

FTPを使ったアップロードの流れを説明していきますね。

  • FTPソフトのインストール
  • FTP接続情報の確認
  • サーバーへ接続する
  • ファイル一式をアップロード

①FTPソフトのインストール

まず最初に、FTPソフトをインストールする必要があります。

Web制作の現場でもっともよく使われている「FileZilla」がおすすめです。

あおい

日本語にも対応しており、無料で使えます

FileZillaのインストールはこちらから

Download FileZilla Client」をクリックします。

緑のボタンをクリックし、さらに一番左の「Download」をクリックします。

「zipファイル」がダウンロードされるので展開し、インストールを行なってください。

アプリに追加されれば、インストールは完了です。

②FTP接続情報の確認

次に、サーバーへ接続するための「FTP接続情報」が必要です。

具体的には、下記の3つをサーバー管理画面から確認します。

  • FTPサーバー(ホスト)名
  • ユーザー(アカウント)
  • パスワード
あおい

実案件においても、お客さんからこの情報をもらって接続する流れになります

確認方法は、各サーバーの公式ヘルプを載せておきますね↓

③サーバーへ接続する

確認したFTP情報を使って、サーバーへ接続を行います。

まずは、先ほどインストールしたFileZillaアプリを立ち上げましょう。

左上の「ファイル」→「サイトマネージャー」をクリックします。

サイトマネージャー画面で「新しいサイト」をクリックします。

名前はなんでもOKです。

そしたら次に、右側の3箇所に先ほど確認したFTP情報を入力します。

  • FTPサーバー(ホスト)名
  • ユーザー(アカウント)
  • パスワード
あおい

間違えると、正常に接続ができないので、よく確認して入力してくださいね

入力ができたら、下の「接続」をクリックします。

この時、「不明な証明書〜」の注意が出てきたら「OK」をクリックしてください。

④ファイル一式をアップロード

正常に接続ができると、取得したドメインのファイルが出てくるはずです。

このファイルをダブルクリックします。

ダブルクリックした先に、データをアップロードすればOKです。

▼ドラッグ&ドロップでアップロード

エックスサーバーの場合

エックスサーバーでは、「public_html」というファイルが出てくるので、この中にデータをアップロードします。

アップロードが完了したら、ドメインにアクセスしてみましょう。

もし正常にサイトが表示されない場合は、以下を確認してみてください。

  • ファイルのアップロード先が間違っていないか?
  • 全てのファイルがアップロードされているか?
  • 403などエラーメッセージが出る場合は、エラーの原因を確認して対応する

ポートフォリオ用に作った作品の公開方法

これまでの解説によって、HTMLデータをサーバーへアップロードできたかと思います。

しかし、

悩む人

ポートフォリオ用に作ったWebサイトが複数あるんだけど、それはどうやって公開するの?

こんな疑問があると思います。

あおい

それは、FTPソフト上で新規フォルダを作成して、そこにアップロードしていけばOKです

たとえば、「aoidesign.com」というドメインを取得して、そこにポートフォリオサイトをアップロードしているとします。

その状態から、新規で

  • works01
  • works02
  • works03

このような新規フォルダを作成し、それぞれにindex.htmlなどのファイルをアップロードしていく感じです。

「works01」などの新規フォルダの作り方を解説しますね。

まず、ドメインのフォルダをダブルクリックで開いた状態にします。

画面上の白背景の部分で右クリックをし、「ディレクトリの作成」をクリックします。

入力欄に任意の名前を入力して「OK」をクリックします。

こんな感じで、いくつか作ります↓

作ったフォルダをダブルクリックし、そこに各ファイルをアップロードすればOKです。

アップロードが完了したら、サイトが表示されるか確認しましょう。

ポートフォリオ公開時の注意点【Basic認証noindex

ポートフォリオ用に作った架空の作品を公開する時に必要な設定です。

  • Basic認証:Webサイトにアクセス制限をかけられる認証方法の1つ
  • noindex:検索エンジンにページをインデックスさせないようにするタグ

なぜこれらの設定が必要なのでしょうか?

それは、実在しない商品・サービスのサイトは、ネット上に公開しておくのは避けたほうがいいからです。

誰でも簡単にアクセスできたり、Googleの検索結果に出てこないようにすべきです。

設定方法については、こちらを参考にしてくださいね

よかったらシェアしてね!
  • URLをコピーしました!
目次