モバイル対応と表示速度──スマホで相談する依頼者を逃さない

スマホで法律相談を探す依頼者の実態

法律相談のスマホ閲覧比率──70%以上がモバイル経由

法律相談に関する検索の大半は、スマートフォンから行われています。一般的なBtoCサイトのスマホ閲覧比率は60〜70%とされていますが、法律相談はそれをさらに上回る傾向があります。理由は明確で、法律トラブルを抱えた方が「誰にも知られず」相談先を探す場面を想像すると理解できます。

夜中にベッドの中で離婚について検索する、職場の休憩時間に債務整理の方法を調べる、電車の移動中に交通事故の示談について確認する──こうした場面では、パソコンではなくスマートフォンが使われます。秘匿性と緊急性が高い法律相談では、スマホからのアクセスが70%を超えることも珍しくありません。

にもかかわらず、小規模事務所のWordPressサイトでは、制作時のまま画像が最適化されていなかったり、使っていないプラグインが大量に残っていたりして、スマホでの表示速度が遅いケースが目立ちます。せっかく検索で見つけてもらっても、ページが表示される前に離脱されてしまえば、問い合わせにはつながりません。

表示速度と離脱率の関係──3秒ルールの根拠

Googleが公開した調査によると、モバイルページの読み込みが1秒から3秒に遅くなると、直帰率（そのページだけ見て離脱する割合）が32%増加します。さらに5秒まで遅くなると、直帰率は90%も増加するという結果が出ています（出典: Google「Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed」・2017年）。

つまり、3秒以内に表示できなければ、訪問者の3人に1人を余計に失うことになります。法律相談の場面では、1件の問い合わせが数十万円の案件につながる可能性があることを考えると、表示速度の改善は集客効率に直結する施策です。

読み込み時間	直帰率の増加	影響
1秒→3秒	32%増加	訪問者の約3人に1人が余計に離脱
1秒→5秒	90%増加	訪問者の大半がページを見ずに離脱
1秒→6秒	106%増加	離脱率が2倍以上に悪化
1秒→10秒	123%増加	ほぼ表示されないのと同じ状態

（出典: Google「Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed」・2017年）

自サイトの表示速度を計測する──PageSpeed Insightsの使い方

PageSpeed Insightsでの計測手順

まず、自サイトの現状を正確に把握するところから始めましょう。Googleが無料で提供している「PageSpeed Insights」を使えば、表示速度とモバイル対応の状態を数値で確認できます。手順は3ステップです。

1. ブラウザで「PageSpeed Insights」（pagespeed.web.dev）にアクセスする
2. 自サイトのURLを入力して「分析」ボタンを押す
3. 結果画面の上部にある「モバイル」タブを選び、スコア（0〜100）を確認する

スコアは0〜100の数値で表示され、90以上が「良好」、50〜89が「改善が必要」、49以下が「不良」と判定されます。小規模事務所のWordPressサイトでは、モバイルスコアが40〜60程度にとどまっていることが多く、画像やプラグインの最適化だけでスコアが大きく改善する余地があります。

スコアと主要指標（LCP・CLS・FID）の読み方

スコアの下には、具体的な指標が表示されます。特に重要なのは以下の3つです。これらはGoogleがページの使いやすさを評価する際の基準（Core Web Vitals）として採用しているものです。

指標	何を測るか	良好	要改善	不良
LCP（最大コンテンツ描画時間）	メイン画像やテキストが表示されるまでの時間	2.5秒以下	2.5〜4.0秒	4.0秒超
CLS（累積レイアウトシフト）	読み込み中にレイアウトがずれないか	0.1以下（出典: Google Web Vitals基準）	0.1超	大幅なずれあり
INP（次のペイントまでの応答時間）	ボタンを押してから画面が反応するまでの時間	200ms以下	200〜500ms	500ms超

LCPは「ページの見た目が整うまでの時間」、CLSは「読み込み中に文字やボタンがガクガクずれないか」、INPは「タップしてすぐ反応するか」をそれぞれ測定しています。法律事務所サイトでは、大きな写真の読み込みが遅くてLCPが悪化するケースと、広告や画像の遅延読み込みによりレイアウトがずれてCLSが悪化するケースが特に多く見られます。

