WEBビギナー完全ガイド

はじめての
ホームページ作成

サーバー契約からFFFTPの使い方まで、
完全ゼロから自分のHPが作れるようになる 7ステップ

全体の進捗 0 / 7 ステップ完了
0% COMPLETE
1
STEP 01 · 事前準備
HPを作る前に知っておくこと
ドメイン・サーバー・FTPの3つの概念を理解しよう
⏱ 15分
💡 まず全体像を把握しよう
HPを公開するには「3つの要素」が必要です。家で例えると、土地(サーバー)住所(ドメイン)引越しトラック(FTP)のイメージです。
🖥 サーバーとは?

あなたのHPファイルを24時間365日インターネット上に置いておく「レンタル倉庫」です。月500〜1,000円程度で借りられます。

🌐 ドメインとは?

「example.com」のようなHP固有の住所です。年間1,000〜3,000円程度。サーバーと紐付けることでHPにアクセスできます。

📁 FTP(FFFTP)とは?

自分のパソコンからサーバーへHTMLファイルを転送するソフトです。FFFTPは無料で使える定番ツールです。

サーバー=ファイルを置く場所、と理解した
ドメイン=HPのURL(住所)、と理解した
FTP=パソコンからサーバーへの転送ツール、と理解した
2
STEP 02 · サーバー契約
レンタルサーバーを契約する
初心者に最適なサーバー選びと申し込み手順
⏱ 30分
🏆 初心者におすすめのサーバー3選
迷ったら エックスサーバー が最もサポートが充実していて安心です。
プランを選ぶ

個人HPなら「スタンダードプラン」で十分。月額1,000円前後が目安です。

会員登録・申し込み

メールアドレス・氏名・住所・クレジットカードを用意して申し込みます。10分程度で完了します。

FTP情報をメモする

契約完了メールに「FTPサーバー名」「FTPユーザー名」「FTPパスワード」が届きます。必ずメモしておきましょう。

⚠ 注意
FTPパスワードは後から確認しにくい場合があります。契約完了メールは大切に保管しておきましょう。
サーバーサービスを決めた
会員登録・契約を完了した
FTPサーバー名・ユーザー名・パスワードをメモした
3
STEP 03 · ドメイン取得
独自ドメインを取得する
あなただけのURLを手に入れてサーバーと紐付ける
⏱ 20分
💡 ドメイン選びのコツ
自分の名前やビジネス名を入れた短くて覚えやすいものがベスト。「.com」「.jp」「.net」が一般的です。
ドメイン名を検索する

取得したいドメイン名を入力して空きがあるか確認。「.com」は年間1,000〜2,000円が目安です。

購入・申し込み

カートに入れて会員登録・支払い。数分で取得完了します。

サーバーとドメインを紐付ける(ネームサーバー設定)

ドメイン管理画面で「ネームサーバー」をレンタルサーバーが指定する値に変更します。エックスサーバーなら「ns1.xserver.jp」などを設定。反映まで最大24時間かかります。

⏳ 反映待ち
ネームサーバー変更後、DNSが浸透するまで数時間〜最大24時間かかります。すぐに繋がらなくても焦らず待ちましょう。
ドメイン名を決めて取得した
ネームサーバーをサーバー会社の値に変更した
サーバー管理画面でドメインの追加設定をした
4
STEP 04 · FFFTP導入
FFFTPをインストール・設定する
無料FTPソフトのダウンロードからサーバー接続まで
⏱ 20分
📥 FFFTPのダウンロード先
公式の窓の杜またはGitHubからダウンロードするのが安全です。
インストール

ダウンロードしたインストーラーを実行。基本的に「次へ」を押し続けるだけでOKです。

新規ホスト(接続先)を登録する

FFFTPを起動 → 「新規ホスト」をクリック → 以下の情報を入力します。

FFFTP 設定値 ホストの設定名:自分でわかる名前(例:私のHP)
ホスト名(アドレス):FTPサーバー名(契約メールに記載)
ユーザー名:FTPユーザー名(契約メールに記載)
パスワード:FTPパスワード(契約メールに記載)
ローカルの初期フォルダ:HPファイルを置くPCのフォルダ
ホストの初期フォルダ:/ または public_html(サーバーによる)
接続テスト

