2022.11.08

動きを形にする、エンジニアたちのアニメーションアイディアの瞬間

Ryota Sudo

こんにちは、佐藤夏希です!
5月にお届けした「【G8お仕事風景】Web制作会社が初挑戦した、100ページ越えの紙パンフレット制作現場をお届け!」の冒頭でお話しした、我が家のゴーヤですがご覧の通り大きくなりました!(もうすっかり冬になりそうでお届けするのが遅くて申し訳ないです)

無事身を付けて収穫することができました!(収穫時はもっと大きかったです。)

実はGear8は植物や園芸好きが結構多いです。タイにいるアイスは、植物博士でよく植物について教えてくれます。普段デジタルに囲まれているので緑が恋しくなるのですかね~オフィス近くにある永山公園も、スタッフには人気のスポットです。

*****

さてさて、今回はGear8のエンジニアたちにアニメーションのアイディアについて聞いてみたいと思います。

普段何気なく見ているサイトで、ポン!と文字がでてきたりシュッと写真が切り替わったりすることがありますよね。これは全てエンジニアチームが構築の際に、そう動くように組んでいるのでプログラムされた通りにWebサイトを読み込んで表示されています。当たり前ですが、何もしないと文字は出てこないし、写真も切り替わらないんですよね。
この動きがあるのとないのとで、サイトの仕上がりはめちゃくちゃ変わります。

このサイトのアニメーションは一体いつどのようにして思いついているのか、私も気になりエンジニアの須藤さん、竣也くん、匠くんの3人にお話しを聞いてみました!

*****


右から匠くん、須藤さん、竣也くん。そしてエンジニアアルバイトの小松田くんです。この日はアルバイトの日で来てくれていたので、同席して話を聞いてもらいました。

夏希:楽しみにしていました、よろしくお願いします!

須藤・ 竣也・匠:よろしくお願いします。

夏希:揃うと圧巻ですね。では、早速いきますね!アニメーションを付けるときって、自分で思いつくものなのですか?それともディレクターからこうしたいっていう相談がある感じですか?

竣也:僕が担当させていただいている海外案件だと、ディレクターに海外の参考サイトをサンプルに「この参考サイトの動きに近い形で、画像がポンッ!とでてきて、ここはふわふわさせたいです」という指示をもらうことが多いです。海外には海外のトレンドがあるので、その指示はすごくわかりやすいです。

須藤:日本案件だと(そういう指示は)あまりないです。どちらかというと僕の場合はお任せです。

匠:僕、半々です。海外だと竣也さんが言ったように、参考になるものがあって、オリジナルにアレンジしていくのに近いけど、日本だとお任せなので須藤さんと一緒です。(制作したものに対して)バックがあるんで、それを取り入れて調整してって感じです。ベースは自分で考えます。

夏希:なるほど。国内外の案件でも違うんですね。構築方法も日進月歩でドンドン変わっていく世界だと思うんですが、普段そういう勉強ってどこでしてるんですか?

匠:TwitterとCodeGridっていう有料メディアを購読してるので、それを見る感じですね。でもTwitterの方が多いですね。

須藤:S5-Styleで見たりとか。うちのサイトも結構掲載されています。

竣也:僕もデザイン参考サイトを見ることが多いです。SANKOU!とかawwwards見てます。この2つもGear8載ってますよね。ただawwwardsは、海外サイトが多いので逆に(日本の)トレンドと合わないことがあります(笑)

夏希:そうなんだ(笑)3人ともこの情報収集って、いつ見るの?朝出勤中とか?

須藤&匠:仕事中に見ます。

竣也:僕も仕事中が多いですが、Feedlyというアプリに参考サイトを登録しておいて、移動中にスマホで見ることもあります。

最近自分が構築したサイトで、新しく挑戦したこと

夏希:最近構築したサイトで、新しく挑戦したアニメーションってある?

須藤:福津組さんのサイトです。導入のアニメーションやスクロール量に応じてコンテンツが変わっていくのも、今回がはじめてだったけどうまくハマりました。

夏希:このアニメーションはこうしたらかっこいいなと思って考えた?

須藤:そうですね、水野さんのアイディアも少しありますけど。ローディングで線が描かれるのは水野さんからのリクエストを受けて、実際に実装しました。

匠:フロアフロスさんのサイトですかね。アニメーションも全部考えました。最初のアニメーションも1度見たらもう出さないようにするとかイラストや文字が出るタイミングを結構考えて作りました

竣也:夢を描くお菓子屋さんパレットさんですね。社内デザイナーと打ち合わせを密にとって、PCサイトもスマホ表示させるっていう新しい試みだったので、スマホのレイアウトでこだわった案件だったと思います。

夏希:可愛いサイトだね~、スマホのみって確かに斬新だね。

話は昔好きだったアニメーションやサイトの話に。

夏希:楽しい話はあっという間で。雑談的に昔好きだったアニメーションや構築について聞いてみたいんだけど、こういう構築が好きだったっていうのある?

須藤:Flash時代、十数年前だけど。サイト全体がテーマパークみたいになっていて、入り口に〇〇コーナーがあって、サイト内にあるテレビをクリックしたら動画が見れたり楽しかった。スマホが出てきたことでなくなっちゃいましたけど、(技術としてなくなった)Flash以外でも今の技術を使えばなんとか出来そうな気もする。

竣也:僕はポップなアニメーションが好きでしたね、映画やアニメのサイトに多い感じ。

匠:僕、ほぼ今のトレンドしか知らない世代なので。

須藤:そうだよね、スマホネイティブだもん。僕は古いIEのバージョンでおかしくなる世代の終わりぐらいだったんだけど・・・匠くんはもう・・・

匠:そもそもIE対応してないよっていう。

夏希:はははは(笑)そういえば朝毎日ミーティングしてるって聞きましたが、どんな話してるんですか?

須藤:今日のスケジュール確認して、タスク量の調整とか構築で悩んだところの相談とか・・・

竣也:新しい映画が公開されるとか・・・

匠:みんなで温泉行く日決めたりとか・・・

須藤:雑談して、筋トレして終わりです。

夏希:筋トレしてるの!(笑)確かにあそこに筋トレローラーが見える。(プロジェクターの隣にそっと飾ってある筋トレローラー)私もあとでやってみます。今日は貴重なお話しありがとうございました!

須藤・ 竣也・匠:ありがとうございました!

*****

3人のエンジニアそれぞれがいろんな情報サイト等から情報を吸い上げて表現していると知って、やっぱり勉強家なんだなと思いました。
と、同時に動きを表現するって大変だけど楽しんでやっているんだなということも改めて感じたインタビューでした。

普段はあまり多くを語らない3人(とアルバイトの小松田君)だったのですが、この日はたくさんお話しできて良い情報をたくさんもらいました!エンジニアチーム、ありがとうございました!

さて、次はどんなお仕事紹介でしょうか?お楽しみ!

Facebook
Twitter

Ryota Sudo

1990年札幌生まれ。大学でプログラミング、動画制作、デザインなどを学び、2012年よりインターンシップを経てGEAR8に入社。 業務ではコーディング、フロントエンド、アニメーションを担当。プライベートではアプリ開発も趣味とする。
  • Tech

    エンジニアチームによる技術ブログ