ログ簿の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 で数字を見ながら育てるだけ。派手さより、読み進められる構成と迷わない導線を優先しました。