Webサイトの作り方・ホームページの作り方｜初心者の全体手順

著者: FreeHostBox Web Academy 編集部公開日: 2026-09-01 最終更新: 2026-09-09

要点: Webサイト・ホームページの作り方を全体手順で解説。企画からHTML作成、サーバー公開、独自ドメイン・SSLまでの最短ルートが分かります。

この記事でできること・必要なもの

この記事を読み終えると、企画から1ページ公開、独自ドメイン・SSL化、改善までの全体手順を再現できます。対象は「初めて無料サーバーで公開したい」初心者です。完成形は https://あなたの住所/ で開ける1ページ＋改善の回し方です。

仕組みが不安な場合は、先にHTTPとはとWebサーバーとはで往復と置き場所の概念を押さえると迷いません。中身の文書の書き方はHTMLとは、置く作業の実践はHTMLの公開方法で扱います。

必要なもの

パソコンとブラウザ（Chrome・Firefox・Edge・Safariのいずれか）
テキストエディタ（メモ帳・VS Codeなど。Wordは使わない）
index.html を作るための30〜60分（最初は1ページでよい）
FreeHostBoxアカウント（無料。無料サブドメイン＋独自ドメイン持ち込み、無料SSL、広告なし、FTP・オンラインファイルマネージャーをご用意しています。ぜひ無料プランでお試しください）
独自ドメインは後付け可能（最初は無料サブドメインで練習が安全です。考え方はドメインとはで解説しています）

注意: 管理画面の表示に従って進めてください。

1ページ分の見出し3つを言葉にできる
HTMLかWordPressかの方針を仮決めできる
無料サーバーと無料サブドメインで始める準備がある
公開後にHTTPS化まで行うと理解している

全体手順：5段階の地図

Webサイト公開までの最短手順は次の5段階です。企画 → 作成 → 公開場所の用意 → 公開 → 育てるの順に進めます。最初から10ページ計画や凝ったデザインは不要です。1ページ公開→改善の方が速く学べます。

目的と1ページ目を決める（誰向け・何を伝えるか）
HTMLで1ページ作る（またはWordPressを選ぶ）
無料サーバーを用意する（公開場所の確保）
アップロードして公開・SSL化する（世界へ届ける）
独自ドメイン・改善へ拡張する（育てる）

この地図は、Webサーバーとはで扱った4点（HTML・転送・ドメイン・SSL）に対応しています。1〜3が準備、4が公開、5が拡張です。次章で各段階を7ステップの作業手順に分解します。

段階	やること	成果物	対応記事
企画	目的・読者・行動目標を決める	見出し3つ＋1文紹介	本記事の手順1
作成	HTMLまたはWordPressで作る	`index.html` またはWP初期サイト	HTMLとは／WordPressとは
場所	無料サーバーを用意する	公開フォルダとURL	無料レンタルサーバーとは
公開	転送＋HTTPS化して確認	`https://` で開ける1ページ	HTMLの公開方法／SSL/HTTPS設定手順
育てる	独自ドメイン・改善を回す	更新体制・計測・拡張	独自ドメイン設定／DNSとは

詳細手順：7ステップで1ページを公開する

デュアルモニターでサイトを制作するイメージ — 作り方の選択肢を比べてから手を動かす

番号付き7歩で作業を進めます。各ステップの所要は目安であり、詰まったら対応記事へ寄り道して戻ってきてください。

ステップ1：目的と1ページ目を決める（15分）

誰向けか、読後に何をしてほしいか、最初の1ページの見出し3つだけ決めます。店舗なら「営業時間・場所・メニュー」、ポートフォリオなら「自己紹介・作品3点・連絡先」に絞ります。最初から問い合わせフォームや会員機能は載せません。

ステップ2：HTMLかWordPressかを選ぶ（10分）

特徴を表で比較します。迷ったらHTMLで1ページ公開してからWordPressを触ると、両方の理解が深まります。

観点	HTMLから始める	WordPressから始める
学習・軽量・速さ重視	◎ 置くだけで表示、仕組みが透ける	○ 初期設定とDBが必要
頻繁な更新・複数人・事業サイト	○ 手作業更新になる	◎ 管理画面で更新・権限分担が容易
必要知識	タグの基礎（h1・p・a・img）	サーバー・DBの概念、ログイン管理
公開の重さ	最軽量。まず1ページに最適	機能豊富な分、初期の面倒が多い
次の記事	HTMLとは	WordPressとは

HTML選択時は次章のコード全文をそのまま使えます。WordPress選択時はWordPressの始め方へ進んでください。

