-
1:ID:RoFzXs · 2018-11-26

#アニメーション https://estyle-inc.jp/
こういうアニメーションの設計でどうやってやるんだろう?
動画ともまた違うけど、こういうのもコンテとか描くものなんでしょうか?
cssとjsで地道にアニメーション書くのものすごく大変そう。

11 件の回答

2:ID:KJ0yYv · 2018-11-26

これってもう、あれよ、フラッシュクリエイターの人がやってるレベルだから、
キーフレームだと思うよ。つまり、アドビanimateね。
それを書き出してるんでしょう。

3:ID:xPu6Ch · 2018-11-26

すげーどうでもいいが、重くて見にくいなw

4:ID:KJ0yYv · 2018-11-26

すみません、2です。全然設計の仕方かいてなかったので追加します。
なので、発注する時に「こんな感じで〜」っていうのを事細かく指定してやってるんでしょうね。特に有機的な動きをするところとか写真の切れ方とか。スクロールする時の文字の出方なども色々と工夫してるみたいですね。スマホで見ても全く同じアニメーションなので、リアルタイムに演算してるわけでないので、コンテあれば書いてるかと思いますね。

5:ID:VWzw7Z · 2018-11-26

Re:3
内容は目に入らないよね

6:ID: · 2018-11-26

Re:4
ご回答ありがとうございます!ソース見てみたんだけど自分では追いきれなくて…。
オーサリングツールないとやってられないレベルだなあと思ったけど、やっぱりそんなかんじなのですね?
adobe animateでcanvasで書き出してるというかんじでしょうか?
このレベルになると、動画・アニメ―ション制作&デザイン技術(しかもハイレベル)+それを実装する技術の両方が必要だなあと思ってとても大変に感じたけど、adobe animateがあれば多少楽なのかな。まだ使ったことがないので手をつけてみようと思います。
でもちらっと見るかんじ、adobe animateがあったとしても昔のFlashのASみたいにコードを書かなければいけなかったりしそうですね…。

7:ID:XMFhLY · 2018-11-26

発想的には最初に静止画のデザイン案を描いてそれを発展させる感じじゃないかな。
例えば人物写真3枚のスライドショーがあってそこにモーショングラフィックで落書きする感じで端からタスキかけたり、星を散らしたりして一個面白いのができたらあとはそれを応用したようなのを作っていく感じ。
お客さんに説明するときは写真にタスキかけたのを見せてこれがシュッと出てきますみたいなこと言う。そういうのが3枚か、ビフォーアフターで6枚か。
それでGOがでたら間の動きを凝って作って、見せて、調整につぐ調整って感じかなと思った。

8:ID: · 2018-11-26

Re:7
ありがとうございます!
お客さんに説明するの大変そうだなあと思っていたんだけど、なるほどそんなかんじにするものなんですね。全体の流れの推測もとても納得がいきました。
たしかにモノクロの幾何学模様の部分は細かくコンテで描くというより、ひとつつくって応用していくような感じかなあという気がする。(わりとランダムな動きにも見えるし)
とても参考になりました!

9:ID:b5zew/ · 2018-11-26

元FlasherあがりのWebデザイナーならデザインフェーズで頭の中にはあるだろうね。
そういうのが分業な組織だとモーションデザイナーや "IxD(インタラクションデザイナー)" を雇って彼らの絵コンテやプロトによる提案をたたき台に詰めていくとか。

それすらも整ってない組織ならデザイナーとマークアップエンジニアまたはフロントエンジニアが付きっきりでペアプロ、もといペア実装でクッソ時間かけて泥臭く調整しながら詰めてるんじゃないかな

10:ID:vE6UmA · 2018-11-27

コマの画面デザインはするだろうけど
どう動くかは作る人がやれるエフェクトの集大成だから
作りながらいい感じのものを模索するんだと思う
まあくっそ時間かかると思うけど

11:ID:sVfMa5 · 2018-11-27

Re:9
主です。皆さんが思い浮かべるようなフローが想像できなくて、ひとりの人が全部やってるというパターンか9さんの言う「それすらも整ってない組織」の想像をしてたw
だからえらい大変そうだなあと。
そういったインタラクティブなものを専属でやっているデザイナーに頼むというのは、なるほど納得と思いました。ありがとうございました!

12:ID:sVfMa5 · 2018-11-27

Re:10
くっそ時間かかりそうですよね…。そして社内やお客さんからチェックバックを戻されることを想像しちゃって「どうやるんだこれ…」となっておりました。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る