MD-Blog_Web Creative

• はじめに
• アニメーションってどんな効果があるの？
  • 正確な情報伝達
  • 細かな表現を伝える
  • 触り心地を与える
• Webアニメーションはユーザーとの対話
• 自分のことばかり話すのはNG？
• 最後に

はじめに

どうも、プロダクションコーディネーターのUNOです。

こちらで筆を取らせていただくのは初めてですね。それでは簡単に自己紹介を。

Webオペレーターから、コーダー、デザイナー、ディレクターを経てフリーランスへ。その後Webはもちろん、紙媒体や写真・動画の撮影・編集、ライティングや校正・編集など、興味に身を任せて色々やって来ましたが、チームで仕事をしたくてMONSTER DIVEへの入社に至りました。

そんなわたくしですが、興味の延長から知見を広げ、近年ではモーショングラフィックや3Dなど映像的な表現をWebに取り込めないかなぁと模索中です。

また、それらを複合活用しつつより良いWebサイトを構築するため、UXを追求する日々でございます。

ではでは本題に参りましょう。

アニメーションってどんな効果があるの？

「リッチで目新しいWebサイトがやりたい！」
「心地の良い爽快なWebサイトにしたい！」
そう思われる方も多いですが、ここで質問です。

「リッチさ」「目新しさ」「心地の良さ」「爽快さ」とは、どのようなものでしょうか？

それは派手さ？ 緻密さ？ それとも余白感？ これは、何がどのような感覚を与えるかを知ることが重要になってきそうです。

では今回、アニメーションの感覚を与える効果について少しずつ紐解いて行きましょう。

正確な情報伝達

たとえば、以下のような情報を説明する場合、どちらが分かりやすいでしょう？

「画面上の丸が、左から右に動いて途中で止まる。」

これをアニメーションにしたのが以下です。

説明不要なほど分かりやすくはなったと思います。が、真価はもっと先にあります。ではこれを多くの外国の方に伝えるときはどうでしょう？

英語「The circle on the screen moves from left to right and stops in the middle.」

ドイツ語「Der Kreis auf dem Bildschirm bewegt sich von links nach rechts und stoppt in der Mitte.」

タイ語「วงกลมบนหน้าจอเลื่อนจากซ้ายไปขวาและหยุดตรงกลาง」

はい、これでいかがでしょう？（Google翻訳ありがとう）

文字で伝えるにしてもパッと出してこれだけの言語があり、同じ母国語でも受け取る側の知識量や解釈でニュアンスが変わるため、複雑なイメージになるほど文字情報だけで正確に伝えることは難しくなります。

アニメーションは静止画と違って「ビジュアル+時間軸」で構成されており、多くの情報をリアルタイムに、誰にでも正確に伝えられるわけですね。

ここでは「アニメーションは情報の塊」という点を押さえておきましょう。

細かな表現を伝える

次に、少しだけ細かい表現を与えてみます。

ここでは等速直線運動（リニア）から、加速・減速効果（イージング）をつけてみました。

動き出しと終わりを強調すると、感じとれる情報も増えたのではないでしょうか？
この場合、シンプルな図形から「物質的」「勢い」「エネルギー」など表現が感じ取れますね。

一連の動きをテキスト表現にすると、「丸が勢いよく飛び出して急に止まる」といったストーリーとなり、ビジュアルから与える情報量と印象は大きく変わりますね。

触り心地を与える

Webサイトは見るだけではなく、ユーザーはUIを触りながら情報を収集を行います。

特にタッチデバイスが普及したこともあり、ボタン一つでもアニメーションによるインタラクション（相互作用）の効果により、まるで実際に物体を触っているような感覚をユーザーは得られます。

この場合「丸をクリック（タップ）すると、それに合わせて動き出す」。おもちゃのスイッチを入れるような感覚があり、思わず動向に注目してしまう表現ですね。

このユーザーへのフィールドバックにアニメーションで返すことは「触り心地」につながり、ユーザーの体験（UX）として印象に残ります。

そして一連の流れに情報を乗せることで、没入感が増すのです。

Webアニメーションはユーザーとの対話

ユーザーがWebサイトを訪れた際、「そこにある情報を探して見る」ことが主になります。書籍を読むのと似た感じですね。

ここでアニメーションを活用すると、「もの言う情報たち」がユーザーを導くこともできます。

その語りかけによりユーザーが行動し、意味を受け取ったユーザーがまた行動へ移す、情報との対話が生まれるといってもいいでしょう。

その対話のバランスが、UXを良質なものにするヒントになります。

話しかけ過ぎると嫌がられるのと同じく、過剰な演出や、強制的に待たされるアクションなど、独りよがりにならないよう気をつけましょう。

自分のことばかり話すのはNG？

動画は受動的なコンテンツですが、単純に話しを聞きたいユーザーには迎合されます。
例えば、「料理の作り方」「DIYのチュートリアル」など、これらはテキストよりも動画の方が優れていますね。

これは、ユーザーが「教えて欲しい」という思いで「受動モード」になるコンテンツなので、「触れる」よりも「観れる」が適しているからです。

触れるアニメーションは魅力的ですが、ユーザーの心理と体験を一緒に考えることが重要です。

最後に

動きをつけることに気を取られてしまい、動きが持つ意味と役割は割と見過ごされがちです。また、余分なアニメーションが増えると、何を言いたいのか分からなくなります。

そうならないために、アニメーションの特性と役割を理解し、コンテンツにあった手法を探すのは重要です。

Webサイトでユーザーはさまざまな情報に触れ、それらに意図を感じるため、「ただ面白いと思って動かす」だけでなく、「こういうことを伝えたいからこう動きが必要」というのが、Webでアニメーションを取り入れる起点とするのがよいでしょう。

「ゴリゴリ動くからいい」とか「全く動かないから悪い」というわけではありません。あくまでユーザーと対話するための手段であり、それは情報で出来ている。それを踏まえて考えることが必要です。

ただ、実験的なコンテンツやエンタメ寄りのコンテンツなら、ガッツリ作ってしまっても良いですし、試行錯誤を前提とするくらいの気持ちで挑んでみましょう。

分からないなら調べてみる、作ってみる、触ってみる、そうしながら技術と向き合い、より素敵なWebサイトを作っていく。毎日が冒険と開拓。それがWeb業界なのかもしれませんね。