デザインの参考に!いろんなサービスのサインアップページだけ25個集めてみた

デザインの参考に!いろんなサービスのサインアップページだけ25個集めてみた

今回サインアップページだけを25集めてみました。実は、現場でサインアップ画面の改修があってそのための調査で集めてみたんです。サインアップページでの離脱が多かったんですよね。それはいかん!ということでまずは調査したのでせっかくなのでこのブログにまとめようかなと。

Ads

トップページがサインアップ画面

トップページがランディングページの役割をしているのが特徴です。
基本的に、どんなサービスかわかるようになっていてフォームもファーストビューに入っているのがほとんどです。

個人的には一番サービスのことを理解した上でサインアップをできるのでいいなぁと思います。

pinterest

pinterest

・サービスの簡単な説明
・15秒で登録完了
・背景にサービスのメインとなる画像を配置
・スクロール無しで一画面完結

schoo

schoo

・背景にサービスのメインとなる画像を配置
・左側にサービスの説明と授業の検索フォーム、右側にサインアップボタン
・メールアドレスを押下すると入力ページに遷移
・検索して授業の詳細ページで「受けたい!」押下でログインorサインアップ

カメラの学校

camegaku

・ランディングページみたいな感じ
・メールアドレス or facebook
・サービスの特徴
・サインアップしないとサービスを使用できない

twitter

twitter

・サービスの簡単な説明
・ユーザーが投稿したイメージを画面全体背景に
・スクロール無しで一画面完結
・ログインとサインアップがほぼ同列
・サインアップしなくても閲覧はできるがフォローなどはログインしないとできない

みなさん知ってました!?
twitterのサインアップ画面の背景画像はユーザーの投稿画像だったんです。なんの基準で選ばれているんですかね。
気になります。

facebook

facebook

・サービスの簡単な説明
・ページの右側に入力項目
・ログインもページ内に表示されているが、サインアップのほうが目立つ設計

pixiv

pixiv

・メールアドレス or Google or facebook
・ページ左側に入力項目、右側は投稿された画像
・入力項目はposition:fixed;で固定配置

sumally

sumally

・facebook or twitter
・メールアドレスなし、SNSやっている前提
・ファーストビューに入力項目が収まるように設計されている
・背景にサービスのメインとなる画像を配置
・アバウトページもTOPと同じようレイアウトで入力項目がある
・スクロールするとサービスの説明

gunosy

gunosy

・ランディングページみたいなかんじ
・ページ下部に入力項目
・メールアドレス or facebook or twitter

gunosyだけ若干他と違います。
他のサイトはファーストビューに入力項目がありますが、gunosyはページ下部までスクロールしないと入力できません。

ファーストビューにあったほうがいいと思うんですけど、どんな意図があるんでしょう。

GitHub

github

・ページ上部左側に簡単なサービスの説明、右側に入力項目(メールアドレス)
・あとはランディングページみたいなかんじ

stores

stores

・ボタンがストア開設になっている
・何をするサイトなのか、このページで何をしなければいけないのかがファーストビューで見ることができる

storesは入力項目が横並びです。入力項目が少ないので横並びでも目線の移動が少ないですし、formが場所をあまり取らないのでファーストビューをうまく使えている印象です。

coconala

coconala

・ランディングページみたいなかんじ
・ページ右側に入力項目
・メールアドレス or facebook or yahoo

street academy

street-academy

・別にサインアップページあり
・ランディングページみたいなかんじ
・メールアドレス or facebook

トップページとは別にサインアップページがある

個別にサインアップページがあるサービスです。
これのポイントはトップページなどからの導線をどう持って行くかかなと思います。

個人的にはトップページからログインに行ってサインアップって遷移多くて嫌いです。登録したいのになかなかサインアップ画面に行かないのはちょっとな〜って思います。

あとは、トップページでもサインアップページでもそうなんですが、アバウトページなどサービスの説明をしているページへのリンクは分かりやすくしたいですね。

doctors-me

doctors me

・個別でサインアップページ
・メールアドレス or twitter or facebook
・アバウトページへの導線
・アバウトページにも同じように入力項目がある
・よくある質問の一部を掲載

アバウトページへの導線があって離脱してしまいそうですが、アバウトページにもサインアップがあります。
よくある質問があってユーザーの心配は軽減できそうですね。

stackoverflow

stackoverflow

・個別でサインアップページ
・トップページでサービスの特徴と説明、さらにアバウトページへの導線
・入力項目以外はほとんど除外したシンプル系
・メールアドレス or Google or facebook
・サインアップしなくてもサービスを楽しむことができる

zozotown

zozo

・個別でサインアップページ
・メールアドレス、郵便番号
・名前、住所は登録後にマイページで入力

nanapi

nanapi

・個別でサインアップページ
・登録フローがある
・メールアドレス or Google or facebook or twitter
・ページ左側に入力項目、右側にサービスの説明

今回調べたなかでnanapiには登録までのSTEPが表示されていました。
SNSでもメールアドレスでもフローが変わらなかったり、可能であれば表示したいですね。

cookpad

cookpad

・個別でサインアップページ
・メールアドレス or facebook
・ページ左側に入力項目、右側にfacebookログインとメルマガ
・プレミアムサービスもある

hatena

hatena

・個別でサインアップページ
・メールアドレスのみ
・入力項目のみのシンプルなページ

hulu

hulu

・個別でサインアップページ
・メールアドレス or facebook
・ページ下部に電話での問い合わせ記載

moppy

moppy

・個別でサインアップページ
・メールアドレスのみ
・PC、スマホ、ガラケーを選ぶ
・登録フローあり
・利用規約をページ下部に配置

monipla

monipla

・個別でサインアップページ
・メールアドレス or Twitter or Facebook or mixi or google or yahoo

ASOViEW

asoview

・メールアドレス or Facebook
・signupまでの遷移
TOP→ログインページ→新規会員登録
・ログインページの下部に

モーダル出現だったりちょっと変わっているサインアップ画面

Evernote

evernote

・TOPのサインアップボタン押下でモーダル
・メールアドレスで新規登録
・ランディングページみたいな感じ

peek

peek

海外版ASOViEWって感じ。レジャー、体験、遊びの予約サイト
・TOPのサインアップボタン押下でモーダル
・メールアドレス or Facebook

Kolor

kolor

・TOPページでサインアップボタン押下でモーダル出現
・Twitter or Facebook or mixi

サインアップ画面を集めて個人的に思ったこと

今回はお仕事でもサインアップ画面を改修ということでほんとにいろんなサイトを調べました。
そこで思ったことは・・・

トップページをランディングページのようにしてサービスの説明と入力項目というのが多かったです。もちろんサービスによって善し悪しはあると思いますが、まずはユーザーにうちのサービスはこんなことやってます!って説明をしたあとに登録っているのは順序的に安心するなと。

今回お仕事の改修ではトップをランディングページにするのは期間、開発コストなどいろんな面で難しかったので「サインアップページにサービスの説明を入れる」に落ち着きました。たったそれだけでしたが、会員登録数が伸びていたので改修は成功でした。

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