🩹
Web制作
整体院LP「ひより整体接骨院」— スマホ表示改善Before/After
架空の整体・接骨院「ひより整体接骨院」のLPを、あえてスマホ表示が崩れた状態(Before)と、技術的に修正した状態(After)の2バージョンで用意した実績サンプル。文章・情報量は両バージョンで揃え、表示面の改善だけを比較できるようにしている。
デモを開く ↗🔓 架空の整体院を想定したサンプルです。/before で意図的に崩したスマホ表示、/after でその修正版を確認できます。ランサーズ・クラウドワークスの「既存LP/HPのスマホ表示改善」案件への提案時に添える実績サンプルとして制作しました。
なぜ作ったか
ランサーズの実案件データを実測したところ、「ホームページ制作」カテゴリの中には提案数211件という極端な激戦案件がある一方、「既存LPのスマホ表示改善・デザイン修正」を名指しで求める求人も一定数見られた。フルリニューアルより小さい単価帯で受注しやすく、かつ技術的な説得力が要る領域のため、Before/Afterで直接見せられる実績を用意した。
直した箇所(実測)
Manusで生成した直後に、Playwrightで375px幅の自動チェックを行い、以下を確認・修正した。
- viewportメタタグの追加(PC幅固定になっていたのを解消)
- 横幅固定レイアウトによる横スクロールの解消(修正後は横スクロール0件を確認)
- 文字サイズが小さすぎて読めなかった箇所の拡大
- 電話番号リンクのタップ領域が25×16pxしか無かったものを、44×44px以上に拡大(フッターに大きい電話ボタンも追加)
- 画像がスマホ幅からはみ出していたのを、幅に収まるよう修正
- ナビゲーションメニューをスマホで機能するハンバーガーメニューに変更
画面
訴求ポイント
- 「直しました」ではなく、何が・どう崩れていて・何を直したかを数値と箇条書きで説明できる
- Before/Afterを同じ文章量・同じ情報設計のまま比較できるので、発注者にとって差分が分かりやすい
- 電話番号ボタンのタップ領域のように、見た目では気づきにくい改善点まで実測して直している