HPをインターネット上に
アップロードするには何が必要か

01

HP公開に必要な7つのもの

今回、私がHPをアップロードして公開するために使ったものは、主に次の7つです。

最初は聞き慣れない言葉が多く、何が何の役割なのか分かりにくく感じました。

そこで、家にたとえて考えると少し分かりやすくなりました。

このページでは、HPをインターネット上に公開するために必要なものと、それぞれの役割を初心者向けに順番にまとめます。

02

HPのデータとは

まず必要なのは、実際に表示するHPのデータです。

今回のHPでは、主に次のようなファイルを使っています。

• index.html
• style.css
• script.js
• 画像ファイル
• その他の記事ページ

それぞれの役割は次の通りです。

https://hukugyo.net/

画像ファイル

画像ファイルは、トップ画像、図解、説明画像などです。

画像は、HTMLの中に書いた src と、実際の保存場所が合っていないと表示されません。

たとえば、HTMLに次のように書いた場合、

<img src="assets/images/top/main.png" alt="トップ画像">

実際に、

assets/images/top/main.png

という場所に画像がないと、ページ上では表示されません。

画像でつまずく原因の多くは、

• ファイル名が違う
• 保存場所が違う
• 拡張子が違う
• 日本語名や空白入りのファイル名を使っている
• HTMLの src と実際の画像の場所が一致していない

という部分です。

articles/index.html
articles/hp-site-planning-guide.html
pages/profile.html
pages/chatgpt-plus.html
pages/obs.html

03

サーバーとは

サーバーは、HPのデータを置いておく場所です。

自分のパソコンの中にHPファイルがあるだけでは、基本的にほかの人は見ることができません。

インターネット上に公開するには、サーバーにHPファイルを置く必要があります。

今回、このサイトの説明では、スタードメインで取得したドメインと、スターサーバーの管理画面をもとにしています。

初心者が最初に独自ドメインでHPを公開する場合は、ドメイン取得と無料サーバーを同じ流れで確認しやすいスタードメインから始めると、管理が分かりやすくなります。

サーバーは、家でたとえると「土地」のようなものです。

HPのデータという家を建てるためには、置き場所が必要です。

その置き場所がサーバーです。

サーバーの役割は、主に次の通りです。

• HPのファイルを保管する
• インターネットからアクセスできるようにする
• HTML、CSS、画像を読み込めるようにする
• ドメインとつなげて、URLから見られるようにする

04

ドメインとは

ドメインは、HPの住所です。

今回の私のサイトでは、

hukugyo.net

がドメインです。

実際のURLでは、

https://hukugyo.net/

のように表示されます。

サーバーだけでもHPを置く場所はありますが、読者にとって分かりやすい住所が必要です。

その住所の役割をするのがドメインです。

家にたとえると、

サーバー ＝ 土地
ドメイン ＝ 住所

です。

土地があっても住所が分からなければ、人はそこへ行きにくいです。

同じように、サーバーにHPデータを置くだけでなく、ドメインを設定することで、読者が分かりやすいURLからアクセスできるようになります。

比較

初心者向けサーバー・ドメインの選び方

ドメインやサーバーは種類が多いため、最初は「どれを選べばいいのか」で迷いやすいです。ここでは、初心者が見比べやすいように、現在確認できる価格と使いやすさを中心に整理します。

価格は2026年7月9日時点で公式ページを確認した税込価格です。キャンペーン、契約期間、ドメインの種類によって変わる場合があります。

最新の料金や条件は、スタードメイン価格一覧、スタードメインの無料サーバー公式ページ、スターレンタルサーバー公式ページ、エックスサーバー公式ページで確認してください。

05

DNS設定とは

hukugyo.net にアクセスした人を、このサーバーへ案内してください

ドメインだけでは表示されない
サーバーだけでも住所として分かりにくい
DNS設定でドメインとサーバーをつなぐ

06

SSL設定とは

SSL設定は、サイトを https:// で安全に表示するための設定です。

SSLが設定されていないと、

http://hukugyo.net

のように表示される場合があります。

SSLを設定すると、

https://hukugyo.net

のように表示できます。

https の s は、安全な通信を表すものです。

家でたとえると、SSLは「安全な玄関鍵」のようなものです。

SSL設定の役割は、主に次の通りです。

• サイトと読者の通信を安全にする
• ブラウザに安全なサイトとして扱ってもらいやすくする
• 読者に不安を与えにくくする
• https:// でアクセスできるようにする

今回の設定では、スターサーバー側で無料独自SSLを利用し、HTTPS転送も設定しました。

HTTPS転送を設定すると、http:// でアクセスされた場合でも、https:// へ転送されるようになります。

07

アップロード方法とは

アップロードとは、自分のパソコンにあるHPデータを、サーバーへ送る作業です。

家でたとえると、作った家具や荷物を土地へ運び込む作業です。

HPの場合は、次のようなファイルをサーバーへアップロードします。

index.html
style.css
script.js
assets フォルダ
images フォルダ
articles フォルダ
pages フォルダ

アップロード方法には、主に次のようなものがあります。

• サーバーのファイルマネージャーを使う
• FTPソフトを使う
• Gitなどを使う

初心者の場合は、まず ファイルマネージャー が分かりやすいです。

スターサーバーでは、ファイルマネージャーを使って、ブラウザ上からファイルをアップロードできます。

