Webアニメーション制作で大事なのは折れない心と探求心

2023.11.27

#新事業・開発

こんにちは。フロントエンドエンジニアのナガタです。
Webサイトのアニメーションを作るのが好きです。
社内でもインタラクティブな部分の作成を担当させてもらうことが多いです。

突然ですが、Webサイトやスマホアプリで、アニメーションを目にすることは日常ですよね。
起動時のオープニングだったり、スクロール等のユーザーのアクションに反応するものや、ボタンにカーソルを重ねると色が変わったり......
ユーザビリティーを高めるための効果として、訪れたユーザーの目を惹くため、大きいデータを読み込む時間を稼ぐため......
この数年、アニメーションを設置する目的も種類も多様化していると感じています。

株式会社ナミックス様

サイト全体にアニメーションを取り入れた
株式会社ナミックス様(https://namix.co.jp/)

Webアニメーションの現場はいつも四苦八苦!?

そんなアニメーションの作成を当社で担っているのはフロントエンドを担当するメンバーです。
一言で「アニメーション」と言っても制作方法やデータ形式も様々で、フロントエンドのメンバーは日夜国内外のトレンドをチェックしつつ、デザイナーやディレクターの要求を聞き、最善と思える方法を提案しています。
ほんの数秒間のアニメーションでも何日もかけて時には残業も乗り越えて仕上げるようなことも珍しくはありません。

株式会社エリア・パーキング様

車が駐車場に停まる動きがワンポイント
株式会社エリア・パーキング様(https://www.area-parking.com/)

また、スマホでWebサイトをチェックする人が増えている昨今。 最近のスマホの処理能力はちょっと前のモデルと比較しても、とても高くなっています。
そうは言っても、やはりパソコンと比べると決して高いとは言い難いものです。 通信速度も5GやWi-Fi等の高速通信で見てくれているとは限りません。
そんなスマホでも、コマ落ちしたり途中で止まってしまったりしないように、小さな画面でもアニメーションの内容が理解できるように、とコンテンツのターゲット層に多い環境を分析して、それを考慮しつつ作成します。

Webアニメーション完成の喜びも束の間

そして、新しい技術を初めて使ってみて、今までにない新しい雰囲気のアニメーションが完成した時には、それが夜遅い時間であっても「良いものができた......」と自画自賛に浸ります。
しかし、冒頭に書いたとおり、スマホゲームやアプリケーション等でアニメーションを見慣れたお客さまやユーザーの方々からすればそこで何かが動いていることは普通のことでしかなく、期待したほど高い評価をいただくことは少なかったりすることが現実です。
なんなら、「ここイイ感じにできたなぁ~」と思っていた、制作に一番時間をかけた部分が「長いからこの部分カットしましょう」とディレクターの一言でボツになり、崖から突き落とされるような気分を味わうことも日常だったりします。

クリエイターに大切なのは折れない心と探求心

日々崖から突き落とされていると、崖の登り方も上手になるものです。
慣れすぎて、登るために自ら転がり落ちているんじゃないかと錯覚するレベルです。

Webサイトやアプリケーションにとって、「アニメーション」という要素は必須ではないけれど、ちょっとした使いやすさだったり、ユーザーを飽きさせないようにだったり、時にはトップページのファーストビューでコンテンツ全体の雰囲気を表すものだったり。
隠し味のような......コンテンツの味を一段階引き上げるスパイスの1つがアニメーションなのかな?と思っています。
そのため、大味にならないように調理人(ディレクター)のサジ加減も大切だと思っています。

東洋合成工業株式会社様

文字などの力強い表示方法や、宇宙の星々の動きにこだわった
東洋合成工業株式会社様(https://www.toyogosei.co.jp/)

そして、1つアニメーションがリリースされると、また同業他社が作ったアニメーションを見て、「これどうやって作ってんだろう?」と研究する日々が始まります。

動きのあるWebサイトのご相談はこちらから

お問い合わせ・ご相談

時代変化が速い今だからこそ、
お客さまのビジネスを迅速に徹底してサポートできる
ムーンファクトリーへ、ぜひご依頼ください。

このWebサイトでは、お客さまへのより良いサービスの提供を目的としてCookieを使用しています。Cookieの詳細についてはこちらをご覧ください。

Cookieを受け入れる