開発者からもらったホームページを開く方法

開発者から「ホームページのフォルダ（ZIPファイル）」を受け取ったとき、 自分のパソコンでブラウザに表示するまでの手順をまとめます。

対象：プログラミング不要・Mac / Windows どちらでも対応

全体の流れ

① ZIPファイルを受け取る
      ↓
② 解凍する（フォルダを取り出す）
      ↓
③ ターミナルでサーバーを起動する
      ↓
④ ブラウザで確認する

① ZIPファイルを受け取る

開発者からメール・チャット・Google ドライブなどで届いた ZIP ファイルを デスクトップなど、わかりやすい場所に保存します。

② 解凍する

Mac の場合

ZIP ファイルをダブルクリックするだけで自動的にフォルダが作成されます。

例：my-website.zip → my-website/ フォルダ

Windows の場合

ZIP ファイルを右クリック →「すべて展開」→「展開」をクリックします。

③ ターミナルでサーバーを起動する

ホームページはブラウザで直接フォルダを開いても正しく表示されないことがあります。 かんたんな「サーバー」を立ち上げることで正しく見られます。

Mac の場合（ターミナル.app を使う）

1. ターミナルを開く Spotlight（⌘ + Space）→「ターミナル」と入力 → Enter

2. 以下のコマンドをコピーして貼り付け、Enter を押す

cd ~/Desktop/my-website && npx serve . -p 3000

my-website の部分は、解凍してできたフォルダ名に合わせて変更してください。 デスクトップ以外に置いた場合はパスも変更が必要です。

3. 初回のみ確認メッセージが出る場合 「Need to install the following packages: serve」と表示されたら y を入力して Enter を押します（自動でインストールされます）。

Windows の場合（コマンドプロンプト / PowerShell を使う）

1. コマンドプロンプトを開く スタートメニュー →「cmd」と入力 → Enter

2. 以下のコマンドを実行する

cd %USERPROFILE%\Desktop\my-website
npx serve . -p 3000

④ ブラウザで確認する

ターミナルに以下のような表示が出たら成功です。

Serving!
- Local: http://localhost:3000

ブラウザ（Chrome・Safari・Edge など）を開いて アドレスバーに http://localhost:3000 と入力して Enter を押します。

ホームページが表示されます。

確認が終わったら

ターミナルで Ctrl + C を押すとサーバーが止まります。 次回また見たいときは ③ からやり直してください。

よくある質問

Q. フォルダ名が違う場合は？

cd ~/Desktop/フォルダ名 の部分を実際のフォルダ名に変えてください。

Q. 「command not found」と表示された

Node.js がインストールされていません。 開発者に「Node.js のインストールが必要」と伝えるか、 以下のページからインストールしてください。 https://nodejs.org/ja （LTS版を推奨）

Q. ページが真っ白になる

フォルダの中に index.html があることを確認してください。 ない場合は開発者に再送をお願いしてください。

まとめ