SHARE

横スクロールできるWEBサイト5選

Handa

2024.03.08

こんにちは!デザイナーのHandaです。

WEBサイトは縦方向にスクロールすることでコンテンツを読み進めていくものが多いですが、中には横方向にスクロールできるサイトもあります。

今回は横スクロールできる素敵なサイトを集めてみました!
ぜひ参考にしてみてください。

そらぷちキッズキャンプ リクルートサイト

公式サイト:https://recruit.solaputi.jp/

難病の子どもたちが、自然の中で笑顔で楽しいときを過ごすことができる夢のキャンプ場「そらぷちキッズキャンプ」の採用サイトです。

手描き文字のロゴや、明るくカラフルな配色、優しい言葉の言い回しなどから、温かみあふれるサイトのデザインが特徴的です。
シンプルな構成のサイトですが、横スクロールにすることで絵本のページをめくるような優しい印象を受けます。

株式会社マルキョウ採用サイト

公式サイト:https://www.marukyo-web.co.jp/newgraduates2024/

福岡を中心に九州全土に84店舗を展開している食品スーパー「マルキョウ」の採用サイトです。

イラストやアニメーションも相まって、とても楽しい雰囲気のサイトデザインとなっています。
サイトが横方向に進むことで文章が読みやすく、とても印象に残ります。
アニメーションと組み合わせることで、もっと続きを見たくなるようなワクワク感を与えてくれるサイトデザインでした!

株式会社同和ライン

公式サイト:https://www.dowaship.co.jp/

海運業・海運代理店業、船用品販売、不動産事業を展開している「株式会社同和ライン」の公式サイトです。
こちらのサイトはPCの表示のみ横スクロールできます。

シックでモダンな雰囲気のフォント使いや配色で、洋書のようなスタイリッシュなデザインとなっています。
英語の縦向き文字や、色が反転するマウスカーソルなど細かな部分のアクセントが効いています。
ダイナミックな船の写真を活かし、船の進む方向に合わせた横スクロールで印象に残るサイトです。

umiral (ウミラル)

公式サイト:https://umiral.jp/

海のミネラル「にがり (塩化マグネシウム)」の可能性を追求し、入浴剤やハンドクリームなどを展開する、にがり製造のトップメーカー仁尾興産のライフケアブランド「umiral (ウミラル)」の公式サイトです。

水色のパッケージに水色の背景で、同系色でまとめた綺麗なデザインが印象的です。
海水から摂れるミネラル豊富な海の恵みを使用した商品で、海の水平線を想起させるかのように横スクロールでコンテンツが表示されます。
コンテンツの間にビジュアルが挟まっており、ブランドの雰囲気がよく伝わるサイトデザインでした!

インディゴ白書

公式サイト:https://45r.jp/ja/indigo-hakusho/

ファッションブランド 45Rのスペシャルコンテンツ「インディゴ白書」の公式サイトです。

ページを開くと巻物が表示され、そこから巻物を広げるようにコンテンツが展開されていきます。
縦書きの文字を横に読んでいく巻物の仕様にぴったりの横スクロールのサイトです。
イラストもアナログ感のあるタッチで、作り込まれた世界観が素敵なデザインでした!

まとめ

サイトの表示を横スクロールにすることで、文章が読みやすくなったり本を捲るような印象を与えたりと、一般的な縦スクロールとは異なる印象を残すことができます。

シンプルなサイト構成でもより印象的なWEBサイトを作ることができるので、ぜひ参考にしてみてください!

※ご紹介させていただいたサイトはデザイン性が高いためピックアップさせていただきました。掲載の取消をご希望の場合はご連絡いただき次第速やかに対応させていただきます。

Webサイト・ホームページ制作なら、スピカデザインにご相談ください。

スピカデザインでは、コーポレートサイト、サービスサイト、採用サイトなど幅広いサイト制作に対応しています。デザインでお客さまの課題を解決するお手伝いをさせていただきます。 まずはお気軽にご相談ください。

スピカデザインに相談する

記事を書いた人

Handa

ディレクター

スピカデザインのメンバーのイラストを描いています。 シンプルなデザインやイラストが好きです! 学生時代は写真や映像、CG、グラフィックデザインなど幅広く学びました。 ホームページを作って自分のイラストや作品を載せたり、いろんなイラストレーターのサイトやブログを見ることが好きで、WEB業界に飛び込みました。 ホラー映画が好きで、休みの日はいろんなジャンルのホラーを観ています。

スピカナレッジについて

WEB制作・ホームページ制作会社
「スピカデザイン」が運営するメディアです。
WEBのプロが知識をお届けします。

株式会社スピカデザイン 公式X