「ギガとメガって、どっちが大きいんだっけ？」
Webデザインの仕事をしていると、画像の容量やデータの単位ってよく出てきますよね。
私も最近まで、正直なんとなくでしか分かっていませんでした。でも、画像をアップするときに「重いです」とか「読み込みが遅い」と言われることが増えてきて、ちゃんと理解しておかないといけないな…と思うようになりました。
この記事では、同じようにWebデザインを学んでいる方に向けて、私なりに整理してみた「データ容量の基本」や「画像を軽くするコツ」をまとめています。一緒に勉強するような気持ちで読んでもらえたら嬉しいです。
「ギガ」と「メガ」、どっちが大きい？単位の大きさの順番と覚え方
「ギガ」と「メガ」、どっちが大きい？
まずは単位のざっくりしたイメージからつかんでみましょう。
- キロバイト（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くらいになることもあるので、ギガ単位ですぐ容量を超えちゃうんですね。
実務で意識したい“ちょうどいい容量”とは？
デザインをしていると、「この画像、もう少し軽くできますか？」と言われることがあります。でも最初のうちは、“軽くする”ってどういうこと？と思う人も多いと思います。
私も同じで、Photoshopで保存するたびに「画質このままでいいのかな…？」と悩んでいました。
いろんなサイトを見たり実際に試したりして、今はだいたいこのくらいを目安にしています👇
- アイキャッチ画像（横1200pxくらい）：200〜400KB
- 背景画像（全画面）：300〜800KB
- バナー・ボタン画像：50〜150KB
- アイコン・ロゴ（SVG推奨）：数KB〜
特にスマホユーザーが多いサイトでは、1ページあたり1MB以内が理想です。デザインのクオリティも大切ですが、読み込みスピードが落ちると離脱につながるので、軽さもデザインの一部だと感じています。
なぜ容量を意識する必要があるの？
容量を軽くするのは、見た目だけのためじゃありません。実は、サイトの表示速度やSEOにも関わってくるんです。
ページの読み込みが1秒遅れるだけで、離脱率が上がるというデータもあります。私も最初に作ったサイトで、背景に使っていた1.5MBの画像が原因で、ページがなかなか開かず「あれ？壊れた？」と思われたことがありました。
画像を最適化してみたら、読み込みが一気に早くなって、画像の容量を意識することの大切さを実感しました。
特にスマホユーザーが多いサイトでは、1ページあたり1MB以内が理想です。デザインのクオリティも大切ですが、読み込みスピードが落ちると離脱につながるので、軽さもデザインの一部だと感じています。
容量をどこまで減らすべき？実務での判断ポイント
これ、私も最初にすごく迷いました。「どこまで下げたらいいの？」「画質が落ちすぎたら嫌だな…」って。
軽くすれば読み込みは早くなるけど、画質を落としすぎると印象が悪くなる。特にWebデザインって“見た目の印象”が大事だから、そのバランスが本当に難しいですよね。
いろいろ試した結果、今は自分の中でこんな基準を目安にしています。
- 写真メインのページ：1枚あたり300KB前後を目安に。
200KBまで下げると少し荒く感じることがあるので、明るさや色のある写真は少し余裕を持たせています。 - 装飾要素やバナー中心のページ：100KB以下が理想。
バナーやアイコンは小さく表示されることが多いので、多少圧縮してもほとんど劣化が気になりません。 - 背景画像やテクスチャなど目立たない部分：500KBを超えないように。
背景は印象に影響するけど、ピントが合っている必要はないので、少しぼかしたり明るさを落とすと容量を減らしやすいです。
ただ、数値だけにとらわれすぎる必要はありません。最終的には**「見て違和感があるかどうか」**で判断しています。
実際の作業では、圧縮前と後の画像をブラウザで並べて見比べてみると違いがよく分かります。ほとんど差がなければ、その設定でOK。もし気になる部分があれば、ほんの少し画質を戻して再保存します。
要は、「完璧な軽量化」を目指すより、**“見た目と速度のちょうどいい落としどころ”**を見つけるのが大切。
サイトを開いた瞬間にパッと表示されて、かつ画像もきれいに見える。
その“気持ちよさ”を保つことをいつも意識しています。
そして、これは案件やジャンルによっても変わります。美容系やファッションサイトのようにビジュアルが命のデザインでは、画質を少し優先することもあります。逆に、情報量が多いブログやコーポレートサイトでは、読み込み速度を優先した方がストレスが少ない。
結局のところ、デザインの目的に合わせて最適なバランスを探すことが一番大事なんだなと感じます。
画像の容量を小さくするコツとは？
Webデザインをしていると、「この画像、重くないかな？」「サイトの読み込みが少し遅い気がする…」なんて思うことありませんか？私も最初の頃は、どうやって画像を軽くすればいいのか分からず、ただ“とりあえず圧縮してみる”ということしかできませんでした。でもいろいろ試していくうちに、少しの工夫で見た目を変えずに容量を減らす方法がわかってきました。
私が普段意識しているポイントは、大きく3つあります。
1つ目は、サイズを大きくしすぎないこと。
たとえば、表示サイズが600pxなら1200px（Retina対応）で十分。
それ以上大きくしても見た目はほとんど変わらず、容量だけが増えてしまいます。
2つ目は、画像形式を使い分けること。
写真ならJPEG、透過が必要ならPNG、ロゴやアイコンはSVG。
最近はWebPがとても優秀で、JPEGより軽くて画質もきれいなので、私は今では、webサイトに使用する画像はほとんどWebPで書き出しています。
3つ目は、圧縮ツールを活用すること。
画像をドラッグ＆ドロップするだけで容量が半分になることもあって、初めて使ったときは「えっ、これでいいの？」と驚きました。圧縮しても画質の差がほとんどわからないので、安心して使えます。
圧縮したあとは、画質が落ちていないか必ず確認するようにしています。
画像の容量を確認する方法（Mac / Windows）
圧縮した画像は、ちゃんと軽くなっているかも確認しておきたいところ。見た目は同じでも、意外と容量が変わっていないこともあるんです。ここでは、MacとWindowsそれぞれでの簡単な確認方法を紹介します。
Macの場合（Finder）
- Finderで画像を右クリック
- 「情報を見る」（ショートカット：⌘＋I）を選択
- 表示されたウィンドウの「サイズ」で容量をチェック
小さくしたつもりが意外と大きい…なんてこともあるので、ここでしっかり確認しておきましょう。
複数の画像をまとめて見たいときは、「表示」→「表示オプションを表示」から「サイズ」列を追加しておくと便利です。
Windowsの場合（エクスプローラー）
- 対象のファイルを右クリック
- 「プロパティ」を選択
- 「サイズ」または「ディスク上のサイズ」を確認
フォルダ内でまとめて見たい場合は、上部メニューの「表示」→「詳細」に切り替えて、「サイズ」列を表示しておくのがおすすめです。
- ファイルを右クリック → 情報を見る（⌘+I）
- 「サイズ」で確認
まとめ
ギガ・メガ・テラといった単位は、ちょっと難しそうに感じるかもしれませんが、実はWebデザイナーにとって超・基本で超・重要な知識です。
今回の記事では：
- 単位の大きさや順番を感覚で覚える方法
- 画像容量の目安や軽量化のコツ
- MacやWindowsでの確認の仕方
- 実務での使いどころ
まで、初心者さん向けにやさしくまとめました。
今すぐできることとしては：
- 作っている画像の容量を確認してみる
- WebPやSVGを取り入れてみる
- チームやクライアントと容量の話をするときに単位を意識する
ちょっとした意識の違いが、プロっぽさや信頼感につながります♪
コメント