アニメーション(動き)を実装し、第一印象のインパクトを高める!
ホームページにアクセスした際、「2.6秒」で「このサイトは有益か?」を判断するといわれます。どれほどコンテンツ(中身)が充実していても、第一印象が良くなければ、スクロールもクリック(タップ)もしない「直帰」の可能性があるのです。
「2.6秒」で興味をそそる一つとして「トップに連続的な動きをつける」「マウスカーソルに追従した動き」など、アニメーション技術をプラスする方法があります。上に紹介したサイトは、皮膚の細胞をイメージし、背景に動くポリゴン(多角形データ)を埋め込み、さらにPC版は画像が浮遊するアクションをプラスしています。
シンプルなデザインほど、少しアクションをつけると効果大!!競合先との差別化を図るうえでもおすすめです。
京都大学大学院医学研究科 皮膚科学サイトはこちら
アクションをプラスした
実績にクローズアップ
大きな気球のシルエットがゆっくりと上下に浮遊する動きをプラス。宇宙とプロジェクトのスケール感を伝えます。
画面をスクロールすると、透かしの部分が拡大して全面表示へと切り替わる仕組みを実装。ついスクロールしたくなります。
脳断層のMRI画像がシームレスに変化。医療従事者には見慣れた画像ですが、トップページに埋め込むことでアニメーション的な効果が。
生まれ変わる皮膚細胞をイメージし、光を反射させてゆらめく背景と、マウスカーソルに追従する波紋アニメーションを実装しました。