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

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

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

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

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

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

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

1. Jessica denHyer

Screenshot on July 20th

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

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

URL　http://www.clowder9.com

2. The Urban Explorer Sweatshirt

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

Screenshot on July 20th

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

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

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

URL　http://www.futuremobility.se

4. Gulf Coast Through Life

Screenshot on July 20th

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

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

URL　https://gulfcoastthroughlife.com<small style="color:#999">(※このWebページは2023年7月現在公開されておりません)</small>

5. Taxmaro Personal

Screenshot on July 20th

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

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

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

URL　https://www.taxmaro.com/personal/en/home.html<small style="color:#999">(※このWebページは2023年7月現在公開されておりません)</small>

6. 33 Alfred Place

Screenshot on July 20th

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

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

URL　http://meetalfred.co.uk<small style="color:#999">(※このWebページは2023年7月現在公開されておりません)</small>

7. Muzzle

Screenshot on July 20th

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

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

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

URL　https://muzzleapp.com

8. Kevin Beck

Screenshot on July 20th

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

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

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

9. GlobeKit

Screenshot on July 20th

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

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

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

URL　http://globekit.co

10. Lisa App

Screenshot on July 20th

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

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

URL　https://www.asklisa.ai<small style="color:#999">(※このWebページは2023年7月現在公開されておりません)</small>

11. Doze Studio

Screenshot on July 20th

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

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

URL　http://doze.studio

12. Square Cash

Screenshot on July 20th

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

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

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

URL　https://cash.me

13. Eli Rousso - Redesigning a Remote

Screenshot on July 20th

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

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

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

URL　http://www.elirousso.com

14. VaynerX

Screenshot on July 20th

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

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

　URL　http://vaynerx.com

15. Harris Blondman

Screenshot on July 20th

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

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

URL　http://www.harrisblondman.nl

16. Mícheál Morgan

Screenshot on July 20th

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

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

URL　https://michealmorgan.com

17. Dating Vandalized

Screenshot on July 20th

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

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

URL　http://datingvandalized.com<small style="color:#999">(※このWebページは2023年7月現在公開されておりません)</small>

18. Tim Van Damme

Screenshot on July 20th

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

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

URL　http://www.timvandamme.com

19. Minamishima

Screenshot on July 20th

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

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

URL　https://minamishima.com.au

20. Nextpage

Screenshot on July 20th

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

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

URL　http://nextpage.agency/<small style="color:#999">(※このWebページは2023年7月現在公開されておりません)</small>