BLOG

【簡単】ホームページアップロード方法・無料ソフト『FileZilla』の使い方

kanri
本記事はこんな方にオススメです
  • ホームページのアップロード/ダウンロード方法が知りたい方
  • おすすめの無料FTPソフトが知りたい方
  • 『FileZilla』の使い方について知りたい方
  • 『ホームページがアップロードできない』とお悩みの方
  • 『ホームページをアップロードしたけれど、反映されない』とお悩みの方
  • 『ホームページをアップロードしたけれど、画像が表示されない』とお悩みの方

ホームページを作成したけれど、アップロード方法がわからない…

とお悩みの方は多いようです。

今回は、

  • ホームページのアップロード方法
  • 無料ソフト『FileZilla』の使い方
  • ホームページがアップロードできない・反映されない・画像が表示されない場合の対処法

について解説したいと思います。

《注意事項》

※ホームページ公開前に、サーバーとドメインを取得する必要があります。

  • サーバー:インターネット上の『土地』のこと
  • ドメイン:インターネット上の『住所』URLのこと

ホームページのファイルをサーバー上にアップロードすることで、公開することができます。

今回の記事は、サーバー上にアップロードする方法のみとなりますので、予めご了承ください。

ホームページのアップロード方法

ホームページのアップの仕方は簡単ですが、冒頭の注意事項にも記載したように、事前にサーバー(インターネット上の土地)とドメイン(インターネット上の住所・URL)を取得しておく必要があります。

ホームページ作成のざっくりとした流れ3STEP
  1. ホームページを作成する
  2. サーバー(土地)ドメイン(住所・URL)を取得する
  3. FTPソフトを使ってアップロードする(公開)

サーバーは『さくらインターネット』、ドメインは『お名前.com』で取得するのがおすすめですが、サーバーとドメインについてはまた別の記事で解説したいと思います。

ホームページをサーバー上にアップロードするためには、FTPソフトが必要です。

有名なFTPソフトだと『FFFTP』がありますが、私のおすすめは『FileZilla』というソフトです。(どちらも無料ソフトです。)

ホームページ作成ソフトやテキストエディタによっては、FTPソフトとしての機能も備わっている場合があります。
(例:Adobe Dreamweaverから直接アップロード可能)

えりー
えりー

ちなみに、Dreamweaverでは『PUT』というボタンからアップロードできます。「置く」という意味の英単語ですが、日本人には『UP』のほうが馴染み深いですよね。

無料ホームページアップロードソフト『FileZilla』の使い方

今回は、おすすめの無料ホームページアップロードソフト『FileZilla』の使い方について解説したいと思います。

1.FileZillaをダウンロードし、インストール

下記ページからFileZillaをダウンロードできます。

FileZillaのダウンロードページ

ダウンロード後、画面の指示に従ってインストールしてください。

2.[ファイル]-[サイトマネージャー]をクリック

3.[新しいサイト]をクリック

4.サイト名を入力

5.[ホスト][ユーザー][パスワード]を入力し、[接続]をクリック

[ホスト][ユーザー][パスワード]は、サーバー契約時のメールに記載されていることが多いですが、サーバーによって確認方法が異なるため、わからない場合はご利用中のサーバー会社にお問い合わせください。

えりー
えりー

お問い合わせの際は「FTPソフトに接続するためのホスト・ユーザー・パスワードを教えてください」と言えばわかってもらえると思います。

接続出来ない場合、入力した情報が間違っているか、サーバー側でFTP接続制限がかかっている可能性などが考えられます。
入力した情報が間違っていない場合は、サーバー会社にご確認ください。

6.画面を確認

FileZillaの画面を確認していきましょう。

画面左右の違い

まず、左右の違いは下記のとおりです。

左側:自分のパソコン上のファイル
右側:サーバー上のファイル

画面上下の違い

画面上:フォルダの階層が表示される。ここで、該当のフォルダを探します。
画面下:画面上で選択しているフォルダの中身が表示されます。

7.左側でホームページのフォルダ、右側でアップロード先のフォルダを開く

左側で自分のパソコン上にあるホームページのフォルダを開き、右側でアップロード先のフォルダを開いてください。

