「ギガとメガってどっちが大きいんだっけ？」
Webデザイナーとして画像や動画を扱っていると、ファイルの容量ってけっこう気になりますよね。でも単位がバラバラで、つい「これ何MBだっけ？GBにするとどのくらい？」と迷ってしまうことも。私もWebデザインを始めたばかりの頃、画像の最適なサイズや圧縮の仕方がわからず、何度もやり直した経験があります。
この記事では、そんな単位の違いに迷わないための基本知識から、制作に役立つ容量の目安、画像を軽くするコツ、MacやWindowsでの確認方法まで、初心者Webデザイナーさん向けにやさしく解説していきます。
まずは難しいことは抜きにして、「なんとなく」わかるところから始めましょう！
1. ギガ・メガ・テラってなに？大きさの順番と覚え方
「ギガ」と「メガ」、どっちが大きい？
まずは単位のざっくりしたイメージからつかんでみましょう。
- キロバイト（KB）：ちょっとしたテキストファイルや小さめのアイコンのサイズ
- メガバイト（MB）：写真1枚くらいの容量
- ギガバイト（GB）：動画やアプリなどの大きめのデータ
- テラバイト（TB）：パソコンのHDDや外付けストレージなどの大容量
順番で並べると、
KB（キロ） < MB（メガ） < GB（ギガ） < TB（テラ）
という感じ。つまり、「ギガ」は「メガ」よりも大きいし、「テラ」はそのさらに上。
実際どれくらいの差があるの？
感覚的には、
- 1,000KB = 1MB（メガ）
- 1,000MB = 1GB（ギガ）
- 1,000GB = 1TB（テラ）
くらいのざっくり理解でOKです。
（※厳密には1,024倍ずつという考え方もありますが、初心者のうちは「1,000倍」くらいのイメージで問題ありません）
たとえばスマホの写真が1枚2MBだったら、500枚で1GBくらい。動画だと5分で100MBくらいになることもあるので、ギガ単位ですぐ容量を超えちゃうんですね。
Webデザイナーが知っておきたい画像容量の目安
画像って、Webデザインでは欠かせない素材ですよね。でも「この画像、重すぎないかな？」と気になること、ありませんか？
私も最初は、Photoshopで保存するたびに「この設定で大丈夫かな？」と何度も調整していました。
ここでは、よく使われる画像フォーマットごとの容量の目安と、用途別のサイズ感覚をまとめてみました。
よく使う画像フォーマットと容量感
| フォーマット | 特徴 | 容量の目安（中画質） |
|---|---|---|
| JPEG | 写真向き。圧縮率が高い | 100KB〜500KB |
| PNG | 透過が必要な場合に便利 | 200KB〜1MB |
| WebP | JPEGより軽くて高画質 | 50KB〜300KB |
| SVG | ベクター形式。拡大しても劣化しない | 数KB〜100KB以下 |
※画像のサイズ（px）や内容によって変わります。
用途別のおすすめ容量
- アイキャッチ画像（横1200px）：200〜400KB
- 背景画像（フルスクリーン）：300〜800KB
- 小バナー・ボタン画像：50〜150KB
- アイコン・ピクトグラム：SVGで数KB
特にスマホユーザーが多いサイトでは、1ページあたり1MB以内が理想とされています。
3. 画像の容量を減らすコツとツール
「画像を軽くしたいけど、画質が悪くなるのは嫌！」って思いますよね。私も昔はどうしていいか分からず困ってました。
でも、ちょっとした工夫で容量はしっかり抑えられます！
コツ①：画像サイズ（px）を最適化
- 表示サイズの2倍くらいで十分（Retina対応なら）
- 例：表示600px → 1200pxでOK
コツ②：圧縮率を調整する
- JPEGは画質80〜90％で十分きれい
- PNGはツールで最適化を
- WebPは高圧縮でもキレイ
コツ③：画像圧縮ツールを活用
- TinyPNG（https://tinypng.com）
- Squoosh（https://squoosh.app）
- ILoveIMG（https://www.iloveimg.com/ja）
ツールにドラッグするだけでOKです♪
コツ④：フォーマットを見直す
- 写真 → WebPがおすすめ
- ロゴやイラスト → SVGが最強
4. MacとWindowsで容量を確認する方法
軽くできたつもりでも、実際のファイルサイズを確認することが大切です！
Mac（Finder）の場合
- ファイルを右クリック → 情報を見る（⌘+I）
- 「サイズ」で確認
- 表示設定で「サイズ」列を追加するのも便利
Windows（エクスプローラー）の場合
- ファイルを右クリック → プロパティ
- 「サイズ」「ディスク上のサイズ」を確認
- 表示 → 詳細で「サイズ」列をチェック
注意点
- MBの定義（1,000KB or 1,024KB）に差がある
- 圧縮率や形式で大きく変わる
- ディスク上のサイズは若干ズレることあり
5. 実務で使える！単位を意識した設計や説明のコツ
シーン①：要件定義での活用
- 「画像1枚あたり200KB以下に」
- 「全体で1MB以内を目指しましょう」
- 「WebP形式で軽くしますね」
数値で伝えると信頼感アップです♪
シーン②：チームでの連携
- 「この画像、900KBあるのでちょっと重めです」
- 「ファイル名に容量入れておくと便利：main_1200x800_350kb.jpg」
共有ルールを作っておくと◎
シーン③：クライアント説明に
- 「この画像は〇〇KBで、標準的な容量です」
- 「全体で1MB未満に抑えています」
しっかり説明できると、プロっぽさが伝わります。
まとめ
ギガ・メガ・テラといった単位は、ちょっと難しそうに感じるかもしれませんが、実はWebデザイナーにとって超・基本で超・重要な知識です。
今回の記事では：
- 単位の大きさや順番を感覚で覚える方法
- 画像容量の目安や軽量化のコツ
- MacやWindowsでの確認の仕方
- 実務での使いどころ
まで、初心者さん向けにやさしくまとめました。
今すぐできることとしては：
- 作っている画像の容量を確認してみる
- WebPやSVGを取り入れてみる
- チームやクライアントと容量の話をするときに単位を意識する
ちょっとした意識の違いが、プロっぽさや信頼感につながります♪
コメント