工務店のホームページのLCP・CLSを改善して検索評価を上げる方法

結論から言うと、工務店のホームページが「ある程度のコンテンツを揃えているのに検索順位が伸びない」という状態の多くは、LCP（表示速度）とCLS（レイアウトのズレ）というページ品質指標が足を引っ張っているケースです。

Googleは2021年から「コアウェブバイタル」をランキング要因として正式に採用しています。LCPとCLSはその中核をなす指標で、スコアが低いページはコンテンツが良くても検索評価で不利になります。特に工務店のホームページは、施工事例の大きな画像や動画を多用する構造上、これらのスコアが悪化しやすい。「なぜか上位に出ない」と悩む前に、まずここを確認する必要があります。

📋 この記事でわかること

1. LCP・CLSとは何か、工務店HPでなぜ重要なのか
2. 現状スコアを無料ツールで確認する方法
3. LCPを改善するための具体的な3ステップ
4. CLSを改善するための具体的な3ステップ

こんな方におすすめ

• ✅ ホームページはあるのに検索順位がなかなか上がらない工務店の社長
• ✅ 施工事例ページを充実させたのに問い合わせが増えない方
• ✅ SEO対策として記事を書いているが手応えがない方
• ✅ ページの表示が遅い・スマホで見づらいと感じている方
• ✅ コアウェブバイタルという言葉は聞いたことがあるが、何をすればいいかわからない方

LCP・CLSとは何か、工務店のHPに関係する理由

LCP（Largest Contentful Paint）は、ページを開いたとき「一番大きなコンテンツ（画像やテキスト）」が表示されるまでの時間を指します。Googleは2.5秒以内を「良好」と定めており、4秒を超えると「要改善」と評価されます。

工務店のHPでよく見られるパターンとして、トップページに高解像度の外観・内観写真をそのままアップしているケースがあります。撮影データをそのまま使うと1枚あたり3〜8MBになることも珍しくなく、スマートフォンで閲覧したときにLCPが10秒を超えてしまうことがあります。Googleからすると「ユーザー体験が悪いページ」として評価が下がる一因になります。

CLS（Cumulative Layout Shift）は、ページ読み込み中に要素がズレる「がたつき」の量を数値化したものです。0.1以下が「良好」とされています。画像のサイズを指定しないまま掲載すると、読み込みの途中でテキストや問い合わせボタンが突然下にズレる現象が起きます。読者が「電話する」ボタンをタップしようとした瞬間にズレが発生して別のリンクを押してしまう、という体験はCLSが高い状態の典型例です。

この2つの指標は「ユーザーが快適にページを使えるか」を測るもので、Googleがランキングに組み込む理由は明確です。問い合わせを増やすために良質なコンテンツを積み上げても、ページ品質がボトルネックになっていれば土台が崩れていることと同じです。

なお、コアウェブバイタルに関連する技術的な基礎については工務店のコアウェブバイタル（表示速度指標）を改善する具体策でも詳しく解説しています。あわせて参照してください。

まず現状を把握する：スコア確認の手順

改善に着手する前に、自社のスコアを数値で確認しましょう。Googleが提供している無料ツールを使えば、エンジニアでなくても確認できます。

確認 STEP 1

PageSpeed Insightsでスコアを確認する

Google PageSpeed Insights（https://pagespeed.web.dev/）にアクセスし、自社のURLを入力して「分析」をクリックします。モバイルとデスクトップそれぞれのLCP・CLSスコアが数値で表示されます。まずモバイルのスコアを優先して確認してください。住宅検討中のユーザーの多くはスマートフォンで検索しているため、モバイルのスコアがそのまま検索評価に直結します。

⚠️ よくある失敗：デスクトップのスコアだけを見て「問題ない」と判断してしまうこと。工務店サイトのスマホスコアは、デスクトップより大幅に低いことが多いため、モバイルを必ず確認してください。

確認 STEP 2

Googleサーチコンソールでページ単位の状況を確認する

