このエントリーをはてなブックマークに追加

Design UI UX

DailyUIシリーズの第3回です。
前回はこちら
 
第3回のお題は「Landing Page(above the fold)」。サービスのランディングページです。  
私は自称UXプログラマーなので仕様とユーザー体験にフォーカスして調査&手書きでUIを作っていきます。
流れは下記です。

  • 機能が必要な理由考察
  • 機能に必要な要素(新たに足しました)
  • 理想の体験考察
  • UIの調査(AlexaのThe top 500 sites on the webを中心に)  
  • 私が考える最強のUI

では、やっていきましょう。
 

ランディングページが必要な理由

そもそもランディングページってなんだ???

個人的には、広告の先にあるページのイメージが強かったのですが、2つ意味があるっぽいです。1つはさきほどの広告の先のサービス説明をするページ、もう1つはサービスにアクセスしたときに表示されるサービス説明とサインアップ、ログインが表示されているページ(トップページ?)。日本だとランディングページ=広告の先にあるページっぽいんですが、Pinterestとかで検索するとトップページが表示される。おそらくだが、得たい結果がユーザーがサービスの利用を開始するなのであればどちらも目的は同じなので、同じものとして扱われているのか???
 
どなたか分かる人教えてください!!!

さて、ランディングページが必要な理由ですが、ユーザーにサービスを説明して、使ってもらうためですね。キャンペーンの場合はキャンペーン内容の説明をするために使われたりもしますね。ランディングページ(トップページ?)がないサービスもあって、そういうサービスはそもそも登録するという状態が発生しないため、そういうページを用意していない。ECサイトとかはセールとかじゃない場合は商品一覧ページがトップページでカートに入れたタイミングとかでユーザー登録させたりする場合が多い気がする。

ランディングページに必要な要素

これ考えるの仕様を決める上でとても大切なのに、完全に抜けていたのでここから入れていきます。
 
必要な要素はこんな感じかなー

  • サインアップへの導線
  • サービス名 or ロゴ
  • イケてるキャッチコピー
  • サービスにあった背景 or 画像

 
追加でサービスによって入れるものとしては下記ですかね

  • 料金プランの説明
  • ユーザーの体験談
  • 導入例や導入数
  • サービスの使い方

UIとしてよりもキャッチコピーだったり、サービスの色合いだったり、クリエイティブが大分発揮されるページですね・・・。

理想のランディングページとは?

飛んだ瞬間に使ってみたくなるページかなぁ。
 
理想というより好みになってしまいそうだけど、キャッチコピーがイケてるととても使ってみたくなる。正直、ユーザーがどういう経緯でそのページにアクセスしたかによって違うので正解があるのか?という感じはあるが、このサービスを始めたら自分の世界がどう変わるのかが説明とかに表現されているとユーザーがメリットを理解できるので良さそう。

色々なサービスを調査してみた

ランディングページは広告から飛ばないと表示されないものもあったので、あまり網羅できたって感じではないですが、できただけだとこんな感じ。

【調査対象】
Airbnb, CrowdWorks, Facebook, GitHib, Green, Indeed, Instagram, 転職ドラフト, Linkedin, メルカリ, Netflix, PayPal, Pinterest, Pixiv, Qiita, Shopify, Stores.jp, Twitter, Wantedly  

傾向がみえづらいというか、サービスによって違うというか・・・。
 

さらっと見ていた傾向でいうと、コンテンツ系のサービスはとりあえず使ってみよう系が多い気がする。
例えば、Netflixはとりあえず登録しよう&解約すぐにできるよといった感じで使ってから考えてという形だし、Qiitaのような投稿サービスはコンテンツを見せることでサービスをはじめるモチベーションにしている。

Netflix

Qiita

 
サービス自体が複雑なものや安全性が重要なサービスは、ランディングページ自体も結構長めでサービス自体の説明や導入企業やセキュリティの説明などをユーザーに訴えかけるものが多かった気がする。正直、かなり大変だと思う。PayPalだと一番上の方は登録だが、その下すぐにそもそもPayPalとはなにかだったり利用方法を入れて、どういうサービスなのかを丁寧に説明している。

PayPal

逆にサービスと一般に受け入れられているサービスほど、特に説明もなくサインアップに誘導している形が多い。特にアメリカのサービスはシンプル過ぎてびっくりした。LinkedinなんかはSNS自体が一般になっているのもあり、ビジネス向けのSNSだよで終了。

Linkedin

 
個人的に好きだったのは、Greenのランディングページ。
項目が入力しやすいかはともかく、キャッチコピーや階段を登っていくイメージとかが転職に対しての良いイメージを抱かせているのが良いと思う。こういったクリエイティブな仕様をかけるようになりたい。

Green
 

私が考えた最強のランディングページ

おまけです。
映画のサントラを聞けるサービスのランディングページを作ってみました。気をつけた点は下記。

  • 映画名で検索がすぐにできることでまず使ってもらえる
  • ユーザーに刺さるようなキャッチコピーを入れる

DailyUI003

そもそものサービス設計をしないといけないのに対しての時間の無さが・・・(言い訳

レビューお待ちしております!

色々ご意見いただけると嬉しいです。こんな例もあったとかあれば教えてください!

次は第4回です。
(書いたらリンク載せます)
書きました!

このエントリーをはてなブックマークに追加

© 2018, Udayan28