読者です 読者をやめる 読者になる 読者になる

No Web Service No Life

クラウドソーシングサービス「ランサーズ」のプロデューサーです。Webサービスや構成要素(UIや技術)について書いています。

色々なWebサービスのログイン導線のまとめ(トップページ)

Webサービス UI

Webサービスの命ともいえるログイン機能ですが、その導線はどういったパターンがあるのか気になったので、よく見るサービスの導線をまとめてみました。
個人的には、ログインは既存会員向け=ある程度サイト構造を理解している方向けなので、CTAよりも控えめでいいのでは?と思っています。

右上にあるパターン

ログイン導線の王道といった感じです。確かによく見かけますし、ログインや会員登録はするときはついつい右上を探します。
いくつかピックアップしてみます。
Dropboxは新規ユーザ獲得のグロースハック事例でもよく取り上げられるほど新規を重視しているので、やはりログインは控え目です。
食べログはかなりログインリンクが小さいです。あまり既存会員よりもオーガニックでの非会員を意識した結果でしょうか。

f:id:kkino0927:20131118233058p:plain

f:id:kkino0927:20131119105248p:plain

f:id:kkino0927:20131118233057p:plain

f:id:kkino0927:20131118233059p:plain

f:id:kkino0927:20131118233101p:plain

f:id:kkino0927:20131118233106p:plain

f:id:kkino0927:20131118233107p:plain

f:id:kkino0927:20131118233108p:plain

f:id:kkino0927:20131118233109p:plain

f:id:kkino0927:20131118233110p:plain

真ん中にドーンとあるパターン

Sumallyはアグレッシブです。ここで何かしらのアクションをしないとコンテンツが確認できません。この手法、離脱とのバランスだと思うのですが、実際ユーザ獲得にはプラスなのか気になっています。

f:id:kkino0927:20131118233103p:plain

f:id:kkino0927:20131118233056p:plain

f:id:kkino0927:20131118233102p:plain

ログイン情報入力フォーム+ログインボタンのパターン

TwitterFacebookが共にこのパターンなのは偶然でしょうか?両社ともグロースハックでよく語られますが、トップが本当にシンプルです。ブランド力があるからこそできる削ぎ落としだと思います。
pixivは珍しい位置にあり、各種SNSボタン等の導線も多く、何かしらで開始できそうな印象を与えてくれます。

f:id:kkino0927:20131118233104p:plain

f:id:kkino0927:20131118233100p:plain

f:id:kkino0927:20131118233105p:plain

ログインページにいくのに2クリック必要なパターン

Amazonは、図で示したエリアをマウスオーバすると、ログインボタンが現れます。(訪問時は吹き出しで示してくれます)

f:id:kkino0927:20131118233055p:plain

広告を非表示にする

最新のWebサービス・スマホアプリの情報が毎日メールで受信できるキュレーションサービス『Service Safari』を運営しています。
エンジニアを募集していますので、ご興味のある方はFacebookやTwitterからご連絡ください。