LP改善・画像最適化・SVGアニメーション制作

朝、競合のLPを5件並べてスクロールしてみたら、自分のページが「写真なし、情報なし、ボタンだけ」の状態で止まっていることに気づいた。そこからギャップ分析を書き出し、一日かけてLPを作り直した。

競合分析とギャップ分析

地域密着のサービス業で上位表示されているLPを並べて、構成要素を比較した。競合が共通して持っていたのは、料金表、サービス一覧、ご利用の流れ、FAQ、実績写真。自分のLPにはそのどれもなかった。

分析結果をマークダウンにまとめて改善計画を作成し、そこから一つずつ潰していった。

現場で撮ったDSC画像14枚、合計216MB。そのまま載せるわけにはいかないので、ImageMagickで一括処理した。

# リサイズ + 圧縮（1920px → 1280px、品質調整）
magick input.jpg -resize 1280x -quality 80 output.jpg

14枚すべてをリネーム・リサイズ・CRF圧縮して、1枚あたり262KB〜573KBに収めた。元の216MBから数MBまで落ちた。ファイル名もDSC連番から用途が分かる名前に変更した（外観、在庫棚、作業風景、車両、車載機材など）。

ギャップ分析で洗い出した不足セクションを一気に追加した。

写真は単にギャラリーにまとめるのではなく、各セクションの文脈に合わせて配置した。サービス一覧には作業風景、会社概要には外観写真、といった具合に。

ページ内リンク付きのヘッダーナビゲーションを追加した。モバイルではハンバーガーメニューに切り替わる。

さらにモバイル固定CTAバーを設置。画面下部に常時表示される電話発信ボタンで、スクロール位置に関係なくワンタップで電話できるようにした。

ここに一番時間を使った。軽トラのSVGを描いて、走行アニメーションをつけた。

最終的にヘッダーへのトラック配置は削除した。ファーストビューの情報密度が上がりすぎて、視線が散っていた。アニメーションは目を引くが、それが「電話をかける」というアクションから注意を逸らしていた。

現場の動画素材（C0133.MP4）から、見栄えのいい1:42〜1:48の6秒間を切り出した。

ffmpeg -i C0133.MP4 -ss 00:01:42 -t 6 -c:v libx264 -crf 28 output.mp4

621KBに収まった。静止画だけのページに動きが加わり、実際の作業の雰囲気が伝わるようになった。

会社概要セクションには具体的な情報を入れた。営業時間、定休日、代表者名、所在施設の案内。ユーザーが「ここに頼んで大丈夫か」を判断するための材料を揃えた。

朝に競合LPを並べて眺めたとき、自分のページの「何もなさ」が目に飛び込んできた。一日かけて写真・セクション・ナビゲーション・動画を詰め込んで、ようやくスタートラインに立った感覚がある。

SVGアニメーションに3時間ほど費やして結局ヘッダーからは外した。作ること自体は楽しかったし、SVGのパス操作やCSSアニメーションの手触りを掴めた。ただ「目を引く」と「行動を促す」は別物で、ファーストビューではCTAに視線を集中させる方が正解だった。

ImageMagickとffmpegの一括処理は、一度パイプラインを組んでしまえば速い。216MBの写真群が数分で数MBになるのを見ると、手動リサイズしていた過去の自分に教えてやりたくなる。