スタートアップにとってランディングページのデザインは生命線。サービスとユーザーをつなぐ最初の接点です。今回はランディングページの美しい海外のスタートアップをまとめました。Webサイトとしてデザインが優れているものはもちろんのこと、サービス、アプリを実際に使ってみたくなるようなものを取り上げています。
ランディングページをシャワーのように浴びてデザインの勘所を押さえましょう。怒濤のランディングページ100選です。それではどうぞ!
1.Pocket
「あとで読む」系サービスのPocketです。Read it Raterというサービスを覚えてらっしゃる方も多いと思いますが、それが改名して再スタートしたものです。利用シーンがイメージしやすいランディングページですね。
2.Spotify
現在日本からはサインアップできませんが、スウェーデン発・定額制の音楽ストリーミング配信サービスです。動画がグリグリ動きます!
3.Find Dishes
食べ物写真の共有サービスです。位置情報サービスをオンにしている端末から閲覧すると、いまいる地域が大きくマップ表示されるようになっています。
4.Blue
シンプルな天気アプリです。こちらも動画風に動きます。必要最低限の情報だけが得られるこのアプリの特徴と同じく、シンプルなページ構成です。
5.Geckoboard
クラウドサービスのデータを集約してダッシュボード表示するアプリです。アプリの特徴でもある「ザッと見渡せる雰囲気」がファーストビューで確かめられる良いデザイン。
6.Couple
カップル専用SNSです。二人で寄り添う楽しそうな姿が印象的です……。スクロールするとパララックスエフェクト(視差効果)でアプリの説明が現れます。
7.Spendee
お小遣い帳アプリです。こちらもパララックスを利用していますが、アプリ操作を疑似体験できる仕組みになっています。スクロールしてみましょう
8.Mapkin
パーソナライズ・マップアプリです。アプリ内で使用された色のみを使って構成された、統一感のあるデザインですね!
9.Square
5/23に日本版の提供がはじまったばかり、Twitterの創業者であるジャック・ドーシーが作ったモバイル決済サービスです。
日本版とランディングページを比較してみてもおもしろいです。日本と海外、それぞれに響くランディングページの違いが浮き彫りになり、大変参考になります。
10.coffely
コーヒーメーカーを遠隔操作できるアプリです。このアプリのウリである美しいUIが伝わりやすいよう、ページデザインも統一されています。
11.Hike
友達と簡単なステータス(一言メッセージ)をやりとりするアプリです。スクロールでアプリの説明が読めます。
12.Gengo
翻訳サービスのランディングページ。もともと日本で生まれたスタートアップです。並んだ顔が目を惹きます。
13.Mighty Matcha
抹茶のすばらしさを伝えるランディングページ。日本人である我々が見ても納得の、見事なランディングページです。
14.Kickoff
MacとiPhoneで使えるチャットアプリです。両方のデバイスから使えることが一目瞭然なワザありページですね!
15.FiftyThree
iPadの手書きアプリ、Paperのランディングページです。洗練されたUIで、気持ちよく書けるこのアプリ、ぼくもとても気に入っています! きらびやかになりすぎないところがこのアプリの良さですが、アプリのイメージ通り、シックなランディングページにまとめています。
16.Path
みなさんご存じPathのランディングページ。Pathのランディングページはコロコロ変わるのですが今はこんな雰囲気。
17.Mosaic
iPhoneで撮った写真をフォトブックにしてくれるサービスです。簡単操作、高いクオリティー、安さ(20ドル)、迅速な発送(4日)が強調されたランディングページです。ぜひスクロールしてみましょう。
18.Gridset
デザイナー御用達、グリッドセットのサービス。「Web layout Evolved(これぞまさしく、Webレイアウト革命や!)」のキャッチコピーがまぶしいランディングページです。
19.Foundation
レスポンシブWebデザインを作るためのフレームワーク「Foundation」を作るサイトです。オリジナルのキャラが目を惹きます。
20.Sort
小〜中規模向けのナレッジ共有サイトです。ファーストビューの写真から、サービスの対象が誰であるのか、すぐに分かりますね!
21.Everest
ウィッシュリスト系のアプリです。「Everyone’s got your Everest」というキャッチも効いています。
22.GivingSomeThing
非営利団体に手数料無料で贈り物ができるサービスです。やさしい黄緑で描かれたロゴに合わせ、ランディングページも同じ色で統一しています。
23.H.Engage
社内SNSサービスです。Yahoo!やミシュランなど、使われている企業のロゴを入れて訴求力UPしています。
24.uberVU
ソーシャルメディアマーケティングサポートサイトです。2色でまとめられたフラットなデザインがいい感じ。
25.CoachUp
筋力トレーニングのためのプライベートコーチマッチングサービス。コーチの顔が次々とスライドで紹介されています。
26.docTrackr
ドキュメント管理サービスです。ここで注目したのはファーストビュー。ちらばる紙とうっすら映る錠前。シンプルですが訴求力の高いグラフィック。お見事!
27.Xamarin
C#でiPhone・Androidアプリを書けるようにする、エンジニア支援ソフトです。コードを前面に押し出したデザイン。
28.Awesome.me
若者向けメディア、Awesome.meのランディングページ。対象読者の笑顔が溢れています。
29.Openbay
車の修理サービスです。アクションにつなげることを意識したサイト構成です。
30.Dashbell
ホテルの予約サービスです。とてもシンプルなランディングページ!今回取り上げた100個の中でもっとも縦幅が短く、858pxにまとまっています。
31.Collaperty
投資家のマッチングサイトです。名だたる投資家のアイコンが下のほうに並んでいます。
32.Flud
従業員向けニュースを配信するサービスです。ランディングページでは、Apple、Adobe、intelなど、名だたる企業名がスライドされています。「こんな有名な企業も使ってるんだよ」という主張が、ストレートに伝わってきます。
33.POP
アプリのプロトタイプを作るためのiPhoneアプリです。スクロールしていくと、動画で詳しい説明が見れます。
34.Atmosphere Maps
Google Atmosphere Mapsのランディングページです。アンシャープマスクをかけた雰囲気漂うパリッとした地図写真がとても鮮やかです。
35.Lapka
iOS用パーソナル環境モニターガジェットです。洗練された見た目とは裏腹に、放射線モジュール(ベータ線とガンマ線の空間線量を測定)、EMFモジュール(電磁場を検知)、湿度・温度モジュール、有機農産物モジュール(針を差し込んで窒素化合物量を測定)の4つから成る、けっこうまがまがしいガジェットです。デザインの力ってすごい!と、色々な意味で考えさせられるページです。一見の価値アリ!
36.Lumo
カメラアプリです。シンプルながら清潔感のあるランディングページ。
37.Daypack
プロジェクト管理ツール、Daypackのランディングページ。iPhone6にも対応!とのこと(但し注釈付き)
38.ClubDivot
ゴルフをより楽しむためのアプリ。鮮やかなグリーンのテクスチャがゴルフ好きにはたまりません。
39.Involvio
大学内限定のSNSです。3色しか使わない配色がとてもクール。
40.PipelineDeals
クラウドベースのCRMソフトウェアです。「Meet Michelle.」なんて思い切ったキャッチコピーなんでしょうか!
50.Mixpanel
分析プラットフォームサービス、Mixpanelです。紫色をベースカラーとした、賢そうなイメージを与えるランディングページです。
51.Simple
お小遣い帳系のアプリです。このアプリで何がやれるのか、アプリのスクリーンショットがとてもわかりやすいです。
52.Bitstamp
2009年に作られた電子マネー、Bitcoinをやりとりするサイトです。お金に関するサービスなので、安心感を与える緑がベースカラーになっています。
53.Instagrille
instagramをPCで見れるようにするサービスです。パララックスが使われています。
54.CSSPiffle Pitch Deck
CSS生成サービス。パララックスを使ったランディングページは装飾が凝っているものが多いですが、このページはとてもシンプルで上品な使っています。
55.Beanstalk
コード管理ツールです。ロゴデザインに合わせていろんな部分に豆の葉っぱをあしらったデザインです。
56.Flow
プロダクト管理ツールです。白を基調にしたシンプルなページ。
57.Wellframe
慢性疾患患者のためのアプリです。こちらにもパララックスが使われています。
58.Hipstamatic
カメラ系のアプリです。動画でわかりやすく操作説明しています。
59.LayerVault
デザイナーのための、シンプルなバージョン管理システムです。フラットデザインながら、わりとモリモリ機敏に動きます。
60.Flight Card
フライト管理アプリ。アプリ内の長体がかかったフォントとサイト内のフォントを統一しているため統一感がありますね!
61.MailChimp
メールアプリ。かわいいキャラクターがほほえみかけますが、月間1万2000通ものメールマガジンを無料で配信できるスゴイサービスです。
62.MediaFire
ファイルホスティングサービス。シンプルなデザインです。
63.BugHerd
プロジェクト管理ソフトです。綺麗なランディングページ。
64.dribbblr
デザインドリブルアプリ。手書き風のフォントが雰囲気出してます。
65.Raven
SEOツールのランディングページ。マウスオーバーでクルッと回る説明ボックスがユニーク。
66.MyEnergy
光熱費管理ソフト。メッセージ性の強いページです。
67.Campaign Monitor
ニュースレター作成サービス。クリックでさらに詳しいページへ飛びます。
68.Kippt
Webクリップサービスです。賑やかな印象。
69.Cage
プロジェクト内共有サービスです。ターゲットであるデザイナーに訴えかける作りです。
70.Covestor
サービスのアイデアとマネージャーをつなぐマッチングサービスです。スクロールでiPadを操作できるのがとてもユニーク!
71.WeatherTable
天気アプリ。ページを開くと、腕がにゅっと出てきます。
72.Webflow
レスポンシブWebデザインを素早く、簡単に作るサービスを提供しています。シックなランディングページです。
73.Uploadcare
ストレージサービスです。いろんなサービスへの対応を謳いながら、あえて無彩色のアイコンを使うことで、シンプルさが際立っています。
74.Handsome Stats
GoogleAnalyticsを見やすくしてくれるサービスのランディングページ。GoogleAnalytics(オレンジ色)とは真逆の緑を採用することでデザインが際立っています。
75.dcovery
旅行先を調べられるアプリです。ランディングページ内から飛べる動画ではメキシコを旅する様子を撮影しています。楽しそう!
76.Tinypass
Eコマースプラットフォーム、Tinypassを紹介しています。海外のランディングページにはめずらしく、縦長のデザインです。
77.mention
SNSやWebでの言及をアラートで教えてくれるサービスです。エゴサーチなんかに使えそう。動くイメージによってアラートの様子がわかります。
78.Cloze
メールやFacebookフィード、Tweetなどを一括してまとめてくれる受信ボックスです。レスポンシブWebデザインになっており、27インチのiMacで見ても大変インパクトのあるランディングページです。
79.PadMatcher
ルームメイトと物件を探すサービスです。家を模したシェアアイコンがかわいい!
80.Fancred
スポーツSNSです。ランディングページ中の小さい画面の中で選手が細かく動きます。
81.Harvest
計画をさっと立てられるサービスです。「簡単に使える系」のサービスはこのようにシンプルな構成であることが多いですね。
82.Wefunder
投資家とスタートアップをつなぐサイトです。投資家のアイコンがズラリと並び、安心感を演出しています。
83.Shipment
チーム内で簡単に制作物を共有できるアプリのランディングページです。ファイルをすぐに同期出来る様子がアニメーションで表現されています。
84.LaunchKey
認証ツールです。認証ツールはセキュリティが命! 青を基調にまとめられた、クリーンで安全そうなイメージを与えることに成功したランディングページです。
85.Telly
ビデオ共有アプリ、Tellyのランディングページ。ページ下部、Facebookシェアボタン、Tweetボタンがびっくりするくらい大きい!
86.Cloudant
CouchDBをサービスとして、様々なクラウド上で展開出来るサービスです。文字中心のスライドで構成されています。
87.HipCV
スタイリッシュなレジュメを作ってくれるサービス。「サンプルを見る」「サインアップする」という二つの目的ページに簡単に飛べるようになっていますね。
88.TipTap
マッチングサイトです。テキストによる説明がほとんど存在せず、動画で訴えかけてくるパターン。
89.Codeship
エンジニアの作業を楽にするサービス。GitHubアカウントでログインできるボタンが目立っています。
90.Freshdesk
ヘルプデスクサービスです。どこかで見たようなキャラが……。
91.Resumebaking
レジュメ作成サービス。さわやかな青です。
92.Aframe
ビデオを快適に見るためのサービスです。まずは再生ボタンを押してみましょう。
93.7Geese
タスクや仕事量のパフォーマンス管理ツールです。ガチョウが編隊飛行するモチーフで、チーム力が表現されています。
94.rallyware
エンジニアやオーガナイザーのマッチングサービスです。シンプルにテキストで伝えています。
95.Hoblee
写真、ビデオ、Tweetなどの自動収集サイトです。「(時間を浪費してきた)UNTIL NOW.(訳:今までは)」のメッセージが強いですね。
96.MyEnvytory
β版の登録受付中のようです。どんなアクションをすればいいのか(ここではFacebookアカウントでサインアップ)、とても分かりやすいです。
97.ViralSweep
コンテストページを簡単に作るサービスです。こちらも海外のランディングページにしては縦長です。
98.Things2
ToDo管理ソフト、Things2のページです。Mac、iPhone、iPadを、チェックボックスの大きさで表したアイデアに脱帽。
99.Cheddar
こちらもToDo管理ソフト。この2色遣いは配色センスの賜物です!
100.Kelvin
シンプルな天気アプリ。シンプルさを際立たせるために、スライドとAppStoreへのリンク、フォローボタンとお問い合わせリンクしかありません。思い切ったランディングページです。
まとめ
やはり目を惹くランディングページはアプリの魅力を効果的に伝えられますね。
デザイナーの方々の参考になれば幸いです!