いつか真似したい!ユーザーの心をつかんで離さないランディングページ100選[海外スタートアップ編]

    
2013/05/24
    

great-landing-pages-01
スタートアップにとってランディングページのデザインは生命線。サービスとユーザーをつなぐ最初の接点です。今回はランディングページの美しい海外のスタートアップをまとめました。Webサイトとしてデザインが優れているものはもちろんのこと、サービス、アプリを実際に使ってみたくなるようなものを取り上げています。

ランディングページをシャワーのように浴びてデザインの勘所を押さえましょう。怒濤のランディングページ100選です。それではどうぞ!

1.Pocket

Pocket  Formerly Read It Later 「あとで読む」系サービスのPocketです。Read it Raterというサービスを覚えてらっしゃる方も多いと思いますが、それが改名して再スタートしたものです。利用シーンがイメージしやすいランディングページですね。

2.Spotify

SPOTIFY 現在日本からはサインアップできませんが、スウェーデン発・定額制の音楽ストリーミング配信サービスです。動画がグリグリ動きます!

3.Find Dishes

Find Dishes  Foodspotting 食べ物写真の共有サービスです。位置情報サービスをオンにしている端末から閲覧すると、いまいる地域が大きくマップ表示されるようになっています。

4.Blue

Blue  A minimal weather iOS app by Oak Studios シンプルな天気アプリです。こちらも動画風に動きます。必要最低限の情報だけが得られるこのアプリの特徴と同じく、シンプルなページ構成です。

5.Geckoboard

Meet Geckoboard クラウドサービスのデータを集約してダッシュボード表示するアプリです。アプリの特徴でもある「ザッと見渡せる雰囲気」がファーストビューで確かめられる良いデザイン。

6.Couple

Couple  An App for Two カップル専用SNSです。二人で寄り添う楽しそうな姿が印象的です……。スクロールするとパララックスエフェクト(視差効果)でアプリの説明が現れます。

7.Spendee

Spendee  See where your money goes お小遣い帳アプリです。こちらもパララックスを利用していますが、アプリ操作を疑似体験できる仕組みになっています。スクロールしてみましょう

8.Mapkin

Mapkin  the journey unfolded パーソナライズ・マップアプリです。アプリ内で使用された色のみを使って構成された、統一感のあるデザインですね!

9.Square

Accept credit cards with your iPhone Android or iPad  Square 5/23に日本版の提供がはじまったばかり、Twitterの創業者であるジャック・ドーシーが作ったモバイル決済サービスです。日本版とランディングページを比較してみてもおもしろいです。日本と海外、それぞれに響くランディングページの違いが浮き彫りになり、大変参考になります。

10.coffely

Www coffely com コーヒーメーカーを遠隔操作できるアプリです。このアプリのウリである美しいUIが伝わりやすいよう、ページデザインも統一されています。

11.Hike

Hike 友達と簡単なステータス(一言メッセージ)をやりとりするアプリです。スクロールでアプリの説明が読めます。

12.Gengo

Gengo   Translation Service 翻訳サービスのランディングページ。もともと日本で生まれたスタートアップです。並んだ顔が目を惹きます。

13.Mighty Matcha

Mightymatcha 抹茶のすばらしさを伝えるランディングページ。日本人である我々が見ても納得の、見事なランディングページです。

14.Kickoff

Kickoff  Chat and Tasks for Teams MacとiPhoneで使えるチャットアプリです。両方のデバイスから使えることが一目瞭然なワザありページですね!

15.FiftyThree

FiftyThree iPadの手書きアプリ、Paperのランディングページです。洗練されたUIで、気持ちよく書けるこのアプリ、ぼくもとても気に入っています! きらびやかになりすぎないところがこのアプリの良さですが、アプリのイメージ通り、シックなランディングページにまとめています。

16.Path

Path みなさんご存じPathのランディングページ。Pathのランディングページはコロコロ変わるのですが今はこんな雰囲気。

17.Mosaic

Mosaic iPhoneで撮った写真をフォトブックにしてくれるサービスです。簡単操作、高いクオリティー、安さ(20ドル)、迅速な発送(4日)が強調されたランディングページです。ぜひスクロールしてみましょう。

18.Gridset

Gridset デザイナー御用達、グリッドセットのサービス。「Web layout Evolved(これぞまさしく、Webレイアウト革命や!)」のキャッチコピーがまぶしいランディングページです。