「問題のある項目」「改善できる項目」の優先順位

計測結果の下部には「問題のある項目」と「改善できる項目」がリストで表示されます。すべてを一度に対応する必要はありません。まずは「問題のある項目」に表示された赤い項目から着手し、次にオレンジの警告に取り組むのが効率的です。

問題	影響	難易度	対応方法
適切なサイズの画像を使用する	LCP悪化	低	画像のリサイズ・圧縮
次世代フォーマットで画像を配信する	LCP悪化	低	WebP形式への変換
レンダリングを妨げるリソースの除外	表示全体の遅延	中	不要なCSS・JavaScriptの整理
使用していないJavaScriptの削除	INP悪化	中	不要プラグインの削除
画像要素に幅と高さが明示されていない	CLS悪化	低	画像にwidth・height属性を追加

この表のとおり、画像に関連する問題は難易度が低く、改善効果も大きいため、最優先で取り組むべき項目です。次のセクションで、画像最適化の具体的な手順を解説します。

画像の最適化──表示速度改善の最優先項目

画像が遅い原因──デジカメ写真をそのままアップロードしていないか

表示速度を悪化させる最大の原因は、画像ファイルのサイズです。法律事務所サイトでよくあるのが、サイト制作時にデジタルカメラやスマートフォンで撮影した高解像度の写真をそのままアップロードしているケースです。最近のスマートフォンで撮影した写真は1枚あたり3〜5MB以上になることも珍しくなく、これがトップページに数枚載っているだけで、ページの読み込みに何秒もかかる原因になります。

事務所の外観写真、弁護士のプロフィール写真、相談室の写真──これらはサイトの信頼感を高めるために重要ですが、Webに掲載する際は適切なサイズに縮小・圧縮する必要があります。見た目の品質を保ちながらファイルサイズを大幅に削減することは、正しい手順を踏めば難しくありません。

画像圧縮の手順（WordPress編）──プラグインとサイズの目安

WordPressサイトでの画像最適化は、プラグインを使えば既存の画像も含めて一括で処理できます。代表的なプラグインは「EWWW Image Optimizer」で、インストール後に「一括最適化」を実行するだけで、メディアライブラリ内の全画像を圧縮してくれます。

画像サイズの目安は以下のとおりです。この基準に合わせてリサイズ・圧縮すれば、見た目の品質を保ちながら表示速度を大きく改善できます。

用途	推奨横幅	推奨ファイルサイズ	形式
トップページのメイン画像	1600px以下	200KB以下	WebPまたはJPEG
記事内・ページ内の画像	800px以下	200KB以下	WebPまたはJPEG
弁護士プロフィール写真	800px以下	200KB以下	WebPまたはJPEG
アイコン・ロゴ	必要最小限	数十KB以下	SVGまたはPNG

EWWW Image Optimizerの設定では、「メタデータを削除」にチェックを入れておくと、撮影日時やカメラの機種情報などの不要なデータも除去され、さらにファイルサイズが軽くなります。新しい画像をアップロードする際にも自動で圧縮されるため、一度設定すれば継続的に効果を発揮します。

WebP形式への変換──さらに軽量化する方法

WebPは、Googleが開発した画像形式で、JPEGと比べて同じ見た目の品質でファイルサイズを約30%削減できます。現在の主要なブラウザ（Chrome、Safari、Edge、Firefox）はすべてWebPに対応しているため、互換性の問題はほぼありません。

EWWW Image Optimizerでは、設定画面の「WebP」タブで「WebP変換」を有効にするだけで、既存の画像も新規の画像も自動的にWebP形式で配信されるようになります。サーバー側で対応ブラウザにのみWebPを返し、非対応ブラウザにはJPEGを返す仕組みが自動で組まれるため、閲覧者側で問題が起きることはありません。

新しく画像をアップロードする際は、あらかじめパソコン上でリサイズ（横幅800px以下）してからWordPressにアップロードする習慣をつけましょう。アップロード後にプラグインが圧縮とWebP変換を自動処理してくれるため、二重の最適化が行われます。