ステップ3：無料サーバーを用意する（20分）

無料レンタルサーバーとはで条件を確認し、学習・試作なら無料から始めます。チェック観点は容量・PHP/MySQL対応・独自ドメイン持ち込み・SSL・広告有無です。比較表は徹底比較でもご紹介しています。

私たちはPHP 8.3、MySQL 8 / MariaDB 11.4、無料SSL、広告なし、無料サブドメイン＋独自ドメイン持ち込み、FTP・オンラインファイルマネージャー、Softaculous 400+アプリ自動設置・5GB NVMeストレージ・転送無制限・VistaPanel・Cron・phpMyAdminをご用意しています。ぜひ無料プランでお試しください。申込後に配布されるURL（無料サブドメイン等）と管理画面への入り方を控えてください。無料プランの内容は料金ページをご覧ください。

ステップ4：index.htmlを1ページ作る（30分）

次章のコード全文をテキストエディタに貼り、自分の紹介文に書き換えて index.html として保存します。文字コードはUTF-8、ファイル名は半角小文字にします。画像を使う場合は img/ フォルダを作り、事前に軽量化した photo.jpg などを入れます。巨大なまま置かないことが速度と転送量の要点です。

保存時の注意は3つです。Word等の装飾付き保存を使わない、拡張子を .txt にしない、大文字小文字を混ぜないことです。

ステップ5：アップロードしてブラウザで確認する（15分）

HTMLの場合はHTMLの公開方法の通り、ファイルマネージャーかFTPで公開フォルダ（public_html 等）へ置くだけです。管理画面の表示に従って進めてください。手順の要点は次の通りです。

管理画面（コントロールパネル）にログインする
ファイルマネージャーを開く、またはFTP情報を確認する
公開フォルダへ移動する（管理画面の表示に従う）
index.html（と img/ 等）を転送・配置する
配布されたURLをブラウザで開いて確認する

WordPressの場合はWordPressの始め方の通り、自動インストール後に配布URLで表示確認します。いずれも更新時は上書き＋強制再読み込み（WindowsはCtrl+F5、macOSはCmd+Shift+R）で最新化します。

ステップ6：SSL化して常時HTTPSにする（15分）

SSLとはの概念を押さえた上で、SSL/HTTPS設定手順に沿って有効化します。要点は、有効化後に http:// で開いても https:// へ転送されること、ページ内の画像・CSS呼び出しに http:// が残っていないこと（混在の解消）です。内部リンクは相対パス（/about.html や img/photo.jpg）にすると混在しにくくなります。

ステップ7：独自ドメインと改善へ拡張する（公開後）

公開直後は無料サブドメインのままで構いません。公開物が固まり、人に見せ続ける段階で独自ドメインを追加します。住所の考え方はドメインとは、結びつけの実務は独自ドメイン設定、裏側の伝播はDNSとはで扱います。浸透待ちの間は旧URLも残し、移行後に恒久転送（301/308）で統一します。

アクセスが増えたら画像最適化・キャッシュ見直し・有料プラン検討へ進みます。動的化したい場合はPHPの動かし方とデータベースの作り方、連携の全体像はPHPとMySQLの連携で扱います。

コード全文：最初に公開する1ページ