19.Foundation

Foundation The Most Advanced Responsive Front end Framework from ZURB レスポンシブWebデザインを作るためのフレームワーク「Foundation」を作るサイトです。オリジナルのキャラが目を惹きます。

20.Sort

Social Knowledge Management Sort 小〜中規模向けのナレッジ共有サイトです。ファーストビューの写真から、サービスの対象が誰であるのか、すぐに分かりますね!

21.Everest

Everest Live your dreams and achieve personal goals ウィッシュリスト系のアプリです。「Everyone’s got your Everest」というキャッチも効いています。

22.GivingSomeThing

To Give is To Receive GivingSomeThing com 非営利団体に手数料無料で贈り物ができるサービスです。やさしい黄緑で描かれたロゴに合わせ、ランディングページも同じ色で統一しています。

23.H.Engage

H Engage 社内SNSサービスです。Yahoo!やミシュランなど、使われている企業のロゴを入れて訴求力UPしています。

24.uberVU

UberVU Social Media Marketing Automation ソーシャルメディアマーケティングサポートサイトです。2色でまとめられたフラットなデザインがいい感じ。

25.CoachUp

Find a Great Private Coach in Any Sport CoachUp com 筋力トレーニングのためのプライベートコーチマッチングサービス。コーチの顔が次々とスライドで紹介されています。

26.docTrackr

Document Control and Analytics Document Security docTrackr ドキュメント管理サービスです。ここで注目したのはファーストビュー。ちらばる紙とうっすら映る錠前。シンプルですが訴求力の高いグラフィック。お見事!

27.Xamarin

Xamarin Build cross platform iOS Android Mac and Windows apps with C and NET C#でiPhone・Androidアプリを書けるようにする、エンジニア支援ソフトです。コードを前面に押し出したデザイン。

28.Awesome.me

Awesome me Revealing the Awesome in Everyone 若者向けメディア、Awesome.meのランディングページ。対象読者の笑顔が溢れています。

29.Openbay

Select compare and book auto repair and maintenance services with Openbay 車の修理サービスです。アクションにつなげることを意識したサイト構成です。

30.Dashbell

Dashbell Increase hotel bookings with a few simple steps ホテルの予約サービスです。とてもシンプルなランディングページ!今回取り上げた100個の中でもっとも縦幅が短く、858pxにまとまっています。

31.Collaperty

Collaperty Crowdfunding Real Estate Network 投資家のマッチングサイトです。名だたる投資家のアイコンが下のほうに並んでいます。

32.Flud

Flud for Teams Businesses 従業員向けニュースを配信するサービスです。ランディングページでは、Apple、Adobe、intelなど、名だたる企業名がスライドされています。「こんな有名な企業も使ってるんだよ」という主張が、ストレートに伝わってきます。

33.POP

POP アプリのプロトタイプを作るためのiPhoneアプリです。スクロールしていくと、動画で詳しい説明が見れます。

34.Atmosphere Maps

Atmosphere Maps Google Atmosphere Mapsのランディングページです。アンシャープマスクをかけた雰囲気漂うパリッとした地図写真がとても鮮やかです。

35.Lapka

Lapka Personal Environment Monitor iOS用パーソナル環境モニターガジェットです。洗練された見た目とは裏腹に、放射線モジュール(ベータ線とガンマ線の空間線量を測定)、EMFモジュール(電磁場を検知)、湿度・温度モジュール、有機農産物モジュール(針を差し込んで窒素化合物量を測定)の4つから成る、けっこうまがまがしいガジェットです。デザインの力ってすごい!と、色々な意味で考えさせられるページです。一見の価値アリ!

36.Lumo

Lumo カメラアプリです。シンプルながら清潔感のあるランディングページ。

37.Daypack

Daypack プロジェクト管理ツール、Daypackのランディングページ。iPhone6にも対応!とのこと(但し注釈付き)

38.ClubDivot

ClubDivot Golf scheduling and groups made easy ゴルフをより楽しむためのアプリ。鮮やかなグリーンのテクスチャがゴルフ好きにはたまりません。

39.Involvio

Involvio 大学内限定のSNSです。3色しか使わない配色がとてもクール。

40.PipelineDeals

PipelineDeals Sales CRM Customer Relationship Management Software クラウドベースのCRMソフトウェアです。「Meet Michelle.」なんて思い切ったキャッチコピーなんでしょうか!

50.Mixpanel