設定を保存して「接続」ボタンを押します。右側のパネルにサーバーのフォルダが表示されれば接続成功!

🔒 セキュリティ注意
接続方式は「SFTP」または「FTPS」を選べる場合は必ず選択しましょう。通常の「FTP」はパスワードが暗号化されません。
FFFTPをインストールした
ホスト設定(サーバー情報)を入力した
接続テストで右パネルにフォルダが表示された
5
STEP 05 · HTML作成
最初のHTMLファイルを作る
メモ帳で簡単なHPファイルを作成しよう
⏱ 30分
📝 最初はこれだけ!シンプルHTMLテンプレート
以下をメモ帳にコピーして「index.html」として保存してください。
index.html <!-- HTMLの基本構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>私のホームページ</title>
</head>
<body>
  <h1>ようこそ!私のHPへ</h1>
  <p>はじめてのホームページです。</p>
</body>
</html>
メモ帳で作成・保存

メモ帳を開いて上記をコピー。「ファイル」→「名前を付けて保存」で、ファイル名を「index.html」、文字コードを「UTF-8」にして保存。

ブラウザで確認

保存したindex.htmlをダブルクリックしてブラウザで表示確認。「ようこそ!私のHPへ」と表示されればOK!

🛠 より快適に書くには?
「VS Code(Visual Studio Code)」という無料エディタを使うと、コードに色がついて書きやすくなります。初心者にも人気の定番ツールです。
index.htmlをUTF-8で保存した
ブラウザで内容が表示されることを確認した
6
STEP 06 · アップロード
FFFTPでファイルをアップロードする
作ったHTMLをサーバーに送ってネット公開しよう
⏱ 10分
📤 アップロードの流れ
FFFTPは画面が左右に分かれています。左=自分のPC右=サーバーです。
FFFTPを起動して接続

先ほど設定したホストを選んで「接続」ボタンをクリック。右パネルにサーバーのフォルダが表示されます。

正しいフォルダに移動する

右パネル(サーバー側)で「public_html」フォルダを開きます(サーバーによって「www」「htdocs」の場合もあります)。

ファイルを転送する

左パネル(PC側)でindex.htmlを選択して右クリック→「アップロード」、またはドラッグ&ドロップで転送します。

ブラウザで確認!

ブラウザで「https://あなたのドメイン.com」にアクセス。さっき作ったページが表示されれば HP公開完了!🎉

⚠ 表示されない場合
① ネームサーバーの反映を待つ(〜24時間) ② ファイルが正しいフォルダにあるか確認 ③ ファイル名が「index.html」になっているか確認
public_htmlフォルダにindex.htmlをアップした
ブラウザからURLでアクセスしてページが表示された
7
STEP 07 · 次のステップ
HPをもっとよくするために
SSL化・デザイン改善・更新方法を学ぼう
参考
🔒
SSL化(https化)する

URLを「http://」→「https://」に変えてセキュリティを高めます。多くのサーバーでワンクリックで無料設定できます。今やSSL化はマスト!

🎨
CSSでデザインを整える

HTMLに「style.css」を追加することで文字サイズ・色・レイアウトを自由に変えられます。

📸
画像を入れる

画像ファイルもFFFTPでアップして、HTML内で <img src="photo.jpg"> と書くと表示できます。

🔄
HPを更新する方法

PCでHTMLを編集して保存 → FFFTPで再アップロード、これを繰り返すだけです。シンプル!

📚 次に学ぶと良いこと
HTML/CSS基礎(ProgateやドットインストールでOK)→ レスポンシブデザイン(スマホ対応)→ WordPressの導入(更新が簡単になる)の順番がおすすめです。
🌸
おめでとうございます!

7つのステップをすべてクリアしました。
あなたはもうWEBビギナーを卒業です!
これからも少しずつHTMLやCSSを学んで、
どんどん素敵なHPにしていきましょう。