下記をコピーして自分の内容に書き換えると、そのまま公開できます。WHATWG HTML StandardとMDNのHTML基礎に沿った最小構成であり、文字コードUTF-8とスマホ対応のviewportを含みます。ファイル名は index.html にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="はじめて公開する自己紹介の1ページです。">
  <title>はじめてのホームページ | 自己紹介</title>
  <style>
    body { font-family: system-ui, -apple-system, "Hiragino Sans", sans-serif; line-height: 1.8; margin: 0; color: #222; }
    header, main, footer { max-width: 720px; margin: 0 auto; padding: 16px; }
    header { border-bottom: 2px solid #eee; }
    img { max-width: 100%; height: auto; }
    .card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
  </style>
</head>
<body>
  <header>
    <h1>山田太郎のホームページ</h1>
    <p>Web制作を学習中の自己紹介ページです。まずは1ページ公開が目標です。</p>
    <nav>
      <a href="#profile">プロフィール</a> |
      <a href="#works">作ったもの</a> |
      <a href="#contact">連絡先</a>
    </nav>
  </header>
  <main>
    <section id="profile" class="card">
      <h2>プロフィール</h2>
      <p>東京都在住。HTMLとCSSを学習中です。趣味は写真と散歩です。</p>
      <img src="img/photo.jpg" alt="散歩中に撮った風景写真" width="640" height="360">
    </section>
    <section id="works" class="card">
      <h2>作ったもの</h2>
      <ul>
        <li><a href="about.html">詳しい自己紹介（2ページ目の例）</a></li>
        <li>学習メモ（準備中）</li>
        <li>写真置き場（準備中）</li>
      </ul>
    </section>
    <section id="contact" class="card">
      <h2>連絡先</h2>
      <p>ご連絡はメール（[email protected]）までお願いします。</p>
      <p><small>最終更新日：2026-09-09</small></p>
    </section>
  </main>
  <footer>
    <p><small>&copy; 2026 Taro Yamada. All rights reserved.</small></p>
  </footer>
</body>
</html>

2ページ目（about.html）を足す場合は、同じひな形で <h1> と本文だけ変え、トップから <a href="about.html"> でつなぎます。画像が出ないときは img/photo.jpg の階層と大文字小文字、拡張子（.jpg と .jpeg の混同）を疑います。公開フォルダ直下の配置イメージはHTMLの公開方法でも図示しています。

<!-- about.html の最小例（抜粋・同じheadを使う） -->
<h1>詳しい自己紹介</h1>
<p><a href="index.html">トップへ戻る</a></p>
<h2>経歴</h2>
<p>2026年からWeb制作を学習。まずは静的ページの公開を習得中。</p>

エラーと解決：5行以上の早見表

公開前後に頻出する症状を表にまとめます。HTTPとはの状態コードと対応付けて読むと切り分けが速くなります。

症状	状態・表示	確認順	対処
404 Not Found	ページが見つからない	URL綴り→置き場所→ファイル名	大文字小文字・階層・拡張子を修正。公開フォルダ直下か確認
文字化け	日本語が□や謎文字	保存形式→meta→ヘッダー	UTF-8で保存し直し、`<meta charset="UTF-8">` を確認
古い表示のまま	更新が反映されない	キャッシュ→転送成否→CDN	強制再読込、別ブラウザ確認、FTPログ確認
画像のみ出ない	文章は出るが×印	パス→ファイル名→配置	相対パスと `img/` 階層、拡張子を確認
鍵マークが出ない／警告	httpのまま・混在警告	SSL状態→内部リンク→転送設定	SSL/HTTPS設定手順で有効化し `http://` 呼び出しを除去
500 Internal Server Error	動的ページで停止	直前変更→PHPログ→権限	PHP・`.htaccess` を1行ずつ戻し、権限を見直す
ドメインで開けない	DNS・浸透中の表示	綴り→NS設定→時間経過	独自ドメイン設定とDNSとはで確認し待つ

補足として、500は静的HTMLだけでは出にくく、PHPや .htaccess を触り始めた段階で出ます。変更前は必ずバックアップを取り、1行ずつ反映する習慣が復旧を速めます。動的化の入口はPHPの動かし方で扱います。

公開前のチェックリスト

公開ボタンの前に9項目を確認します。全てにチェックが付いたら公開へ進みます。

ファイル名は半角英数・小文字で、トップは index.html になっている
文字コードはUTF-8で保存し、<meta charset="UTF-8"> とviewportが入っている
画像は事前に軽量化し、巨大なまま置いていない（目安ではなく習慣として）
http と https の混在を残していない（内部は相対パスか https://）
スマホ表示を確認した（横スクロールやはみ出しがない）
配布URL（無料サブドメイン等）で https:// の鍵マークが出る
更新日・連絡先を明記した
FTP情報を安全に保管し、公共PCに残していない
独自ドメインを使う場合は浸透待ちと転送計画がある

注意点と公開後の育て方

サーバーへ公開するネットワークのイメージ — 公開の実体はサーバーへのファイル転送

注意点は4つです。第一に巨大画像のまま置かないことです。公開前に縮小・圧縮する習慣が最も効果的な改善です。第二に独自ドメインは後付け可能であり、最初は無料サブドメインで練習します。第三に公開と同時にHTTPS化することです。第四に管理画面の表示に従って進めてください。

公開後の育て方は、計測→改善の往復です。まず表示確認（PCとスマホ）、次に軽量化、次に拡張（2ページ目追加、独自ドメイン、WordPress化）の順に進めます。拡張の選択肢を表で整理します。

育て方	やること	目安の順番	対応記事
見た目の改善	CSS整理・余白・スマホ最適化	公開直後	HTMLとはの応用
住所の強化	独自ドメイン取得・結びつけ・転送統一	公開物が固まったら	ドメインとは／独自ドメイン設定
更新体制の強化	WordPress化・フォーム追加・DB連携	更新頻度が上がったら	WordPressの始め方／PHPとMySQLの連携
信頼の強化	常時HTTPS・連絡先明記・更新日管理	公開と同時〜継続	SSLとは

よくある質問

Q. ホームページとWebサイトの違いは何ですか？ A. 日常会話ではほぼ同義です。厳密にはホームページはトップページ、Webサイトは全体を指しますが、本記事では同義として扱います。まず1ページ（ホームページ）を公開し、全体（Webサイト）へ育てる流れです。

Q. お金はかかりますか？ A. 学習・試作なら無料サーバーと無料サブドメインで始められます。独自ドメインや拡張が必要になった段階で費用を検討します。FreeHostBoxでは広告なし・無料SSLをご用意していますので、ぜひ無料プランでお試しください。

Q. HTMLとWordPressはどちらから始めるべきですか？ A. 軽量公開・学習ならHTML、頻繁な更新・事業サイトならWordPressが近道です。無料サーバーなら両方試せます。HTMLはHTMLとは、WPはWordPressとはから入れます。

Q. 公開までどのくらいかかりますか？ A. 1ページの静的公開なら当日中も可能です。独自ドメインの浸透待ちやWordPress初期設定は別途時間を見ます。まず無料サブドメインで公開し、独自ドメインは後付けが安全です。

Q. 無料サブドメインと独自ドメインはどちらがよいですか？ A. 練習は無料サブドメイン、見せ続ける段階で独自ドメインを追加する流れです。住所の考え方はドメインとは、結びつけは独自ドメイン設定で扱います。

Q. HTTPS化は必須ですか？ A. 新規サイトは常時HTTPSが標準です。無料SSLで対応し、混在を残さないことが要点です。概念はSSLとは、手順はSSL/HTTPS設定手順で確認してください。

次に読む記事・出典

HTMLとは — 中身の文書の書き方。h1・p・a・imgの基礎を固めます。
HTMLの公開方法 — ファイルマネージャーとFTPの両方式での置き方と404直しです。
WordPressの始め方 — 更新体制を強化したい場合の自動設置からの手順です。
無料レンタルサーバーとは — 公開場所の選び方とチェック観点です。
ドメインとはとDNSとは — 住所と解決の仕組みです。独自ドメイン拡張の土台になります。
SSLとはとSSL/HTTPS設定手順 — 公開と同時に行う常時HTTPS化です。
HTTPとはとWebサーバーとは — 仕組みに戻って学び直す場合の起点です。

出典

WHATWG HTML Standard、MDN Web Docs（HTML基礎・HTTP概要）
IETF RFC 9110〜9114（HTTP Semanticsほか）
無料プランの内容は料金ページをご覧ください。分からなければ私たちがサポートします。まずは無料プランで実際に触って確かめてみてください。

よくある質問

ホームページとWebサイトの違いは？

日常会話ではほぼ同義です。厳密にはホームページはトップページ、Webサイトは全体を指しますが、本記事では同義として扱います。

お金はかかる？

学習・試作なら無料サーバーと無料サブドメインでゼロから始められます。独自ドメインや拡張が必要になった段階で費用を検討します。FreeHostBoxでは広告なし・無料SSLをご用意していますので、ぜひ無料プランでお試しください。

HTMLとWordPressどちらから？

軽量公開・学習ならHTML、頻繁な更新・事業サイトならWordPressが近道です。無料サーバーなら両方試せます。FreeHostBoxではPHP 8.3・MySQL 8／MariaDB 11.4・Softaculous 400+アプリをご用意していますので、ぜひ無料プランでお試しください。

公開までどのくらいかかる？

1ページの静的公開なら、HTML作成と転送・SSL化がそろえば当日中も可能です。独自ドメインの浸透待ちやWordPress初期設定は別途時間を見ます。

無料サブドメインと独自ドメインどちらで始める？

最初は無料サブドメインで練習し、公開物が固まったら独自ドメインを追加する流れが安全です。後付け可能です。

HTTPS化は必須？

新規サイトは常時HTTPSが標準です。無料SSLで対応し、混在（http呼び出し）を残さないことが要点です。

更新履歴: 公開 2026-09-01 / 最終更新 2026-09-09。技術仕様・対応バージョンは変更されるため、重要な設定は公式ドキュメントも併せて確認してください。

次はHTMLを書いて公開してみる

仕組みが分かったら手を動かす番です。HTMLの基礎から無料公開まで進みましょう。

HTMLとはを読む他の記事を探す