【動画で解説】横スクロールが効果的に利用された、美しいWebサイトデザイン5選

2022年もあと少しとなりましたが、今年のトレンドとして横スクロールのサイトが増えてきています。(水平スクロールとも呼ばれます。)
従来の縦スクロールとは異なる新鮮味のある動き、今回は横スクロールを効果的に使っており、なおかつデザインが美しいWebサイトの参考事例をいくつかご紹介します。

Contents

Shhh inc
HARKEN
TOTAL PROPERTY NETWORK
Prism Partner
Nyle inc
「体感できるサイト」を重視できる横スクロール

Shhh inc

出典:https://shhh.jp/ | Shhh inc

サイト全体が横スクロールで構成された事例となります。
流れるような詩と水のアニメーションがマッチしていて美しいですね。
英語は縦、日本語は横にレイアウトを統一することで、情報が自然と整理されキリッとした印象になっています。
トップページから一貫した水平アニメーションの効果も相まって、まるで一つの物語を読んでいるような没入感のあるサイトデザインだと感じました。

HARKEN

出典:https://harkenic.com/ | HARKEN

一部の下層ページを除いて、横スクロールメインのサイト事例となります。
ユーザーを惑わせないよう、トップには大きな右矢印がナビゲーションとして現れます。従来縦の動きが主流だったこともあり、こういったデザインは親切ですね。
2ページ目以降の目次デザインや画面いっぱいの写真の使い方などをみていると、一冊の本や画集を想起させます。
各ページに現れる英数字がアクセントになっており、美しい魅力的なレイアウトデザインだと感じます。

TOTAL PROPERTY NETWORK

出典:https://total-pr.net/ | TOTAL PROPERTY NETWORK

トップ以外のページは基本縦スクロールで構成されており、一部に横スクロールを取り入れた事例となります。
トップの横スクロールの動作は少し重いですが、CGアニメーションの横の動きと文字の縦の動きが連動しており、自力で回転させているような感覚にもなります。
直線と円のみを使ったアニメーションや、余分な要素を削ぎ落としたナビゲーション(トップ左下)など、シンプルで統一感のあるサイトとなっています。
右下に小さく現れる2色に分かれた円をクリックすると、サイト全体の配色がガラッと変化するのでぜひ試してみてください。

Prism Partner

出典:https://www.prismpartner.co.jp/ | Prism Partner

一部の下層ページを除き、サイト全体が横スクロールで構成された事例となります。
トップページの右下に横スクロールを促すナビゲーションの他に、2ページ目以降では現在のページ位置がわかる直線のバーが現れます。
横スクロールは縦スクロールに比べ、地続きな印象があるため、ページの終わりが見えるというのはノンストレスで良いですね。
リッチな会社案内パンフレットのようなデザインで、サイト全体の文字数も少なく、シンプルかつ分かりやすいサイトです。

Nyle inc

出典:https://nyle.co.jp/brand/ | Nyle inc

サイト全体が横スクロールで構成された事例となります。
ビビットな蛍光カラーと大胆なアニメーションを併せたインパクトある横スクロールデザイン。
水平に流れるTRANS FORMATIONの文字も、横スクロールの動きとマッチしています。
他のサイトと比べ、1スクロールで動く幅が大きく、全体的に疾走感のあるページ構成となっています。
スクロールの動きの速さひとつでも、サイトの印象はガラッと変化することが分かります。

「体感できるサイト」を重視できる横スクロール

これまでも動画を使用したイマーシブコンテンツなど、没入感を意識したサイトが作られてきましたが、横スクロールについても体感できるサイトということを重視しているデザインだと感じました。
また、水平に流れるような動きはページごとに分断するという意識を薄れさせ、ストーリーテリングを重視したサイトと横スクロールの相性は非常に良いと思います。実際事例の中でも、会社のフィロソフィや世界観、メッセージ性の強いサイトが多々見受けられました。

横スクロールのサイト制作の際には、スクロールの速さを考慮するのはもちろんのこと、次のアクションを促すナビゲーションをつける(例:矢印など)といった工夫もあれば親切です。
間も無くクリスマスということでホリデー感満載な遊び心のある、横スクロールサイトをご紹介して終わりにしたいと思います。車が走るアニメーションがとても可愛いです。(※音が流れます)