Webデザインの勉強や仕事をしていると、画像を書き出すときやファイルを管理するときに、KB（キロバイト）・MB（メガバイト）・GB（ギガバイト）といった単位をよく見かけますよね。
でも、いざ見たときに「あれ？ギガとメガってどっちが大きいんだっけ？」「画像1枚で3MBって重いの？軽いの？」
と、容量の目安や感覚があいまいなままになっている人も多いのではないでしょうか。
私自身も、Webデザインを学び始めた頃は、あまり画像や動画の容量を意識しておらず、WordPressへ画像をアップロードしたときに、容量が大きすぎてアップロードにかなり時間がかかったり、webサイトがかなり重くなったりすることがよくありました。
この記事では、Webデザイナーがよく使う単位と実務での画像や動画の容量の目安を、初心者向けに解説します。
Webデザイナーが容量感を知っておくべき理由
「単位の順番が分かるだけで十分では？」と思うかもしれません。
でも、実際は容量感を知っていると、制作や運用がかなりスムーズになります。
1. 画像が重い原因に気づきやすくなる
サイトが重いとき、原因のひとつになりやすいのが画像容量です。
1枚3MBの画像を何枚も使っていたら、表示速度に影響しやすいのは想像できますよね。
単位の感覚があると、
「この画像、見た目のわりに重すぎない？」
と気づけるようになります。
2. 書き出し設定を考えやすくなる
JPEG・PNG・WebPの違いや、画質設定、画像サイズの調整をするときにも、容量の知識が役立ちます。
ただきれいに見せるだけでなく、軽くして使いやすくすることもWebデザインの大切な視点です。
3. ストレージ管理がしやすくなる
PCの空き容量や外付けSSDの必要性を考えるときも、GBやTBの感覚は欠かせません。
特に、画像や動画を扱う仕事では、思っている以上に保存容量を使います。
私自身、最初の頃は画像を書き出しても、容量をほとんど気にしていませんでした。
画質が荒れていなければそれでいいと思っていたんです。
でも実際には、Webサイトに使う画像は、きれいなだけでは不十分でした。
容量が重いとページ表示が遅くなりやすいですし、WordPressにアップロードする画像が大きすぎると扱いづらいこともあります。
そこで初めて、「この画像は何MBなのか」「このサイズならWeb用として重いのか軽いのか」を考えるようになりました。単位そのものはシンプルな知識ですが、こういう基本が曖昧なままだと、実務で細かくつまずきやすいと感じています。
Webデザイナーが押さえておきたいデータ容量の単位
Webデザインの仕事をしていると、画像や動画、制作データなどで「KB」「MB」「GB」といった単位をよく見かけます。
これらの単位を小さい順に並べると次のようになります。
KB（キロバイト） < MB（メガバイト） < GB（ギガバイト） < TB（テラバイト）
ざっくり計算すると、容量はそれぞれ約1,000倍ずつ大きくなります。
1,000KB = 1MB
1,000MB = 1GB
1,000GB = 1TB
※厳密には、コンピュータの世界では1,024倍で計算される場面もあります。
ただ、初心者のうちはまず「1000倍ずつ大きくなる」と覚えておけばOKです。
実際どれくらいの容量感なの？
単位だけ分かっても、実感がないと判断しにくいですよね。
そこで、ざっくりした目安を整理してみます。
画像
- 小さめのWeb用画像：100KB〜300KB程度
- やや大きめの画像：300KB〜1MB程度
- スマホ写真：2MB前後
- 高画質な写真素材：5MB以上になることもある
Webサイトに載せる画像は、きれいさと軽さのバランスが大切です。
元画像が5MBあっても、そのまま使うのではなく、用途に合わせてリサイズや圧縮をする必要があります。
バナーやサムネイル
Web広告やブログのアイキャッチ画像では、画像サイズそのものだけでなく、ファイル容量が重すぎないかも重要です。
見た目が同じでも、保存形式や圧縮率によって容量はかなり変わります。
たとえば、JPEG・PNG・WebPでは容量が変わるため、どのファイル形式を選ぶかもWebデザイナーには大事な知識です。
動画
- 数十MB〜数百MBは普通
- 長さや画質によっては1GBを超えることもある
動画は画像より一気に容量が大きくなります。
「数分の動画なのにかなり重い」と感じるのは普通のことです。
制作データ
- Figma自体はクラウド中心ですが、書き出し画像や共有データは容量に関係する
- PhotoshopやIllustratorのデータは数MB〜数百MBになることもある
- 画像を大量に使ったデータはかなり重くなりやすい
実務では、完成物だけでなく作業データの重さも意識するようになります。
画像の容量を確認する方法（Mac / Windows）
画像の容量は、「軽そうに見えるから大丈夫」と思っていても、実際に確認すると意外と大きいことがあります。
特にWebサイトに使う画像は、見た目だけでなくファイルサイズも大事なので、書き出したあとに一度チェックするクセをつけておくと安心です。
ここでは、MacとWindowsそれぞれでの簡単な確認方法を紹介します。
Macの場合（Finder）
Macでは、Finderから画像の容量をすぐ確認できます。
確認手順
- Finderで対象の画像を選ぶ
- ファイルを右クリックする
- 「情報を見る」をクリック（ショートカット：⌘ + I）
- 表示されたウィンドウの「サイズ」を確認する
ファイルを小さくしたつもりでも、思ったより容量が大きいことはよくあります。
画像を書き出したあとにここで確認しておくと、「重い画像をそのまま使ってしまった」というミスを防ぎやすくなります。
複数の画像をまとめて見たいときは、Finderの表示を調整しておくと便利です。
「表示」→「表示オプションを表示」からサイズに関する表示を見やすくしておくと、ファイルごとの差が把握しやすくなります。
Windowsの場合（エクスプローラー）
Windowsでは、エクスプローラーからファイルのプロパティを開くことで容量を確認できます。
確認手順
- 対象の画像ファイルを選ぶ
- ファイルを右クリックする
- 「プロパティ」を選ぶ
- 「サイズ」または「ディスク上のサイズ」を確認する
画像を1枚ずつ確認したいときは、この方法が手軽です。
また、フォルダ内の画像をまとめて見たい場合は、エクスプローラーの表示を「詳細」に切り替えると、サイズを一覧で確認しやすくなります。
まとめ
ギガとメガの違いは、Webデザインをしていると意外と何度も出てくる基本知識です。
順番でいうと、**KB（キロ） < MB（メガ） < GB（ギガ） < TB（テラ）**で、ギガのほうがメガより大きいと覚えておけばまず困りません。
特にWebデザイナーは、画像の書き出し、サイトの表示速度、WordPressへのアップロード、PCの保存容量など、データ容量を意識する場面が多いです。
だからこそ、「なんとなく」ではなく、単位の意味とざっくりした目安を知っておくことが大切です。
私も最初はあいまいなままでしたが、実務に入ってから、こういう基礎知識ほど後から効いてくると感じました。
難しい知識に見えても、まずはメガよりギガが大きい、そして画像の容量は軽いほど扱いやすいというところから整理していけば大丈夫です。
