WorksWebアプリ

OshiLock ランディングページ

自社アプリ OshiLock のLPを企画・デザイン・実装。CVRを意識した構成と訴求設計

サイトを見る
OshiLock ランディングページ

何を目的としたLPか

アプリのダウンロードだけに絞る

OshiLockのLPは、App Storeへの導線を作ることだけを目的に設計した。説明が多すぎると離脱する。情報が足りないと信頼されない。その間で「このアプリなら使いたい」と思ってもらえる量と順序を意識した。

コンテンツ構成の考え方

「後追いしていませんか?」から始める

最初のセクションでは課題を描いた。友達のストーリーで初めてポップアップを知った、チケット先行を見逃した——こういった具体的な場面を、チャット形式のビジュアルで表現した。「そうそう、これだ」という共感が、次のスクロールにつながる。

続いて解決策、機能紹介、他サービスとの比較、料金、CTAという順で流した。「なぜ必要か」が腑に落ちてから「どう使うか」を見せる。この順序がずれると、機能説明を読む前に離脱してしまう。

ターゲットの言葉で話しかける

コピーは推し活ファンが日常で使う言葉に揃えた。「見逃す」「後追い」「チケット先行」「推し活疲れ」——マーケティング用語ではなく、ターゲットが実際に使っている言葉を選ぶことで、「自分のためのアプリだ」と感じてもらいやすくなる。

LPに載せた機能

推しリクエストをそのまま自社スプレッドシートへ

OshiLockは対応コミュニティを順次追加していく方式のため、「まだ自分の推しがない」というユーザーが出る。そのためLPにリクエストフォームを設置した。メールアドレスと推しの名前を入力して送信すると、Google スプレッドシートへ自動で記録される。リクエスト数が多い推しから優先して対応を追加していく運用で、スプレッドシートが意思決定のインプットになっている。

特典コードをLPで引き換え、アプリに即時反映

キャンペーンや提携先から発行した特典コードを、LP上で引き換えられる仕組みも実装した。ユーザーがメールアドレスとコードを入力して送信すると、LPのサーバーがバックエンドAPIを呼び出し、対象アカウントに特典(推しの永久無料登録)を即時付与する。アプリを再起動すれば反映されている状態になる。

アカウントがまだない場合は「pending」として保持され、後でそのメールアドレスでアカウントを作ると自動で特典が適用される。コード配布→引き換え→アプリ反映という一連の流れを、LPで完結させた。

デザインの方向性

温かみのある世界観で、アプリの雰囲気を事前に届ける

テラコッタ(レンガ色)×クリーム(ペーパー色)のウォームトーンを全体のベースに置いた。推し活という感情的なテーマに、クールなデザインは合わない。温かみのある色と、スパークル(キラキラ)の装飾でLPを通してアプリの世界観を体験してもらえるようにした。

ヒーローにはiPhoneの3Dフレームにアプリのスクリーンショットをはめた。ペイン(課題)セクションは通知カードやInstagramの投稿、チャット画面などを背景に散らし、「情報が分散している」状態をビジュアルで直感的に伝えた。