AIO/LLMO対策講座⑫! ページの表示速度と使いやすさに問題はないか? 〜AIに選ばれやすいWebサイトにするためのセルフチェックガイド〜
13. ページの表示速度と使いやすさに問題はないか
AIO/LLMO対策では、コンテンツの内容だけでなく、ページの表示速度や使いやすさも重要です。
AIに情報を見つけてもらうためには、まずページが正しく表示され、ユーザーにとって読みやすい状態になっている必要があります。
どれだけ良い情報を書いていても、ページの表示が遅すぎたり、スマートフォンで読みにくかったり、問い合わせボタンが分かりにくかったりすると、ユーザーは途中で離脱してしまいます。
また、検索エンジンはページの品質を判断するときに、ユーザー体験も重視します。
AIO/LLMO対策というと、文章、FAQ、構造化データ、外部評価などに注目しがちですが、ページそのものが使いにくい状態では、せっかくの情報も十分に活用されません。
特に現在は、スマートフォンからWebサイトを見るユーザーが多くなっています。
パソコンでは見やすくても、スマートフォンでは文字が小さい、画像が大きすぎる、ボタンが押しにくい、フォームが入力しにくい、ということはよくあります。
AIに選ばれるWebサイトを目指すなら、人が読んでも使いやすいページにすることが基本です。
13-1. スマートフォンで読みやすいか
まず確認したいのは、スマートフォンでページが読みやすいかどうかです。
多くのユーザーは、スマートフォンで検索したり、SNSやAI検索からWebサイトを開いたりします。
そのため、スマートフォンでの見え方は非常に重要です。
確認すべきポイントは次のとおりです。
- 文字が小さすぎないか
- 行間が詰まりすぎていないか
- 左右にスクロールしないと読めない箇所がないか
- 画像が画面幅からはみ出していないか
- 表が読みにくくなっていないか
- ボタンが押しやすい大きさになっているか
- メニューが分かりやすいか
- ページ上部で何のページか分かるか
- 重要な情報にたどり着きやすいか
- 問い合わせや予約、購入などの導線が見つけやすいか
特に注意したいのは、表や比較表です。
料金表、プラン表、サービス比較表などは、パソコンでは見やすくても、スマートフォンでは横に長くなり、読みにくくなることがあります。
その場合は、スマートフォンではカード形式にする、項目を縦に並べる、重要な情報だけ先に要約するなどの工夫が必要です。
また、ファーストビューも重要です。
スマートフォンでページを開いたときに、最初に大きな画像だけが表示され、何のページか分からない状態になっていないか確認しましょう。
ページ上部には、次のような情報が分かりやすく表示されていると理想的です。
- 何を提供しているか
- 誰に向けた内容か
- どのような課題に答えるページか
- 次に何をすればよいか
スマートフォンで読みやすいページは、ユーザーにとって使いやすいだけでなく、AIや検索エンジンにとっても理解しやすい構造になりやすくなります。
13-2. 表示速度は遅くないか
ページの表示速度も重要です。
表示に時間がかかるページは、ユーザーが読む前に離脱してしまう可能性があります。
特にスマートフォンでは、通信環境によって表示速度が大きく変わります。
会社や店舗のWebサイトでは、デザインを良くするために大きな画像、スライダー、動画、外部スクリプト、Webフォントなどを多く使うことがあります。
これらは見た目を良くする一方で、ページの表示を遅くする原因になることがあります。
表示速度を確認するには、PageSpeed InsightsやGoogle Search Consoleなどのツールを使う方法があります。
確認したい主なポイントは次のとおりです。
- ページの読み込みに時間がかかりすぎていないか
- 大きすぎる画像がないか
- 不要なJavaScriptやCSSが多すぎないか
- ファーストビューの表示が遅くないか
- Webフォントの読み込みで表示が遅れていないか
- スマートフォンでの表示が遅くないか
- サーバーの応答が遅くないか
表示速度が遅い場合、まず見直したいのは画像です。
大きな画像をそのままアップロードしていると、表示速度に大きく影響します。
次のような対策が考えられます。
- 画像サイズを適切に圧縮する
- 必要以上に大きな画像を使わない
- WebPなどの軽量な画像形式を活用する
- ファーストビュー以外の画像は遅延読み込みにする
- スライダーの画像枚数を減らす
- 動画を自動再生しない
- 不要な外部スクリプトを減らす
表示速度は、ユーザー体験に直結します。
AIに選ばれるための情報を整えても、ユーザーがページを開く前に離脱してしまっては意味がありません。
まずは、ユーザーがストレスなく読める速度を目指しましょう。
13-3. 画像や動画が重すぎないか
Webサイトの表示速度を遅くする大きな原因の一つが、画像や動画です。
画像や動画は、商品やサービスの魅力を伝えるうえで重要です。
しかし、使い方を間違えると、ページが重くなり、ユーザーが離脱する原因になります。
特に注意したいのは、次のようなケースです。
- 高解像度の写真をそのままアップロードしている
- ファーストビューに大きな画像を複数使っている
- スライダーで何枚もの画像を読み込んでいる
- 動画を自動再生している
- 背景動画を使っている
- スマートフォンでもパソコン用の大きな画像を読み込んでいる
- 画像内に文字を入れすぎている
- alt属性が設定されていない
画像や動画は、見た目の印象を良くするために役立ちます。
ただし、AIO/LLMO対策の観点では、画像や動画だけに情報を頼りすぎないことが大切です。
重要な情報は、画像や動画の中だけでなく、本文テキストとしても書いておきましょう。
また、画像にはalt属性を設定します。
alt属性とは、画像の内容を説明する代替テキストです。
画像が表示されない場合や、スクリーンリーダーを使う場合、また検索エンジンが画像の内容を理解する場合の手がかりになります。
ただし、alt属性にキーワードを詰め込む必要はありません。
画像の内容を自然に説明します。
例:
悪い例:
alt="サービス 料金 おすすめ 安い 人気"
良い例:
alt="初回相談の流れを説明するスタッフ"
良い例:
alt="月額プランと単発利用プランの比較表"
また、画像に文字を入れる場合は、同じ内容を本文にも書いておきましょう。
たとえば、キャンペーン画像に「初回相談無料」と書いている場合、本文にも「初回相談は無料です」と明記します。
画像や動画は、伝えるための手段です。
しかし、AIや検索エンジンに正しく理解してもらうためには、テキスト情報との組み合わせが重要です。
13-4. フォームやボタンは使いやすいか
Webサイトの目的が、問い合わせ、予約、購入、資料請求、申し込みなどである場合、フォームやボタンの使いやすさは非常に重要です。
どれだけ良いコンテンツでユーザーを集めても、最後の入力フォームが使いにくければ、離脱してしまいます。
AI検索や生成AIから流入したユーザーも、最終的にはWebサイト上で何らかの行動を取ります。
そのとき、フォームやボタンが分かりにくいと、せっかくの流入を成果につなげられません。
確認すべきポイントは次のとおりです。
- 問い合わせボタンが見つけやすいか
- ボタンの文言が分かりやすいか
- スマートフォンで押しやすい大きさか
- フォームの入力項目が多すぎないか
- 必須項目が分かりやすいか
- エラー表示が分かりやすいか
- 送信前に内容確認ができるか
- 送信後に完了したことが分かるか
- 個人情報の取り扱いが説明されているか
- 電話、メール、フォームなど複数の連絡手段があるか
ボタンの文言も重要です。
たとえば、単に「送信」「クリック」「こちら」と書くよりも、次のように具体的にしたほうが分かりやすくなります。
- 無料相談を申し込む
- 料金について問い合わせる
- 資料をダウンロードする
- 予約状況を確認する
- 見積りを依頼する
- サービス内容について相談する
- 申し込み前の質問をする
このように、ボタンを押すと何ができるのかを明確にします。
また、フォームの項目は必要最小限にすることも大切です。
最初の問い合わせ段階で、あまりに多くの情報を求めると、ユーザーは途中で離脱しやすくなります。
本当に必要な項目だけに絞り、詳しい内容は後から確認する方法も検討しましょう。
フォームやボタンの使いやすさは、AIO/LLMO対策の最後の受け皿です。
AIに見つけてもらったあと、ユーザーが行動しやすい状態を整えておきましょう。
13-5. Core Web Vitalsを確認しているか
Core Web Vitalsは、Googleが示しているページ体験に関する重要な指標です。
主に、ページの読み込み速度、操作への反応、表示の安定性などを確認するためのものです。
代表的な指標には、次のようなものがあります。
- LCP
- INP
- CLS
LCPは、ページの主要なコンテンツが表示されるまでの時間を示す指標です。
ファーストビューの大きな画像やメインコンテンツの表示が遅いと、LCPが悪化しやすくなります。
INPは、ユーザーの操作に対してページがどれだけ速く反応するかを示す指標です。
JavaScriptが重いページや、ボタンを押しても反応が遅いページでは問題が出ることがあります。
CLSは、ページの読み込み中にレイアウトがどれだけズレるかを示す指標です。
たとえば、ページを読もうとした瞬間に画像や広告が後から読み込まれて、本文やボタンがズレるような状態です。
このようなズレは、ユーザーにとって大きなストレスになります。
Core Web Vitalsを確認するには、次のような方法があります。
- PageSpeed Insightsで確認する
- Google Search Consoleで確認する
- Lighthouseで確認する
- 実際のスマートフォンで表示を確認する
特に大切なのは、ツールの点数だけを見るのではなく、実際のユーザー体験を確認することです。
たとえば、点数が悪くなくても、スマートフォンで見たときに文字が小さい、ボタンが押しにくい、フォームが使いにくいということはあります。
逆に、点数だけを追いかけすぎて、必要な画像や説明を削りすぎるのもよくありません。
表示速度と情報の分かりやすさのバランスが大切です。
AIO/LLMO対策では、AIに情報を読んでもらうことだけでなく、AI経由で訪れたユーザーが快適に利用できる状態を作ることが重要です。
ヒニアラタ編集部 監修: 馬庭 吾以千
ヒニアラタ編集部では地方の中小企業様のWeb活用をお手伝いするため、私たちが持っている専門知識を「コラム」という形で分かりやすく公開しています。 私たち自身が地方の企業であるからこそ分かること、感じることがあると思っています。