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

thumb_ftp

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

実践で学ぶ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クリエイターズガイドブックも参考にして頂ければ幸いです!

シェアする

コメント

  • Nazmul Hoque

    Thank you Mana for your excellent writing. One thing might be added to your writing i.e. in which server environment you are going to host your site. Mostly used server are Apache and IIS. IIS is from Microsoft and Apache from Open source project from Apache. If someone wants to upload his/her site which is based on .Net framework, he/she should choose IIS. And if someone works with Php, then he or she should go for either IIS or Apache.
    Thank you once again.
    Nazmul
    Kumamoto, Japan
    http://nazmulweb.com

  • Pingback: 学習で使っているサイトやツールの紹介 | 福岡のWEB屋さん()

  • reo peru

    HP拝見した者です。
    自分はもともとプロスポーツ選手だったのですが、脊髄損傷と言う大怪我をくらい、片杖で普通に歩けるようになったのですが自宅からデジタルハリウッドまで遠すぎたり排尿等の障害で挫折しました。

    このサイト凄い勉強になります、やってみようと思いました。

    目にも疾患があり専用コンタクトでDPIでフォントを変えないときついのですが、もの凄く見やすくていいサイトですね

ニュースレター

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