教材5 実践！AI活用Webサイト実装と最適化
3章：サイトを磨き上げる！AIサイト最適化
INDEX
目次
前の章に戻る 次の章に進む

3章：サイトを磨き上げる！AIサイト最適化

この章の目安学習時間：90分

この章で到達できるゴール：

  • Chrome DevToolsのLighthouseを使い、Webサイトのパフォーマンスを計測・評価できる。
  • AIの支援を受けながら、画像の最適化などを行い、サイトの表示速度を改善できる。

【3-1】サイトの健康診断：Lighthouseで計測する

目安の学習時間：30分

なぜサイトの表示速度が重要なのか？

Webサイトは、ただ作って終わりではありません。ユーザーに快適に使ってもらうためには、ページの表示速度が非常に重要です。
  • ユーザー体験の向上:
    ページの表示が遅いと、ユーザーは待ちきれずにサイトを閉じてしまいます（離脱）。特にスマートフォンのユーザーは、少しの遅延でもストレスを感じやすいと言われています。
  • ビジネス機会への影響:
    ECサイトであれば、表示速度の遅れは売上の低下に直結します。LPであれば、コンバージョン率（目標達成率）の低下につながります。
  • SEOへの影響:
    Googleなどの検索エンジンは、表示速度が速いサイトを高く評価する傾向にあります。つまり、表示速度は検索順位にも影響を与える重要な要素の一つです。
(37521)

ChromeのLighthouseで弱点を発見！

サイトのパフォーマンスを測定するために、Google Chromeに標準で搭載されているLighthouse（ライトハウス）というツールを使います。
Lighthouseは、Webページの品質を多角的に評価し、改善点をレポートしてくれる強力な「健康診断ツール」です。
操作手順
  1. ブラウザ上で右クリックし、「検証」を選択してデベロッパーツールを開く。
  2. デベロッパーツールのタブの中から「Lighthouse」を選択する。
(37526)

  1. 「デバイス」で「モバイル」が選択されていることを確認し、「ページ読み込みを分析」ボタンをクリックする。
(37529)

  1. 計測が始まり、しばらくするとパフォーマンススコアや改善点のレポートが表示される。
(37532)

レポートでは、以下の主要な指標がスコアとして表示されます。
まずは「パフォーマンス」のスコアと、その下の「改善できる項目」に注目しましょう。
  • Performance (パフォーマンス): 表示速度に関するスコア。
  • Accessibility (アクセシビリティ): 使いやすさ、見やすさに関するスコア。
  • Best Practices (ベストプラクティス): 推奨されるWeb標準に沿っているかのスコア。
  • SEO (検索エンジン最適化): 検索エンジンに見つけてもらいやすいかのスコア。

【3-2】AIと実践する高速化テクニック

目安の学習時間：30分

AIに聞く！画像の最適化と圧縮方法

Lighthouseのレポートで、ほぼ間違いなく指摘されるのが「サイズの大きな画像」の問題です。特に高画質な写真を使うファッション系のLPでは、画像の最適化がパフォーマンスに最も大きな影響を与えます。

考え方
Webで表示する画像は、必ずしも元データと同じ高画質である必要はありません。
人間の目にはほとんど分からないレベルで画質を少し落とし（圧縮）、ファイルサイズを劇的に小さくすることが可能です。

AIへの質問例
「Lighthouseで『適切にサイズ調整されていない画像』と指摘されました。Webサイトで使う画像を最適化するにはどうすればいいですか？JPEG, PNG, WebPといった画像形式の使い分けについても教えてください。」

AIは、以下のようなアドバイスをくれるはずです。
  • JPEG: 写真に適している。非可逆圧縮。
  • PNG: 背景が透明な画像や、色の数が少ないイラストに適している。可逆圧縮。
  • WebP: JPEGとPNGの両方の利点を持ち、より高い圧縮率を実現する次世代フォーマット。

計測結果を基にAIと改善策を練る

画像の最適化が完了したら、再度Lighthouseで計測してみましょう。
パフォーマンススコアが大幅に改善されているはずです。

Lighthouseレポートには、他にも様々な改善項目が提案されています。
例えば、「レンダリングをブロックするリソースの除外」といった専門的な項目が出てくることもあります。

このような意味が分からない項目こそ、AIに質問するチャンスです。

AIへの質問例
「Lighthouseで『レンダリングをブロックするリソースの除外』という改善項目が提案されました。これはどういう意味ですか？また、具体的にどうすれば改善できますか？」

