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

関連記事

  1. Web関連

    死ぬまでに絶対やっておきたい!-終活データ整理編

    「終活」とはご存知でしょうか?最近ですと葬儀や財産だけでなく、PCやス…

  2. Web関連

    CMSとしてのWordPress導入 その2

    前回のコラムではWordPressの導入から、自作テーマの作成、簡単な…

  3. Web関連

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知って…

  4. Web関連

    ECサイトの売上を向上させたい 第1回目

    2015年5月に経済産業省が発表した「平成26年(2014年)度我が国…

  5. Web関連

    Webサイトに動画導入は、あり?なし?

    昨今、Webサイトの背景に動画を使用しているサイトをよく見かけますよね…

  6. Web関連

    HTMLコーディングを始める前に知っておいた方がいい話

    突然ですが、わたくし入社してから今日に至るまでの11年間で、体重を20…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ECサイトは個別接客が売れる!
  2. Web関連

    ホームページ更新の手間を省きたい(CMS構築)
  3. Web関連

    最も身近なWEBシステム、CMSに強くなろう!
  4. Web関連

    ISO10002取得!苦情対応で学んだこと
  5. AI関連

    AIがアンチエイジング市場に大きなビジネスチャンスを生む
PAGE TOP