Webで公開する方法
このページでは、「STEP７のWebで公開」において必要となる、サーバーへのアップロード方法についてご紹介します。
ランディングページをWebで公開するには、ランディングページの情報が入ったファイル一式(以下のような納品されたファイル)をサーバーにアップロードする必要があります。
３つのアップロード方法
ここでは３つのアップロード方法をご紹介します。
- ファイルマネージャーからファイルをアップロードする方法[エックスサーバーの場合]
- ソフト(無料)を使ってアップロードする方法
- サーバー情報をWebで売るデザインの担当者に共有してアップロードしてもらう方法
アップロード方法の選び方
１の方法が簡単ですが、少し手間がかかります。２の方法は、設定に少し手間がかかりますが、一度設定しておくとその後が楽になります。
おすすめは２の方法ですが、難しい場合は１の方法を試してみてください。サーバー内の操作は自己責任で行っていただきますようよろしくお願いいたします。
サーバーへのアップロードを任せていただける場合は、３の方法で(Webで売るデザインの担当者がアップロード)させていただきます。ですが万が一、すでにサーバー内にあるウェブサイトのデータが消えるなどのサーバー内でのトラブルが発生した場合は責任を負いかねますので予めご了承の上、お申し付けください。
方法１．ファイルマネージャーからファイルをアップロードする方法[エックスサーバーの場合]
理想の状態は、以下のように納品ファイル一式をエックスサーバーにアップロードすることです。
アップロードのやり方
まずは、エックスサーバーにログインします。そして、ファイル管理をクリックします。
次に、該当ドメイン(ランディングページを表示させたいドメイン)をクリックします。今回は、こちらのドメインにします。
次に、「public_html」を選択します。
次に、「新規フォルダ」をクリックします。そして、フォルダ名を入力します。
次は、作成したファイルを開きます。今回は「testlp」です。
次に、「アップロード」をクリックします。そして、「index.html」をアップロードします。※「ファイルを選択」からでもアップロードできます。
次に、「新規フォルダ」をクリックします。そして、フォルダ名「css」を作成します。
次に、作成した「css」をクリックして開きます。そして、「アップロード」をクリックします。納品ファイル内のcssを開き、その中身をアップロードします。最後に、上の階層(今回はtestlp)をクリックして戻ります。
次は、同じように「images」フォルダを作成していきます。まず、「新規フォルダ」をクリックします。次に、フォルダ名「images」を作成します。そして、作成したimagesフォルダをクリックして開きます。そして、アップロードをクリックします。
ここまででWebでの公開は完了です。GoogleやYahooなどのブラウザでURLを開いてみてください。今回の場合であれば、「https://webdeurudesign.com/testlp」を開くてとランディングページが表示されます。
うまく表示されない場合
- URLに間違いがないか確認してください。
- エックスサーバーのアップロード先が間違えていないか確認してください。
- 「index.html」「css」「images」の綴りがあっているか確認してください。
- 表示されない画像がある場合は、その画像ファイル名がエックスサーバーにアップロードされているか確認してください。
方法２．ソフトを使ってアップロードする方法
ファイルをサーバーにアップロードするためのFTPソフトと呼ばれるツールがあります。これを使うと、自分で簡単にファイルをサーバーにアップロードできるので便利です。
ソフトの種類※すべて無料
- Windows・Macであれば「FileZilla」
- Macであれば「Cyberduck」
が有名です。
やり方
やり方の流れは、次の通りです。
「FileZilla(Windows・Mac対応)」「Cyberduck(Mac対応)」をダウンロードします。
この２つは有名なソフトなので「〇〇 ダウンロード」とGoogle/Yahoo検索すると様々な記事がでてきます。
ご利用中のサーバーの「FTPホスト名」「FTPユーザー名」「FTPパスワード」を使って、ソフトの初期設定を行います。
詳細は、「FileZillaとエックスサーバーを接続する方法(公式HP)」「Cyberduckとエックスサーバーを接続する方法(公式HP)」をご確認ください。
実際のアップロード方法は簡単です。エックスサーバーとCyberduckを接続した場合を例に、アップロード方法をご紹介します。
［１］まず、STEP2でエックスサーバーとCyberduckを接続したら、当該ドメインの「public_html」のフォルダをクリックして開きます。
(※エックスサーバーの場合、Webで公開したいデータをpublic_htmlにアップロードする決まりになっているからです。他のサーバーの場合は、公式HPをご確認ください。)
［２］次に右クリックで「新規フォルダ」をクリックします。そして、フォルダの名前を決めます。
今回は、例として「uploadtest」というフォルダ名を作成しました。
［３］Cyberduck(FTPソフト)のフォルダを開いたら、ランディングページのファイル一式(index.html、CSS、images)をそのまますべてドラックアンドドロップします。そうすると、アップロードが開始します。
※Cyberduckで、右クリックで「アップロード」というボタンからファイルを選択することも可能です。
アップロードが完了すると、Cyberduck(FTPソフト)の方にも同じファイルが表示されます。
［４］最後にランディングページを確認します。今回の例であれば、GoogleやYahooなどの検索エンジンで「https://webdeurudesign.com/uploadtest」を開きます。
［５］ランディングページをファイルを更新したい場合は、［３］のやり方と同じです。更新済みファイルを、そのままCyberduck(FTPソフト)にドラックアンドドロップすると更新が始まります。
方法３.サーバー情報をWebで売るデザインの担当者に共有してアップロードしてもらう方法
この方法では、ご利用中のサーバーに関して次の３つの情報を担当者にメールやチャットワークで共有してください。
- １. FTPサーバー名(ホスト名)
-
例）sv***.xserver.jp、213.13.214.4 など。
- ２. FTPユーザー名(アカウント名)
-
例）xsample、xsample@email.com など。
- ３. FTPパスワード(サーバーパスワード)
-
サーバー設定完了メールに記載されているFTPパスワード
※上記の例はエックスサーバーの場合
これらの確認方法は、それぞれ以下の通りです。
各種確認方法
ここではエックスサーバーを例に確認方法をご紹介します。他社のサーバーの場合は、公式ホームページをご覧ください。
「FTPサーバー名(ホスト名)」「FTPユーザー名(アカウント名)」は、
- サーバーパネルにログイン
- サブFTPアカウント設定をクリック
- 該当ドメインの選択
- 「FTPソフト設定」のタブ
から確認可能です。
詳細は「FTP情報確認手順(公式ホームページ)」でご確認いただけます。
「FTPパスワード」は、「サーバーパスワード」と共通です。「Xserverアカウントのパスワード」とは異なりますのでご注意ください。
確認方法は、サーバー契約時に届くメール「【Xserver】■重要■サーバーアカウント設定完了のお知らせ (試用期間)」に記載されています。