AIに専門用語を翻訳させ、具体的な解決策のコードを提示させることで、一人では解決が難しい問題にも対処できるようになります。
また画像のように分析レポートをHTML形式でダウンロードして、GeminiなどのLLMに読み込ませて改善提案をもらうことも有効です。
(37542)

例えばこちらのサイトを分析してもらうとこのような回答が返ってきます。
ご提供いただいたLighthouseレポートを分析し、ウェブサイト（ `https://info2516354.wixsite.com/waterlandingpage` ）の
パフォーマンス、SEO、アクセシビリティを向上させるための改善アクションプランをご提案します。

### **総合評価**

レポートからは、特に**パフォーマンス**と**SEO**の領域で早急な改善が必要であることが示されています。
アクセシビリティは比較的問題が少ないものの、UX（ユーザーエクスペリエンス）向上のための改善点が存在します。

---

### **改善アクションプラン**

改善インパクトが大きく、緊急性の高い順にアクションプランを記載します。

#### **【最優先】SEO（検索エンジン最適化）に関する改善**

**現状の問題点：**
現在、このページは検索エンジンにインデックスされない設定になっており、検索結果に表示されません。
また、ページの概要を示すメタディスクリプションも設定されていません。

* **監査項目:**
    * ページのインデックス登録を行えません (is-crawlable): **スコア 0**
    * ドキュメントにメタ ディスクリプションが指定されていません (meta-description): **スコア 0**

**具体的なアクションプラン：**

1.  **`noindex` タグの削除:**
    * ページのHTMLヘッダー内にある `<meta name="robots" content="noindex" />` というタグを削除、
または `"index"` に変更してください。これにより、Googleなどの検索エンジンがページをクロールし、
検索結果に表示できるようになります。これは**最も緊急性の高い修正**です。
    * Wixエディタの「SEO設定」または「高度なSEO設定」から、ページのインデックス登録を許可する
オプションを有効にしてください。

2.  **メタディスクリプションの設定:**
    * ページのコンテンツを要約した、魅力的で分かりやすい説明文（120文字程度が目安）を
メタディスクリプションとして設定してください。これは検索結果ページでタイトルの下に表示され、
ユーザーのクリック率に大きく影響します。
    * **例:** 「天然水のウォーターサーバーをご家庭に。採水地から直送される新鮮でおいしいお水の魅力と、
お得な3日間お試しセットをご紹介します。」

---

#### **【優先度：高】パフォーマンスの改善**

**現状の問題点：**
ページの表示速度が遅く、特に最も大きなコンテンツが表示されるまで（LCP）に7.0秒かかっています。
これはユーザーの離脱に直結する大きな問題です。原因は、画像の読み込み、
使用していないJavaScriptやCSS、過大なDOMサイズなどが複合的に影響していると考えられます。

* **主要な低評価指標:**
    * Largest Contentful Paint (LCP): **7.0秒** (目標: 2.5秒以下)
    * First Contentful Paint (FCP): **3.0秒** (目標: 1.8秒以下)
    * Time to Interactive (TTI): **11.3秒** (目標: 3.8秒以下)
    * 過大なDOMサイズの回避 (dom-size): **スコア 0** (996要素)
    * JavaScript バンドル内の重複モジュールを削除する (duplicated-javascript): **スコア 0** (63 KiB 削減可能)
    * 使用していない JavaScript の削減 (unused-javascript): 97 KiB 削減可能

**具体的なアクションプラン：**

1.  **LCP（Largest Contentful Paint）の改善:**
    * **LCP要素の特定と最適化:** レポートによると、LCPの対象は
背景画像（`f364e9389d1848cc8f0ef4ab3fc0368a.jpg`）です。
        * **画像の圧縮:** この画像をWebPやAVIFのような次世代フォーマットに変換し、
ファイルサイズを削減してください。Wixでは多くの場合自動で最適化されますが、
アップロードする画像自体のサイズを小さくすることが有効です。
        * **適切なサイズ設定:** 表示されるサイズ以上に大きな画像を読み込まないように、
リサイズしてください。
        * **画像のプリロード:** 重要な背景画像は、HTMLの`<head>`内で`<link rel="preload">`
を使用して優先的に読み込むことを検討してください。

2.  **JavaScriptとCSSの最適化:**
    * **不要なコードの削減:** レポートでは、97KiBのJavaScriptと42KiBのCSSが使用されて
