• 15k
  • 13
ウェブデザイン \ 2018年11月5日

Webサイトへアニメーションを追加:知るべき6つの事

Webデザインにおいて、アニメーションを取り入れた動きのあるウェブサイトがここ最近トレンドとなっています。アニメーションをサイトへ用いることで、ダイナミックな躍動感と流動的なユーザーエクスペリエンスを提供できます。過去数年Webデザイン界で人気のあるアニメーションですが、オーディエンスはどのように感じているでしょうか。視覚的にインパクトがあり楽しく閲覧できるという好意的な意見もあれば、アニメーションがあることにより気が散ってしまいサイトの焦点がわかりにくいという否定的な意見もあるでしょう。

どちらも納得の行く意見です。
アニメーションはWebサイトの見た目を更に引き立たせる役割を果たしますが、その効果を得るにはサイトの目的に沿った使い方をする必要があります。つまり、Webサイトと一貫性のないアニメーションは、オーディエンスにとって分かりにくいものとなってしまいます。オーディエンスにとって視覚的にも情報収集の場としても機能するよう、正しいアニメーションの取り入れ方を一緒に学びましょう!

アニメーションの基礎を理解

アニメーションは様々な形やフォームがあります。 さりげないボタンの動きから型破りなインパクトを与える見事なアニメーション背景にもなります。アニメーションの使用方法としては、スクロールすることで視覚的にサイトの雰囲気を感じることができるインタラクティブな反応として設置、完全に独立したアニメーションとして設置、又はサイトに奥行きを出しダイナミックな印象を与えるパララックススクロールを追加することもできます。
アニメーションのあらゆる可能性を理解することで、より戦略的にアニメーションを使用することができるでしょう。

過剰なアニメーション

過剰なアニメーションでサイトを見ずらくしてしまうのは勿体ないです。何事にも適度さが重要です。不必要なアニメーションであなたのサイトの動作を重くし、パフォーマンスを下げてしまわないよう気を付けましょう。 また、必要以上のアニメーションの設置はかえってオーディエンスを混乱させてしまうことになりかねません。必要な要素のみをサイトに使用することにより、 あなたのサイト訪問者へスムーズなブラウズで楽しめるWebサイトを提供できるでしょう。

アニメーションのあるサイト

明確な目的

アニメーションの使用は、アニメーションがあなたの目的を正当化できる場合に使用します。つまり、アニメーションはあなたの目的のために何らかのタスクを実行する役目があります。たとえば、

> スクロールする場所やクリックする場所をサイト訪問者へ示し、サイトの動きを誘導する。

> ストーリー性を持たせながら、徐々にアイテムを展示する。

> あなたの商品やサービスをアニメーションで視覚化する。

> スクロールを制御し、静的で滑らかな動きを持たせる。アニメーションを使用したコンテンツでサイトに特定の雰囲気を作り出す。例:子供服のオンラインストア

明確な目的

何をアニメーション化するか?

サイト上の要素が、アニメーションでうまく機能するものもあればそうでないものもあります。例えば下記の要素はアニメーションを用いる上で参考となるでしょう。

> 行動の引き金となるもの(ナビゲーションボタン、CTA、リンク画像)

> 方向性を与える要素(矢印、背景スクロール)

> プログレスバー

> 興味を引くための要素(新着メッセージアイコン、ライトボックス、注文ボタン)

アニメーションの効果を害してしまうような場合、アニメーションを使用する必要性はないと言えます。たとえば、テキスト段落にアニメーションを追加すると非常に読みにずらくなったり、サイト訪問者が問合せフォームやコメント欄など自分で入力する箇所へのアニメーション追加は、サイト訪問者の気が散ってしまう可能性があります。

コンテンツの簡略化

Webデザインへアニメーションを使用するための優れた戦略の1つは、コンテンツを明確化、また、簡略化するためのツールとして使用することです。テキストとアニメーションを組み合わせるテクニックをオンボーディングと呼び、あなたのビジネスのフローや要点をアニメーション化することでオーディエンスへ魅力的に伝えることができる優れた方法です。

コンテンツの簡略化

オーディエンス理解の重要性

あなたのターゲットとなるオーディエンスに関して熟知することは常に重要です。例えば、オーディエンスの視覚的な好み、あなたのサイトを訪問する理由、ソフトウェアのタイプを理解することで、アニメーション用途が変わってきます。

つまり、必ずしもアニメーションを用いる必要性はなく、あなたのターゲットとするオーディエンスが、単色の配色スキームを好んでいたり、法的なアドバイスを必要としてあなたのサイトを訪れていたり、古いバージョンのソフトウェアを介してアクセスが考えられる場合などはアニメーションの使用は適切ではないと言えるでしょう。

あなたのホームページを作成する準備ができましたか?さぁ、Wixでホームページ作成を始めましょう!

ライター: Wix Team

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

メールは既に存在します

正しいメールアドレスを
入力して下さい

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

メールは既に存在します

正しいメールアドレスを
入力して下さい