Column コラム

アニメーション(動き)を実装し、第一印象のインパクトを高める!

 

ホームページにアクセスした際、「2.6秒」で「このサイトは有益か?」を判断するといわれます。どれほどコンテンツ(中身)が充実していても、第一印象が良くなければ、スクロールもクリック(タップ)もしない「直帰」の可能性があるのです。
「2.6秒」で興味をそそる一つとして「トップに連続的な動きをつける」「マウスカーソルに追従した動き」など、アニメーション技術をプラスする方法があります。上に紹介したサイトは、皮膚の細胞をイメージし、背景に動くポリゴン(多角形データ)を埋め込み、さらにPC版は画像が浮遊するアクションをプラスしています。
シンプルなデザインほど、少しアクションをつけると効果大!!競合先との差別化を図るうえでもおすすめです。

京都大学大学院医学研究科 皮膚科学サイトはこちら

 

アクションをプラスした
実績にクローズアップ

 

国立天文台 太陽観測科学プロジェクト

 

大きな気球のシルエットがゆっくりと上下に浮遊する動きをプラス。宇宙とプロジェクトのスケール感を伝えます。

 

久留米大学 心臓・血管内科

画面をスクロールすると、透かしの部分が拡大して全面表示へと切り替わる仕組みを実装。ついスクロールしたくなります。

 

愛知医科大学医学部 放射線医学講座

脳断層のMRI画像がシームレスに変化。医療従事者には見慣れた画像ですが、トップページに埋め込むことでアニメーション的な効果が。

 

名古屋市立大学大学院医学研究科
加齢・環境皮膚科

生まれ変わる皮膚細胞をイメージし、光を反射させてゆらめく背景と、マウスカーソルに追従する波紋アニメーションを実装しました。

 

Contact お問い合わせ

大学・医局・講座・研究室・学会・Research Laboratoryのホームページをはじめとした
ITサービスはすべてラボアシストにお任せください。

お問い合わせ・お見積