第6回: 画像形式の使い分けとWebフォント

この回の目標

  • JPG / PNG / SVG / WebP の違いを説明できる
  • 適切な画像形式を選べる
  • Webフォントを正しく読み込める
  • 見た目と表示速度を意識したページが作れる
目次
  1. フォントと画像はサイトの印象を決める
  2. 画像の選び方
  3. 画像を最適化してみよう
  4. 実務でよくあるNG例
  5. Webフォントの基礎
  6. Google Fontsを使ってみよう
  7. 表示速度と軽量化
  8. まとめ

フォントと画像はサイトの印象を決める

同じデザインでも、「画像が荒い」「フォントが読みづらい」だけで信頼感は大きく下がる

NG例

画像が荒い

フォントが読みづらい

本ファイルは、Viteにおけるビルドプロセスのカスタマイズおよび、プロジェクト構造の定義を行うための設定ファイルである。

1. ディレクトリ構造の定義
プロジェクトのルートパスおよび、ソースコードが格納されているディレクトリを絶対パスで定義している。

projectRoot: vite.config.js が配置されているディレクトリを基点とする。

srcDir: 開発対象のソースファイル（HTML, SCSS, JS等）を格納する src ディレクトリを指定。

2. マルチページ（MPA）対応の動的生成
src ディレクトリ内に存在する全てのHTMLファイルを自動的に検出し、ビルドのエントリポイントとして登録するロジックを実装している。

glob.sync: src 以下の階層にある全HTMLファイルを検索。

input オブジェクト: 検出されたHTMLファイルのパスを解析し、ディレクトリ構造を維持したままエントリポイント用のキーを生成。これにより、ページが増加するたびに手動で設定を更新する工数を削減している。

OK例

高品質な画像

適切なフォント

本ファイルは、Viteにおけるビルドプロセスのカスタマイズおよび、プロジェクト構造の定義を行うための設定ファイルである。

1. ディレクトリ構造の定義
プロジェクトのルートパスおよび、ソースコードが格納されているディレクトリを絶対パスで定義している。

projectRoot: vite.config.js が配置されているディレクトリを基点とする。

srcDir: 開発対象のソースファイル（HTML, SCSS, JS等）を格納する src ディレクトリを指定。

2. マルチページ（MPA）対応の動的生成
src ディレクトリ内に存在する全てのHTMLファイルを自動的に検出し、ビルドのエントリポイントとして登録するロジックを実装している。

glob.sync: src 以下の階層にある全HTMLファイルを検索。

input オブジェクト: 検出されたHTMLファイルのパスを解析し、ディレクトリ構造を維持したままエントリポイント用のキーを生成。これにより、ページが増加するたびに手動で設定を更新する工数を削減している。

Web制作では「デザイン素材の質」も非常に重要

画像の選び方

品質のよいサイトを目指すためには、適切な画像形式・画像サイズを選ぶことが大切

画像形式

Web制作では「JPG」「PNG」「SVG」「WebP」の4つがよく使われる

画像形式ごとの特徴

画像形式 特徴 用途
JPG
  • 「色数が多い写真」に最適な形式
  • ファイルサイズが軽い
  • 透過できない
  • 写真
  • 背景画像
PNG
  • 「透過が必要な図解・ロゴ」に最適な形式
  • JPGより重い
  • ロゴ
  • ボタン
SVG
  • 拡大しても劣化しない
  • 非常に軽い
  • ロゴ
  • アイコン
WebP
  • JPGより軽い
  • PNGより軽い
  • 透過対応
  • 写真、透過画像など、ほぼすべての用途

まとめ

  • 写真 → JPG / WebP
  • アイコン・ロゴ → SVG / PNG
  • 背景が透過されているイラスト → WebP / PNG

画像の内容によって最適な形式を選ぶことで、画質を維持しつつサイトを軽量化できる

画像サイズ

サイトで使用する画像を選定・作成する際は、「解像度」「ファイルサイズ」「縦横比の統一」のバランスを考慮する

解像度（●●px × ▲▲px）

  • 表示したいサイズ（CSSでの指定サイズ）のそのままのサイズを画像を使用すると、画像がボケてしまう原因になる
  • 表示したいサイズの2倍の解像度で画像を作成するのが一般的

ファイルサイズ

  • 画像の解像度が高すぎるとファイル容量が肥大化し、ページの読み込み速度が低下する
  • 必要以上に大きな画像を使用せず、画像圧縮（画質を維持しつつ、データ容量を小さくする技術）をかけたり、WebP等に変換して画質を保ちつつ容量を削減する
  • 画像圧縮や別の画像形式への変換は専用ツールを使って行う

縦横比の統一

  • 複数の画像を並べる際、元画像ごとに縦横比がバラバラだとレイアウトが崩れる原因になる
  • 同じ役割を持つ画像（例：ブログのアイキャッチ、商品写真）は、あらかじめ比率を統一して準備する

