【実践】FTPソフトを使ったサーバーへのアップロードとダウンロードの手順

サイトを公開するまでがWeb制作のお仕事です。
この記事ではFTPソフトの設定とレンタルサーバーのアップロードとダウンロードの手順を解説しています。Web制作スキルでサーバーにアップすることは必須ですので、ぜひ読んで手順を覚えてしまいましょう。

サーバーのアップロードは必須スキル

前述させていただいたようにWeb制作はサーバーに公開するまでが業務です。
作業的には簡単なので、習得することは難しくありません。プロとして現場に入ると扱うサーバーはクライアントのサーバーであり、ひとつアップロードミスがあれば、クライアントの機会損失に繋がりかねません

現場に入る前にサーバーにアップロード(ダウンロード)に慣れておくため、個人でレンタルサーバーを借りて実際経験して慣れておく必要があります

この記事ではレンタルサーバーの説明とFTPソフトによるアップロード(ダウンロード)の仕方を手順を追って解説していきます。

サーバーにアップロードすることはWeb制作の必須スキルなので、ここで学んで実践していきましょう。

最初のレンタルサーバーは「ロリポップ」が良い理由

Webデザイナー初学者はサーバーへのアップロード(ダウンロード)は学習すべき項目ですが、レンタルサーバーのサービスを使用しない限りスキルが身につくことができません

レンタルサーバーを使用しようと思い調べてみると、レンタルサーバーのサービスを提供している企業が10社ぐらいありどの企業の、どのレンタルサーバーを使用することが正解か迷ってしまうと思います。

当サイトでは、Webデザイナー初学の方にはロリポップの「ライト」プランを推奨します

ロリポップ!

ロリポップの「ライト」プランを推奨する理由は下記の通りです。

  • 利用価格が月額300円と業界内最安
  • WordPressが利用可能
  • ドメイン費用が無料

詳細はロリポップのサービスよりご確認下さい。

ライトプランはポートフォリオサイトを制作することにもできますし、WordPressも使える環境ですので、WordPress構築の学習もできます。このように初めてサーバーをするには最適なサービスと考えています。

ドメインがずっと無料

FTPソフト「FileZilla」を使う

FTP(File Transfer Protocol)は「ファイルを転送する時に通信をする際の手順や規格」のことであり、FTPソフトとはサーバーにデータをアップロードしたり、サーバーにあるデータをダウンロードする際に使うアプリケーションソフトのことです。

FTPソフトと呼ばれるものには有料、無料と問わずに数多くあります。その中からプロの現場でよく使用されている「FileZilla」を紹介したいと思います。

「FileZilla」起動画面

無料かつ、Windows・Mac共に使えますのでぜひ覚えていきましょう。

「FileZilla」をインストールする

「FileZilla」のダウンロードは公式サイトで行います。

FileZilla公式サイト

「Download FileZilla Client All platforms」のボタンをクリックして遷移後のページの「Download FileZilla Client」からダウンロードをします。

ダウンロードまでのページ遷移

「Download FileZilla Client」をクリックすると各「FileZilla」エディションを選択する画面が出てきますが、無料の通常版を選択します。

選択するとインストールデータがダウンロードされますので、ここからインストールします。
インストール画面の指示に従ってすすめていけば問題ありません。

インストール終了したら起動します。

FTPソフトでレンタルサーバーにアップロード、ダウンロードする

サーバーにアップロード・ダウンロードする前に「FileZilla」とサーバーを接続するための設定をする必要があります。

「FileZilla」とサーバーを接続する

左上側にある「サイトマネージャーを開きます。」ボタンをクリックしてサイトマネージャーを開きます。

サイトマネージャー

[新しいサイト]をクリックしてください。クリックすると右のエリアにサーバー情報を入れる項目が出てきますので、契約したレンタルサーバーの情報を入れていきます。

サイトマネージャー入力指示図

