【簡単】Webサイトの動きの作り方と参考にしたいサイト5選

「Webサイト上での動きの作り方を知りたい」

「Webサイトに動きをつけることのメリット・デメリットって？」

このような疑問をお持ちではないでしょうか。

本記事では、動的なWebサイトの構築をお考えの人に向けて、動きをつけるメリット・デメリットから、具体的な方法と注意点、そして事例も紹介します。

Webサイトに動きをつけることで、ユーザーの滞在率を大幅に上げるだけでなく、その先の最終的な目標に対しても良い影響を与えることがあります。しかし、ユーザーにとって使い勝手の悪い動きをつけてしまうと逆効果となり、ユーザーの離脱につながってしまうリスクもあります。

では、どのようなことに気を付ければよいのでしょうか。以下にて詳しく解説していきます。

Webサイトに動きをつけることにはメリットとデメリットがあります。

ポイントは、メリットとデメリットを加味し、動的なサイトと静的なサイト、どちらが目的達成につながりやすいかを軸に考えることです。

では、サイトに動きをつけることには、どのようなメリット・デメリットがあるのでしょうか。以下にて見ていきましょう。

Webサイトに動きをつけるメリットは下記の通りです。

それぞれのメリットについて解説していきます。

Webサイトに動きをつけることで、視覚的にユーザーを惹きつけることができます。

一般的に、動的なサイトよりも静的なサイトの方が多いため、珍しさから「面白いな」「スクロールしたらどんな動きをするんだろう」とユーザーを惹きつけることができるのです。

ただし、動的なWebサイトはあくまで視覚的にユーザーを惹きつけるのであって、コンテンツそのものに興味を持ってもらえるかどうかはまた別の問題になります。

また、見てほしいコンテンツに動きをつけることでユーザーの注目を集めることも可能ですが、その先の情報が魅力的なものではない限り、離脱につながってしまうことも多々あるという点に留意しておきましょう。

テキストだけが並べられたWebサイトと、動くことで視覚的に楽しませてくれるWebサイトを見たとき、動きのあるサイトから先進的なイメージを受けるのは必然だと思います。

仮に動きの要素が一つもない、ただ単にテキストだけが並んだサイトの場合「面白みのないサイトだな」「もしかして古いのかな？」といったネガティブなイメージを与えかねません。

躍動感や視覚的な楽しみを持たせて、ワクワクするようなサイトを作っていきましょう。

Webサイトに動きをつけることでおしゃれに見せることができる点も大きなメリットの一つです。

「他社よりもカッコ良いサイトを作りたい」「他社とは一味違うサイトを作りたい」こういった考えは一見自己満足のように見えて、実はユーザー目線での制作につながります。

たとえば、おしゃれなWebサイトを見ることでユーザーは「質の高い商品・サービスに期待できそう」など、ポジティブなイメージを持ってくれやすくなります。

ユーザーにポジティブな印象を持ってもらうことができれば、サイト内の回遊率も上がり、その先にある商談にも良い影響を与えることができます。

つまり、「Webサイトをおしゃれにする」というのはただの自己満足ではなく、目的の達成につながる重要な一つの考え方だといえるのです。

おしゃれな動きのアニメーションとして、WEB先案内 ITブログの記事を参考にしましょう。コピペで使えるので、動く背景を作りたいときは、ぜひ活用してみてください。→WEB先案内ITブログ 動く背景

一方で、Webサイトに動きをつけることには、下記のようなデメリットもあります。

動きのあるWebサイトの構築には、デメリットがあることも踏まえたうえで検討する必要があります。以下にてしっかりと確認しておきましょう。

Webサイトに動きをつけるとページが重くなってしまいます。重くなるということは、ページの読み込み速度が遅くなるということです。サイトが表示されるまでの時間、ユーザーを待たせてしまうことになります。

表示にどれほどの時間がかかるかはユーザーのインターネット環境によって異なりますが、「少しだけ遅い」といった程度でもユーザーにストレスを与えてしまう可能性が高いです。

