WEBデザインの参考に。おしゃれなメインビジュアルスライド5選。


今回は、ホームページのトップページなどで使われる、おしゃれなメインビジュアルのスライドアニメーションを紹介します。

お客さんにメインビジュアルに関するアニメーションの参考を見せて欲しいと言われることがあるので、
完全に個人的な備忘用でもあるんですが、ここにまとめておきたいと思います。
そのままお客さんに見せるっていうツールにも使えそうだし。

とりあえず今回は5つほど、どれも素晴らしいメインビジュアルで、簡単にできそうなものとそうでないものがあります。
実際の実装するには簡単ではないものもありますが、アイデアとして頭の片隅に置いておくといいですね。

大きい画像と小さい画像が連動して、絶妙な時間差で切り替わるアニメーションです。
ちょっとしたことですが、左から右へ流れるように切り替わるこの表現は美しいですね。
FireShot Capture 200 - 肌ナチュール 炭酸クレンジング 公式サイト - HADANATURE - hadanature-rmc.jp
こちらも、複数のビジュアルが順に切り替わるエフェクトです。
1つの商品を複数の視点から表現するのには非常に良いアイディアですね。
FireShot Capture 201 - ギリシャヨーグルト パルテノ - partheno-gy.jp
スライドごとに情報量を持たせて見ている人に訴えかけるスライドです。
スライドで切り替わるバナーにアニメーションを加えた進化版といった感じでしょうか。
こういったものがメインで出てくると、ちょっと引き込まれてしまいますよね。
FireShot Capture 202 - dejavu(デジャヴュ公式ブランドサイト) - www.dejavu-net.jp
比較的シンプルなスライドショーですが、テキストの背後に流れる波形のラインがと、背景画像が静かに流れる様子など、うまく雰囲気を出していますね。
これくらいであれば、すぐに実装できそうです。
FireShot Capture 203 - 感動で満ちあふれる日本を創ってゆく。 - ポジティブドリームパーソンズ - www.positive.co.jp
こちらも非常にシンプルなスライドです。
背景画像をゆっくりと動かすだけで、スライドの表現が広がりますね。
最近は、弊社の制作事例でもこのように「スライド+背景の動き」というのはよく使います。
ちょっとしたことですが、お客さんには好評です。
FireShot Capture 204 - 株式会社山崎製作所 - ギアの製造・加工や歯切り加工・ドライカットの事なら大阪府貝塚市にある株式会社山崎製作所にお任せ下さい。24時間稼動_ - www.yamasaki-mfg.com

いかがでしょうか、メインビジュアルのスライドといってもいろいろありますよね。
たまたまお客さんに提案する必要があり、さっと選んでみただけなので、まだまだ面白いアイディアがたくさんあると思います。
またいくつかまとまったら出していきたいと思います。