【FTP?アップロード?】Web制作初心者にもわかるように解説

Web Design Tips
Web Design Tips

未経験からWebサイト制作を学んで、副業や在宅ワークで稼げる様になりたい!という人のための本シリーズ。
今回は、制作したWebサイトのアップロード方法について勉強していきましょう。

クラウドソーシング等で Webサイト制作案件の募集文を見ていると、以下の様な文言を見かける事があるかと思います。

Webサイトが完成したら、インターネットで見られる状態にして下さい

サーバーへアップロードしてください

本番環境に反映させてください

これらは全て「制作したWebサイトをインターネットで公開してね!」という意味です。一般的には「サーバーへアップする」と言います。

Webサイト制作案件は、サイトを作り終わったら「ハイ!お終い!」では無く、サーバーへアップするところまでお願いされる案件が殆どです。

つまりWebデザイナーには、データをサーバーへアップロードするスキルが必須という事です。

でもご安心を!本記事で記載する内容さえ把握していれば、実際の案件でも対応できます。
少々ボリュームのある記事になりますが、腰を据えて取り組んでいきましょう。

「アップロード」「サーバー」って何?

あなたが自分のパソコンの中でhtmlファイルやcssファイルを編集して作成したWebサイト。これらのデータは当然ながら、あなたのパソコンの中にあるだけでは誰も見る事が出来ません。

作成したWebサイトをインターネット上で公開するために、サーバーへhtmlファイルやcssファイルをアップロードする必要があります。

サーバーはXserverSAKURA internetといったレンタルサーバーサービスから月額で借ります。レンタルサーバーだと負荷に耐えられない程アクセスが多いような一部サイトを除けば、個人法人問わずレンタルサーバーを使用するのが一般的です。

サーバーへのアップロードは「FTPソフト」という物を利用して行います。

詳しくは以下からご説明していきます。

アップロード作業の流れ

アップロード作業の具体的な流れは以下になります。

  1. クライアントからサーバーの接続情報を聞く
  2. FTPソフトを使用してサーバーへ接続する
  3. 制作したWebサイトのデータをサーバーへアップロードする

ご覧の通り、やり方さえ覚えてしまえばサクっと終わる作業です。

まずは2の工程で使用する「FTPソフト」の準備から始めましょう!

FTPソフトのインストール

私達のパソコン内にあるデータをサーバーへアップロードするために、FTP(File Transfer Protocol)という仕組みを利用します。

FTP=ファイルを転送するための仕組み

FTPソフトをインストールすることで、簡単にFTPを利用する事が出来ます。
インターネットで「FTPソフト」と検索すればポピュラーなソフトがすぐに見つけられると思いますが、当記事では私も使用している「FFFTP」というフリーソフトをご紹介します。

FFFTPについて

FFFTPは20年以上の歴史を持つ、定番のFTPソフトです。

作者様による開発は2011年8月で終了したものの、その後も有志の方々により開発が継続されており、現在でも2~3ヶ月ペースでアップデートが行われています。

若干UIが古めかしいですが、その分シンプルで使いやすく、入門編におすすめのソフトです。
それでは準備を始めましょう!

1.FFFTPのインストール&セキュリティ設定

まずはソフトのインストール。
最新版のFFFTPは、現在開発を行っているKURATA sayuri氏の Githubからダウンロードする事が出来ます。

FFFTPダウンロードURL

上記URLからダウンロードページへアクセスし、少し下の方へスクロールすると、ダウンロード用のリンクが有ります。

「ffftp-v〇.〇-x64.zip」または 「ffftp-v〇.〇-x86.zip」と書いているリンクをクリックするとダウンロードが開始します。

2019年11月30日時点ではver4.4が最新版

次に先ほどダウンロードしたファイルを解凍し、「ffftp.exe」というファイルをクリックするとインストールが始まります。

FFFTPのアイコンが付いているファイルをクリック

サクっとインストールが完了し、以下のようなFFFTPの画面が立ち上がります。

この状態で既に使用可能ですが、セキュリティの強化を図るため、「マスターパスワード」という物を設定しておきます。

まず、FFFTP起動時に出現した「ホスト一覧」と書かれた小窓を閉じます。

次に画面左上にある【接続】メニューをクリック。

【設定】⇒【マスターパスワードの変更】と進んでいきます。

すると「新しいマスターパスワードを2回入れてください」と書かれた小窓が出現するので、真ん中にある入力欄へ任意のパスワードを入力してください。(ここで設定したパスワードは、次回以降FFFTP起動時に毎回入力を求められる様になります)

マスターパスワードの設定が終了したら、一度FFFTPを閉じて再起動しましょう。

「設定しているマスターパスワードを入力してください」という小窓が出現すれば設定は完了です。
先ほど設定したパスワードを入力すればFFFTPが起動します。

万が一、ウィルス感染などでクライアントのサーバーのデータが壊れてしまうと、取り返しのつかないことになります。
少々手間に感じるかもしれませんが、マスターパスワードの設定は必ず行うようにしましょう。