ファーストビューでユーザーにストレスを与えてしまうと、離脱率を大きく引き上げてしまうリスクもあります。ページを重くしてしまうことは大きなデメリットであると言わざるを得ません。

このデメリットへの対策として、表示の準備中に簡単なアニメーションを入れてユーザーの興味をひくといった方法がありますが、いずれにしても時間が長くかかってしまう場合はユーザーの離脱を免れることはできないでしょう。

Webサイトに動きをつけるとなると、専門性の高い技術力が必要になります。

CMSツールなどを用いることでサイトを構築したり、簡単な動きをつけたりすることはそこまで難しくはないのですが、ユーザーの目を引くような複雑な動きをつけるとなると一気にその難易度は増します。そういった場合には、外注することもおすすめです。

具体的にどのような知識や技術が必要になってくるのかについては、次章で詳しく解説していきます。

Webサイトに動きをつける方法は下記の通りです。

以下では、それぞれの方法について「どのようなサイト作りに向いているか」「具体的にどのようなことができるのか」という点を深掘りしていきます。

JavaScriptは、サイト上に表示する動きやアニメーションを細かく制限する際に用いるプログラミング言語です。

たとえば、JavaScriptを使用することで

などといった動きを、ユーザーのアクションに合わせて動作させることが可能です。こういったメリットがある反面、JavaScriptは初心者が扱うには難しいとされており、自社のサイト上で利用したい場合は専門知識のあるエンジニアの力が必要になるでしょう。

高度な技術が必要なJavaScriptに対し、CSSは基礎的な知識のみでも利用できるプログラミング言語です。しかし、JavaScriptほどクオリティの高いアニメーションを表示させることはできません。

具体的には、

このような動作に用いられることが多いです。

また、CSSは、JavaScriptより手軽に扱えるため、一般的には画面上でシンプルな動きを作りたい際に利用されます。

GIFアニメーションを利用することで、簡単な動きをサイト上で演出することができます。また、GIFアニメーションは、ツールを利用することで簡単に作成することができるため、JavaScriptやCSSよりも更に使いやすい点が特徴です。

しかし、JavaScriptで作成するアニメーションのように、ユーザーの動きに合わせるような動作はできず、一方的に表示するのみとなっています。

使用方法によっては、コンテンツを魅力的に見せることができますが、ただGIFアニメーションを配置するだけでは、サイトの表示速度を下げてしまうだけになってしまうこともあるため注意が必要です。

jQueryは、JavaScriptのコードを簡易的に扱えるようにと設計されたJavaScriptライブラリです。JavaScriptで記述すると膨大になってしまうコードでも、jQueryを使用することで大幅に削減することができます。

jQueryは、背景の画像をスライドさせたり、アニメーションを変化させたりすることができるため、サイト制作の際に重宝されるツールの一つです。ただし、jQueryは、JavaScriptを用いて作成したページより読み込みに時間がかかるため、ユーザーの離脱率に悪影響を与える可能性があります。

つまり、jQueryは、作業コストを減らせるというメリットがある一方で、アニメーションの読み込みには時間がかかってしまうというデメリットもあるということです。

Webサイトを制作する際に大切なのは「作りたいサイトのイメージを具体的に持つこと」です。

「スタイリッシュでスマートなサイトを作る」「可愛らしくて女子ウケするサイトを作る」などのように、言葉のみでイメージするのではなく、参考にしたい実際のデザインを明確にしておくことが制作成功の明暗を分けるのです。

そこで以下では、「ユーザーを惹きつける動きのあるサイト作り」の参考にするべきWebサイトを抜粋して5つ紹介していきます。今回紹介するWebサイトの運用元は下記の通りです。

それぞれのサイトの特徴やおすすめポイントを解説していきます。

株式会社whateverのサイトの特徴は下記の通りです。

株式会社whateverは、CDのジャケットやCMなどを手がけるクリエイティブな会社であるため、こういった派手で個性的な写真を使ったアニメーションが非常にマッチしています。