サーチコンソールの左メニューから「ウェブに関する主な指標」を開くと、自社サイト内で「要改善」「不良」に分類されているURLが一覧で表示されます。施工事例ページや特定のランディングページに問題が集中していることが多く、優先的に修正すべきページを特定できます。

⚠️ よくある失敗：サーチコンソールにサイトを登録していない、またはデータが少なくてレポートが空の状態のままにしていること。まだ登録していない場合は先に設定を完了させてください。

✓ ここまでのポイント

• LCPは2.5秒以内、CLSは0.1以下がGoogleの「良好」基準。工務店サイトはどちらも悪化しやすい構造を持っている。
• PageSpeed InsightsとGoogleサーチコンソールで現状スコアを確認してから改善に着手すること。
• 確認はデスクトップではなく「モバイル」を優先すること。

LCPを改善する3つのステップ

LCPの主な原因は「画像が重い」「サーバーの応答が遅い」「レンダリングブロックが多い」の3つです。工務店サイトで特に効果の大きい順に説明します。

LCP改善 STEP 1

画像をWebP形式に変換し、サイズを最適化する

WordPressを使っている場合、「Imagify」や「ShortPixel」などのプラグインを使うと、既存の画像を一括でWebP形式に変換できます。WebPはJPEGと比較して同じ画質でもファイルサイズが25〜35%小さくなるとGoogleの公式ドキュメントに記されています。加えて、アップロード前に画像の横幅を1,200〜1,600px程度に揃えておくと効果的です。スマートフォンの画面幅は最大でも430px前後なので、4,000px超の撮影データをそのまま使う必要はありません。

⚠️ よくある失敗：プラグインを入れただけで設定を変更せず、新しくアップロードする画像が変換されないままになること。プラグインの「自動最適化」設定を必ず有効にしてください。

LCP改善 STEP 2

ファーストビュー画像に「fetchpriority」属性を指定する

ページを開いたときに最初に見える画像（トップページのメイン画像など）は、ブラウザに「最優先で読み込んでほしい」という指示を与えることができます。WordPressのテーマによっては管理画面から設定できますが、難しい場合はテーマのカスタマイズや子テーマで対応します。技術的に難しい場合は後述する改善サポートを検討してください。この対策だけで LCPが0.5〜1秒改善するケースもあります。

⚠️ よくある失敗：すべての画像に指定してしまうこと。「最優先」が増えれば効果は薄れます。ページごとに最初に見える1枚だけに絞ること。

LCP改善 STEP 3

キャッシュプラグインとCDNを導入してサーバー応答を速くする

「WP Super Cache」「W3 Total Cache」などのキャッシュプラグインを導入すると、ページの生成処理を省略して表示を高速化できます。加えて、Cloudflare（無料プランあり）のようなCDN（コンテンツデリバリーネットワーク）を組み合わせると、日本全国のユーザーに対して最寄りのサーバーからコンテンツを配信できるようになり、応答速度が改善されます。

⚠️ よくある失敗：複数のキャッシュプラグインを同時に有効にして競合が発生し、ページが崩れること。キャッシュ系プラグインは必ず1つに絞ってください。

「ホームページの問い合わせが増えない理由を『コンテンツが足りない』と思い込んでいる社長が多いですが、実際に診断してみると、ページが遅すぎて読者が離脱してしまっているケースが半数近くあります。中身より先に、器の状態を確認することが先決です。」

ハワードジョイマン（中小企業診断士・工務店集客支援専門コンサルタント）

CLSを改善する3つのステップ

CLSは「がたつき」を減らすための対策です。工務店サイトで特に起きやすいパターンに絞って説明します。

CLS改善 STEP 1

すべての画像に幅・高さを明示する

HTMLまたはWordPressの画像ブロックで、画像の幅（width）と高さ（height）を必ず指定します。これを指定しておくと、ブラウザが画像を読み込む前にスペースを確保してくれるため、表示中のズレを防げます。特に施工事例ページに複数の写真を並べている場合、この対策だけでCLSが大幅に改善することがあります。WordPressでメディアをアップロードする際、サイズを指定してから挿入する習慣をつけるだけで対応できます。

