---
title: "lazy loadingとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AI生成サイトやHTML共有を使う非エンジニア向けに、lazy loadingの意味・動作・誤解しやすい点を具体例つきで解説。表示速度の問題を自己診断できるようになる記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-lazy-loading-html-share"
markdown: "https://giga-site.com/articles/what-is-lazy-loading-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# lazy loadingとは？HTML共有・AI生成サイトでの意味をやさしく解説

AIツールで生成したHTMLをチームや取引先に共有する際、ページの読み込み速度が体験を左右します。lazy loadingはその速度改善に直結する概念ですが、「設定したつもりが効いていない」「共有URLで画像が遅い」と悩む非エンジニアも多くいます。この記事では仕組みと現場での注意点をわかりやすく整理します。

> Source HTML: https://giga-site.com/articles/what-is-lazy-loading-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

lazy loadingとは「必要になるまで読み込みを後回しにする」仕組みです。HTMLで`<img loading="lazy">`と書くだけで、画面外にある画像はスクロールしてユーザーが近づいたタイミングで初めて取得されます。最初の表示が速くなるため、ページを開いた瞬間の印象が大きく改善します。

AIが生成したHTMLにはデフォルトでこの属性が付かないケースがあります。画像が多いランディングページや製品カタログを共有する前に、ソースコードを確認して`loading="lazy"`が各imgタグに含まれているか確認しましょう。付いていなければ一括置換で追加できます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

ギガサイト便のようなサービスでHTMLをURLに変換して配布すると、受け取った相手はモバイル回線で閲覧するケースが多くあります。lazy loadingが有効なら画像10枚のページでも初回データ転送量を70%以上削減できることがあり、「重くて開けない」という連絡を防げます。

複数ページにわたるHTMLを一括ZIPで共有する場合、各ページのファーストビューに使うロゴや見出し画像にはあえて`loading="eager"`（デフォルト）を残し、下部の参考画像だけlazy化するとバランスよくなります。最初の1〜2枚まで遅延対象にするとLCP（最大コンテンツ描画）の数値が悪化します。

## よくある誤解

「lazy loadingをつければページが軽くなる」は半分正解です。画像ファイル自体が高解像度のまま4MBあれば、遅延読み込みしても取得時に時間がかかります。lazy loadingは「いつ読むか」を制御するだけで、「何を読むか」のサイズ最適化（WebPへの変換など）とは別の施策です。

「動画やiframeには効かない」と思われがちですが、`<iframe loading="lazy">`も現代ブラウザでは動作します。埋め込みマップや他社サービスのウィジェットをHTMLに入れているなら、iframeにも同じ属性を追加してください。ただしSafariの対応バージョンに差があるため、共有先が古いiOSを使っている場合は事前確認が必要です。

## 安全に使うための注意点

lazy loadingを設定しても、画像のURLが外部の認証なしサーバーを向いていれば誰でも直接アクセスできます。社内資料の画像はHTMLと同じ共有サービス上に配置するか、署名付きURLを使って期限を設けましょう。「ページのURLはパスワード付きなのに画像だけ誰でも見られた」というケースは実際に起こります。

修正後に差し替える際は、ブラウザのキャッシュがlazy loadingと組み合わさって古い画像を表示し続ける場合があります。確認時はシークレットモードを使うか、URLにバージョンパラメータ（例：`?v=2`）を追加して確実に新しいファイルを取得させましょう。

## よくある質問

### lazy loadingを設定すると、共有URLで相手がページを開いたとき画像が表示されないことはありますか？

ファーストビューの画像にlazy loadingを設定した場合、ブラウザが表示判定をする前に描画されずに見えないことがあります。ヒーロー画像など最初に見える要素にはeagerを指定してください。

### AIが生成したHTMLのimgタグにloading属性がなかった場合、どう追加すればいいですか？

テキストエディタのメモ帳やVSCodeで`<img`を検索し、`<img loading="lazy"`に一括置換する方法が簡単です。ただしファーストビューの画像は除外することを忘れずに対応してください。

### スマートフォンのブラウザでもlazy loadingは動作しますか？

iOS Safari 15.4以降、Android Chrome 76以降で対応しています。2023年以降に発売された端末であればほぼ問題ありませんが、法人端末で古いOSを使っている場合は事前に確認が必要です。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "lazy loadingとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "AI生成サイトやHTML共有を使う非エンジニア向けに、lazy loadingの意味・動作・誤解しやすい点を具体例つきで解説。表示速度の問題を自己診断できるようになる記事です。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-lazy-loading-html-share",
  "url": "https://giga-site.com/articles/what-is-lazy-loading-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "lazy loadingを設定すると、共有URLで相手がページを開いたとき画像が表示されないことはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ファーストビューの画像にlazy loadingを設定した場合、ブラウザが表示判定をする前に描画されずに見えないことがあります。ヒーロー画像など最初に見える要素にはeagerを指定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "AIが生成したHTMLのimgタグにloading属性がなかった場合、どう追加すればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "テキストエディタのメモ帳やVSCodeで`<img`を検索し、`<img loading=\"lazy\"`に一括置換する方法が簡単です。ただしファーストビューの画像は除外することを忘れずに対応してください。"
      }
    },
    {
      "@type": "Question",
      "name": "スマートフォンのブラウザでもlazy loadingは動作しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iOS Safari 15.4以降、Android Chrome 76以降で対応しています。2023年以降に発売された端末であればほぼ問題ありませんが、法人端末で古いOSを使っている場合は事前に確認が必要です。"
      }
    }
  ]
}
```