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」のブランドミュージアムサイトです。ロード画面にブランドロゴを活用して、ハイクオリティな映像が迎えてくれます。横スクロールの特徴としては、各スライドが的確な位置で停止するように設計されており、コンテンツを最適な位置で見てもらうような工夫が見受けられます。
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ページの構成ですが、太めのフォントで力強さを感じるデザインです。横スクロールに伴うアニメーションも最低限に抑えられており、主張の強いフォントとバランスを保っている印象を感じました。
横スクロールサイトをリサーチして気づいた点
リサーチしていると、ページが重たかったり、スムーズにスクロールしづらいサイトも散見されました。
※今回厳選したサイトには含まれていません。
横スクロールサイトの1ページは、通常よりも長くなる傾向があるため、1ページ内にコンテンツを設置しすぎていることも要因のひとつかもしれません。派手なアニメーションがスムーズに動かないものもあり、より重たく感じるものもありました。
また、横スクロールの動きに大味なエフェクトを施しているサイトは、閲覧したい箇所をクリックしにくかった印象です。滑らかな慣性スクロールを実装する場合なども、その強弱の緻密な調整が必要ですね。
横スクロールサイトを作るなら
WordPressテーマ「HORIZON」
世界各国の横スクロールサイトをご紹介して参りました。どのサイトもかっこいいだけでなく、サクサク動いて操作性も高いものだけを厳選しています。
ビジュアルを個性的かつ綺麗に見せられる横スクロールサイトは、ギャラリーやポートフォリオ形式のサイトに使われることが多いようですね。
TCDでも横スクロールサイトを作れるWordPressテーマ「HORIZON」をリリースしています。滑らかな横スクロールで操作しやすく、自然なアニメーションが随所に施されています。国産の横スクロールテンプレートはおそらく弊社が日本初であり、唯一無二です。ぜひチェックしてみてください。
Webデザインギャラリー集
お洒落なファッション系からインテリア、カルチャー、ローカルメディアなど色々あるWebマガジン。 今回は数あるマガジンの中でもWebデザインがカッコよく、見ているだけでも素敵なサイトをまとめました。どれもWebデザインの参考になるものばかりです。 【PR】イケてるWebマガジンをつくれるW...
日本（和風）のデザインのホームページといえば、まずは「神社」が思い浮かぶのではないでしょうか。 神社は日本国内に88000社以上あると言われ、今でも有人の神社は2万ほどあると言われています。その中でも今回は有名な神社や凝ったデザインのWebサイトの神社をピックアップしました。 【PR】神...
日本旅館・民宿のWebデザインで洗練されたWebサイトをまとめました。見ているだけでも旅に出たくなる、素晴らしいWebサイトばかりです。 縦書きテキストを取り入れた和風デザイン、あるいは和洋折衷のバランスに長けたサイトを作る際に参考になりそうです。 【PR】旅館・宿のWebサイトを制作す...
東京五輪を控えている日本。昨今のインバウンド需要の高まりを受けて、訪日外国人観光客に向けたメディアがどんどん誕生しています。WEBメディアやアプリ、本、フリーペーパーなど、そのタイプも多種多様です。どの国に向けて発信しているかによって、その媒体がフォローしている言語の数も変わってきます。 当記...
コメント