Mixpanel  Mobile Analytics 分析プラットフォームサービス、Mixpanelです。紫色をベースカラーとした、賢そうなイメージを与えるランディングページです。

51.Simple

Simple Worry free Alternative to Traditional Banking お小遣い帳系のアプリです。このアプリで何がやれるのか、アプリのスクリーンショットがとてもわかりやすいです。

52.Bitstamp

$119 85 Bitstamp buy and sell bitcoins 2009年に作られた電子マネー、Bitcoinをやりとりするサイトです。お金に関するサービスなので、安心感を与える緑がベースカラーになっています。

53.Instagrille

Instagrille Instagram on your PC instagramをPCで見れるようにするサービスです。パララックスが使われています。

54.CSSPiffle Pitch Deck

CSSPiffle Pitch Deck in HTML5 and CSS3 CSS生成サービス。パララックスを使ったランディングページは装飾が凝っているものが多いですが、このページはとてもシンプルで上品な使っています。

55.Beanstalk

Beanstalk Secure Private Subversion Mercurial and Git Hosting コード管理ツールです。ロゴデザインに合わせていろんな部分に豆の葉っぱをあしらったデザインです。

56.Flow

Flow Online Task Management and Team Collaboration Software プロダクト管理ツールです。白を基調にしたシンプルなページ。

57.Wellframe

Wellframe 慢性疾患患者のためのアプリです。こちらにもパララックスが使われています。

58.Hipstamatic

Hipstamatic Welcome To Hipstamatic カメラ系のアプリです。動画でわかりやすく操作説明しています。

59.LayerVault

Simple version control for designers LayerVault デザイナーのための、シンプルなバージョン管理システムです。フラットデザインながら、わりとモリモリ機敏に動きます。

60.Flight Card

Flight Card Your boarding pass reinvented Flight Tracking application for your iPhone and iPod touch フライト管理アプリ。アプリ内の長体がかかったフォントとサイト内のフォントを統一しているため統一感がありますね!

61.MailChimp

Email Marketing and Email List Manager MailChimp メールアプリ。かわいいキャラクターがほほえみかけますが、月間1万2000通ものメールマガジンを無料で配信できるスゴイサービスです。

62.MediaFire

MediaFire Online Space for your documents photos videos and music ファイルホスティングサービス。シンプルなデザインです。

63.BugHerd

Effortless project management and collaboration BugHerd プロジェクト管理ソフトです。綺麗なランディングページ。

64.dribbblr

Dribbblr tapmates Inc デザインドリブルアプリ。手書き風のフォントが雰囲気出してます。

65.Raven

SEO Software Social Media PPC Marketing Tools by Raven SEOツールのランディングページ。マウスオーバーでクルッと回る説明ボックスがユニーク。

66.MyEnergy

Compare Average Utility Bills Save Money with MyEnergy 光熱費管理ソフト。メッセージ性の強いページです。

67.Campaign Monitor

Send beautiful email newsletters with Campaign Monitor ニュースレター作成サービス。クリックでさらに詳しいページへ飛びます。

68.Kippt

Kippt Webクリップサービスです。賑やかな印象。

69.Cage

Cage プロジェクト内共有サービスです。ターゲットであるデザイナーに訴えかける作りです。

70.Covestor

Covestor Investment Management サービスのアイデアとマネージャーをつなぐマッチングサービスです。スクロールでiPadを操作できるのがとてもユニーク!

71.WeatherTable

WeatherTable for iPhone iPod 天気アプリ。ページを開くと、腕がにゅっと出てきます。

72.Webflow

Webflow Design Responsive Websites Visually レスポンシブWebデザインを素早く、簡単に作るサービスを提供しています。シックなランディングページです。

73.Uploadcare

Uploadcare ストレージサービスです。いろんなサービスへの対応を謳いながら、あえて無彩色のアイコンを使うことで、シンプルさが際立っています。

74.Handsome Stats

Handsome Stats GoogleAnalyticsを見やすくしてくれるサービスのランディングページ。GoogleAnalytics(オレンジ色)とは真逆の緑を採用することでデザインが際立っています。

75.dcovery

Dcovery 旅行先を調べられるアプリです。ランディングページ内から飛べる動画ではメキシコを旅する様子を撮影しています。楽しそう!

76.Tinypass

Tinypass Eコマースプラットフォーム、Tinypassを紹介しています。海外のランディングページにはめずらしく、縦長のデザインです。

