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. 新型コロナウイルスで日本の働き方改革が起こる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    社員を幸せにする?!ゲーミフィケーション活用法

    皆さんは社員のモチベーションを上げることはできているでしょうか。「お…

  2. Web関連

    とっても効果的!Facebook広告の活用メリット

    超有名SNSのFacebook。ページを開設する企業側のメリッ…

  3. Web関連

    やはり必要!web制作の第三者検証

    Webの世界は日進月歩。日々新しい技術、デザインが数多く生み出…

  4. Web関連

    iPhone5の両端から光が漏れてきた話

    皆様は、iPhoneを使用されておりますでしょうか。私は使用しておりま…

  5. Web関連

    思い通りのWebサイトにぐっと近づく!プロトタイピングツール「AdobeXD」の嬉しいポイント4選!…

    こんにちは!デザイナーの石井です。皆さん、日頃の業務ではどんなツー…

  6. Web関連

    ドメイン管理~あなたの仕事が会社を守る~

    こんにちは、SEの千明です。入社してもう1年が過ぎました。1年も経つと…

おすすめ記事

最近の記事

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

アーカイブ

  1. サービス・新技術

    “Withコロナ生活”に向けて、自粛期間中に買って良かっ…
  2. Web関連

    ホームページ制作におけるHTMLのソースレビュー
  3. Web関連

    こんなリクルートサイトは困る!就職活動中の学生が避けるサイトとは?
  4. Web関連

    WordPressをCMSとして活用するためのプラグイン Advanced Cu…
  5. サービス・新技術

    ヘルスケアはAI先生にみてもらう時代
PAGE TOP