ついに完成!ファイルをアップロードしてWebサイトを公開!

ついに連載「実践で学ぶWebサイト制作ガイド」最終記事となりました!これまでの章で制作したWebページも、自分のパソコンの中に保存しておくだけでは誰もあなたのWebサイトを見ることができません。ファイルをWeb上にアップロードして、多くの人に見てもらえるようにしましょう!

↑私が10年以上利用している会計ソフト!

実践で学ぶWebサイト制作ガイド:その8

  • 目標:Webサイトを世界中の人に公開する
  • 必要なもの:サーバー、ドメイン
  • 対象レベル:超初心者OK!

目次

  1. 誰のため?何のため?Webサイトを作り始める前に。
  2. Webサイトの構成図を簡単に作れる便利ツール
  3. Webサイト設計図 – ワイヤーフレームの作り方
  4. PhotoshopでWebサイトのデザインをしよう
  5. Photoshopでスライスし、パーツ画像を作成するコツと方法
  6. 文書構造を意識しながらHTMLマークアップしよう!
  7. CSSでWebサイトのレイアウト組み+装飾の基本プロセス
  8. ついに完成!ファイルをアップロードしてWebサイトを公開! ←今ここ

Webサーバーを用意する

共用、専用、VPSサーバーの違い
サーバーの種類は大きく分けて3つの種類があります。

  • 共有サーバー
  • 専用サーバー
  • 仮装専用サーバー(VPS)

違いについては「共用、専用、VPSサーバーの違い」でまとめられていたので、一度目を通しておいてください。

今回は共有レンタルサーバーを利用したページの公開方法を紹介します。有料と無料のものがあり、企業のWebサイトを作る場合は、サーバー会社の広告が表示されず、独自ドメインが使える有料サーバーの方が圧倒的に信頼度が高くなります。個人の趣味サイト以外では有料のレンタルサーバーを使うことをお勧めします。

サーバーの契約をする

日本では以下のレンタルサーバーが人気ですかね(おすすめがあれば教えてください!)。

実際にすべて使って試したわけではないので、「ここがオススメ!」とは言えないです。どのレンタルサーバーもお試し期間が用意されているので、実際に試してみて契約しましょう。

ドメインを取得する

ドメインを取得する
ドメイン名は世界にひとつだけ。他に誰も取得していないものであれば、あなたのオリジナルドメインを取得することができます。つまりドメイン名の取得は早い者勝ち!欲しいと思ったドメイン名は早めにとっておきましょう。多くのレンタルサーバー会社では申込時にドメインも同時に取得できる場合が多いので、利用してみるといいでしょう。

すでに誰かが好みのドメインを取得していたら、拡張子やスペルを変えるなどして工夫しましょう。詳しくは過去記事「Webサービスの名前をつける時のアイデアいろいろ」でも紹介しているので、参考にしてみてください。

ファイルをアップロード

作成したファイルをWebサーバーにアップロードしましょう。ファイルをアップロードするには、「FTP」や「SFTP」という機能を使います。「FTP」とは「 File Transfer Protocol」の略で、ファイルをアップロードする際に必要なものとして長く使われていました。しかし最近ではSSHによって暗号化して安全にファイルの転送をする「SFTP(SSH File Transfer Protocol)」が推奨されています。

「Dreamweaver」や「Coda」などのWeb サイト制作ツールにはファイル転送が搭載されています。そういったツールを使用していない場合は、別に「FTPクライアント」と呼ばれるソフトが必要です。多くの場合レンタルサーバーの管理画面から、Web上でファイルをアップロードすることもできます。しかし、ファイルの数が多い場合などは、クライアントがあったほうがスムーズにアップロードできると思います。

裏ワザ(?)としては、Dropboxの共有機能を使って公開する方法もあります。過去記事「超初心者さんへ!TextEdit(メモ帳)とDropboxでWebページを作ろう」で簡単に紹介しています。サーバーやドメインを取得する前にテストしたい場合はこちらでOK。

FTPクライアントでアップロードするには、

  • SFTP(FTP)サーバーアドレス
  • ポート番号
  • ユーザー名
  • パスワード

が必要になります。これらはレンタルサーバーを契約した時に、サーバー会社が用意してくれていると思うので、確認しておきましょう。

Filezillaでアップロード

FileZilla
ここでは私もよく使っている「FileZilla」というFTPクライアントを使ったアップロード方法を紹介します。FileZillaのサイトから「Download Filezilla Client All Platforms」をクリックしてFilezillaをダウンロード・インストールします。サイトは英語ですが、インストールするとOSが日本語の場合、自動的に日本語で表示されます。

起動してみると画面が半分に分割されているのがわかります。左側がローカルファイル、右側がWebサーバーです。

メニューの ファイル > サイトマネージャー を選択すると、サイトの管理をするウィンドウが表示されます。 「新しいサイト」をクリックして新規サイトを登録します。サイト名は自分の分かりやすい名前でOK。 続いてレンタルサーバー会社から送られてきた情報をもとに右側のホスト(SFTPサーバーアドレス)・ポート・ユーザー名・パスワードを入力して「接続」をクリック。

接続完了すると、右側にもファイルやフォルダが表示されます。レンタルサーバー会社の指示がない場合は「www」と書かれたフォルダ内にファイルをアップロードすることになるので、フォルダを選択しておきます。左側のローカルファイルから自分がアップロードしたいファイルを選択し、右側にドラッグ&ドロップ。もしくはファイルを右クリックして「アップロード」を選択します。

アップロード完了!ブラウザに自分の取得したドメイン(URL)を入力して、自分の作ったWebサイトが正しく表示されるか確認してみましょう!もし不具合が見つかったら、ローカルファイルを修正→アップロードして更新していきます。

これでひとまず「実践で学ぶWebサイト制作ガイド」全項目終了です。Webサイトひとつ作るのに、これだけの知識は最低限必要です。細かく書きだしたらキリがなくなってしまうので、だいぶ省いていますが…長いですねw 制作していくうえで疑問点などあれば、まずはその都度Google先生に聞いてみてください。自分で調べて自分で解決することが大切です ;) 今回の連載記事を通して、Webサイトを作る楽しさが伝われば光栄です!

» 実践で学ぶWebサイト制作ガイド まとめ

Web制作の手順や方法をさらに詳しく説明している拙著 Webクリエイターズガイドブックも参考にして頂ければ幸いです!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)