海外の横スクロールデザインのWebサイト20個まとめ

GLOBAL NEW YOKER

UI/UXに特化したニューヨークのWeb開発会社「DigitalDesign.NYC」の創設者Anjelika KourさんのWebサイトです。ご自身の経験を活かした世界中のシティガイドとなっています。スムーズなスクロールとカーソルを合わせた際のホバーアクションが印象的です。スマホでは縦スクロールにレスポンシブされます。

サイトを見る

FWD

ニューヨークの広告代理店「FWD」のコロナに関するアンケート結果のページです。ビビッドなカラーとアニメーションする見やすいグラフが印象的です。スマホ環境でも横スクロールを採用されているようですが、グラフのサイズが綺麗にレスポンシブされて、どのデバイスでも見やすいように設計されています。

サイトを見る

Nicole Fuller

ニューヨークのインテリアデザイナー「Nicole Fuller Interiors」のサイトです。美しいアニメーションや高画質の画像がふんだんにセットされているにも関わらず、サクサク動いてノンストレスで閲覧できます。最初に表示されるスプラッシュページも美しく、訪問者にワクワク感を与えてくれます。

サイトを見る

kwokyinmak.com

香港生まれ、アメリカ育ちのグラフィックデザイナー「Kwok Yin Mak 麥國然」さんのサイトです。漢字＋横スクロールデザインでかなり個性的です。比較的読み込みに時間がかかりますが、数字で表示されるロード画面が負担を軽減してくれている印象です。

サイトを見る

The Originals RENAULT

フランスの自動車メーカー「RENAULT」のブランドミュージアムサイトです。ロード画面にブランドロゴを活用して、ハイクオリティな映像が迎えてくれます。横スクロールの特徴としては、各スライドが的確な位置で停止するように設計されており、コンテンツを最適な位置で見てもらうような工夫が見受けられます。

サイトを見る

Chrysler Building

ニューヨークはマンハッタンのシンボルのひとつであるクライスラービルディング。1930年、クライスラー社の自社ビルとして建造された高層ビルです。その歴史やギャラリーを閲覧できるサイトで、横スクロール形式が採用されています。タイポグラフィも含めてかっこいいサイトです。

サイトを見る

Home Société

カナダのハイエンドインテリアショップのギャラリーサイトです。画像のパララックス （視差効果）が各所に使われていますが、非常にサクサク動き、ブランドごとのショップサイトにもスムーズに移動できる導線が配備されています。モノトーンカラーがベースで、写真が映えるモードなデザインです。

サイトを見る

Photographers’ virtual gallery

フランスのデジタルスタジオ、Okey Studioが運営している写真家のギャラリーサイト。横スクロールに加えて、視差効果も豊富で見ていて楽しいサイトです。最後には映画のクレジットのように写真家の名前が表示され、それぞれのポートフォリオやInstagramにリンクできるようになっています。

サイトを見る

Tripolis Park

オランダはアムステルダムのオフィススペース「Tripolis Park」のサイト。グラフィカルな映像と慣性スクロールが特徴的です。1ページのみの構成になっており、右上のメニューは任意の箇所にすぐにスクロールできるアンカーリンク仕様になっています。一番右端の「Back to the future」ボタンに遊び心を感じますね。

サイトを見る

Mauritshuis

オランダのマウリッツハウス王立美術館のサイトです。オランダ屈指の美術館だけあり、右上の言語ボタン（NL）から多くの言語に変更可能です。サクサク動くだけでなく、作品を探して閲覧するのもスムーズです。来場チケットの購入や予約への導線も用意されており、O2Oマーケティングが意識されています。

サイトを見る

THE LA ART BOX

ロサンゼルスにあるアートギャラリーのWebサイトです。落ち着いたカラーリングですが、下層ページも含めダイナミックなアニメーションが施されています。動作にもたつきがないユーザービリティも優れたサイトです。スマホでは縦スクロールに変化しますが、ダイナミックな動きは各所に反映されています。

サイトを見る

Scepter & Sword

「Scepter & Sword」というワインブランドのウェブサイトです。中世ヨーロッパという感じのデザインでスムーズに横スクロールします。デザインも素晴らしいですが、ワインを購入できるECサイトとしても機能している点に驚きました。商品ページの動きもチェックしてみてください。

サイトを見る

iGaming Studio

iGamingブランド（オンラインカジノやスポーツベッティングなど）向けのUXエージェンシー「iGaming Studio 」のウェブサイトです。横スクロールはあえて遅延させるような挙動になっていますが、全体的にスムーズでもたつきはなく、心地良さすら感じる動きです。

サイトを見る

Venus

ローマ神話の女神「ヴィーナス」の美しさを伝えるコンセプトサイト。Loonar Studiousというデザインスタジオによる非営利プロジェクトのようです。トップページが表示される前のロード画面から世界観が現れています。スクロールの動きに連動して画像もアニメーションします。

サイトを見る

Audento Digital

インドのデジタルマーケティング会社「Audento Digital」のウェブサイト。下層ページのブログまで横スクロールという徹底ぶりです。慣性スクロールを採用されているようですが、動きは滑らかで操作性を妨げていません。サービスページのデザインもかっこいいですね。

サイトを見る

World Usability Day

「World Usability Day – Milan」というデザイナーのための年次イベントのサイトです（2021）。2色で統一されたデジタルな雰囲気が漂うデザインになっています。横スクロール時にカラーが変化する個性的な仕様はインパクトも大きいですが、同時にはっきりとした視認性も担保されているように思います。

サイトを見る

Avantt Typeface

Avanttというフォントファミリーのギャラリーサイトで、横スクロールに合わせて円や直線がユニークに動きます。決して動きは大きくはありませんが、色が反転したりしてフォントのデザインが際立ちます。フォントの太さやスタイルをページ上で変更してプレビューできるのもおもしろいです。

サイトを見る

Rumble Studios

オーストラリアの音楽スタジオ「Rumble Studios」のWebサイトです。スムーズにスクロールできるだけでなく、設置されている映像や画像のクオリティも非常に高く、洗練されています。右上のバーガーメニューを押すと画面上に横スクロールするメニューが表示されます。個性的ですがとても使いやすいです。

サイトを見る

Chaletbau Matti

アルプス地方に多い木造建築「シャレー」を設計している「Chaletbau Matti」というスイスの企業サイトです。ページの途中から横スクロールに変化する特殊なデザインですが、企業の歴史を横スクロールで表現することで、時代に合わせて進化を重ねてきた軌跡を時系列で理解しやすくなっています。

サイトを見る

Nemesis Corporation

マルタにあるiGaming（オンラインギャンブル）業界に特化した企業サイトです。モノトーンベースの1ページの構成ですが、太めのフォントで力強さを感じるデザインです。横スクロールに伴うアニメーションも最低限に抑えられており、主張の強いフォントとバランスを保っている印象を感じました。

サイトを見る