いないと指摘されています。
        * **Wixアプリの見直し:** 使用していない、または優先度の低いWixアプリや機能（ウィジェットなど）
を無効化または削除することで、不要なスクリプトの読み込みを削減できます。
        * **コード分割:** Wix Velo (開発者モード) を使用している場合、必要なコードだけを必要なタイミングで
読み込むようにコード分割を検討してください。

3.  **DOMサイズの削減:**
    * ページの要素数が996と多く、ブラウザの処理負荷を高めています。
        * **レイアウトの簡素化:** ページ内のセクション、ボックス、装飾要素などが過剰でないか
見直してください。非表示にしている要素もDOMには含まれるため、不要なものは完全に削除します。
        * **Wixアプリの整理:** 多くの要素を生成するアプリ（例：複雑なギャラリー、リストなど）は、
よりシンプルな代替手段を検討してください。

---

#### **【優先度：中】アクセシビリティとUI/UXの改善**

**現状の問題点：**
全体的なアクセシビリティスコアは高いですが、タップターゲットのサイズが小さく、
モバイルユーザーが操作しにくい箇所があります。

* **監査項目:**
    * タップ ターゲットのサイズや間隔は十分な大きさではありません (target-size): **スコア 0**

**具体的なアクションプラン：**

1.  **タップターゲットのサイズ調整:**
    * レポートで指摘されているスライドショーのナビゲーションボタン（`Slide 1`, `Slide 2`など）が小さすぎます。
    * Wixエディタ上で、これらのボタンのサイズを大きくするか、ボタン間の余白（マージン）を
広げて、ユーザーが誤操作なくタップできるように修正してください。
最低でも24px四方のタップ領域を確保することが推奨されます。

---

#### **その他のおすすめの方法**

1.  **サードパーティCookieへの対応:**
    * 12件のサードパーティCookieが検出されています。ChromeではサードパーティCookieのサポートが
段階的に廃止されます。サイトで使用しているWixアプリや外部サービスがこれに依存していないか確認し、
必要に応じて代替策を検討してください。
2.  **コンソールエラーの確認:**
    * Chrome DevToolsの「Issues」パネルに記録された問題を確認し、修正してください。
ブラウザエラーはサイトの予期せぬ動作につながる可能性があります。

### **まとめ**

まずは**SEOの`noindex`解除とメタディスクリプション設定**を最優先で行い、
検索結果に表示されるようにすることが不可欠です。

次に、**パフォーマンス改善**に着手し、特にページの顔となる**画像の最適化**と、
サイトの動作を重くしている**不要なJavaScript/CSS/DOM要素の削減**を進めてください。

これらの改善を順次行うことで、ユーザー体験が大幅に向上し、ビジネス目標の達成にも
繋がりやすくなります。定期的にLighthouseで計測し、改善の効果を確認することをお勧めします。
回答例

【3-3】3章 -章末課題- [あなたのLP高速化チャレンジ！]

目安の学習時間：30分

問題

この課題では、あなたが2章で実装したファッションブランド「LYNA」のLPを、
LighthouseとAIの力を借りてパフォーマンス改善に取り組みます。

プロジェクトで使用した画像は、デザインの質を保つために高画質なものが提供されていましたが、Web表示のためにはまだ最適化されていません。
このLPの表示速度を計測し、ボトルネックを特定・改善して、パフォーマンススコアをできるだけ高めてください。

解答手順

  1. 2章で作成した「LYNA」のLPプロジェクトの中から、index.htmlをローカルサーバーでブラウザで開きます。
  2. Lighthouseで計測し、最適化前のパフォーマンススコアと改善点を記録（スクリーンショット）します。おそらく「適切にサイズ調整されていない画像」が大きな改善点として指摘されるはずです。
  3. Lighthouseのレポートで指摘された画像（例：ヒーローセクションのメイン画像など）を、AIに推薦されたオンラインの圧縮ツール（Squoosh, TinyPNGなど）を使って最適化します。
  4. 圧縮してダウンロードした画像ファイルを、プロジェクトフォルダ内の元の画像ファイルと差し替え（上書き保存）ます。
  5. 最適化後のWebページを再度Lighthouseで計測し、パフォーマンススコアが改善したことを確認します。
  6. 最適化前と後のLighthouseのスコア比較画像を提出して、課題完了です。
最適化前
(37787)

(37788)

最適化後
(37790)

(37791)

これで「3章：サイトを磨き上げる！AIサイト最適化」の解説を終わります。
次の章に進みましょう。
前の章に戻る 次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH