トラブルシュート

ファイルが大きくてアップロードできないときの対処

サイトをアップロードしようとしたら容量が大きすぎて失敗する。多くの場合、原因は画像や動画など重いアセットです。やみくもに分割する前に、まず何が容量を食っているかを把握し、削れるところから削るのが近道です。

まず何が重いのかを把握する

アップロードに失敗したら、最初に容量の内訳を確認します。テキストのHTMLやCSS、JSはたいてい軽く、容量の大半は画像・動画・フォント・元データ(PSDやAIなどの作業ファイル)が占めています。重い順に並べれば、どこを削れば効くかがすぐ分かります。

ZIPの中身を一覧すると、配布に不要なファイルが紛れ込んでいることもよくあります。作業用のソースや書き出し前の素材が同梱されていれば、それを外すだけで大きく軽くなります。

画像と動画を軽くする

容量削減で最も効くのは画像です。写真はJPEGやWebPで適切に圧縮し、表示に必要なサイズまで縮小します。画面に幅800pxで表示する画像に4000pxの元データを使っていれば、縮小するだけで大幅に軽くなります。アイコンやロゴはSVGにできないかも検討します。

動画は特に重くなりがちです。確認用なら解像度やビットレートを落とす、長さを必要な範囲に絞る、あるいは外部の動画サービスに置いて埋め込むといった方法で、同梱する容量を減らせます。

症状別チェック表

ファイルが大きくてアップロードできないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

  • 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
  • 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
  • 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
  • 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

不要ファイルを除外する

ZIP化する前に、配布に不要なファイルを取り除きます。OSが生成する隠しファイル、エディタの設定フォルダ、ライブラリのソース一式、使っていない画像のバリエーションなどは、表示には不要なのに容量を押し上げます。

「最終的にブラウザで表示するために必要なファイルだけ」を残す意識でフォルダを整理すると、自然と軽くなります。何が使われているか不明なファイルは、いったん外して表示が崩れないか確認する方法が確実です。

軽量化の手順

実際の作業は次の順で進めると、効率よく容量を落とせます。

  1. ZIPやフォルダの中身を容量順に並べ、重いファイルを特定する
  2. 画像を表示に必要なサイズへ縮小し、JPEG/WebPで圧縮する。アイコンはSVG化を検討する
  3. 動画は解像度・長さを見直すか、外部サービスへ逃がす
  4. OS隠しファイル・作業用ソース・未使用素材など、配布に不要なものを除外する
  5. それでも大きい場合は、サイトを意味のある単位(ページ群やセクション)に分けてZIPを分割する

それでも大きいときの分割と共有

軽量化しても一つにまとめると大きすぎる場合は、サイトを意味のある単位に分けるのが現実的です。確認してほしいページ群ごとにZIPを分ければ、相手も見たい部分にたどり着きやすくなります。CSS/JS/画像を含むZIPはまとめて共有できるので、関連ファイルが散らばらないよう一式で扱うとよいでしょう。

ギガサイト便はHTMLファイル、またはCSS/JS/画像を含むZIPをドロップすると共有URLを発行します。CDNのエッジ配信で表示が速く、同じURLのまま中身を差し替えられるため、軽量化や差し替えを繰り返してもリンクを送り直す必要がありません。

よくある質問

容量を減らすには何から手を付けるのが効率的ですか

まず容量の内訳を確認し、重い順に対処します。多くの場合、画像と動画が大半を占めるため、それらの圧縮・縮小・除外が最も効果的です。テキスト系ファイルから削っても効果は小さいです。

画像はどのくらいまで縮小してよいですか

実際に表示される最大サイズが目安です。表示幅より大きな画像は、その幅まで縮小しても見た目はほぼ変わりません。高精細ディスプレイを考慮するなら表示幅の2倍程度を上限にすると安全です。

ZIPに何を含めればよいか分かりません

ブラウザで表示するために必要なファイルだけを含めます。HTML、CSS、JS、表示に使う画像やフォントが基本です。作業用ソースやOSの隠しファイル、未使用素材は外します。不明なファイルは外して表示が崩れないか確認すると判断できます。

分割したZIPはどう共有すると分かりやすいですか

確認してほしいページ群など、意味のある単位で分けるのがおすすめです。ギガサイト便ならZIPごとに共有URLを発行でき、同じURLのまま差し替えられるので、分割後の更新もリンクを送り直さずに済みます。

原因が分からないときはどこから確認すべきですか?

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

関連記事

トラブルシュート

画像が重くて表示が遅いときの改善方法

写真や図版が多いページを共有したら表示が遅くて相手を待たせてしまう、そんなときの改善策をまとめました。症状の切り分け方から、サイズ削減・形式変換の手順まで自分でできる範囲で解説しています。

4分で読める
トラブルシュート

公開後にJavaScriptが動かないときの原因と直し方

ローカルでは動いていたボタンやアニメーションが公開後に反応しなくなった方向け。JavaScriptが止まる主な原因をファイルパスや読み込み順の観点で切り分け、自分で直せるかどうかを判断できます。

5分で読める
トラブルシュート

公開後に動画が再生されないときの対処

デモページや資料に埋め込んだ動画が公開後に再生されなくなった方向け。動画ファイルの添付漏れ・パスのズレ・ブラウザの自動再生制限を症状ごとに切り分け、自分でできる確認と対処を把握できます。

4分で読める
トラブルシュート

公開したHTMLのフォームが送信できないときの対処

問い合わせフォームやアンケートの送信ボタンが押せない・エラーになる方向け。静的ファイル公開ではフォームの動作に制約がある理由を理解し、外部サービス連携などの現実的な解決策を選べるようになります。

5分で読める
トラブルシュート

iframeが表示されないときの原因と対処

地図や外部コンテンツをiframeで埋め込んだのに公開後に枠が空白になった方向け。表示許可・HTTPSとHTTPの混在・相対パスのズレを症状ごとに切り分け、適切な対処を選べるようになります。

4分で読める
トラブルシュート

外部CDNのCSS・JSが読み込めないときの対処

CDNからCSSやJSを読み込む構成にしたらデザインが崩れて機能が動かなくなった方向け。URLの誤りやHTTPSの混在・バージョン指定の問題を原因ごとに整理し、確認と修正の手順を把握できます。

5分で読める
「トラブルシュート」の記事をもっと見る →