こんにちは。
デザイン部のSです。

今回はWebサイトの動きについて調べてみました。
内容はとてもシンプルで、動きが面白いと思ったサイトをひたすら集めてみたという記事になります。

その動く部分も、ボタンのような小さな所から、サイト全体のレイアウトを組み替えるレベルのものまで様々とありますので、デザイン制作や提案の際のインスピレーションなどに繋がればと思います。

沢山集めすぎてしまい全ては紹介しきれないので、今回はその一部を厳選してご紹介します。

Webサイトの紹介

BAKE CHEESE TART

サイトを見る

このお店で販売されている商品の宣伝用のページになります。
メインビジュアルが表示されるまでの動きがとても綺麗でした。
二つの商品が販売開始されるようなのですが、それぞれの商品のメインビジュアル画像を、マウスカーソルの位置で切り替えることができます。
スクロールしていくと背景のあしらいがスクロールに合わせて回転する仕様になっていたり、細かい部分でも動きが加えられています。

株式会社ディレクションズ

サイトを見る

映像やコンテンツの企画・制作業務を行なっている会社のサイトです。
このサイトの特徴は、マウスポインターに丸い球体が追尾してくる仕様になっています。
ポインターの移動速度によって形が変形するようになっていまして、球体もよく見るとただの丸ではなくて重なった部分は色が反転しています。
このような遊び心なども取り入れられているので、見ていて飽きさせない効果もあるのではないかと感じました。

ユーリ!!! on ICE

サイトを見る

実際に見ていないのでストーリーなど詳しくは分かりませんが、フィギュアスケートのアニメのサイトになります。
フィギュアスケートのイメージを、サイトの動きなどを上手に活かして表現しています。
サイトをスクロールしていくだけでアニメの世界観が伝わってきます。

鈴乃屋

サイトを見る

着物の紹介ページになります。
下へスクロールしていくと出てくる着物の紹介部分では、着物の柄を大きな画像で見せてから、実際に着た写真に切り替わるという仕様になっています。
静的なデザインでこの二つの情報を伝えようとすると操作が複雑になったりスペースを多く必要とすることがあるのですが、動きを上手に取り入れることでそのようなこともなく、見やすく分かりやすい形で情報を伝えることができていると思います。

LIVESENSE

サイトを見る

スクロールしていくと上にあるゲージが溜まっていきます。
長いLPなどでこのようなゲージの機能を活用したりすると、今自分がページのどの辺りを見ているのか分かってストレスなく見ることができるのではないかと個人的に思いました。

約束のネバーランド

サイトを見る

アニメの公式サイトになります。
このサイトの面白かったところは、マウスカーソルを当てた箇所に反応して動く背景の波紋で、とても自然に表現されていました。
それ以外にも、キャラクター紹介ページでの写真の切り替えの仕方も面白く感じました。

脱毛エステ.com

サイトを見る

幽霊を使った脱毛の広告サイトです。
普通のかしこまったページだとどうしても読み飛ばしてしまったり、途中で退屈してしまうのですが、このように面白みのあるページになっていると最後まで見られて頭にも入ってきやすいように思いました。

まとめ

デザインをしていく中で、静的な動きのないデザインだけで解決しようとすると、どうしても難易度が高くなってしまうこともあるかと思います。
ですが、この動きというものを取り入れることで、難しいことをしなくても解決が可能なことも少なくないと思います。
Webサイトの動きを上手に活用していき、より満足していただけるサイトを作っていきたいです。

東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします

お問い合わせはこちら