リニューアル例：パーソナルジム（before / after）

スマホで読める画面に

Before は幅980pxのPC用の画面を、スマホでは約4割に縮小して表示します。文字によっては拡大しないと読めず、指でのスクロールや拡大を繰り返させます。After はスマホの幅に合わせて組み直し、拡大せずに読めるようにしました。

予約・電話をワンタップで

Before で予約につながるのは、電話番号の画像だけです。画像なのでスマホで押しても電話がかからず、番号を覚えて打ち直す手間がかかります。After は、開いてすぐの画面に「無料体験を予約する」ボタンを置き、スマホでは画面の下に「電話で予約」「無料体験を予約」を常に表示しました。電話は押すだけでかかります。

料金の目安を最初の画面に

Before は料金表がページの一番下にあり、スマホでは何度もスクロールしないと「いくらなのか」がわかりません。After は、予約ボタンの横に「月4,000円〜／入会金0円／初回体験無料」を出し、開いてすぐに目安がわかるようにしました。

表示を軽く

Before はトップの大きな写真スライダーが重く、写真が出るまでに時間がかかります。After は写真の形式とサイズを見直し、ページ全体の重さを半分以下にしました。

計測項目	Before	After
ページの重さ（転送量）	約2.2MB	約1.0MB
一番大きな要素が表示されるまで（LCP）	約2.3秒	約1.0秒

同じサーバーから、スマホ相当の画面・回線速度を絞った同じ条件で計測（2026年9月）。実際の数字は回線や端末によって変わります。

「止まって見える」情報を外す

2019年で止まった新着情報、アクセスカウンター、更新が止まったブログへのリンク。どれも「このジム、今もやっているのかな」と不安にさせます。After では、更新されない情報は載せない構成にしました。