サイトを公開しよう ―
レンタルサーバーへのアップロード

前回のおさらい

前回で、café SOELのWebサイトは"公開できる品質"に到達しました。W3Cバリデーターもクリア、Lighthouseのスコアも良好。あとは、この完成したファイル一式を「インターネット上のみんなが見られる場所」に置くだけです。

今回はコードを新しく書く作業はほとんどありません。そのかわり、Webサイトが公開される仕組みを理解し、実際にサーバーへアップロードする体験をします。初めてだと少し緊張するかもしれませんが、やることはとてもシンプルです。一緒に進めましょう。

今回のゴール

Webサイトが公開される仕組み — 3つの登場人物

これまで私たちは、自分のパソコンの中でサイトを作ってきました。ブラウザで index.html を開けば表示はされますが、それは自分だけの世界。他の誰もそのページにはアクセスできません。

Webサイトを「公開する」とは、インターネット上に24時間動いているコンピューター（サーバー）にファイルを置くことです。そして、そのサーバーに「住所」を付けて、誰でもたどり着けるようにする。この仕組みに登場するのが、3つの要素です。

サーバー — ファイルを置く場所

サーバーは、Webサイトのファイル（HTMLやCSS、画像など）を保管して、アクセスがあったときにそれを返してくれるコンピューターです。24時間365日電源が入っていて、世界中からのリクエストに応答し続けています。

自前でサーバーを用意するのは大変なので、「レンタルサーバー」という月額制のサービスを利用するのが一般的です。プロの現場でも個人サイトでも、ほとんどの場合はレンタルサーバーを使います。

ドメイン — サイトの住所

ドメインは、cafe-soel.com のような「人間が読める住所」のこと。本来サーバーの場所は 203.0.113.50 のような数字の羅列（IPアドレス）で指定するのですが、そんな番号を覚えてもらうのは現実的じゃないですよね。そこで「わかりやすい名前」を付けてあげるのがドメインの役割です。

ドメインはドメイン登録サービスで取得します。年間数百円〜数千円程度が一般的で、レンタルサーバーの契約と同時に取得できることも多いです。

DNS — ドメインとサーバーをつなぐ電話帳

DNS（Domain Name System）は、「このドメインにアクセスしたら、このサーバーに案内してね」という紐付けを管理する仕組みです。電話帳のように、名前（ドメイン）から番号（IPアドレス）を引いてくれます。

ブラウザに cafe-soel.com と入力すると、まずDNSに問い合わせが行き、「そのドメインはサーバー 203.0.113.50 だよ」という答えが返ってきて、そこに置いてある index.html が表示される。この流れが、毎回一瞬で起きているんです。

レンタルサーバーを選ぼう

レンタルサーバーはたくさんの会社がサービスを提供していますが、初心者の方が最初のサイトを公開するなら、以下の4つが定番です。どれを選んでも、café SOELのような静的なHTMLサイトは問題なく公開できます。

どのサービスもSSL（HTTPS）の無料設定に対応しています。料金やプラン内容は変わることがあるので、契約前に各サービスの最新情報を確認してくださいね。

サーバーの契約とドメインの取得が完了したら（具体的な手順は各サービスのガイドに従ってください）、次はいよいよファイルのアップロードです。

アップロードの準備 — 手元のファイルを確認する

サーバーにアップロードする前に、手元のファイルがすべて揃っているか確認しましょう。第9回までの作業が完了していれば、フォルダの中身はこうなっているはずです。

my-website/
├── index.html
├── css/
│   └── style.css
└── img/
    ├── hero.webp
    ├── concept.webp
    ├── menu-coffee.webp
    ├── menu-latte.webp
    ├── menu-cake.webp
    ├── menu-sandwich.webp
    ├── interior-01.webp
    ├── interior-02.webp
    ├── exterior.webp
    ├── logo.png
    ├── ogp.jpg
    └── favicon.svg
    

画像は第9回でWebPに変換した .webp ファイルを使います。ロゴ（.png）、OGP画像（.jpg）、ファビコン（.svg）はそのまま。もし変換前の .jpg ファイルも img/ フォルダに残っている場合は、アップロードしてもしなくても問題ありませんが、不要なファイルは省いた方がすっきりします。

FTPとは — サーバーにファイルを届ける方法

FTP（File Transfer Protocol）は、自分のパソコンからサーバーにファイルを転送するための通信手段です。プロトコル（Protocol）という名前のとおり「こういうやり方でファイルをやりとりしましょう」というルール・手順のこと。

イメージとしては、宅配便のようなものです。「差出人」が自分のパソコン、「届け先」がサーバー。FTPクライアントという専用ソフトが、荷物（ファイル）を届けてくれる配達員の役割です。

現在では、FTPをより安全にした FTPS や SFTP という方式が一般的です。データが暗号化されるので、第三者に通信内容を覗かれる心配がありません。レンタルサーバーの管理画面にFTP接続情報が記載されていますが、多くの場合「FTPS対応」と書いてあるはず。安心して使ってください。

FileZillaでファイルをアップロードする

FTPクライアントはいくつかありますが、この講座では FileZilla（ファイルジラ） を使います。無料で、Windows・Mac・Linuxのすべてに対応していて、世界中で広く使われている定番ソフトです。

ホスト名    : ftp.example.com  （サーバーの管理画面に記載）
ユーザー名  : your-username    （サーバー契約時に決めたもの）
パスワード  : your-password    （サーバー契約時に決めたもの）
ポート番号  : 21               （FTPSの場合。SFTPなら 22）

これらの情報はサーバーの管理画面で「FTPアカウント」「FTP設定」「サーバー情報」といった名前のページに載っています。サービスによって呼び方が違いますが、探せば必ず見つかります。