⚠️ よくある失敗：横幅だけ指定して高さを省略すること。高さが未指定だと読み込み時のズレを防ぎきれません。縦横どちらも指定することが必要です。

CLS改善 STEP 2

Webフォントの読み込みに「font-display: swap」を設定する

デザイン性を高めるために外部Webフォントを使用している場合、フォントが読み込まれるまでの間にテキストが「見えない→突然表示」と切り替わり、その周囲の要素がズレる現象が起きます。CSSに「font-display: swap」を指定すると、フォントが読み込まれるまでの間はシステムフォントで表示し、フォント読み込み後にスムーズに切り替えるよう設定できます。これによりCLSを抑制できます。

⚠️ よくある失敗：Google Fontsを使っている場合、URLパラメーターに「&display=swap」を追加するだけで対応できるのに、気づかずにいること。まずフォントの読み込みURLを確認してください。

CLS改善 STEP 3

バナー・チャットウィジェット・クッキー同意バーの動作を見直す

ページ読み込み後に「問い合わせはこちら」のバナーや、チャットボット、クッキーの同意ポップアップが突然出現すると、その分だけ他の要素が押し下げられてCLSが上昇します。これらを使う場合は「最初から表示される領域を確保した設計にする」か、「スクロール後に出現するタイミングをずらす」設定に変更することでCLSへの影響を最小化できます。特に問い合わせボタン周辺でのズレは、問い合わせ機会のロスに直結するため優先的に見直してください。

⚠️ よくある失敗：ウィジェットの設定を導入した業者任せにしたまま、ページ品質への影響を確認していないこと。導入後にPageSpeed Insightsで再測定する習慣を持ってください。

「紹介だけに頼らなくていい仕組みができて、経営が安定した」

（工務店経営者・50代）

この言葉をいただいたのは、ホームページの技術的な問題を一つひとつ整理した後、検索経由での問い合わせが安定して入るようになった工務店の社長からです。コンテンツを整える前に、まずページが正しく評価される状態にすることが、集客の仕組みづくりの土台になります。

また、ページ品質の改善はSEOだけでなく、訪問者が「この会社に相談してみよう」と感じるまでの体験全体に影響します。工務店のホームページにE-E-A-Tを示してAIに信頼される会社になる方法と組み合わせると、検索評価と信頼構築の両面から強化できます。

改善後に確認すべきこと・次のステップ

LCPとCLSを改善した後は、2週間〜1か月ほど待ってからPageSpeed InsightsとGoogleサーチコンソールで再測定してください。Googleのクローラーがページの変化を検知して評価を更新するまでに時間がかかるためです。

スコアが改善されたら、次に確認すべきは「改善後にコンバージョン（問い合わせ）が増えているか」です。LCP・CLSはあくまでページ品質の指標であり、問い合わせを増やすための条件整備に過ぎません。問い合わせボタンの位置や導線設計、信頼を伝えるコンテンツの充実といった要素と組み合わせて、はじめて月5件以上のHP問い合わせという目標に近づきます。

技術的な改善と並行して、ホームページ全体の構造を見直したい方は工務店のホームページのURL設計とカテゴリ構造の作り方も参考にしてください。ページ品質・構造・コンテンツが揃ったとき、初めてGoogleからの安定的な評価につながります。

私自身、15年以上・1,000店舗以上の集客支援を通じて実感してきたことがあります。「いい家を建てているのに選ばれない」と悩む工務店の社長の多くは、技術力や人柄に問題があるのではなく、ホームページが正しく評価されていないことが根本原因です。LCP・CLSの改善は地味な作業ですが、それが問い合わせという成果に直結する土台づくりになります。

静岡市清水区を拠点に、全国の工務店社長をオンラインでサポートしています。月〜土（日・祝休業）でご相談を受け付けています。