つなweB事例ウォッチング！　ちょっとした動きで魅せるWebサイト4選

イマドキのWebサイトでは、何らかの動きの演出を施すことが当たり前になってきました。要素をふわっとフェードインで表示させたり、マウスオーバーにちょっとしたアニメーションを加えたり…。動きによってWebサイトにインパクトが出るのはもちろんですが、さりげない演出を積み重ねることでWebサイトに上質感が生まれ、信頼感にもつながっていきます。
今回は、そんな動きの演出にこだわったWebサイトの事例を4つご紹介しましょう。

Webプロモーションや企画運営など幅広いビジネスを手がける企業のコーポレートサイト。トップページにアクセスすると、まずファーストビューのスライドショーに目を奪われます。単に写真がスライドショーで切り替わるだけでなく、会社のロゴマークの形で写真が型抜きされるような独特の動きが施されているためです。スクロールしていくと写真などの要素が横スライドで次々に現れますが、一つひとつの動きがキビキビとしていて、スマートでシャープな印象を受けます。訪れた人はきっと「スマートで頼りがいのある会社だな」と感じ取ってくれるのではないでしょうか。

上質さを感じさせるフェードインアニメーション
お茶のはまだ

こちらはゆったりとした動きが品の良さを感じさせるWebサイトです。鹿児島県でお茶の製造・販売をしている企業のコーポレートサイトで、トップページでは水面に波紋が広がるようなアニメーションで出迎えてくれます。Webサイトを訪れた瞬間、まるで静かなお座敷でお茶を淹れてもらったような気持ちになり、その先のコンテンツに興味が湧いていきます。下層ページに切り替えると画面が一瞬真っ白になり、その後、上から順々に要素がフェードインしていきます。フェードインも、単に要素が浮かび上がるだけでなく、ラインは上から下に降りてくるように、見出しテキストは1つひとつの文字が浮かび上がるようにと、要素ごとに異なる動きをきめ細やかに設定している点も注目です。

つなweBエディターの注目ポイント

要素ごとに異なる動きをつけながらも全体が品良くまとまるバランス感

事例詳細はこちら

---

ダイナミックなトランジションが効果的な特設サイト
PROFESSIONAL's EYE

メガネメーカーの特設サイト。その商品のユーザーで、かつ各業界で活躍するプロフェッショナルにインタビューし、商品の使い心地を語ってもらうという内容。Webサイトにアクセスすると、個々のインタビューページへの切り替えが、かなりダイナミックな動きで演出されているのに気がつくと思います。画面全体を覆うように写真が現れ、それが自動的に上にスライドしてからタイトルテキストが表示され、さらに動画へと切り替わる。その一連の動きは、まるでテレビのドキュメンタリー番組の冒頭を見ているよう。何度も再訪問するようなコーポレートサイトだと「くどい」と感じてしまうかもしれませんが、特設サイトならこれくらいダイナミックな動きでも効果的だと感じます。番組を楽しむような感覚で、コンテンツを読み進めていくことができるのではないでしょうか。

つなweBエディターの注目ポイント

画面いっぱいに使ったダイナミックな動きと動画コンテンツとの組み合わせ

事例詳細はこちら

---

横スクロールで商品選びを楽しくナビゲート
ALLTERRAIN

スポーツウェアメーカーの商品ブランドサイト。スクロール操作で下方向に動くのではなく、横方向に要素が流れていくのが印象的です。スマートフォンでも横方向に流れていくので、初めてWebサイトを訪れた人は新鮮味を感じ、ブランドや商品に対する興味へとつながっていくと思います。さらにスクロールの速さによって画像のフレームが流れるように歪む演出もあり、スクロール操作が楽しくなってきます。

 

つなweBエディターの注目ポイント

スクロールがさらに楽しくなるよう、動きに合わせて要素を変形

事例詳細はこちら

---

動きの演出は、さじ加減に注意が必要です。ページ数が少ないランディングページや特設サイトならダイナミックな動きも効果的ですが、コーポレートサイトやブランドサイトに過度な動きを盛り込みすぎると、鬱陶しさにつながってしまう不安もあります。ページ遷移のたびにダイナミックなアニメーションが入ると、見ているほうは疲れてしまうものです。動きの演出は、そのサイトの性質によって考え方を変えていく必要があるでしょう。また、動きの演出は汎用的なJavascriptライブラリを活用すれば簡単に取り入れることができますが、サイト全体の雰囲気にあった動きを求めるなら相応の技術力が必要です。動きで「魅せる」Webサイトをつくりたいなら、しっかりとした技術力を持った制作会社に相談するのが近道だと言えます。