複数ページのサイトを一つずつ公開すると遷移が壊れる
AIで作ったサイトや手元で組んだサイトが複数のHTMLファイルで構成されている場合、ファイルを一枚ずつアップロードしても正しく表示できないことがあります。トップから次のページへ移る「リンク」が、同じ場所にファイルがそろっていることを前提にしているからです。
たとえばindex.htmlの中にabout.htmlへのリンクがあるとき、about.htmlが別の場所にあると遷移先が見つからずエラーになります。ページ同士の関係を保ったまま共有するには、全ファイルを同じ構成のまま一括で扱う必要があります。
複数ページサイトを共有する一般的な方法
複数ページをまとめて共有する方法としては、フォルダごとZIPに圧縮して渡す、レンタルサーバーにファイル一式をアップロードする、ホスティングサービスにデプロイする、といった選択肢があります。それぞれ手間や前提知識が異なります。
ただファイルをZIPで渡しただけでは、相手が解凍してブラウザで開く手間が残ります。サーバーにアップする方法は確実ですが、設定や権限管理の知識が必要で、ちょっとした共有には大げさになりがちです。
- フォルダごとZIPに圧縮して相手に渡す
- レンタルサーバーにファイル一式をアップロードする
- ホスティングサービスにデプロイして公開する
崩れないZIP構成のOK/NG例
複数のHTMLファイルをZIPでまとめて公開では、ZIPの中身が正しくても、階層が1つずれるだけで画像やCSSが読み込めなくなります。圧縮する前に、公開用フォルダだけを切り出して確認します。
Windows/Macどちらでも、不要な隠しファイルや作業ファイルを入れないことが大切です。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- OK: index.html と assets/images/css/js が想定した相対パスで並んでいる
- NG: ZIPの中にさらに不要な親フォルダがあり、index.htmlの場所が分かりにくい
- NG: __MACOSX、.DS_Store、作業中PSD、秘密情報入りメモを同梱している
- 確認: アップロード後のURLで画像・CSS・リンクを実際に開く
まとめる前に確認しておきたいこと
複数ページをまとめる前に、まずページ間のリンクが「相対パス」で書かれているか確認しましょう。about.htmlのように同じフォルダ内のファイル名で指定されていれば、一式のまま移動しても遷移は保たれます。逆にパソコン内の絶対パスで書かれていると、別の環境では開けません。
また、入口となるファイルの名前にも注意が必要です。多くの仕組みではindex.htmlが最初に表示されるページとして扱われます。トップにしたいページがindex.htmlになっているかを確認しておくと、公開後の表示が安定します。
ZIPでまとめると元の構成のまま表示できる
複数のHTMLファイルを画像やスタイルごとZIPにまとめておけば、フォルダの構成をそのまま保った状態で扱えます。ファイルの位置関係が崩れないため、ページ間の遷移も元のとおりに動きます。
ギガサイト便はこのZIPをそのまま受け取り、index.htmlを入口として元の構成のまま表示します。相手は解凍する必要がなく、発行されたURLを開くだけで複数ページのサイトをそのまま閲覧できます。
内部リンクを壊さないための命名ルール
複数HTMLのZIP公開では、ファイルの置き場所だけでなく名前の付け方も重要です。リンク先の大文字小文字、スペース、日本語ファイル名の扱いが環境によってずれると、トップページは見えても下層ページだけ開けないことがあります。
レビュー用に共有するなら、まずは英数字・ハイフン中心のシンプルなファイル名にそろえると安全です。内部リンクは同じフォルダ構成を前提に、相対パスで書きます。
- 入口はZIP直下のindex.htmlにする
- 下層ページはabout.html、pricing.htmlのように英数字でそろえる
- リンクは /about.html ではなく about.html のような相対パスにする
- フォルダ名とファイル名の大文字小文字をリンクと一致させる
- ファイル名のスペースや記号はできるだけ避ける
ギガサイト便で複数ページサイトを公開する手順
実際に複数ページのサイトをZIPで公開する流れを順番に見ていきます。登録なしでもすぐに公開できますが、共有相手を限定したい場合は認証と公開期限の設定が大切です。
下記の手順は数分で完了します。最初にZIPの中身がそろっているかだけ確認しておけば、あとはドラッグ&ドロップして設定するだけで、遷移を保ったまま公開できます。
- サイトのファイル一式（index.htmlを含む全HTML）を一つのフォルダにまとめ、ZIPに圧縮する
- ギガサイト便のトップに、作成したZIPをドラッグ&ドロップする
- 認証方式を選ぶ（社内限定ならメール認証や会社ドメイン認証を選ぶ）
- 公開期限を設定し、共有が不要になったら自動で失効させる
- 発行されたURLを相手に送り、トップから各ページへ遷移できるか確認してもらう
よくある質問
HTMLファイルが何枚あってもまとめて公開できますか？
はい、複数のHTMLファイルを一つのZIPにまとめれば、まとめて公開できます。ファイル同士のリンクが相対パスで書かれていれば、ページ間の遷移も元のまま動きます。入口となるindex.htmlを含めておくことだけ確認してください。
相手は解凍してから見る必要がありますか？
いいえ、相手が解凍する必要はありません。ギガサイト便はZIPをそのまま受け取り、URLを開くと元の構成のまま表示します。閲覧する側は発行されたURLにアクセスするだけで、複数ページのサイトをそのまま見られます。
ページ間のリンクが切れてしまうのはなぜですか？
多くの場合、リンクがパソコン内の絶対パスで書かれていることが原因です。同じフォルダ内のファイル名で指定する相対パスにしておくと、ZIPにまとめて公開しても遷移が保たれます。公開前に手元のフォルダで遷移を確認しておくと安心です。
公開した後に一部のページだけ修正したいときはどうしますか？
修正したファイルを含むZIPを作り直し、同じURLのまま中身を差し替えられます。リンクを送り直す必要がないため、相手は同じURLを開くだけで最新の状態を確認できます。差し替え前にはローカルで表示を確認しておくとよいでしょう。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。
複数HTMLの内部リンクは絶対パスと相対パスのどちらがよいですか？
ZIPでまとめて公開する確認用サイトでは、相対パスにそろえるのが扱いやすいです。ZIP内のフォルダ構成を保ったまま公開されるため、about.html や pages/about.html のように、実際の位置関係に合わせてリンクを指定します。