また、スクロールに伴って文字が表示される動作も、思わず下までスクロールしてしまう気持ちの良い爽快感があります。

アイオニック株式会社のサイトの特徴は下記の通りです。

サイトを見れば一目瞭然なのですが、アイオニック株式会社では歯ブラシを販売しています。白色を基調にした清潔感あふれるサイト作りが歯ブラシの販売事業とマッチしており、見ていて安心感を覚えます。

また、こちらのサイトは、マウスで下にスクロールしてもページがスライドせず、表示される画面だけが変わるという仕組みを採用しています。この仕組みは、ユーザーの負担を抑えることができるため、離脱率を下げる効果が望めます。

美郷町のホームページの特徴は下記の通りです。

美郷町のホームページも、アイオニック株式会社同様に、スクロールに応じてページのみが変化する仕組みを採用しています。

遊び心のあるイラストを採用することで、まるで絵本を読んでいるかのような体験をユーザーに提供しており、老若男女問わず楽しめるサイトになっています。

株式会社バーグハンバーグバーグ＆株式会社闇が作成したサイト（LP）の特徴は下記の通りです。

同社が制作したサイトは、参考にするべきというよりも「このような魅せ方もありますよ」という意味でご紹介しました。

ただLPであることを前提として見る場合においては楽しめるのですが、何か分からない状態で見る分には思わず「ビクッ」と驚いてしまうほどに作り込まれています。閲覧する際は十分にお気を付けください。

メディコートのサイトの特徴は下記の通りです。

メディコートはドッグフードを販売している会社であるため、デザインと事業内容の関連性も高く、非常に見やすい印象を受けました。

ファーストビューでは、犬の横顔をアップで表示することで、思わず先に読み進めてしまうような作りになっており、小規模ながら完成度の高いWebサイトになっています。

動きのあるWebサイト制作で気を付けるポイントは下記の通りです。

以下にて、それぞれのポイントについて解説していきます。

Webサイトに訪れるユーザーは「商品の詳細情報を知りたい」「運営している会社について知りたい」などといった目的を持っていますから、サイト制作をする際はその目的を阻害しないように注意する必要があります。

たとえば、意味のないアニメーションをつけたり、クリックしづらくなる動きをつけたりすることは、ユーザーの目的を阻害してしまう可能性があります。

こういったリスクを減らすためにも、デザインを考える際はユーザー視点を持ったうえで制作を進めていくことが大切です。

外注の際に多くの要望を伝えると大きな予算が必要になってしまう可能性があります。ですが、目的が達成できるサイトにするためにも、こちら側の要望はできるだけ具体的に伝えることが大切です。

特に、「どのデバイスでも動かせるようにする」「環境に依存しないサイト作りにする」といったユーザー視点での要望は必ず伝えておくようにしましょう。

デザインに動きを取り入れる際は、「サイト全体と関連性があるか」という視点を持つことが大切です。

特に理由もなくダイナミックなアニメーションを入れたり、注意をひくために突拍子のない画像を表示させたりすることは、できるだけ控えるようにしましょう。なぜなら、サイトと関連性の低いアニメーションや画像の表示は、全体的な統一感を損なわせてしまう可能性があるからです。

ですから、サイトを制作する際は「ユーザー視点を持つ」「サイト全体に統一感を持たせる」の2点を必ず押さえるようにしておきましょう。

本記事では、動きのあるWebサイトの作成方法や、そのメリット・デメリットについて解説してきました。

Webサイトに動きをつけることで、滞在率をアップさせたり、直帰率を防いだりなど多くのメリットがあります。反面、「ページの読み込み速度が遅くなる」「専門性の高い技術力が必要になる」といったデメリットがあるのも事実です。

ですから、サイト制作の際は、メリット・デメリットを加味したうえで、デザインの構築を進めていく必要があります。

「そもそもどのようなデザインにすれば良いのか分からない」という方は、ぜひTHINkBALに一度ご相談ください。