時代の進化が早く、白黒だったものがカラーに、ボタン操作がタッチ画面に、文字だけの表示が画像に、そして今や動きがあるホームページが多く見られるようになりました。
視覚的効果を考えると、動きあるものはインパクトがあり、デザインの幅も広がります。自社のホームページが静的な画面だけであったものに動きを加えることで商品やサービスに目がいくきっかけにもなります。
ホームページに動きが出てきた技術の発展
パソコンだけでなく、スマートフォン端末でも処理速度が向上し、動画、音声、アニメーションなど、サクサクと処理ができるようになりました。
また、JavaScriptを使わないと実装できなかった動きもHTML5／CSS3で比較的かんたんに実現できるようになったこと、通信速度も向上し、ストレスなく読み込みが可能となりました。
YoutubeやTikTokなどの登場でユーザーが動きあるものに見慣れてきている今、ホームページのデザインにも工夫が必要となってきています。
動きの技法とは
実際にホームページ上でどのように動きの技法を取り入れることができるのでしょうか。いくつかの例を挙げてみます。
・アニメーション
・Webサイトの要素を3次元で動かす（Flashを使わずCSS3で実装）
・マイクロインタラクション（カーソルをボタンに乗せた時に色が変わったり、光る反応によってボタンがクリック可能と知らせる）
・シネマグラフ（写真のような静止画の中で一部だけ動きを取り入れる）
デメリットも知っておこう
動きや仕掛けがあることで、見ている側も次の操作へ引き込まれていきます。しかし、何事も過度は禁物。実装の技法によって、表示速度が遅くなり、ページの読み込み速度も関係するグーグルの評価に影響がでてしまうこともあります。何より表示速度は操作するユーザーにとっても、ストレスを与えてしまいます。
また、パソコンの場合はカーソルの移動がしやすいのですが、スマホ端末で画面いっぱいに動画が再生され、終了するまで操作ができない、再生時間が長い･･･となると本来の目的へ行く前にユーザーが離脱。
他サイトとは違うデザインを求めて画面遷移にこだわりすぎると、一般的なサイトの操作方法で慣れているユーザーは、使いにくいと感じることもあります。
デザイン重視ではなく、操作性も考慮しましょう。
ユーザーファーストを忘れずに
動きをつける技法は日々進化し、一見面白いホームページを作ることも可能ですが、あくまでもユーザーファーストであることを忘れないようにしましょう。
ホームページは自己満足では意味がありません。自社のサービスを知ってもらう、売り上げにつながるよう、ユーザーにまず興味を持ってもらうことが重要です。
静止画やテキストだけでなく、様々な要素に動きをつけたり、動画を組み込むことによってユーザーは次の情報を見たい、ボタンをクリックしてみようというアクションへとつながります。上手に活かし、他社との差別化、動きあるホームページにチャレンジしてみてください。
弊社でも動きあるホームページの制作を行っております。ぜひこだわりのホームページを一緒に考えてみませんか。お手伝いさせていただきますので、お気軽にお問合せ下さい。
下記リンク先より弊社ホームページ制作についてご覧いただけます。
アニメーションに対応したホームページの制作実績もございますので是非ご覧ください。