※アップロード先のフォルダはサーバーによって異なります。

8.左側のホームページのファイルを[ダブルクリック] or [右側へドラッグ&ドロップ]でアップロード

すべてのファイルを一度にアップロードしたい時は、左側で全選択(Windows:Ctrl+A、Mac:command+A)し、右側へドラッグ&ドロップします。

《画面外からのアップロードも可能》

デスクトップ上などのファイルをドラッグ&ドロップでアップロードすることもできます。

これでアップロードは完了です。ブラウザでホームページを開いて確認してみましょう。

《ファイルを上書きしてアップロードしたい場合》

すでに存在するファイルを上書きしてアップロードしたい場合は、下図のようにチェックして[OK]をクリックしてください。

《ダウンロード方法》

ダウンロードする場合は、アップロードと逆の操作をするだけです。
右から左へファイルをドラッグ&ドロップ、or 右のファイルをダブルクリックします。

※デスクトップなどの画面外へダウンロードすることも可能です。

《ダウンロードする場合のおすすめ設定》

[転送]-[ファイル存在時のデフォルトのアクション]のダウンロードを[ソースファイルが新しければファイルを上書き]にしておくのがおすすめです。

こうすることで、上書きするか尋ねるボックスが表示されなくなるので、早くダウンロードできます。

《接続を切りたい時》
サーバーとの接続を切りたい時は、下図の赤枠で示したボタンをクリックしてください。

ホームページがアップロードできない・反映されない・画像が表示されない場合の対処法

ホームページのアップロード自体ができない場合の対処法

FTPソフトに入力した[ホスト][ユーザー][パスワード]が間違っている可能性があるので、まずは入力ミスがないか確認してみましょう。

入力した情報が間違っていない場合、サーバー側の設定(FTP接続制限など)が原因の可能性があります。

この場合は、契約しているサーバーにお問い合わせしてみてください。

ホームページをアップロードしたが、反映されない・画像が表示されない場合の対処法

キャッシュが原因の場合

アップロードはできたのに、ブラウザでホームページを見ると『反映されない』『画像が表示されない』場合は、キャッシュが原因の可能性があります。

まずは、下記を試してみてください。

キャッシュを削除する方法
  • Windows→[F5]
  • Mac→[⌘cmd]+[R]

特に、画像が表示されない場合や、レイアウトが崩れて見える時は、キャッシュが原因の可能性が高いです。

《※キャッシュとは》

キャッシュとは、閲覧したWebページの情報をブラウザに一時保存しておく仕組みのことです。キャッシュがあることで、再度同じページを閲覧した際に表示速度を上げることができます。

キャッシュについてさらに詳しくは下記記事をあわせてご覧ください。

あわせて読みたい
ホームページが更新されない?原因はキャッシュかも(瞬時にクリアする方法も解説)
ホームページが更新されない?原因はキャッシュかも(瞬時にクリアする方法も解説)

キャッシュ以外が原因の場合

インターネットの接続が悪いなどの様々なことが原因で、単純にアップロードが上手くいかなかっただけの場合もあります。

その場合は、もう一度ファイルをアップロードしてみましょう。

それでもダメな場合は、原因の特定が難しいので、サーバー会社にお問い合わせしてみてください。

FTPソフトでWordPressをインストールする方法

FTPソフトでWordPressをインストールする方法について、下記記事で詳しく解説しています。ぜひあわせてご覧ください。

あわせて読みたい
FTPソフトでWordPressをインストールする方法【3STEP】
FTPソフトでWordPressをインストールする方法【3STEP】

まとめ:FTPソフトでホームページをアップロードしてみよう

ホームページをサーバー上にアップロードするためには、FTPソフトが必要です。

事前に、サーバーとドメインを取得しておく必要があります。

ホームページ作成のざっくりとした流れ3STEP
  1. ホームページを作成する
  2. サーバー(土地)ドメイン(住所・URL)を取得する
  3. FTPソフトを使ってアップロードする(公開)

今回は、おすすめの無料FTPソフト『FileZilla』の使い方について解説しました。

空創デザインオフィスでは、ホームページの作成・リニューアル、自分でホームページを作成したい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです!
error: Content is protected !!
記事URLをコピーしました