gram / webアプリLPページ制作

制作概要

自社で開発・運営している温湿度モニタリングSaaS「gram」のランディングページを制作しました。

「SwitchBotの公式アプリでは複数台の比較ができない」という課題を持つユーザーに、gramを正しく届けるためのページです。機能説明にとどまらず、「なぜgramが必要か」を伝える構成と言葉を設計しました。

課題と目的

gramは機能として尖っているサービスですが、「SwitchBotユーザーが困っていること」を知らない人が見ても刺さりません。ターゲットを「SwitchBot温湿度センサーを複数台持っていて、部屋をまたいだ比較をしたい人」に絞り込み、そのペルソナが「これは自分のためのサービスだ」と感じられるコピーと構成を意識しました。

技術スタック

• フレームワーク: Astro
• CMS: microCMS（コラムセクションのコンテンツ管理）
• デプロイ: Cloudflare Pages

設計で工夫した点

1. ペルソナを絞り込んだコピーライティング

キャッチコピーは「複数のSwitchBot温湿度計をまとめて見やすくグラフ化。」と、ターゲットユーザーが検索・共感しやすいキーワードをそのまま使う設計にしました。「便利です」ではなく「あなたの困りごとを解決します」と伝えることを優先しています。

2. 競合比較セクションによる差別化の明示

公式アプリとgramの違いを比較表で明示するセクションを設けました。「公式アプリでは1台ずつしか見られない」「過去データが消える」という課題を表の左列に置き、gramの解決策を右列で対応させる構成です。訪問者が「自分の悩みが解決できる」と判断しやすくしています。

3. ページ構成によるコンバージョン導線

ページの流れは「課題提起 → 機能紹介 → 活用場面 → 競合比較 → 料金 → FAQ → CTA」の順で設計しました。ユーザーの不安を段階的に解消しながら、無料登録への意欲が最も高まるタイミングでCTAを配置しています。

4. Astro + microCMSによる軽量・更新しやすい構成

コラムセクションはmicroCMSで管理し、エンジニアなしで記事の追加・更新ができる構成にしました。それ以外のページはAstroで静的生成し、表示速度を最大限に確保しています。

「gram」LPページへ