画像を最適化してみよう

画像圧縮や変換をして、画像の容量や見え方の変化を確認してみよう

元画像ダウンロード(1.6 MB)

画像圧縮

TinyPNG – Compress WebP, PNG and JPEG images intelligently
オンライン上で、アップロードするだけで簡単に画像が圧縮できるサイト

  • 上記サイトで画像を圧縮して、圧縮前と圧縮後の「データ容量」「画像の見え方」を確認してみよう

画像変換

Squoosh
Google開発の軽量化ツールで、画質を確認しながらWebPに変換できる

  • 上記サイトで画像を「JPG」→「Webp」に変換して、それぞれの「データ容量」「画像の見え方」を確認してみよう

画像は1枚1MB以内に収めるのが理想

実務でよくあるNG例

写真をPNGで使う

写真をPNGで保存すると、ファイルサイズが大きくなるため、ページが重くなり表示速度が遅くなる

解決策

「WebP」「JPEG」形式にして、容量が大きい場合は画像圧縮しよう

画像にwidth・heightを指定しない

画像サイズを指定しないと、レイアウトが崩れたりページ読み込み中のガタつきが発生する

解決策

img タグに width="600" height="400" のように数値を書いておくと、読み込み中に画面がガタつかなくなる

<img src="./img/sample.jpg" width="600" height="400" alt="サンプル画像">

CSSに max-width: 100%; height: auto; をセットで書いておくと、スマホでもちゃんとはみ出さずに縮んでくれる

img {
  max-width: 100%;
  height: auto;
}

小さい画像を拡大する

小さな画像を無理に拡大すると画像がぼやけるため、サイト全体の品質が下がってしまう

解決策

「2倍サイズ」の画像を用意しよう（大きすぎると容量が増えて重くなるので、2倍にするのが一番綺麗でベストなバランス）

Webフォントの基礎

Webフォントとは、「インターネット上からフォントデータをダウンロードして表示させる仕組み」のこと

普通のフォントとの違い

  • 通常（デバイスフォント）
    ユーザーのパソコンやスマホに最初から入っているフォントが表示される
    入っていないフォントは表示できないので人によって見え方がバラバラになってしまう
  • webフォント
    サーバーからフォントを読み込むため、WindowsでもMacでもiPhoneでも全員に同じデザインを見せることができる

Webフォントはどの環境でも同じデザインで表示することができる

Google Fontsを使ってみよう

webフォントとして代表的なサービス「Google Fonts」を使ってみよう

① フォントを選んでコードをコピーする

Google Fonts のサイトに行って、使いたいフォントを探す

今回は「Sawarabi Mincho」というフォントを使用する

フォントを検索してページを開いたら、右上の「Get font」ボタンをクリック

「Get embed code」をクリック

右側に表示されたコードを次のステップで使います

② linkタグをHTMLの<head>の中に貼り付ける

「Embed code in the <head> of your html」のコードを貼り付けて、サーバーからフォントを読み込む

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">

<head>の閉じタグ直前くらいに入れればOK

③ CSSでフォントを指定する

「Sawarabi Mincho: CSS class」のコードをCSSに貼り付けて、フォントを反映させる

.sawarabi-mincho {
  font-family: "Sawarabi Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

font-family: "Sawarabi Mincho", serif;でフォントを指定できる（カンマ区切りで左から順に適用される）

クラス名やweightは変えてもOK

表示結果

春はあけぼの。やうやう白くなりゆく山ぎは、すこしあかりて、紫だちたる 雲のほそくたなびきたる。
夏は夜。月のころはさらなり。やみもなほ、蛍の多く飛びちがひたる。また、 ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。
秋は夕暮れ。夕日のさして山の端いと近うなりたるに、烏の寝どころへ行く とて、三つ四つ、二つ三つなど、飛びいそぐさへあはれなり。まいて雁などの つらねたるが、いと小さく見ゆるはいとをかし。日入りはてて、風の音、虫の 音など、はたいふべきにあらず。
冬はつとめて。雪の降りたるはいふべきにもあらず、霜のいと白きも、また さらでもいと寒きに、火など急ぎおこして、炭もて渡るもいとつきづきし。 昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし。
枕草子

表示速度と軽量化

Webサイトでは表示速度も重要な品質となる

画像が重いとどうなる？

  • ページ表示が遅くなる
  • ユーザーが離脱する
  • サイトの評価が下がる（検索しても上位に出てきにくくなる）

Webフォントの注意点

  • 読み込む種類を増やしすぎない
  • 太さを必要以上に指定しない

まとめ

今回のまとめ

  • 画像形式は用途によって使い分ける
  • Webフォントでサイトの印象は大きく変わる
  • 表示速度もWeb制作の重要な品質

次回の予定

webサイトに動きをつける言語「JavaScript」について学びます