Web制作会社 THINkBALがデジタル全般の情報をお届けするデジタルマガジンです。東京と埼玉を拠点としたWeb制作会社|株式会社THINkBAL
Web制作
Update: 2024/4/15

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

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

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

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

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

  • Webサイトに動きをつけることを検討している人
  • Webサイトに動きをつける具体的な方法と注意点を知りたい人
  • 動的なWebサイトの参考サイトを探している人

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

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

Webサイト制作のプロが貴社のお悩みを解決します! データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。 ビジネス成果に貢献するWebサイト制作・構築を提供します。
\まずは無料相談!2営業日以内に返信/
Webサイトの制作・改善を相談する

Webサイトに動きをつけるメリット・デメリット

動画のイラスト

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

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

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

メリット

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

Webサイトに動きをつけるメリット
  • 視覚的にユーザーを惹きつけることができる
  • 先進的なイメージを与えることができる
  • Webサイトをおしゃれにできる

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

視的にユーザーを惹きつけることができる

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

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

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

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

先的なイメージを与えることができる

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

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

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

Webサイトをおしゃれにできる

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

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

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

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

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

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

デメリット

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

Webサイトに動きをつけるデメリット
  • ページが重くなってしまう
  • 技術が必要になる

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

ページが重くなってしまう

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

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

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

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

技術が必要になる

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

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

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

Webサイトに動きをつける方法

ホームページ制作の際のコード

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

Webサイトに動きをつける方法
  • JavaScriptを使う
  • CSSを使う
  • GIFアニメーションを使う
  • jQueryを使う

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

JavaScriptを使う

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

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

  • 一時停止
  • 巻き戻し
  • スローダウン

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

CSSを使う

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

具体的には、

  • 画像の配置やサイトの背景を変更する
  • ユーザーが指した文字の大きさを変化させる
  • 画像のフェードイン・フェードアウトを可能にする

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

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

GIFアニメーションを使う

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

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

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

jQueryを使う

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

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

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

動きのあるWebサイトデザインの参考事例を5つ紹介!

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

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

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

参考になるWebサイトデザイン5選
  1. 株式会社Whateve
  2. アイオニック株式会社
  3. 美郷町ホームページ
  4. 株式会社バーグハンバーグ&株式会社闇
  5. メディコート

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

「株式会社whatever」

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

  • カラフルで個性的な画像が目まぐるしく変化する
  • スライドに合わせて文字が表示されていく爽快感がある
  • アニメーションを使用しつつも全体的にはシンプルな設計になっている

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

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

「アイオニック株式会社」

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

  • シンプルで清潔感のある印象を与えている
  • スクロールに合わせて画像が変化する(画面が下にスライドしない)
  • 「何を目的としたサイトなのか」がファーストビューで明確に伝わってくる

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

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

「美郷町ホームページ」

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

  • 遊び心がある
  • 楽しみながら読み進めることができる
  • 魅力を可視化することでユーザーに伝わりやすくなっている

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

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

「株式会社バーグハンバーグバーグ&株式会社闇」

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

  • これまでに無いサイトの作りでサービス内容を強く印象づけている
  • 音声を取り入れることで一味違ったユーザー体験を提供している

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

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

「メディコート」

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

  • シンプルなサイト設計で分かりやすい
  • 動物の写真を多く取り入れることで滞在率UP

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

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

動きのあるWebサイトで気をつけること

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

動きのあるWebサイトで気をつけること
  • ユーザー視点でデザインを考える
  • 予算が大きくなる可能性がある
  • サイト全体と関係のあるデザインの動きを入れる

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

ユーザー視点でデザインを考える

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

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

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

予算が大きくなる可能性がある

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

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

サイト全体と関係のあるデザインの動きを入れる

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

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

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

動きのあるおしゃれなデザインでWebサイトの制作をしたいならTHINkBALへ

動的でおしゃれなWebサイトを制作したい方は、ぜひTHINkBALにご相談ください

THINkBALでは、お客様のご要望を取り入れるだけでなく、「問い合わせ件数UP」「商品の売上拡大」などといったサイト運用の目的達成のお手伝いをします。

この記事のポイント
  • 「サイトの方向性がまだ決まっていない」
  • 「ある程度デザインは決まっているけど制作方法が分からない」

こういったお悩みを持つ方はぜひTHINkBALにご相談ください。

まとめ

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

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

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

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

Webサイト制作のプロが貴社のお悩みを解決します! データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。 ビジネス成果に貢献するWebサイト制作・構築を提供します。
\まずは無料相談!2営業日以内に返信/
Webサイトの制作・改善を相談する
著者
Digital Magazine editorial departmentDigital Magazine 編集部
Digital Magazineの企画・執筆・編集をしています。Webサイト制作、UX/UIデザイン、コンテンツマーケティング、SEO対策、SNS運用、広告運用に強みを持ったメンバーが、デジタルマーケティング全般の最新情報やノウハウをわかりやすくお届けします。
監修者
Miyazaki Norifumi宮崎 典史
THINkBAL代表。Web制作会社でWebサイト構築を学び、株式会社電通に出向。ナショナルブランドのWebサイトを数多くプロデュース。担当領域は、Webコンサルティング・戦略立案・プロジェクトマネジメント・UXリサーチ・情報設計・制作ディレクション。