#1日1サイトレビュー【051】Mezameeさん
寝坊すると課金されてしまう！Webアプリ「メザミー」のLPです。
設定された時間までに自宅から100m以上離れてボタンをスライドできたら無料だそうです。面白いですね😂✨
【概要】
Webアプリ「メザミー」のLP
【ターゲット】
20代会社員男女
通常の目覚ましアプリに慣れてしまい寝坊、二度寝をしてしまう方
【コンバージョン】
メザミーを利用してもらう
【訴求内容】
・どんなWebアプリか
・他サービスにはない特徴
・どう使うのか
・お客様の声
・よくある質問
【キャッチコピー】
覚悟を決めるだけ
もう寝坊はできない
【印象】
ポップ
【メインビジュアル】
・キャッチコピーは、メザミー使用後のターゲットの感想を提示している。もう寝坊「しなくなる」ではなく、もう寝坊は「できない」というキャッチコピーにしていることで、ターゲットに興味を抱かせる。
・キャッチコピーはfont-size: 4.8rem。htmlにはfont-size: 62.5%;が指定されていた。調べたらこんな記事が。
16px ×0.625=10px
1rem=10pxになるので4.8rem=48px
なるほど…？計算しやすいってことなんですね✨
・すでにメザミーの内容を知っていてすぐに利用したい方、また既存ユーザーのために新規登録ボタン、ログインボタンをファーストビューに配置している。
・ロゴやヘッダー上の黄色の形は、アプリにあるスライドボタンを現わしていると思われる。
・メイン画像は時間経過で左から右へ違う画像に変わる。左から右へ動くのはスライドボタンの動かす方向を意識しているのかも。画像も丸いし。
【コンテンツ】
・LPはいかに離脱させないか、下までスクロールさせるかが重要で、そのために飽きのこないデザインが必要らしい。
＃もう寝坊できない がアニメーションで動いているのがサイトに引き付けるいい効果になっていそう。
・「＃もう寝坊できない」の部分でターゲットが困っていることを言語化し悩みに共感することで、この後のコンテンツを自分のことだと認識してもらえる。メザミーを使えば解決できることを匂わせている。
・「3つの特徴」他サービスにはない特徴がここで提示されている。横並びに配置。テキストもシンプルで余白も十分にあり余裕感がある。特徴に関係のあるアイコンをいれることで、目に留まりやすくなるしテキストの内容をある程度予想できるので読む意欲がわく。
・「Mezameeを使う」はコンバージョン獲得につながるコンバージョンボタン。全体のバランスを崩さないように他と比べて色に大きな違いは出してない。ボタンの大きさはmin-width: 700pxと指定していて、大き目である。サイズを大きくすることで目立つようにしている。
・使い方 アプリの表示画面風のイラストとテキストのセット。イラストをいれることでテキストの補足説明的な役割をしてくれる。
目線が一定のままだと飽きてしまうので①②で配置を交互にしてるのかも。
・「メザミーで朝活」は実質お客様の声コーナー。メザミーを使うとこんなかんじに素敵な朝活ができる！と思わせている。
朝活を楽しむ人々の画像が横スクロールできるようになっている。画像は角丸。
・よくある質問はアコーディオンメニューになっている。ここだけ背景色が黄色なのは、ここを見たい方が割と多くてスクロール時分かりやすくするため？回答部分の背景色を白色にして文字を目立たせるため？とか考えたけどあんまりしっくりこないなあ、もっと納得できる理由がありそう。
【カラー】
元気、活発さ、太陽、光のイメージ。
ベースカラー：白、薄い黄色
メインカラー：黄色
文字：黒、グレー、白
【フォント】
"Noto Sans JP", "SF Latin", BlinkMacSystemFont, "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
ポップなゴシック体でサイトの雰囲気とも合ってる。
【レスポンシブ】
・ナビゲーションメニューはハンバーガーメニューでまとめられている。
・メインビジュアル 丸い画像が中央に大きく表示、その上にキャッチコピー、ボタンが縦に並ぶ。
この記事が気に入ったらサポートをしてみませんか？