開発Tips

ログ簿のLPを作った — セクションで語る構成と、1つのURLで最適ストアへ送る導線

ゲームのデイリーをまとめて記録するアプリ「ログ簿」のランディングページ(LP)を作りました。既存の Go/Echo サーバから html/template で配信する構成です。作るうえで意識した「見せ方」と「導線」を残します。

セクションで順番に価値を見せる

LP は、上から順に読むだけで「どんなアプリか」が伝わるように、セクションごとに役割を分け、背景色を交互に切り替える構成にしました。

  • Hero(つかみ)
  • Interaction(操作の楽しさ / 濃い背景)
  • Customization(カスタマイズ / 白背景)
  • Statistics(統計 / 薄いグレー)
  • Dark Mode(ダークモード対応の紹介 / 白背景)
  • Features(機能一覧のグリッド)

背景色を交互にすることで、スクロールしたときに「話題が切り替わった」ことが視覚的に伝わります。フォントサイズは clamp() で流体的に指定し、スマホから広い画面まで破綻なくスケールさせています。

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }

1つのURLで最適なストアへ送る

LP のダウンロード導線で工夫したのが、アクセス端末に応じてストアを振り分ける1本のURLです。/service/logbo/download にアクセスすると、User-Agent を見て

  • iOS 系 → App Store
  • Android → Google Play
  • それ以外(PC 等)→ LP 本体

へ 302 リダイレクトします。SNS やチラシに「1つのURL」を載せるだけで、iPhone の人も Android の人も、それぞれのストアに着地できます。判定ロジックは Go 側の純粋関数に切り出し、テーブルドリブンで単体テストしています。

iPadOS の Safari は既定で UA が Mac 相当になるため、この簡易判定では PC 扱い(LP)になります。ここは仕様として許容しました。

アクセス解析でLPを育てる

公開しただけで終わりにしないため、Google Analytics(GA4) を導入し、どのページがどれだけ見られているかを計測できるようにしました。数字を見て、コピーや導線を継続的に直していく前提です。canonical も含め、正規ドメイン(sma-ss.com)で一貫して配信しています。

まとめ

LP は「情報を全部載せる」より、セクションで順番に価値を見せる方が伝わります。そしてダウンロード導線は、端末判定で1つのURLに集約すると配布がぐっと楽になります。あとは GA で数字を見ながら育てるだけ。派手さより、読み進められる構成と迷わない導線を優先しました。