turned_in_not

Blog

HOMEkeyboard_arrow_rightブログkeyboard_arrow_right

思わず最後まで見たくなる。スクロール...

思わず最後まで見たくなる。スクロールエフェクトが斬新なサイト

2023年10月11日

#

Web制作

サイトは情報量が多くなるほど縦長になっていく傾向があります。

ストレスなくユーザーにスクロールしてもらうための方法の1つとしてスクロールエフェクトがあります。

近年では様々なサイトに使用されていますが、今回は最後まで見たくなる「スクロールエフェクト」が斬新なサイトをご紹介します。

スクロールエフェクトとは:
縦や横のスクロールによって要素が表示される効果のこと。

平面的な動きからパララックスなどの動きに差をつけて奥行き感などを出したりなど様々な手法があります。

みさとと。

https://www.town.shimane-misato.lg.jp/misatoto/

人口4600人ほどの小さな町、島根県美郷町のプロモーションサイト。 スクロールの滑らかさと奥行きのある視覚効果で、スクロールをするごとに吸い込まれていくような感覚になります。

Rinnai(リンナイ株式会社)

https://rinnai.jp/microbubble/

給湯システムマイクロバブルバスユニットの特設サイト。

スクロールすると画面にいっぱいに湯気が立ち込めた状態から徐々にユニットバスが現れ、その場にいるような気分になります。

Fontworks(フォントワークス株式会社)

https://brand.fontworks.co.jp/

フォントワークスのブランディングサイト。

スクロールするごとに書く、伝える、感じるなどのキーワードが表示され、そのキーワードに合わせて図形が動きます。

文字と図形のシンプルなレイアウトですが、インパクトのある配色と軽快なアニメーションで力強さや「次はどんな動きをするのだろう」というワクワク感を得ることができます。

Pro-Ship(株式会社プロシップ)

https://www.proship.co.jp/recruit/

プロシップの採用サイト。

スクロールをするごとに階段を昇っていくユニークなサイトです。 たくさんの社員さんが登場していて細かく制作されています。

IONIC(アイオニック株式会社)

https://www.ionic.co.jp/ionic/

イオン歯ブラシ「IONIC」のサイト。

スクロールで、イラストが動き商品の特徴をわかりやすく説明してくれます。

buddies(バディーズ)

オンラインフィットネスのサービス紹介サイト。

サービスに合った動きでサービスの概要を直観的に理解することができます。

まとめ

どれも思わずスクロールしてみたくなるサイトでしたでしょうか。 スクロールエフェクトを使用することで、ユーザーに良い体験をあたえながらページ下部まで見ることができます。

会社の世界観や商品などのコンセプトに合ったスクロールエフェクトを取り入れてみると良いですね。

この記事を書いた人

あき

Design

Webデザインやディレクションを担当しています。
前職はファッション業界でパタンナーとして働き、洋服のデザインや商品企画も担当。
国内のファッションショーの構成にも参加していました。

最新の記事

Web制作やデジタルマーケティングに関するTIPSをご紹介しています。

ブログの一覧を見る

keyboard_arrow_right
keyboard_arrow_up

スタッフが
チャットで
お答えします