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

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

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

１．Pocket

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

２．Spotify

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

３．Find Dishes

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

４．Blue

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

５．Geckoboard

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

６．Couple

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

７．Spendee

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

８．Mapkin

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

９．Square

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

１０．coffely

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

１１．Hike

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

１２．Gengo

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

１３．Mighty Matcha

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

１４．Kickoff

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

１５．FiftyThree

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

１６．Path

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

１７．Mosaic

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

１８．Gridset

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

１９．Foundation

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

２０．Sort

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

２１．Everest

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

２２．GivingSomeThing

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

２３．H.Engage

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

２４．uberVU

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

２５．CoachUp

筋力トレーニングのためのプライベートコーチマッチングサービス。コーチの顔が次々とスライドで紹介されています。

２６．docTrackr

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

２７．Xamarin

C#でiPhone・Androidアプリを書けるようにする、エンジニア支援ソフトです。コードを前面に押し出したデザイン。

２８．Awesome.me

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

２９．Openbay

車の修理サービスです。アクションにつなげることを意識したサイト構成です。

３０．Dashbell

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

３１．Collaperty

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

３２．Flud

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

３３．POP

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

３４．Atmosphere Maps

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

３５．Lapka

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

３６．Lumo

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

３７．Daypack

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

３８．ClubDivot

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

３９．Involvio

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

４０．PipelineDeals

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

５０．Mixpanel

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

５１．Simple

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

５２．Bitstamp

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

５３．Instagrille

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

５４．CSSPiffle Pitch Deck

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

５５．Beanstalk

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

５６．Flow

プロダクト管理ツールです。白を基調にしたシンプルなページ。

５７．Wellframe

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

５８．Hipstamatic

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

５９．LayerVault

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

６０．Flight Card

フライト管理アプリ。アプリ内の長体がかかったフォントとサイト内のフォントを統一しているため統一感がありますね！

６１．MailChimp

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

６２．MediaFire

ファイルホスティングサービス。シンプルなデザインです。

６３．BugHerd

プロジェクト管理ソフトです。綺麗なランディングページ。

６４．dribbblr

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

６５．Raven

SEOツールのランディングページ。マウスオーバーでクルッと回る説明ボックスがユニーク。

６６．MyEnergy

光熱費管理ソフト。メッセージ性の強いページです。

６７．Campaign Monitor

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

６８．Kippt

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

６９．Cage

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

７０．Covestor

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

７１．WeatherTable

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

７２．Webflow

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

７３．Uploadcare

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

７４．Handsome Stats

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

７５．dcovery

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

７６．Tinypass

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

７７．mention

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

７８．Cloze

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

７９．PadMatcher

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

８０．Fancred

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

８１．Harvest

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

８２．Wefunder

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

８３．Shipment

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

８４．LaunchKey

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

８５．Telly

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

８６．Cloudant

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

８７．HipCV

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

８８．TipTap

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

８９．Codeship

エンジニアの作業を楽にするサービス。GitHubアカウントでログインできるボタンが目立っています。

９０．Freshdesk

ヘルプデスクサービスです。どこかで見たようなキャラが……。

９１．Resumebaking

レジュメ作成サービス。さわやかな青です。

９２．Aframe

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

９３．7Geese

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

９４．rallyware

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

９５．Hoblee

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

９６．MyEnvytory

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

９７．ViralSweep

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

９８．Things2

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

９９．Cheddar

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

１００．Kelvin

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

まとめ

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