「いかにページに長く滞在してもらうか」──。

この問いは、Webマーケターであれば誰もが頭を悩ませる問題です。

その回答のひとつとして注目を浴びているのが、滞在を妨げるそもそもの原因となっているページ遷移そのものを取っ払って、1つのページで完結して見せる「シングルページ」のWebデザインです。
本来であれば複数のページにまたがる場合も、1ページにまとめることでスッキリと見せることができます。

1つのページにまとめるとはいっても、様々なデザインやレイアウトが存在します。

今回は、シングルページのホームページを作るときに参考になりそうな、「シングルページレイアウトのホームページをおすすめポイントとともにご紹介します。
デザインやレイアウトに迷った時はぜひ参考にしてみましょう。

インスピレーションが湧き出る!世界の「シングルページレイアウト」のホームページ21選

1. Jessica denHyer

01.png
Screenshot on July 20th

最初にご紹介するのは、アートディレクター兼デザイナーのJessica denHyerさんのポートフォリオページです。
パーソナルポートフォリオといえばさまざまなカラフルな作品が並べられてあるイメージがありますが、このホームページは白と黒をベースに構成されたミニマルなデザインとなっています(実は24時間という時間制限を設けて構築されたサイトだということです)。

また、コピーライトメッセージが右下に90度角度を変えて配置されていたり、左下には名前を固定で表示していたりするなど、空いたスペースをうまく活用しています。

URL http://www.clowder9.com

2. The Urban Explorer Sweatshirt

02.png
Screenshot on July 20th

カナダのデザイナーのTobias van SchneiderさんとUnsplashがコラボして生まれたシャツのダークスキームなランディングページが、こちらのThe Urban Explorer Sweatshirtです。

ヒーローイメージの部分では昔の英字新聞を思わせるようなフォントが使われており、全体的に明度を落としているので、写真が一層美しく見えます。
ページ中頃にある「VISIT THE SHOP」はコントラストが高く見つけづらいですが、全体的に落ち着いたイメージになっています。

URL http://www.vanschneider.com/explorer-sweatshirt/

3. The Future Of Mobility

03.png
Screenshot on July 20th

スウェーデンで自動運転やビークルシェアリングを行なっているThe Future Of Mobilityのホームページをご紹介しましょう。

タイトルとサブタイトルの「Redefining the vehicle of tomorrow」(乗り物の明日を再定義する)、フロントライトのヒーローヘッダーが印象的です。
トップには小さな字でメニューが配置されていますが、固定ではなくスクロールするとふわりと消えるようになっています。

それぞれのセクションは、「+」ボタンを押すことで必要な情報を見ることができます。
全体として余白を上手に活用しており、必要に応じて文字を表示するような工夫がされています。

URL http://www.futuremobility.se

4. Gulf Coast Through Life

04.png
Screenshot on July 20th

アメリカ・ミシシッピー州の短期大学ガルフコーストコミュニティカレッジの秋学期のプロモーションページです。
イメージカラーのイエローとネイビーのバランスがうまく取れており、今流行中のスプリットスクリーンを使ってシングルページに仕上げています。

入学に必要な情報を探そうとボタンを押すと、右カラムにいたものが左カラムに移動したりとユニークな動きをします。
基本的にスクロールがなく、限られたレイアウトのなかで情報をシンプルに収めようという意図が垣間見られます。

URL https://gulfcoastthroughlife.com

5. Taxmaro Personal

05.png
Screenshot on July 20th

続いて、給与計算ソフトウェアTaxmaroを提供している企業のロングスクロールランディングページをご紹介します。

低コントラストのパステルカラーの幾何学模様をアクセントに、上部にサインアップフォーム、それに続いてエレベーターピッチの形式でTaxmaroの優位性やおすすめポイントが語られていきます。

また、スクロール時にも固定されたメニューバーには、ページタイトルの他に電話番号とログインリンクだけという、離脱を避けるための工夫がされているところにも注目です。

URL https://www.taxmaro.com/personal/en/home.html

6. Destroyer LA

06.png
Screenshot on July 20th

海外のWebデザイナーの中でも噂になっている、「シンプルかつ美しすぎる」と話題のホームページが、オーガニックカフェメニューを提供しているDestroyer LAです。

パララックスエフェクトが美しく、また余白の取り方、フォントの選び方、どれをとっても秀逸と言い切れるものになっています。
こちらを作成したのはStink Studiosで、エージェンシー自体のホームページもシンプルで洗練されたものになっています。

