Web関連

パララックス効果を使ったサイトを調査してみた

0

img_1.png

最近のWebサイトには、第一印象でユーザーの心を掴むためにファーストビューに動画や画像を大きく配置したりする「魅せる」サイトが多く存在します。
シンプルで使い勝手が良いサイトも良いですが、動きがあるサイトは見ていて楽しいですよね!
パララックスサイトは、要素ごとの動きの違いが面白くて無駄にスクロールをしてしまう自分がいます。

今回はユーザーをワクワクさせるような、パララックス効果を使っているサイトを調査してみました。

そもそも、パララックスとは?

“パララックスとは、視差効果のことです。
スクロールした時に要素ごとに違うスピードで動かすことで、立体感・遠近感を演出することが出来ます。
画像やテキストのフェードや、拡大・縮小、回転など様々な動きをつけることが可能で、アニメーションを得意としています。”

文字で読むより実際に見たほうが早い!
ということで、いくつかパララックス効果を使用したサイトをご紹介します。

Mélanie F

http://melanie-f.com/en/

こちらはシューズメーカーのWebサイトになります。色合いが華やか!
タイトルテキストが紡がれていくエフェクトが素敵ですね。
背景の丸や三角などの記号もスクロールに合わせて色が変わるので、商品の背景との統一感も出ています。

東京タワーに関するTwitterのツイートとともに、東京タワーの様々な写真を紹介するサイトです。
ツイートが下から上へ、泡のように上っていくのがなんだか感慨深いものがあります。
「朝」や「夕方」、「綺麗」など、特定のワードに反応してツイートを取り上げているようです。
東京タワーの色々な顔が見られるのも楽しいですね!

スカイガーデンヒル古田台

img_4.pnghttp://www.soken-home.jp/hiroshima/info2/

広島市西区のモデルハウスやモデルプランを紹介しているサイトです。
フェードのエフェクトしか使っていないのに、洗練された雰囲気が溢れ出ています…。
全くエフェクトを付けない場合とは、また印象が変わってきますね。

Every Last Drop

img_5.pnghttp://everylastdrop.co.uk/

こちらは、私たちが一日に使う水の量が視覚的に分かるサイトになります。
ストーリー性があると、続きが見たいという衝動に駆られて、スクロールする手が止まりません!
パララックスは、ストーリー性を印象的に伝えることにも適しているということが分かります。

パララックス効果を使用する際に気をつけたいこと

今回、パララックスを使ったサイトを探していて、2点気になったことがあります…。

まず、多くのパララックス効果が盛り込まれたサイトだと読み込みに時間がかかってしまうということ。
そしてマウスホイールでの1回のスクロールに対する動きが小さいものだと、ユーザーを疲れさせてしまうということです。

ユーザーの大半はサイトの閲覧に対してスピード感を求めています。
読み込みが遅かったり、動きが小さかったりすると、ユーザーのストレスに繋がりかねません。
サイト制作でパララックスを使う際は、上記2点に気をつけていきたいですね。

まとめ

いかがでしたでしょうか。
サイトによって色々なエフェクトが使用されていて、見ていると楽しくなってきますね!
パララックス効果を使用したサイトはまだまだたくさんありますので、探してみると面白い発見が出来るかもしれません。

以上、新人デザイナーの堀井がお送りいたしました。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

0

業務を効率化できるサービス前のページ

あなたの日本語、間違ってる!実はおかしい文章表現次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    「一度だけ客」をリピーターに変身させる方法(3)

    「既存顧客を育成し、売上やお問合せに繋げたい」をテーマにお送りする連載…

  2. Web関連

    キーワードは「共感」?クレーム解決への最短経路

    こんにちは、ISO室所属の尾崎です。今回もクレ…

  3. Web関連

    動画制作のちょっとしたコツ

    最近、日本のWebサイトでも動画を背景に使っているものが増えてきました…

  4. Web関連

    【ホームページ制作】新規顧客(潜在顧客)の開拓をしたい

    企業のホームページは、何らかの目的や役割があって存在するものですが、上…

  5. Web関連

    ユーザーを騙す!?インフィード広告の有効活用

    皆さん、スマホのニュースアプリやSNSなどで以下のような広告を見たこと…

  6. Web関連

    初心者WEBデザイナー必見!アイデアを引き出すための秘訣3選

    WEBデザイナーの皆さん、アイデアが出ずに困ったことありませんか?アイ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    【Web アプリ制作】スマホアプリ×ホームページ
  2. Web関連

    モックアップ主導のUI・UXの検証!デザインはこうして着手!
  3. Web関連

    これぞクールジャパン!アニメビジネスの成功例をまとめてみた!
  4. サービス・新技術

    withコロナは非接触技術で生活しよう!
  5. Web関連

    通販の再配達に挑戦!保管期限当日の23時34分に気付いた場合
PAGE TOP