FTPソフトを別で用意しなくても、管理画面からファイル操作ができます。

08

スターサーバーでアップロードする基本の流れ

ここからは、スタードメインやスターサーバーの画面を使う場合の基本的な流れです。

画面の名前やボタンの位置は、時期や契約内容によって変わることがあります。

そのため、完全に同じ表示でなくても、考え方として読んでください。

hukugyo.net

public_html

public_html/
├── index.html
├── style.css
├── script.js
├── assets/
│   └── images/
├── articles/
│   ├── index.html
│   └── hp-site-planning-guide.html
└── pages/
├── profile.html
├── chatgpt-plus.html
└── obs.html

<link rel="stylesheet" href="style.css">

<img src="../assets/images/example.png" alt="説明画像">

index.html
index.htm
index.php
Index.html

index.html

09

ドメイン設定の流れ

サーバーにファイルを置くだけでなく、ドメインもサーバーに設定する必要があります。

スターサーバーでは、サーバー管理画面からドメイン設定を行います。

基本の流れは次の通りです。

サーバー管理画面へログイン
↓
ドメイン設定を開く
↓
ドメインを追加
↓
hukugyo.net を入力
↓
無料独自SSLを利用する
↓
HTTPS転送を有効にする
↓
設定を保存する

今回のように、独自ドメインを使う場合は、サーバー側にそのドメインを登録しておく必要があります。

ドメイン設定をしていないと、サーバーにファイルがあっても、そのドメインでは表示できません。

10

DNS設定の流れ

ドメインを取得する
↓
そのドメインをどのサーバーで使うか決める
↓
ネームサーバーやDNSレコードを設定する
↓
反映されるまで待つ

設定したのに、すぐ表示されない

11

Google Search Console用のTXTレコード

このドメインは自分が管理しているものです

google-site-verification=xxxxxxxxxxxxxxxx

12

SSL設定とHTTPS転送

ドメイン設定ができたら、SSL設定も確認します。

SSLを設定すると、サイトを https:// で表示できます。

さらにHTTPS転送を有効にすると、http:// でアクセスされた場合でも、https:// へ自動で転送されます。

流れとしては、次のようになります。

無料独自SSLを有効にする
↓
SSLが反映されるまで待つ
↓
HTTPS転送を有効にする
↓
https://hukugyo.net/ で表示確認する

SSL設定も、反映まで少し時間がかかることがあります。

設定直後に表示がおかしい場合は、少し時間を置いてから確認します。

13

アップロード後の表示確認

アップロードが終わったら、必ず実際のURLを開いて確認します。

今回なら、

https://hukugyo.net/

を開いて確認します。

確認することは次の通りです。

• □ トップページが表示されるか
• □ デザインが反映されているか
• □ 画像が表示されているか
• □ 記事一覧ページが開けるか
• □ 各記事ページが開けるか
• □ ボタンやリンクが正しく動くか
• □ スマホで横にはみ出していないか
• □ https:// で表示されているか
• □ 古い表示のままになっていないか

表示確認は、PCだけでなくスマホでも行うのがおすすめです。

PCではきれいに見えても、スマホでは画像が大きすぎたり、横にはみ出したりすることがあります。

14

よくある失敗と確認ポイント

実際にHPをアップロードすると、初心者がつまずきやすいポイントがあります。

public_html の中に index.html がない

違う場所にアップロードしている

img {
max-width: 100%;
height: auto;
}

15

公開までの全体の順番

HPをインターネット上に公開する流れを、初心者向けにまとめると次のようになります。

1. HPファイルを準備する
2. サーバーを用意する
3. ドメインを用意する
4. サーバーにドメインを追加する
5. DNS設定でドメインとサーバーをつなぐ
6. 無料独自SSLを設定する
7. HTTPS転送を設定する
8. ファイルマネージャーを開く
9. 対象ドメインの public_html を開く
10. index.html、style.css、script.js、画像、記事ページをアップロードする
11. https:// で表示確認する
12. PC表示を確認する
13. スマホ表示を確認する
14. 画像とリンクを確認する
15. 必要に応じてGoogle Search ConsoleやGoogleアナリティクスを設定する

16

今回使ったもののまとめ

今回、私がHPを公開するために使ったものをまとめると、次の通りです。

SUMMARY

まとめ

HPをインターネット上にアップロードするには、HPファイルを作るだけでは足りません。

必要なのは、次の流れです。

HPを作る
↓
サーバーを用意する
↓
ドメインを用意する
↓
DNSでつなぐ
↓
SSLで安全にする
↓
public_html にアップロードする
↓
表示確認する

最初は、サーバー、ドメイン、DNS、SSLなどの言葉が難しく感じます。

でも、家にたとえると少し分かりやすくなります。

HPのデータは家の中身。

サーバーは土地。

ドメインは住所。

DNSは住所と土地をつなぐ案内板。

SSLは安全な玄関鍵。

アップロードは家具を運び込む作業。

表示確認は、実際に家に入れるか確認する作業です。

この流れを一度体験すると、HP公開の仕組みが少しずつ見えてきます。

完璧に理解してから始める必要はありません。

まずは、

作る
置く
つなぐ
確認する

この4つの流れを意識すると、初心者でもHP公開の全体像がつかみやすくなります。