ホームページの公開方法を仕組みから解説｜サーバー・ドメイン・表示速度の基礎

サイトを作ったら、最後は公開です。でも「公開する」って、具体的に何をすることなのでしょう。
自分のパソコンの中にあるファイルが、どうして世界中から見られるようになるのか。ここが説明できる人は、実は多くありません。

この記事では、ホームページの公開方法を仕組みから解説します。キーワードはサーバーとドメインの2つ。契約手順の細かい話はしません。仕組みが分かれば、どのサービスを選んでも迷わなくなります◎

ホームページが表示される仕組み

まず、公開済みのサイトが表示されるまでの流れを見ます。登場人物は2つだけです。

• サーバー：サイトのファイルを置いておく、24時間動き続けるコンピュータ。土地にあたる
• ドメイン：サーバーの場所を指す名前。住所にあたる（例：webdesign-mame.com）

1. 閲覧者がブラウザにURLを入力する（またはリンクを押す）
2. DNSという仕組みが、ドメインからサーバーの場所（IPアドレス）を調べる
3. ブラウザがそのサーバーへ「ファイルをください」と要求する
4. サーバーがHTML・CSS・画像を返し、ブラウザが組み立てて表示する

つまり公開とは、「サーバーにファイルを置いて、ドメインでたどり着けるようにすること」です。自分のパソコンは電源を切ればそこで終わりですが、サーバーは動き続ける。だから世界中からいつでも見られます。

URLの読み方（ドメインを分解する）

ドメインの理解には、URLを分解して見るのが早道です。たとえばこのコースのURLはこう分かれます。

• https://：通信の方式。sは通信を暗号化している印
• webdesign-mame：ドメイン名。世界に1つで、早い者勝ちで取得する
• .com：トップレベルドメイン（TLD）。.jpや.orgなど種類がある
• /design-basics/：パス。サーバーの中のどのページかを指す

「www.」のように、ドメイン名の前に付く部分はサブドメインといいます。同じドメインの中を用途で分けるときに使います（例：shop.example.com）。

公開までの流れ

仕組みが分かると、公開までにやることは自然に決まります。

1. サーバーを借りる：レンタルサーバーを契約する。月数百円〜1,500円ほどが相場
2. ドメインを取る：好きな名前を登録する。年1,000円台が目安（料金は変わるので契約先で確認を）
3. 2つをつなぐ：ドメインがサーバーを指すように設定する
4. ファイルを置く：HTML・CSS・画像をサーバーへアップロードする。WordPressならサーバーに設置、ノーコードなら公開ボタンがこの工程にあたる
5. 表示を確認する：スマホとパソコンの両方で、実際のURLを開いて確かめる

レンタルサーバーの多くは、ドメイン取得とWordPress設置までまとめて申し込めるようになっています。だから実際の作業は画面の案内に沿って進むだけ。何をやらされているのか分かって進むために、この流れを覚えておいてください。

表示速度はデザインの仕事でもある

公開の仕組みが分かると、もう1つ大事なことが見えてきます。ページの表示速度です。

さっきの流れのとおり、ページはサーバーからファイルを受け取って表示します。ファイルが重いほど受け取りに時間がかかり、表示が遅くなります。そして遅いページは、読まれる前に閉じられます。せっかくのデザインが、見てもらう前に負けるわけです。

ページの重さの大部分は、たいてい画像です。つまり表示速度は、画像を扱うデザイナーの仕事でもあります。デザイン側でできることをまとめます。

• 画像は表示サイズに合わせて書き出す（幅800pxの場所に4000pxの写真を置かない）
• 写真はWebPなど圧縮のきく形式にする
• 装飾画像を減らす。CSSで描けるものは画像にしない
• 使うフォントの種類と太さを絞る（Webフォントも読み込みデータの一部）

画像形式の選び方は画像形式の使い分けで詳しく解説しています。あわせて読むと、このチェックリストの理由が全部つながります💡

ミニ実践：URLを分解して読む

道具は要りません。ブラウザのアドレスバーを見るだけです。10分でできます。

1. よく見るサイトを3つ開いて、URLをメモに書き写す
2. それぞれを「通信方式／サブドメイン／ドメイン名／TLD／パス」に区切ってみる
3. TLDの意味を調べる。.jpは日本、.co.jpは日本の会社、.orgは団体由来など、それぞれ背景があります
4. 3つのサイトでwwwの有無を見比べる。あってもなくても表示される理由を考えてみる

URLが読めるようになると、リンクを踏む前に「どこの何のページか」が分かるようになります。制作の知識であると同時に、ネットを安全に使う知識でもあります。

よくある質問

ホームページを無料で公開する方法はありますか？

あります。ノーコードツールの無料プラン（STUDIO・Wixなど）や、GitHub Pagesのような無料の公開サービスを使う方法です。
ただし無料プランは、独自ドメインが使えない・ツールのロゴが表示されるなどの制限つきです。練習やポートフォリオには十分ですが、お店や会社のサイトには有料プランをおすすめします。

サイトの公開にはいくらかかりますか？

自分でサーバーとドメインを用意する場合、目安はサーバーが月数百円〜1,500円、ドメインが年1,000円台です。合計すると年1万円前後から運営できます。
料金はサービスや年ごとに変わるので、契約前に必ず最新の料金表を確認してください。ドメインは2年目以降に更新料が上がる場合がある点も見ておきましょう。

HTMLで作ったページは、どうやってネットに載せるのですか？

サーバーを借りて、そこへファイルをアップロードします。アップロードには、レンタルサーバーの管理画面にあるファイルマネージャーか、FTPソフト（ファイル転送用のソフト）を使います。
アップロードが終わってドメインの設定が済めば、そのURLで世界中から見られるようになります。

ドメインはどう選べばいいですか？

短く、覚えやすく、サイト名か事業名と一致しているのが基本です。TLDは、迷ったら.comか.jpで問題ありません。
1つ注意があります。ドメインは一度公開して育てると、あとから変えるのが大変です（URLが変わると、検索の評価もリンクも引き継ぎ作業が要ります）。最初に納得のいく名前を選んでください。

次に学ぶこと

今回のポイントをまとめます。

• 公開とはサーバーにファイルを置いて、ドメインでたどり着けるようにすること
• サーバー＝土地、ドメイン＝住所。URLは方式・ドメイン・TLD・パスに分解して読める
• 流れは、サーバーを借りる→ドメインを取る→つなぐ→ファイルを置く→確認
• 表示速度はデザインの仕事。画像の書き出しと形式で大きく変わる

ここまでで、Web制作・コーディング編は最後です。デザインがコードになり、サーバーから世界へ届くまでの全体像がつながりました。
コースを終えたあとの進み方は「コース修了後の次の選択肢」で案内しています。

あわせて読みたい

デザイン基礎コース修了ページ｜次にやること4つの選び方デザイン基礎コース、修了おめでとうございます。ここまで読み切った時点で、もう「なんとなく」で作る人ではありません。 ただ…

他の編のレッスンや全体の並びは、デザイン基礎コースの目次から確認できます。