※このページでは広告のリンクを含みます
サイトを公開するまでがWeb制作のお仕事です。
この記事ではFTPソフトの設定とレンタルサーバーのアップロードとダウンロードの手順を解説しています。Web制作スキルでサーバーにアップすることは必須ですので、ぜひ読んで手順を覚えてしまいましょう。
サーバーのアップロードは必須スキル
前述させていただいたようにWeb制作はサーバーに公開するまでが業務です。
作業的には簡単なので、習得することは難しくありません。プロとして現場に入ると扱うサーバーはクライアントのサーバーであり、ひとつアップロードミスがあれば、クライアントの機会損失に繋がりかねません。
現場に入る前にサーバーにアップロード（ダウンロード）に慣れておくため、個人でレンタルサーバーを借りて実際経験して慣れておく必要があります。
この記事ではレンタルサーバーの説明とFTPソフトによるアップロード（ダウンロード）の仕方を手順を追って解説していきます。
サーバーにアップロードすることはWeb制作の必須スキルなので、ここで学んで実践していきましょう。
最初のレンタルサーバーは「ロリポップ！」が良い理由
Webデザイナー初学者はサーバーへのアップロード（ダウンロード）は学習すべき項目ですが、レンタルサーバーのサービスを使用しない限りスキルが身につくことができません。
レンタルサーバーを使用しようと思い調べてみると、レンタルサーバーのサービスを提供している企業が10社ぐらいありどの企業の、どのレンタルサーバーを使用することが正解か迷ってしまうと思います。
当サイトでは、Webデザイナー初学の方にはロリポップ！の「ライト」プランを推奨します。
ロリポップ！の「ライト」プランを推奨する理由は下記の通りです。
- 利用価格が月額220円～と業界内最安
- WordPressが利用可能
- ドメイン費用が無料
詳細はロリポップ！のサービスよりご確認下さい。
ライトプランはポートフォリオサイトを制作することにもできますし、WordPressも使える環境ですので、WordPress構築の学習もできます。このように初めてサーバーをするには最適なサービスと考えています。
ドメインがずっと無料
レンタルサーバー「ロリポップ！」の契約から設定まで「レンタルサーバー「ロリポップ！」の契約・設定とドメイン設定を図解解説します」にて詳細に解説をしています。
FTPソフト「FileZilla」を使う
FTP（File Transfer Protocol）は「ファイルを転送する時に通信をする際の手順や規格」のことであり、FTPソフトとはサーバーにデータをアップロードしたり、サーバーにあるデータをダウンロードする際に使うアプリケーションソフトのことです。
FTPソフトと呼ばれるものには有料、無料と問わずに数多くあります。その中からプロの現場でよく使用されている「FileZilla」を紹介したいと思います。
無料かつ、Windows・Mac共に使えますのでぜひ覚えていきましょう。
「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ソフトを使ったサーバーへのアップロードとダウンロードの手順
- サーバーのアップロードは必須スキル
- 現場に入る前にサーバーにアップロード（ダウンロード）に慣れておくため、個人でレンタルサーバーを借りて実際経験して慣れておく必要があります。
- 最初のレンタルサーバーは「ロリポップ！
」が良い理由
-
- 利用価格が月額220円～と業界内最安
- WordPressが利用可能
- ドメイン費用が無料
- FTPソフト「FileZilla」を使う
- プロの現場でよく使用されている「FileZilla」は無料かつ、Windows・Mac共に使えますのでぜひ覚えていきましょう。
- FTPソフトでレンタルサーバーにアップロード、ダウンロードする
- 「FileZilla」とサーバーを接続する
- 「FileZilla」でサーバーにアップロードする
- 「FileZilla」でサーバーからダウンロードする
ユウジの体感コラム
クライアントのサーバーにアップロードするという行為は重要です。
アップロードをするフォルダを間違ったり、本番にあるデータを誤って削除することでクライアントに多大な損害を与えてしまう可能性も十分にあります。
かくいう著者も作業中、ちょっとした油断でアップロードの間違えはあります。違うデータを上書きしてしまった時の背中に冷や汗が通る感じが嫌ですよね。
サーバーへのアップロード、ダウンロードは作業的には難しくありませんが、絶対間違えがあってはいけない作業ですので常に緊張感を持っておこなっていきたいですね。
小コラム：Webデザイナーになるために、もし今から自分が選ぶとしたら？
もし自分が今からWebデザイナーを目指すとしたら、どのスクールを選ぶかの問いに、いろいろ調べた結果、自分が選ぶのは「デジタルハリウッド STUDIO by LIG」かなと思います。
まず、「LIG」っていうWeb業界の最前線に居るWeb制作会社が運営してるから、現場のリアルが学べるっていうのが大きいポイント。LIGの教室も自由に使えるから、自分のペースで学習が進められるのも魅力です。
あと、現役のプロ講師から直接指導を受けられるっていうのも、モチベーションが上がりそう。業界の裏話とかも聞けそうで、楽しそう。それに、教室で一緒に学んでる人たちと交流することで、自然と競争心が芽生えて「よし、負けてられないぞ！」ってなる気がします。
ただ、ぶっちゃけ費用は高い。でも、リスキリング支援で最大70%キャッシュバックされるんだったら、かなり助かると考えています。これを使って、コストの心配も少し軽減できるんじゃないかなって思います。
受講費最大70%キャッシュバック中