77.mention

Mention Your Media Monitoring Application SNSやWebでの言及をアラートで教えてくれるサービスです。エゴサーチなんかに使えそう。動くイメージによってアラートの様子がわかります。

78.Cloze

Cloze The Inbox is Human Again メールやFacebookフィード、Tweetなどを一括してまとめてくれる受信ボックスです。レスポンシブWebデザインになっており、27インチのiMacで見ても大変インパクトのあるランディングページです。

79.PadMatcher

PadMatcher Apartment Roommate Matching ルームメイトと物件を探すサービスです。家を模したシェアアイコンがかわいい!

80.Fancred

Fancred スポーツSNSです。ランディングページ中の小さい画面の中で選手が細かく動きます。

81.Harvest

Simple Online Time Tracking Software Harvest 計画をさっと立てられるサービスです。「簡単に使える系」のサービスはこのようにシンプルな構成であることが多いですね。

82.Wefunder

Crowd Investing for Startups Wefunder Crowdfunding 投資家とスタートアップをつなぐサイトです。投資家のアイコンがズラリと並び、安心感を演出しています。

83.Shipment

Shipment Share and review your designs チーム内で簡単に制作物を共有できるアプリのランディングページです。ファイルをすぐに同期出来る様子がアニメーションで表現されています。

84.LaunchKey

LaunchKey Evolving User Authentication and Killing Passwords 認証ツールです。認証ツールはセキュリティが命! 青を基調にまとめられた、クリーンで安全そうなイメージを与えることに成功したランディングページです。

85.Telly

Telly Mobile Apps Videos You ll Love ビデオ共有アプリ、Tellyのランディングページ。ページ下部、Facebookシェアボタン、Tweetボタンがびっくりするくらい大きい!

86.Cloudant

Cloudant CouchDBをサービスとして、様々なクラウド上で展開出来るサービスです。文字中心のスライドで構成されています。

87.HipCV

HipCV Create Stylish Professional Resume In Minutes for FREE スタイリッシュなレジュメを作ってくれるサービス。「サンプルを見る」「サインアップする」という二つの目的ページに簡単に飛べるようになっていますね。

88.TipTap

TipTap マッチングサイトです。テキストによる説明がほとんど存在せず、動画で訴えかけてくるパターン。

89.Codeship

Codeship Hosted continuous integration and deployment Built for the cloud エンジニアの作業を楽にするサービス。GitHubアカウントでログインできるボタンが目立っています。

90.Freshdesk

Help Desk Software for Customer Support Online Help Desk Freshdesk ヘルプデスクサービスです。どこかで見たようなキャラが……。

91.Resumebaking

Resume Builder with free recipes of Winning Resumes Resumebaking レジュメ作成サービス。さわやかな青です。

92.Aframe

Aframe Cloud Video Production ビデオを快適に見るためのサービスです。まずは再生ボタンを押してみましょう。

93.7Geese

7Geese Social Performance Management タスクや仕事量のパフォーマンス管理ツールです。ガチョウが編隊飛行するモチーフで、チーム力が表現されています。

94.rallyware

Home エンジニアやオーガナイザーのマッチングサービスです。シンプルにテキストで伝えています。

95.Hoblee

Hoblee 写真、ビデオ、Tweetなどの自動収集サイトです。「(時間を浪費してきた)UNTIL NOW.(訳:今までは)」のメッセージが強いですね。

96.MyEnvytory

MyEnvytory The BETA is here β版の登録受付中のようです。どんなアクションをすればいいのか(ここではFacebookアカウントでサインアップ)、とても分かりやすいです。

97.ViralSweep

Social Sweepstakes ViralSweep コンテストページを簡単に作るサービスです。こちらも海外のランディングページにしては縦長です。

98.Things2

Cultured Code ToDo管理ソフト、Things2のページです。Mac、iPhone、iPadを、チェックボックスの大きさで表したアイデアに脱帽。

99.Cheddar

Cheddar こちらもToDo管理ソフト。この2色遣いは配色センスの賜物です!

100.Kelvin

Kelvin Weather App シンプルな天気アプリ。シンプルさを際立たせるために、スライドとAppStoreへのリンク、フォローボタンとお問い合わせリンクしかありません。思い切ったランディングページです。

まとめ

やはり目を惹くランディングページはアプリの魅力を効果的に伝えられますね。
デザイナーの方々の参考になれば幸いです!

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.