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転送を有効にする
↓
設定を保存する

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

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

TROUBLE

今回起きたトラブル：DNSレコードが既に設定されています

ドメイン名、無料独自SSL、HTTPS転送などを確認して「追加する」を押したところ、今回は次のようなエラーが表示されました。

入力されたドメインはDNSレコードが既に設定されています

これは、ドメイン自体が使えないという意味ではありません。

すでにスタードメイン側にDNSレコードが残っているため、スターレンタルサーバー側で新しくドメイン設定を追加できない状態です。

初心者向けに言うと、すでに古い案内板が立っているため、新しい案内板を置けない状態です。

この場合は、スタードメイン側で対象ドメインのDNSレコードを確認し、不要なDNSレコードを削除してから、もう一度スターレンタルサーバー側でドメイン追加を行います。

対処方法：スタードメイン側でDNSレコード設定を開く

このエラーが出た場合は、スターレンタルサーバーの画面ではなく、スタードメイン側の管理画面を確認します。

1. Star8アカウントにログインする
2. スタードメイン管理を開く
3. ドメイン一覧から hukugyo.net を探す
4. 対象ドメインの右側にある三点メニューをクリックする
5. 「DNSレコード設定」を開く

ここで、hukugyo.net に設定されているDNSレコード一覧が表示されます。

DNSレコードを削除した後、もう一度ドメイン追加を行う

DNSレコードを削除したら、もう一度スターレンタルサーバー側へ戻ります。手順は同じです。

1. スターレンタルサーバーのサーバーパネルを開く
2. 左メニューの「ドメイン」を開く
3. 「ドメイン設定」をクリックする
4. 「ドメインを追加」を開く
5. ドメイン名に hukugyo.net を入力する
6. 無料独自SSLは「利用する」にチェックを入れる
7. HTTPS転送は「HTTPSに転送する」にチェックを入れる
8. AIクローラー遮断は、最初はチェックしない
9. メモは空欄のまま
10. 「追加する」をクリックする

これで、先ほどのDNSレコードエラーが解消されていれば、ドメイン追加が完了します。

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公開の全体像がつかみやすくなります。