サイトマネージャー入力指示図について下記に説明します。

  • 新規サイト(上図1
    任意の名前を入れます。
  • プロトコル(上図2
    「「FTP」-ファイル転送プロトコル」を選択します。
  • ホスト名(上図3
    レンタルサーバーのホスト名を入力します。
  • 暗号化(上図4
    「使用可能なら明示的なFTP over TLSを使用」を選択します。
  • ログオンタイプ(上図5
    「通常」を選択します。
  • ユーザー(上図6
    レンタルサーバー会社から送られてきたユーザー名を入力します。
  • パスワード(上図7
    レンタルサーバー会社から送られてきたパスワードを入力します。

すべて入力し終わったら[接続]ボタンをクリックするとリモートサイト欄にフォルダが表示されれば接続完了です。

「FileZilla」でサーバーにアップロードする

サーバーにアップロードをします。
FileZilla画面の左側がローカルの場所を表示しており、右側がサーバーの場所を表示しています。
サーバーに接続ができていれば、右側の「リモートサイト」エリアにフォルダが表示されます。

サーバーに接続画面

ローカルサイトとリモートサイトの見方を説明します

まず、リモートサイトでファイルをアップロードしたいフォルダを開いておきます。
また、ローカルサイトでアップロードしたいファイルがあるフォルダを開いておきます。

ローカルサイトエリアでフォルダにあるデータを選択して右クリック[アップロード]を選択するとアップロード完了です。

データをローカルサイトからリモートサイトに手動でドラック&ドロップする方法もあるのですが、これは誤って違うフォルダにアップロードしてしまう可能性もあるのでなるたけ右クリック[アップロード]を使用することをおすすめします。

[同期ブラウジング]ボタンを押下しておくことでリモートサイトのフォルダの階層の移動によりローカルサイトも階層を移動してくれます。これは、間違ったフォルダにアップロードすることが防げます

同期ブラウジング説明図

「FileZilla」でサーバーからダウンロードする

リモートサイトでファイルをダウンロードしたいフォルダを開いておきます。
また、ローカルサイトでダウンロードしたいファイルがあるフォルダを開いておきます。

リモートサイトでフォルダにあるデータを選択して右クリック[ダウンロード]を選択するとダウンロード完了です。

この記事のまとめ

おすすめのレンタルサーバーと「FileZilla」によるサーバーへのアップロードとダウンロードの手順についてまとめてみます。

【実践】FTPソフトを使ったサーバーへのアップロードとダウンロードの手順

サーバーのアップロードは必須スキル
現場に入る前にサーバーにアップロード(ダウンロード)に慣れておくため、個人でレンタルサーバーを借りて実際経験して慣れておく必要があります。
最初のレンタルサーバーは「ロリポップ」が良い理由
  • 利用価格が月額300円と業界内最安
  • WordPressが利用可能
  • ドメイン費用が無料
FTPソフト「FileZilla」を使う
プロの現場でよく使用されている「FileZilla」は無料かつ、Windows・Mac共に使えますのでぜひ覚えていきましょう。
FTPソフトでレンタルサーバーにアップロード、ダウンロードする
  • 「FileZilla」とサーバーを接続する
  • 「FileZilla」でサーバーにアップロードする
  • 「FileZilla」でサーバーからダウンロードする

ユウジの体感コラム

クライアントのサーバーにアップロードするという行為は重要です。
アップロードをするフォルダを間違ったり、本番にあるデータを誤って削除することでクライアントに多大な損害を与えてしまう可能性も十分にあります。

かくいう著者も作業中、ちょっとした油断でアップロードの間違えはあります。違うデータを上書きしてしまった時の背中に冷や汗が通る感じが嫌ですよね。

サーバーへのアップロード、ダウンロードは作業的には難しくありませんが、絶対間違えがあってはいけない作業ですので常に緊張感を持っておこなっていきたいですね。

おすすめの就職・転職エージェント