接続に成功すると、画面が左右2つのパネルに分かれた状態になります。

左がローカル（自分のパソコン）、右がリモート（サーバー）。ファイルマネージャーに似た、直感的な画面です。

ファイル数は十数個なので、転送はすぐに終わるはずです。画面下部のステータスバーに「転送完了」と表示されたら成功です。

public_html/          ← 公開ディレクトリ
├── index.html        ← ここに直接置く
├── css/
│   └── style.css
└── img/
    ├── hero.webp
    ├── concept.webp
    └── ...

public_html/
└── my-website/      ← フォルダごと入ってしまっている
    ├── index.html
    ├── css/
    └── img/

SSL（HTTPS）を確認する — 安全な通信の証

ファイルのアップロードが終わったら、ブラウザでURLにアクセスする前に、もうひとつだけ確認してほしいことがあります。SSL（HTTPS）の設定です。

SSL（Secure Sockets Layer）は、ブラウザとサーバーの間の通信を暗号化する仕組みです。SSLが有効になっているサイトは、URLが https:// で始まり、ブラウザのアドレスバーに鍵マークが表示されます。

「カフェのサイトに暗号化って必要？」と思うかもしれません。でも今の時代、SSLは事実上すべてのWebサイトに必須です。Googleは https:// のサイトを検索順位でわずかに優遇していますし、SSLのないサイトには「保護されていない通信」という警告が表示されます。お店のサイトにそんな表示が出たら、訪問者は不安になりますよね。

幸い、先ほど紹介したレンタルサーバーはどれも無料SSLに対応しています。サーバーの管理画面に「SSL設定」「無料SSL」「Let's Encrypt」といった項目があるはずなので、そこからドメインに対してSSLを有効化してください。ボタンひとつで設定できることがほとんどです。

公開！ — ブラウザでアクセスしてみよう

ファイルのアップロードとSSLの設定が終わったら、いよいよ確認の瞬間です。

ブラウザのアドレスバーに、あなたのドメイン（https://your-domain.com）を入力して Enter。

これまでずっと自分のパソコンの中だけで見ていた café SOEL のサイトが、世界中からアクセスできるURLで表示されているはずです。

公開後のチェックリスト

表示された喜びの余韻に浸りつつ、以下の項目を一通り確認しましょう。

もし画像が表示されなかったり、CSSが効いていなかったりする場合は、ほとんどがファイルパスのずれです。サーバー上のフォルダ構成がローカルと同じになっているか、もう一度FileZillaで確認してみてください。

OGPの表示を確認する

第8回で設定したOGPが正しく機能しているか、公開後に確認しておきましょう。SNSでシェアされたときに、画像やタイトルがきちんと表示されるかどうかのチェックです。

もし画像が表示されない場合は、og:image のURLが相対パスのままになっていないか確認してください。公開後は絶対URL（https://your-domain.com/img/ogp.jpg）に変更した方が確実です。

<!-- ↓ 変更前（相対パス） -->
<meta property="og:image" content="img/ogp.jpg">

<!-- ↓ 変更後（絶対URL） -->
<meta property="og:image" content="https://your-domain.com/img/ogp.jpg">

この変更をしたら、ローカルで保存してからFileZillaで index.html だけ再アップロードすればOKです。

公開後の更新とバックアップ

サイトは公開したら終わり、ではありません。テキストの修正や写真の差し替えなど、小さな更新は必ず発生します。更新の流れもここで覚えておきましょう。

更新の基本フロー

バックアップを忘れずに

万が一のときのために、ローカルのファイル一式は必ずバックアップを取っておきましょう。USBメモリやクラウドストレージ（Google Drive、Dropboxなど）にフォルダごとコピーしておけば安心です。

更新を重ねるうちに「2週間前の状態に戻したい」ということが起こるかもしれません。そんなときのために、大きな変更をする前にフォルダを日付付きでコピーしておく習慣をつけるのがおすすめです。

おめでとうございます — ここまでの旅路を振り返って

第1回で「Hello World!」と表示するところから始まったこの講座。ここまでたどり着いたあなたは、もうWebサイトを"ゼロから自分の手で作って公開できる人"です。

10回の講座で、あなたが身につけたことを振り返ってみましょう。

第1回で開発環境を整え、第2回でHTMLの骨格を理解しました。第3回でサイトのコンテンツを組み立て、第4回でCSSの基本を学びました。第5回ではFlexboxでパーツを横に並べ、第6回でCSS Gridとレスポンシブデザインに挑戦。第7回でGoogle Fontsやトランジションを加えて見た目を仕上げ、第8回でSEOと構造化データを設定。第9回でアクセシビリティとパフォーマンスの最終チェックを行い、そして今回、世界に公開しました。

HTMLの骨格、CSSの装飾、レスポンシブ対応、SEO、アクセシビリティ、パフォーマンス最適化、そしてサーバーへの公開。Webサイト制作の一連の流れを、最初から最後まで通して経験できたことに大きな意味があります。

もちろん、この講座はWebサイト制作のほんの入口です。JavaScriptによるインタラクション、CSSアニメーション、デザインのカスタマイズ――まだまだ広がる世界があります。番外編の3回で、その先の一歩を案内しているので、興味のあるところから読んでみてください。

café SOELのサイトをベースに、色を変えたり、セクションを追加したり、自分だけのオリジナルに育てていくのも素敵です。あなたが手を動かした分だけ、サイトは良くなっていきます。

ここまでの全10回、お付き合いいただきありがとうございました。あなたの作ったWebサイトが、誰かの目に届いて、何かを伝えてくれることを願っています。