第6回: 画像形式の使い分けとWebフォント
この回の目標
- jpg / png / svg / webp の違いを説明できる
- 適切な画像形式を選べる
- Webフォントを正しく読み込める
- 見た目と表示速度を意識したページが作れる
フォントと画像はサイトの印象を決める
同じデザインでも、
- 画像が荒い
- フォントが読みづらい
それだけで 信頼感は大きく下がります。
逆に、
- 高品質な画像
- 適切なフォント
を使うだけでサイトのクオリティは大きく向上します
Web制作では「デザイン素材の質」も非常に重要
画像形式の種類
Web制作でよく使う画像形式
- jpg
- png
- svg
- webp
| 画像形式 | 特徴 | 用途 |
|---|---|---|
| JPG |
|
|
| PNG |
|
|
| SVG |
|
|
| WebP |
|
最近のWeb制作では主流 |
まとめ
- 写真 → jpg / webp
- ロゴ → png / svg
- アイコン → svg
画像の内容によって最適な形式を選ぶ
③ 実務でよくあるNG例
写真をPNGで使う
写真をPNGで保存するとファイルサイズが大きくなる
結果
- ページが重くなる
- 表示速度が遅くなる
画像にwidth・heightを指定しない
画像サイズを指定しないと
- レイアウトが崩れる
- ページ読み込み時にガタつく
小さい画像を拡大する
小さな画像を無理に拡大すると画像がぼやけます。
サイト全体の品質が下がります。
画像の実装テクニック
imgタグの基本
<img src="image.jpg" alt="商品画像">
alt属性は画像の内容を説明するテキストです。
レスポンシブ対応
img {
max-width: 100%;
height: auto;
}
これを指定すると
- 親要素の幅に合わせて縮小
- レスポンシブ対応
⑤ Webフォントの基礎
Webフォントとは、Web上から読み込むフォント
通常のフォントはユーザーのPCに依存しますが、
Webフォントはどの環境でも同じデザインで表示できます。
font-familyの指定順
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
左から優先的に適用されます。
Google Fontsを使ってみよう
① Google Fontsでフォントを選ぶ
② linkタグをheadに貼る
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
③ CSSで指定
body {
font-family: "Noto Sans JP", sans-serif;
}
⑦ 表示速度と軽量化
Webサイトでは表示速度も重要な品質
画像が重いとどうなる？
- ページ表示が遅くなる
- ユーザーが離脱する
- SEO評価が下がる
Webフォントの注意点
- 読み込む種類を増やしすぎない
- 太さを必要以上に指定しない
軽さ＝ユーザー体験です。
この回のまとめ
- 画像形式は用途によって使い分ける
- max-width: 100%; は必須
- Webフォントでサイトの印象は大きく変わる
- 表示速度もWeb制作の重要な品質