WordPressサイトの速度改善3ステップ

STEP1: キャッシュプラグインの導入

キャッシュとは、一度生成したページの内容を保存しておき、次のアクセス時にはその保存データをそのまま返す仕組みです。WordPressは通常、アクセスのたびにデータベースからデータを取得してページを生成しますが、キャッシュを使えばこの処理を省略でき、表示速度が大幅に改善されます。

代表的なキャッシュプラグインである「WP Super Cache」は、設定が比較的シンプルで、小規模事務所のサイトに適しています。インストール後の基本設定は以下の2点です。

• 「キャッシング利用」をオンにする（ページキャッシュの有効化）
• 「ブラウザキャッシュ」タブで有効化する（訪問者のブラウザにも一時データを保持させる）

この設定だけで、2回目以降のアクセスでは体感できるほど表示が速くなります。ただし、ページの内容を更新した際にはキャッシュをクリアする必要がある点にご注意ください。WP Super Cacheでは、管理画面の「キャッシュの削除」ボタンで手動クリアできます。

STEP2: 不要なプラグインの整理

WordPressのプラグインは、有効化しているだけでCSS（デザイン情報）やJavaScript（動作プログラム）を読み込みます。使っていないプラグインが10個、20個と残っていると、それだけで表示速度に影響が出ます。

法律事務所サイトで見かけることの多い、削除を検討すべきプラグインの例を挙げます。

• 使っていないSEO分析プラグイン（複数のSEOプラグインが重複していることがある）
• ソーシャルメディア共有ボタンのプラグイン（事務所サイトでは利用頻度が低い）
• スライダー（画像を切り替えて表示する機能）のプラグイン（表示速度への悪影響が大きい）
• アクセスカウンターや統計プラグイン（Google アナリティクスがあれば不要）
• 長期間更新されていないプラグイン（セキュリティリスクにもなる）

管理画面の「プラグイン」一覧で、有効化しているが実際には使っていないものを確認しましょう。不要と判断したプラグインは「無効化」してから「削除」します。判断に迷う場合は、まず「無効化」だけにとどめて、サイトの表示に問題がないか数日間確認してから削除するのが安全です。

STEP3: フォント・CSS・JavaScriptの軽量化

WordPressテーマの中には、日本語Webフォント（たとえばNoto Sans JP）を読み込んでいるものがあります。日本語フォントはファイルサイズが大きく（フル版で数MB）、表示速度に大きく影響します。対策として、以下のいずれかを検討しましょう。

• system-ui（端末に標準搭載されたフォント）に変更する──追加のフォント読み込みが不要になる
• サブセット化する──実際に使う文字だけを含む軽量版のフォントファイルを用意する
• 「font-display: swap」を設定する──フォントの読み込み中もテキストを先に表示する

CSS（デザイン情報）とJavaScript（動作プログラム）については、テーマやプラグインが個別に読み込むファイルを結合・圧縮する方法があります。「Autoptimize」というプラグインを導入し、「CSS」「JavaScript」の最適化をそれぞれ有効にすると、複数のファイルが1つにまとめられ、読み込み回数が減って速度が向上します。

ステップ	作業内容	難易度	改善効果	注意点
STEP1	キャッシュプラグインの導入と設定	低	大	更新時にキャッシュクリアが必要
STEP2	不要プラグインの無効化と削除	低	中〜大	無効化→動作確認→削除の順で安全に
STEP3	フォント・CSS・JavaScriptの軽量化	中	中	表示崩れがないか公開前に確認

3つのステップは上から順に取り組むのが効率的です。STEP1とSTEP2は専門知識がなくても対応でき、それだけでPageSpeed Insightsのスコアが大きく改善するケースも少なくありません。

モバイルでの見やすさを確認する──レスポンシブデザインのチェックポイント

文字サイズ・ボタンサイズ──指でタップできるか

表示速度が改善しても、スマートフォンで文字が小さすぎて読めなかったり、ボタンが小さすぎてタップしづらかったりすれば、問い合わせにはつながりません。モバイルでの使いやすさ（ユーザー体験）を左右する具体的な数値基準があります。