URL http://destroyer.la

7. 33 Alfred Place

07.png
Screenshot on July 20th

ロンドンのトッテンハムコートの近くにあるオフィス用品専門店の33 Alfred Placeのホームページです。

黄色を軸とした明るい色に、従来の伝統的なアイコンの代わりにかわいらしいイラストを使い、ブロークングリッドを採用しています。
いきいきとした写真とゆるりとしたイラストのギャップが楽しめるホームページで、ロングスクロールサイトになっていますが、するするとスクロールしてしまいます。

URL http://meetalfred.co.uk

8. Muzzle

082.png
Screenshot on July 20th

MuzzleはMacのソフトウェアで、画面の共有中やプレゼンテーション中に通知が表示されないように、一時的に画面の通知をOFFにすることができるソフトウェアです。

コンセプトがわかるように、次々と通知が表示され、口元を覆われた犬のアイコンがぴくぴくと動くのが面白いです。
また、ダウンロードボタンには美しいドロップシャドウがかかっています。

ダウンロードしてもらうのが一番のコンバージョンなので、余計な要素がなく、全体的にクリーンなレイアウトになっています。
テキストの配色も、薄いグレーとリンクカラーのゴールドだけが使われています。

URL https://muzzleapp.com

9. Kevin Beck

092.png
Screenshot on July 20th

抽象的な写真を撮るのを専門にしている写真家Kevin Beckさんのホームページは、マウスカーソルを動かすと次の写真がスクラッチして見えてくるというインタラクティブなホームページになっています。

マウスを動かし続けるとだんだん写真が見られなくなってしまいますが、これはあくまでもブランディング用のホームページです。
重要なのは、「これはなんのホームページなんだろう?」と思ってもらい、右下にあるポートフォリオページリンクをクリックしてもらうことです。

URL http://kevin-beck.co.uk

10. GlobeKit

10.png
Screenshot on July 20th

GlobeKitは地図データを驚くほどインタラクティブな経験に変えるビジュアライゼーションプラットフォームです。

紫色のグラデーションが神秘的な印象を与えますが、さらに注目したいのは、右側に大胆なエレベーターメニューを配置しているところです。
クロールすると階層の数字が変わるとともに、ボタンを押しても階層を移動することができます。

シングルページレイアウトでよく見られますが、このホームページでも最後のセクションにコンタクトフォームを置いて、コンバージョンにつなげる工夫がなされています。

URL http://globekit.co

11. Lisa App

11.png
Screenshot on July 20th

こちらは、AIのアルゴリズムを使ってインスタグラムで最もエンゲージメントが高そうな写真を選んでくれるアプリLisaの紹介ページです。

シンプルな3階層のエレベーターメニューが右側にあり、ふわりと現れるスクリーンショットが印象的です。
ダウンロードボタンがどこにあるのかが分かりにくいのは残念ですが、全面背景でどんなアプリなのかイメージしやすいデザインになっています。

URL https://www.asklisa.ai

12. Doze Studio

12.png
Screenshot on July 20th

モーションデザインが得意なクリエイティブエージェンシーDoze Studioのホームページは、パララックスエフェクトを使ったブルータリズムデザインを採用しています。

冒頭にはこれまでの制作実績をダイジェストで表示した非常に印象的なムービーが設置されており、思わず見入ってしまうことは間違いありません。
エレベーターメニューもカラフルなブロックで表現されており、現在位置を示すブロックも登場します。

URL http://doze.studio

13. Square Cash

013.png
Screenshot on July 20th

決済システムの常識を変えたSquareから新たに登場したサービスが、Square Cashです。

ロードアニメーション、決済システムを変えるようなプロダクト紹介、どれを取っても参考になります。
グリーンのテーマカラーも部分的に取り入れられており、全体を引き締める役割を担っています。

残念ながらまだアメリカだけで展開されているサービスなので、日本からホームページにアクセスすると見られないかもしれません。

URL https://cash.me

14. Eli Rousso - Redesigning a Remote

14.png
Screenshot on July 20th

続いてご紹介するのは、ニューヨークを拠点に活動しているプロダクトデザイナーEli Roussoさんの活動紹介ページです。

