Webサイトのデザインは次々に新しいものが出てきます。日進月歩の業界のトレンドや技術面の進歩から常に影響を受けるからですね。
参考にしたくなる美しいデザインのサイトは世界中にたくさんありますが、今回はその中でも横スクロールデザインのWebサイトだけを厳選して集めてみました。
異なる言語圏のサイトの中でも特に個性的なものが多いので、新たな着想にも繋がると思います。
【PR】横スクロールサイトがつくれるWordPressテーマ「HORIZON」
横スクロールデザインの特徴と選定基準
横スクロールデザインのサイトは、一般的なサイトより比較的個性が出やすいです。ユーザーが想像している”縦の動き”をいい意味で裏切るからです。印象的で記憶にも残りやすく、一般的なサイトと異なるレイアウトが独創性を高めます。
一方でしっかりとユーザビリティを意識しなければ、操作性が悪くなったり、くどいアニメーションによってサイト自体が重くなる懸念もあります。
そこで今回は以下の選定条件に基づいてセレクトしてみました。
- 動作が軽い
- 操作しやすい
- アニメーションが自然
横スクロールのイケてる海外サイトだけを厳選していますので、ぜひチェックしてみてください。
横スクロールデザインのイケてる海外サイト20選
世界各国の横スクロールデザインのサイトの中からかっこいいものだけを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」のブランドミュージアムサイトです。ロード画面にブランドロゴを活用して、ハイクオリティな映像が迎えてくれます。横スクロールの特徴としては、各スライドが的確な位置で停止するように設計されており、コンテンツを最適な位置で見てもらうような工夫が見受けられます。
ENFANT SAUVAGE
フランス人アーティストThe Blazeのソロプロジェクト「Enfant Sauvage」のサイトです。サクサク動く横スクロールと、左側のバーでアンカーリンクできる点が使いやすいです。横スクロールは無限にループできる仕様になっています。一色のキーカラーがサイト全体に統一感を持たせていますね。
Home Société
カナダのハイエンドインテリアショップのギャラリーサイトです。画像のパララックス （視差効果）が各所に使われていますが、非常にサクサク動き、ブランドごとのショップサイトにもスムーズに移動できる導線が配備されています。モノトーンカラーがベースで、写真が映えるモードなデザインです。
FOAM MAGAZINE TALENT
オランダ発信の世界的なフォトマガジン「Foam」のギャラリーサイトです。各国のアーティストのポートフォリオを横スクロールで閲覧できます。横にスライドするごとに背景カラーが変わる個性的なアニメーションも目を引きます。アーティスト別でレイアウトやアニメーションが異なる点もユニークです。
Tripolis Park
オランダはアムステルダムのオフィススペース「Tripolis Park」のサイトです。グラフィカルな映像と慣性スクロールが特徴的です。1ページのみの構成になっており、右上のメニューは任意の箇所にすぐにスクロールできるアンカーリンク仕様になっています。一番右端の「Back to the future」ボタンに遊び心を感じますね。
Mauritshuis
オランダのマウリッツハウス王立美術館のサイトです。オランダ屈指の美術館だけあり、右上の言語ボタン（NL）から多くの言語に変更可能です。サクサク動くだけでなく、作品を探して閲覧するのもスムーズです。来場チケットの購入や予約への導線も用意されており、O2Oマーケティングが意識されています。
THE LA ART BOX
ロサンゼルスにあるアートギャラリーのWebサイトです。落ち着いたカラーリングですが、下層ページも含めダイナミックなアニメーションが施されています。動作にもたつきがないユーザービリティも優れたサイトです。スマホでは縦スクロールに変化しますが、ダイナミックな動きは各所に反映されています。
Onwards Grays Digital Degree Show 2021
スコットランドの美術学校「グレイズ・スクール・オブ・アート」卒業作品のサイトです。トップページで作品のサムネイルを横スクロールで閲覧できます。中央にある検索フォームからは、クラスやカテゴリー、卒業生の名前から作品検索も可能です。こういったギャラリーは横スクロールと相性がいいですね。
Muraba Residences
ドバイの高級レジデンス「Muraba Residences」のWebサイトです。高級感溢れるアニメーションと全画面の写真・映像が印象に残ります。大画面のビジュアルと横スクロールは相性がよく、雰囲気を伝えるのに最適なレイアウトなのではないでしょうか。途中から縦スクロールに変わる演出もかっこいいです。
Zoo Agency
ベルリンの広告代理店「Zoo Agency」のWebサイトです。心地いい横スクロールと、左端のドロワーメニューが特徴的です。キーカラーを反映させた下部のバーを掴んでもスクロールできるので、デザインとユーザービリティを両方考慮されているのが伝わってきます。インパクトのある画像や動画も印象的です。
Portfolio of Christie Tang
プロダクトデザイナーのChristie Tangさんのポートフォリオサイトです。ロード画面のアニメーションから個性的で、トップページの横スクロールは写真コンテンツのみが横にスライドするタイプです。各ページでも動きの大きいアニメーションを使っており、活力がみなぎるポートフォリオになっています。
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ページの構成ですが、太めのフォントで力強さを感じるデザインです。横スクロールに伴うアニメーションも最低限に抑えられており、主張の強いフォントとバランスを保っている印象を感じました。
国産横スクロールサイトならWordPressテーマ「HORIZON」
世界各国の横スクロールサイトをご紹介して参りました。どのサイトもかっこいいだけでなく、サクサク動いて操作性も高いものだけを厳選しています。
ビジュアルを個性的かつ綺麗に見せられる横スクロールサイトは、ギャラリーやポートフォリオ形式のサイトに使われることが多いようですね。
TCDでも横スクロールサイトを作れるWordPressテーマ「HORIZON」をリリースしています。国産の横スクロールテンプレートはおそらく弊社が初です。ぜひチェックしてみてください。
Webデザインギャラリー集