本文の文字サイズは16px以上を確保してください。14px以下になると、スマートフォンの画面ではピンチ操作（指2本で拡大）をしないと読めない大きさです。ボタンやリンクのタップ領域は、44px×44px以上がGoogleの推奨値です（出典: Google「Accessible tap targets」）。「お問い合わせ」ボタンや「電話する」ボタンが小さすぎないか、実際にスマートフォンで確認しましょう。

項目	推奨値	確認方法	よくある問題
本文の文字サイズ	16px以上	スマホで実際に閲覧	14px以下で拡大しないと読めない
ボタンのタップ領域	44px×44px以上	指で押して反応するか確認	ボタンが小さすぎて押し間違える
リンク同士の間隔	十分な余白	隣り合うリンクを誤タップしないか	フッターのリンクが密集している
ナビゲーション	ハンバーガーメニュー	メニューの開閉と項目選択	メニューが画面外にはみ出す
電話番号	タップで発信可能	電話番号をタップして確認	画像で掲載されておりタップ不可

確認作業は、Chromeブラウザの「デベロッパーツール」を使うと、パソコンからもスマートフォンの画面を再現できます。Chromeで自サイトを開き、F12キー（Macの場合はCommand＋Option＋I）を押してデベロッパーツールを開き、左上のスマートフォンアイコンをクリックするとモバイル表示に切り替わります。

電話番号のタップ発信──スマホ最重要のCTA

法律事務所サイトにおいて、スマートフォンからの最も重要なアクション導線（CTA）は電話番号のタップ発信です。「まずは電話で相談したい」という依頼者にとって、番号をタップするだけで発信できることは、問い合わせのハードルを大きく下げます。

電話番号がタップ発信に対応しているかを確認し、未対応の場合はHTMLのリンク設定を修正してください。サイト制作を外注した場合も、この設定が正しくされているかは必ず確認しましょう。ヘッダー・フッター・問い合わせセクションなど、電話番号が表示されるすべての箇所で、スマートフォンからタップして発信できることを確認してください。

まとめ──モバイル対応と速度改善で問い合わせを逃さない

この記事で学んだこと──計測・画像・WordPress・モバイルUX

この記事では、法律事務所サイトのモバイル対応と表示速度の改善について、4つのステップで解説しました。

1. PageSpeed Insightsで自サイトの現状を計測し、LCP・CLS・INPの数値で問題を把握する
2. 画像の圧縮・リサイズ・WebP変換で、表示速度を改善する最優先項目に取り組む
3. キャッシュプラグインの導入、不要プラグインの整理、フォント・CSS・JavaScriptの軽量化でWordPressサイト全体を高速化する
4. 文字サイズ・ボタンサイズ・電話番号のタップ発信など、モバイルでの使いやすさをチェックする

法律相談の依頼者の70%以上がスマートフォンからアクセスしている現状では、モバイル対応と表示速度の改善は、問い合わせ数に直結する重要な施策です。まずはPageSpeed Insightsでの計測から始め、画像の最適化、WordPress設定の見直しと順番に進めてください。

なお、キジラクのサイト診断機能（※WordPressのみ対応）を使えば、モバイル対応や表示速度に関する問題点を自動で検出し、優先順位つきの改善リストを確認できます（キジラク調べ・抽出日: 2026-07-14）。また、専門サイト制作代行を利用すれば、最初からモバイル最適化された状態でサイトを構築することも可能です。

次のステップ──サイト上でE-E-A-Tを示す

この記事でモバイル対応と表示速度の改善方法を学びました。サイトの構成・導線・信頼要素・速度が整ったら、次はGoogleがYMYL（お金や健康に関わる）領域で特に重視する「E-E-A-T（経験・専門性・権威性・信頼性）」をサイト上でどう示すかが課題になります。

次の記事「サイト上でE-E-A-Tを示す方法」では、法律事務所サイトならではのE-E-A-T実装方法を解説します。弁護士としての経験や実績を、検索エンジンと依頼者の双方に伝えるための具体的な方法を学びましょう。