クライアントからサーバーの接続情報を聞く

FTPソフトの準備が終わったところで、Web制作案件におけるアップロード作業の流れに戻りましょう。

「制作したWebサイトをサーバーへアップロードして欲しい」と依頼されるクライアントは、基本的に既にレンタルサーバーなどからサーバーを用意しています。

サーバーへファイルをアップロードするためには、FTPソフトでサーバーへ接続する必要があります。
クライアントが用意しているサーバーにログインするための情報を教えて貰いましょう。

具体的には以下の3つの情報が必要になります。

  • ホスト名
  • ユーザー名
  • パスワード

案件受注が確定した後、クライアントとデザインデータや案件の進め方についてのやり取りを行うと思いますので、そのタイミングでこちらから聞かずともサーバー情報を教えてくれると思います。

もしクライアントの方から情報が頂けなかった場合は「サーバーへ接続するための情報を教えて頂けますでしょうか。」とこちらからお願いしてみましょう!

FTPソフトを使用してサーバーへ接続する

サーバー情報を教えて貰ったら、FTPソフトで正常に接続できるか確認しましょう。
先ほどインストールしたFFFTPを使って、サーバーへの接続方法を説明していきます。

FFFTPを起動したら【新規ホスト】をクリック。

「ホストの設定」ウィンドウが開くので、クライアントから教えて貰ったホスト名、ユーザー名、パスワードをそれぞれ入力してください。

ホストの設定名は自由に入力できます。あなたの管理しやすい名称を付けると良いでしょう。
※未入力の場合はホスト名が自動で割り当てられます。

ここまで入力したら、最後に暗号化の設定です。
上の方にある【暗号化】ボタンをクリックして設定画面を出しましょう。

「FTPS(Explicit)で接続」のみチェックをして、下の【OK】ボタンをクリックすると「ホストの設定」の小窓が閉じます。これで一旦、ホスト作成の作業は完了です。

「ホスト一覧」に先ほど作成したホストが表示されるので、こちらを選択した状態で【接続】をクリック。

下部に「ファイル一覧の取得は正常終了しました。」というテキストが表示されればサーバーへの接続に成功です。

接続が上手くいかない場合、設定内容・タイピングミスなどを入念に確認してください。
それでも上手くいかない場合は、クライアントから教えて貰った接続情報が誤っている可能性もあるので、事情を説明し確認して貰いましょう。

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

サーバーへの接続が成功したらいよいよデータのアップロードです。

FFFTPの画面の見方から順に見ていきましょう。
以下の画像はFFFTPでサーバーへ接続直後の画面です。

ウィンドウが左右に分かれていますが、左側はあなたのパソコンの中のファイル、右側はサーバー上にあるファイルが表示されています。

アップロードの仕方

アップロードしたいファイルをドラッグ&ドロップで右側のウィンドウ内に持っていきます。
※FFFTPで左のウィンドウに表示されているファイル以外もOKです。

ファイルを 間違ってアップロードした場合は、ファイル名の上で右クリック⇒【削除】も出来ます。

クライアントから「testフォルダを作り、その中にファイルを格納してください」と言われた場合は、右クリック⇒【フォルダ作成】からtestフォルダを作成し、その中にファイルを格納します。

アップロード作業の注意点

サーバー上のファイルは削除や上書きすると元に戻せません。

既存のサイトを編集して納品する場合などには、念のため上書きする前のファイルのバックアップを取るようにしましょう。

アップロードする時は問題が無いと思って上書きをしても、後々重大な不具合が見つかり、更に修正が困難!という最悪のパターンになる可能性はゼロではありません。

サーバーにはクライアントの大切なデータが入っている事もあります。
非常に慎重な作業になるので、可能であれば自分でサーバー・ドメインをレンタルし、事前にポートフォリオをアップロードする等して練習する事を強くオススメします。

詳しくは実績が無い人はどんなポートフォリオサイトを作れば良い?【Webデザイン】の記事で解説しています。

まとめ

  • 「アップロード」は、制作したWebサイトをインターネット上で公開するために行う
  • アップロードを任される場合は、クライアントが既にサーバーを用意している場合が多い(サーバー借りから一括でお願いするクライアントもいるが、少数派)
  • サーバーへ接続するための情報はホスト名、ユーザー名、パスワードの3つ
  • データのアップロードはFTPソフトを使用する
  • サーバー上のファイルは削除、上書きを行うと元に戻せない。取扱いに注意!
【未経験からの副業Webデザイナー】コーディングが完了した後の流れ
初めてクラウドソーシングサイト等でWeb制作案件を受注した時って、すごく緊張しますよね?しかもWebデザイナーとしてのお仕事自体が...
Adobeソフトを購入しなければWeb制作案件が受注できない理由
Web制作の案件を受注するためにはAdobeの画像編集ソフトが必須です。その理由について、私の実体験を交えてご説明していきます。自...