超ロングスクロールページになっていますが、白を基調に文字の色も黒だけに絞り、スクリーンショットをバランスよく配置しているので、飽きのこないデザインやレイアウトになっています。
壁に飾るディスプレイ型のIoTデバイスによって、好きなアーティストの絵画をいつでも飾ることのできるというコンセプトのプロダクトが紹介されています。

アプリ自体も非常に洗練されていてシンプルです。

URL http://www.elirousso.com

15. VaynerX

15.png
Screenshot on July 20th

VaynerXはフルサービスのデザインエージェンシーのホームページで、3階層のエレベーターメニューを搭載したシングルページレイアウトになっています。

ダークスキームのホームページの中心にある「X」の字を模したロゴは、カラフルなグラデーションで色がカメレオンのように変化します。
いずれの階層も上下左右中央揃えで、余計な要素のないシンプルなホームページとなっています。
ゴーストボタンの使い方にも注目です。

 URL http://vaynerx.com

16. Harris Blondman

16.png
Screenshot on July 20th

今度は、オランダのデザインスタジオHarris Blondmanのホームページをのぞいて見ましょう。

こちらのホームページは、エレクトリックブルーを基調色としたブルータリズムデザインのレイアウトを採用しています。
左上に表示されているメニューを押すと、その階層までスクロールしてくれるインタラクティブなメニューです。
シンプルすぎるのに、逆に印象に残るデザインに仕上がっています。

URL http://www.harrisblondman.nl

17. Mícheál Morgan

17.png
Screenshot on July 20th

Caxiam社のCTOであるMícheál Morganさんの自己紹介サイトをご覧ください。

ご本人がカッコよく写っている全面背景に、自己紹介文を左側によせて表示しています。
リンクは別の色で表示するのではなく、太字にする工夫をしています。
普通の画面であればスクロールしないほどのコンテンツ量が、かえって自己紹介をする際に丁度いい分量なのかもしれません。

URL https://michealmorgan.com

18. Dating Vandalized

18.png
Screenshot on July 20th

ビビッドなピンクから始まる印象的なグラデーションを採用しているのが、オンラインデート(いわゆる「出会い系」)をアウトソーシングしてしまうという奇抜な内容の小説Dating Vandalizedランディングページです。

ゴーストボタンの形状をしている購入ボタンは、Amazonの該当ページリンクしています。
どんな内容なのか、非常に気になってしまう、ある意味で「後味の悪い」ランディングページです。

URL http://datingvandalized.com

19. Tim Van Damme

19.png
Screenshot on July 20th

デザイナーのためのGitHubと言われるAbstractのデザイナーであるTim Van Dammeさんの名刺がわりのページです。

ロゴが非常にスタイリッシュで印象的ですが、スクロールはできず、twitterやinstagramなどのアカウントリンクされているだけのシンプルな構成です。
周りの縁の部分がカメレオンのように色が変わるのが独創的です。

URL http://www.timvandamme.com

20. Minamishima

20.png
Screenshot on July 20th

メルボルンにあるジャパニーズダイニングMinamishimaのホームページでは、可愛らしいプレローダーが出てくるのでクリーンな印象のホームページかと思いきや、ローディング後に重厚感や高級感が溢れるデザインが登場します。

料理長南嶋コウイチさんの料理中の姿がどんと全面背景で登場し、一度は訪れてみたいと思わせるような雑誌のようなレイアウトを採用しています。
セリフ書体がとてもよく似合うホームページです。

URL https://minamishima.com.au

21. Nextpage

21.png
Screenshot on July 20th

Nextpageは、ウクライナにあるデジタルエージェンシーです。

赤い格子が動く無限ループのアニメーション、黒背景にビビッドピンクをアクセントカラーで用いている部分などは、デジタルに強いイメージを彷彿とさせます。
シングルページによくあるページの最後にコンタクトフォームを載せるのとは違い、右下の「Send us a message」ボタンを押すことで、いつでも問い合わせを送ることができます。

URL http://nextpage.agency/

まとめ

一口にシングルページとは言っても、アニメーションを使ったり、ロングスクロールさせたり、ページ内で遷移したりと、様々なパターンがあることが分かります。

概してシングルページのホームページはシンプルで余計な情報がなく、リンクも最小限に絞られていることから、ユーザーにとっても閲覧しやすい構成になっています。

ホームページを新たに制作する場合には、シングルページのホームページレイアウトに取り入れてみてはいかがでしょうか。