施工事例を追加するたびに、ホームページの表示が遅くなる。
特に建設会社、工務店、リフォーム会社では、完成写真、施工前後の比較、工事中の様子、図面など、実績を伝えるために多くの画像が必要です。
表示速度を優先して写真を減らせば、技術力や仕上がりが伝わりません。反対に、高解像度写真をそのまま並べれば、スマートフォンでページが開くまで時間がかかります。
解決策は、施工事例を削ることではありません。
画像のサイズ、形式、読み込む順番、ページ構成を制作段階で決め、写真を多く掲載しても重くなりにくいホームページを作ることです。
施工写真を多く見せたい場合は、デザインだけでなく、画像圧縮、表示速度、スマートフォン表示まで制作範囲に含まれるかを確認して依頼先を選んでください。
施工事例を減らすと会社選びの材料まで減る
施工事例は、単なる写真集ではありません。
見込み客が会社を比較するときに確認する、具体的な判断材料です。
施工事例から確認される内容には、次のものがあります。
- どのような工事を得意としているか
- 自分の希望に近い仕上がりがあるか
- 建物の規模や価格帯が合っているか
- デザインの方向性が好みに合うか
- 施工前の問題をどう解決したか
- 対応できる建物や設備の種類
- 現場を丁寧に管理しているか
- 実際に仕事を受けている会社か
写真が少なすぎると、文章で「豊富な実績」「高い技術力」と書いても根拠が伝わりません。
特に、完成後の見た目が契約判断に影響する業種では、施工写真そのものが営業資料になります。
表示速度を理由に事例を数件まで減らすのではなく、必要な写真を軽く届ける構造を作る必要があります。
ホームページが重くなる主な原因は写真の枚数だけではない
写真が100枚あるサイトでも、適切に処理されていれば快適に閲覧できます。
一方、写真が10枚しかなくても、元データのまま掲載すれば重くなることがあります。
Googleも、画像はページ全体のデータ量の中で大きな割合を占めることが多く、高品質と高速表示を両立するために画像最適化とレスポンシブ画像を使うよう案内しています。
施工事例ページが遅くなる主な原因は、次の7つです。
高解像度の写真をそのままアップロードしている
一眼レフや新しいスマートフォンで撮影した写真は、ホームページ上で必要なサイズより大きいことがあります。
画面では横幅800ピクセル程度で表示しているのに、元の5000ピクセルを超える写真を読み込んでいる状態です。
表示上は小さく見えても、読み込むデータ量は元画像に近いまま残ります。
PNGを写真に使っている
PNGは、ロゴ、図、透過画像などに向いている形式です。
色数の多い施工写真をPNGで保存すると、JPEGやWebPよりファイルサイズが大きくなる場合があります。
すべての画像を同じ形式にせず、画像の用途に応じて分けます。
1ページに全写真を並べている
施工事例一覧ページに、すべての案件と写真を表示すると、最初のアクセスで大量のデータを読み込みます。
一覧ページに必要なのは、各案件を判断できる代表写真です。
詳細写真は、個別の施工事例ページで表示します。
パソコンとスマートフォンで同じ大きな画像を読み込んでいる
スマートフォンの小さな画面に、パソコン用の大きな画像を配信すると、必要以上のデータ通信が発生します。
画面幅に合わせて異なる画像サイズを配信するレスポンシブ画像を使えば、表示環境に合ったデータを読み込ませられます。
画面外の画像まで最初に読み込んでいる
ページを開いた瞬間に見えるのは、上部の数枚だけです。
画面下部にある数十枚まで最初から読み込む必要はありません。
遅延読み込みを使えば、利用者がページをスクロールして画像へ近づいたときに読み込みを開始できます。主要ブラウザでは、画像の遅延読み込みをブラウザ標準の仕組みで設定できます。
スライドショーや演出を入れすぎている
自動で切り替わる大型スライダー、背景動画、複雑なアニメーションは、画像以外のデータや処理も増やします。
施工写真を目立たせるための演出が、閲覧開始を遅らせている場合があります。
WordPressの機能を追加しすぎている
施工事例、予約、SNS表示、アクセス解析、セキュリティーなど、必要になるたびに機能を追加すると、読み込むプログラムが増えます。
使用していない機能や重複する機能を残さず、公開時に必要なものへ絞ることが重要です。
写真を削らず軽くする4つの基本設計
施工事例を多く見せたいホームページでは、公開後に一枚ずつ修正するのではなく、最初から画像運用のルールを作ります。
1．掲載場所ごとに画像サイズを決める
同じ施工写真でも、掲載場所によって必要な大きさは異なります。
| 掲載場所 | 画像の役割 | 必要な処理 |
|---|---|---|
| トップページ | 代表的な実績を見せる | 大きく見せつつ容量を抑える |
| 施工事例一覧 | 案件を選んでもらう | 小さなサムネイルを使う |
| 施工事例詳細 | 仕上がりを詳しく見せる | 画面幅に合わせて最適化 |
| ビフォーアフター | 変化を比較する | 2枚のサイズと比率を統一 |
| スマートフォン | 小さな画面で閲覧する | 端末向けの小さい画像を配信 |
| OGP画像 | SNSで共有する | 指定比率に合わせて別途作成 |
「施工写真はすべて横幅2000ピクセル」のように一括で決めるのではなく、使う場所から逆算します。
2．画像ごとに適切な形式を使う
主な形式の使い分けは次のとおりです。
| 画像の種類 | 適した形式の例 |
|---|---|
| 施工写真 | JPEG、WebP、AVIF |
| ロゴ | SVG、PNG |
| 透過が必要な画像 | PNG、WebP |
| 単純な図やアイコン | SVG |
| アニメーション | 動画または用途に合った形式 |
WebPなどの新しい形式は、画質を保ちながらファイルサイズを抑えやすい特徴があります。
ただし、形式を変えるだけで必ず速くなるわけではありません。
元画像の大きさ、圧縮率、表示サイズも一緒に調整します。
3．画面外の写真を後から読み込む
施工事例ページでは、最初に表示される代表写真を優先して読み込みます。
その下にある写真は、スクロールに合わせて読み込む設計にします。
ただし、ファーストビューにある重要なメイン画像まで遅延読み込みすると、かえって表示が遅く感じられる場合があります。
次のように分けます。
- 最初に見えるメイン画像は優先的に読み込む
- 画面下の施工写真は遅延読み込みにする
- 一覧ページは代表写真だけ表示する
- 詳細画像は個別ページで読み込む
- 動画は操作されるまで読み込みを抑える
遅延読み込みは、すべての画像へ機械的に設定するのではなく、表示順に合わせて使います。
4．施工事例を案件ごとに分割する
一つの長いページへ全案件を載せず、一覧ページと詳細ページに分けます。
一覧ページに載せる情報
- 代表写真
- 工事名
- 工事種別
- 地域
- 建物の種類
- 短い説明
- 詳細ページへのリンク
詳細ページに載せる情報
- 完成写真
- 施工前の状況
- 顧客の要望
- 提案内容
- 使用した材料や設備
- 工事期間
- 担当者のコメント
- ビフォーアフター
- 関連する施工事例
- 問い合わせ導線
この構成なら、一覧ページを軽く保ちながら、個別案件では必要な写真を十分に見せられます。
施工事例一覧は「アルバム」ではなく検索画面にする
案件数が多い場合、写真を時系列で並べるだけでは目的の事例を探しにくくなります。
施工事例一覧には、利用者が自分に近い案件へ移動できる分類を用意します。
分類に使える項目
- 新築
- リフォーム
- 戸建て
- マンション
- 店舗
- オフィス
- 外装
- 屋根
- 水回り
- エクステリア
- 地域
- 価格帯
- 建物の広さ
- デザインテイスト
分類を細かくしすぎると、選択肢が増えて使いにくくなります。
問い合わせ時に顧客が使う言葉を基準に、主要な分類だけを表示します。
たとえば、社内では「改修工事」「修繕工事」と分類していても、顧客が「外壁塗装」「水回りリフォーム」と探しているなら、顧客の言葉を優先します。
ビフォーアフター写真は同じ条件でそろえる
ビフォーアフターは、施工技術を直感的に伝えられる一方、撮り方が違うと変化が伝わりません。
次の条件をそろえます。
- 撮影位置
- カメラの高さ
- 画角
- 写真の向き
- 明るさ
- トリミング比率
- 表示サイズ
施工前は横向き、施工後は縦向きという組み合わせでは、ページ上の余白や高さも不揃いになります。
撮影時点から同じ構図を意識し、ホームページ掲載時には同じ比率へ整えます。
また、比較画像を一枚の大きな画像へ合成する方法と、別々の画像として表示する方法があります。
| 表示方法 | 利点 | 注意点 |
|---|---|---|
| 1枚に合成 | 配置が崩れにくい | スマホで文字が小さくなりやすい |
| 2枚を横並び | 各写真を大きく見せられる | スマホでは縦並びになる |
| 切り替え表示 | 変化を比較しやすい | 操作方法を分かりやすくする必要がある |
| スライダー比較 | 同じ位置の変化が伝わる | 読み込みや操作性の確認が必要 |
見た目の派手さより、変化が分かる方法を選びます。
施工写真は画質を落とせば軽くなるわけではない
画像圧縮と画質低下は同じではありません。
必要以上に大きな画像を適正サイズへ縮小し、用途に合った形式と圧縮率に調整すれば、見た目を大きく崩さずに容量を減らせます。
避けたいのは、次の両極端です。
元画像をそのまま掲載する
- 読み込みが遅い
- スマートフォンの通信量が増える
- ページ全体が重くなる
- 管理画面の容量を圧迫する
- バックアップにも時間がかかる
過度に圧縮する
- 細部が潰れる
- 壁材や木目がぼやける
- 暗部にノイズが出る
- 仕上がりが安っぽく見える
- 拡大時に粗さが目立つ
建築写真では、素材感、線の直線性、照明、色味なども判断材料になります。
容量だけを目標にせず、施工品質が伝わる画質を残します。
トップページに載せる施工事例は絞る
トップページへ全案件を並べる必要はありません。
トップページの役割は、会社の強みを短時間で理解してもらい、関心のあるページへ案内することです。
掲載する施工事例は、次の基準で選びます。
- 今後増やしたい工事
- 利益率の高い工事
- 会社の強みが表れた工事
- 写真の品質が高い工事
- 問い合わせが多い工事
- 地域性を示せる工事
- 競合との差が分かる工事
トップページには3～6件程度の代表事例を置き、残りは施工事例一覧へ誘導します。
同じ種類の写真ばかりではなく、会社が対応できる範囲と得意分野が分かる組み合わせにします。
写真だけでなく施工内容を文章で残す
写真だけの施工事例は、見た目は華やかでも、検索や比較に必要な情報が不足します。
各案件には、最低限次の内容を追加します。
- 工事の種類
- 建物の種類
- 施工地域
- 工事前の悩み
- 顧客からの要望
- 提案した内容
- 使用した材料や商品
- 工事期間
- 工夫した点
- 完成後の変化
文章があることで、写真では分からない技術や対応力を伝えられます。
また、「外壁塗装」「店舗改装」「キッチンリフォーム」など、利用者が検索する具体的な言葉を自然に掲載できます。
写真ファイルの名前や代替テキストも、内容が分かる形にします。
「IMG_4821.jpg」ではなく、案件を識別できる名前で整理すれば、管理もしやすくなります。
表示速度はスコアだけで判断しない
PageSpeed Insightsなどの測定ツールは、問題を見つけるために役立ちます。
ただし、点数だけを上げることがホームページの目的ではありません。
GoogleのCore Web Vitalsは、読み込み性能、操作への反応、表示の安定性という実際の利用体験を測る指標です。Googleは良好な目安として、主要内容の表示を測るLCPを2.5秒以内、操作への反応を測るINPを200ミリ秒未満と案内しています。
確認する項目は次のとおりです。
- スマートフォンで最初の画面がすぐ見えるか
- 大きな施工写真が遅れて表示されないか
- 読み込み中にボタンや文章が動かないか
- 施工事例一覧をスムーズにスクロールできるか
- 写真を押したときすぐ反応するか
- 問い合わせボタンを操作できるか
- 低速な通信環境でも内容を確認できるか
制作会社の高速な回線だけで確認せず、実際の利用者に近いスマートフォン環境でもテストします。
Search ConsoleのCore Web Vitalsレポートでは、実際の利用データをもとにページの状態を確認できます。
新規制作時に決めておく施工事例の更新ルール
公開時に高速でも、その後の更新で大きな画像を追加し続ければ重くなります。
納品時に、施工事例を追加する手順を決めます。
決めておきたい項目
- 写真の最大サイズ
- 推奨する縦横比
- 1案件あたりの写真枚数
- 画像形式
- 画像の圧縮方法
- ファイル名の付け方
- 代表写真の選び方
- カテゴリーの選び方
- 文章の入力項目
- 公開前の確認担当者
WordPressの投稿画面も、必要な情報を決まった欄へ入力できるようにすると運用しやすくなります。
たとえば、施工地域、工事種別、期間、費用帯を専用欄として用意すれば、案件ごとに書き方がばらつきません。
制作会社へ確認する10項目
施工写真を多く掲載するホームページを依頼するときは、デザイン案だけで決めないでください。
見積もり前に次の項目を確認します。
- 画像圧縮は制作範囲に含まれるか
- スマートフォン用の画像を最適化するか
- WebPなどの画像形式へ対応するか
- 遅延読み込みを設定するか
- 施工事例一覧と詳細ページを分けられるか
- カテゴリーや絞り込みを設定できるか
- 自社で施工事例を追加できるか
- 画像追加用のマニュアルがあるか
- 公開前に表示速度を確認するか
- Search Consoleやアクセス解析の設定範囲
「SEO対応」と記載されていても、画像処理や速度確認がどこまで含まれるかはサービスごとに異なります。
具体的な作業内容を確認してください。
このサービスでは、WordPressによる完全オリジナルデザイン、画像圧縮、表示速度の向上、スマートフォン最適化、SEO対策、問い合わせフォーム、更新マニュアルなどをまとめて相談できます。
施工事例を多く掲載する場合は、現在保有している写真枚数、今後の更新頻度、必要なカテゴリーを事前に伝え、6ページの基本構成内でどこまで対応できるか見積もりを確認してください。
初回相談で伝える内容
施工事例の見せ方と表示速度を両立させるには、写真を渡すだけでは足りません。
相談時に次の情報を伝えます。
- 業種
- 主な工事内容
- 今後増やしたい工事
- 現在保有している施工事例数
- 1案件あたりの写真枚数
- 写真の撮影機材
- 新しい事例の追加頻度
- 必要なカテゴリー
- ビフォーアフターの有無
- 動画や図面を掲載するか
- 自社で更新するか
- 公開希望時期
- 参考にしたいホームページ
- 予算
「写真をたくさん載せたい」だけでなく、「月に2件追加する」「各案件10枚程度」「戸建てと店舗で分類したい」のように数字で伝えると、必要な構造を判断しやすくなります。
制作前に施工写真を整理する方法
大量の写真を一度に制作会社へ送ると、採用する写真の判断に時間がかかります。
案件ごとにフォルダを分けます。
フォルダ構成の例
- 01_戸建て外壁塗装_大阪市
- before
- after
- process
- main
- 02_店舗内装_堺市
- before
- after
- process
- main
- 03_キッチン改修_東大阪市
- before
- after
- process
- main
各案件の「main」フォルダには、一覧ページで使いたい代表写真を入れます。
さらに、テキストファイルや表計算に次の情報をまとめます。
- 案件名
- 地域
- 工事種別
- 工期
- 要望
- 提案内容
- 使用材料
- 公開できない情報
- 掲載許可の有無
写真の選定と文章作成を同時に進めやすくなります。
まとめ
施工事例を多く掲載するホームページでは、写真を削ることが高速化の唯一の方法ではありません。
次の設計を組み合わせれば、実績を十分に見せながら重さを抑えられます。
- 掲載場所に合った画像サイズへ調整する
- 用途に合った画像形式を使う
- スマートフォン用の画像を配信する
- 画面外の写真を遅延読み込みする
- 一覧ページと詳細ページを分ける
- 案件をカテゴリーで整理する
- トップページには代表事例だけ載せる
- 更新時の画像ルールを作る
施工写真は、技術力や対応範囲を伝える重要な営業材料です。
画質を大きく落としたり、掲載件数を減らしたりする前に、画像の容量と読み込み方を見直してください。
新規制作を依頼する場合は、見た目のデザインだけでなく、施工事例を継続して追加しても重くなりにくい構造まで含めて相談することが重要です。
