まず何が重いのかを把握する
アップロードに失敗したら、最初に容量の内訳を確認します。テキストのHTMLやCSS、JSはたいてい軽く、容量の大半は画像・動画・フォント・元データ(PSDやAIなどの作業ファイル)が占めています。重い順に並べれば、どこを削れば効くかがすぐ分かります。
ZIPの中身を一覧すると、配布に不要なファイルが紛れ込んでいることもよくあります。作業用のソースや書き出し前の素材が同梱されていれば、それを外すだけで大きく軽くなります。
画像と動画を軽くする
容量削減で最も効くのは画像です。写真はJPEGやWebPで適切に圧縮し、表示に必要なサイズまで縮小します。画面に幅800pxで表示する画像に4000pxの元データを使っていれば、縮小するだけで大幅に軽くなります。アイコンやロゴはSVGにできないかも検討します。
動画は特に重くなりがちです。確認用なら解像度やビットレートを落とす、長さを必要な範囲に絞る、あるいは外部の動画サービスに置いて埋め込むといった方法で、同梱する容量を減らせます。
症状別チェック表
ファイルが大きくてアップロードできないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
不要ファイルを除外する
ZIP化する前に、配布に不要なファイルを取り除きます。OSが生成する隠しファイル、エディタの設定フォルダ、ライブラリのソース一式、使っていない画像のバリエーションなどは、表示には不要なのに容量を押し上げます。
「最終的にブラウザで表示するために必要なファイルだけ」を残す意識でフォルダを整理すると、自然と軽くなります。何が使われているか不明なファイルは、いったん外して表示が崩れないか確認する方法が確実です。
軽量化の手順
実際の作業は次の順で進めると、効率よく容量を落とせます。
- ZIPやフォルダの中身を容量順に並べ、重いファイルを特定する
- 画像を表示に必要なサイズへ縮小し、JPEG/WebPで圧縮する。アイコンはSVG化を検討する
- 動画は解像度・長さを見直すか、外部サービスへ逃がす
- OS隠しファイル・作業用ソース・未使用素材など、配布に不要なものを除外する
- それでも大きい場合は、サイトを意味のある単位(ページ群やセクション)に分けてZIPを分割する
それでも大きいときの分割と共有
軽量化しても一つにまとめると大きすぎる場合は、サイトを意味のある単位に分けるのが現実的です。確認してほしいページ群ごとにZIPを分ければ、相手も見たい部分にたどり着きやすくなります。CSS/JS/画像を含むZIPはまとめて共有できるので、関連ファイルが散らばらないよう一式で扱うとよいでしょう。
ギガサイト便はHTMLファイル、またはCSS/JS/画像を含むZIPをドロップすると共有URLを発行します。CDNのエッジ配信で表示が速く、同じURLのまま中身を差し替えられるため、軽量化や差し替えを繰り返してもリンクを送り直す必要がありません。
よくある質問
容量を減らすには何から手を付けるのが効率的ですか
まず容量の内訳を確認し、重い順に対処します。多くの場合、画像と動画が大半を占めるため、それらの圧縮・縮小・除外が最も効果的です。テキスト系ファイルから削っても効果は小さいです。
画像はどのくらいまで縮小してよいですか
実際に表示される最大サイズが目安です。表示幅より大きな画像は、その幅まで縮小しても見た目はほぼ変わりません。高精細ディスプレイを考慮するなら表示幅の2倍程度を上限にすると安全です。
ZIPに何を含めればよいか分かりません
ブラウザで表示するために必要なファイルだけを含めます。HTML、CSS、JS、表示に使う画像やフォントが基本です。作業用ソースやOSの隠しファイル、未使用素材は外します。不明なファイルは外して表示が崩れないか確認すると判断できます。
分割したZIPはどう共有すると分かりやすいですか
確認してほしいページ群など、意味のある単位で分けるのがおすすめです。ギガサイト便ならZIPごとに共有URLを発行でき、同じURLのまま差し替えられるので、分割後の更新もリンクを送り直さずに済みます。
原因が分からないときはどこから確認すべきですか?
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。