RECREATIVE Vol.1 テーマはWebのアニメーション

沖 良矢｜世路庵 @448jp

今日はRECREATIVEという第1回目の勉強会に来ています。会場のシフトブレインさんのオフィスがおしゃれすぎて震えています……。 #re_creative

沖 良矢｜世路庵 @448jp

RECREATIVE Vol.1のイベントページはこちらです。 recreative.connpass.com/event/36399/ #re_creative

よしこ @yoshiko_pg

かっけぇ #re_creative (@ SHIFTBRAIN INC. in 港区, 東京都) swarmapp.com/c/fZQTXLPRba9

沖 良矢｜世路庵 @448jp

RECREATIVE Vol.1が始まりました。クリエイティブなことをテーマにしてイベントを開催していくそうです。第1回目のテーマは、「Webのアニメーション」。 #re_creative

沖 良矢｜世路庵 @448jp

イベント自体は安友さんが個人的に始められたものの、各種協力・スポンサーが。椅子はソニックジャムさん、マイク・ミキサーはCINRAさん、懇親会はシフトブレインさんの協力だそうです。 #re_creative

沖 良矢｜世路庵 @448jp

出演者4名の自己紹介のあとは、座談会形式で質問に答えていくそうです。最初は、「制作環境やまずは何から始めたらいいか。」 #re_creative

沖 良矢｜世路庵 @448jp

東倉さん（シフトブレイン）はWebStorm (MacBook Pro)。昔と比べるとCodePenなどサンドボックス系のWebサービスが充実しているので、見よう見まねで始めるのがオススメ。 codepen.io #re_creative

沖 良矢｜世路庵 @448jp

池田さん（フリー）は、Coda。始め方は、Flashから始めることをオススメ。今もプログラミング内で使う概念を学べる。才能に自信がある人は、最初からWebGLとかを始めてもいいけど……。 #re_creative

沖 良矢｜世路庵 @448jp

ホさん（シフトブレイン）は、MacBook Pro（IDEは聞き取れず）。最初はスケッチから始めて、それをコードに写す、ということをやっている。完成形を目指すのではなく、かんたんな物から始める。 #re_creative

よしこ @yoshiko_pg

アニメーション作るときまずスケッチするんだー Sketchじゃなくて手書きのスケッチだよねきっと #re_creative

よしこ @yoshiko_pg

processingｷﾀ #re_creative

沖 良矢｜世路庵 @448jp

荒井さん（ホムンクルス）は、WebStorm。池田さんと同じく、Flashから始めたことが今の下地になっている。CodePenやProcessingなど入りやすいところから気軽に始めるのがよいのでは。 #re_creative

沖 良矢｜世路庵 @448jp

requestAnimationFrameの話。1/60フレームで描画するというやり方は、CSSアニメーションのようなやり方よりも、クリエイティブコーディングに向いている。 #re_creative

よしこ @yoshiko_pg

easingのマイルールめっちゃききたい #re_creative

沖 良矢｜世路庵 @448jp

2番目の質問は「イージングのチョイスにいつも悩むのですが、みなさんのマイルールみたいなものがあれば教えてください。」これワシの質問やで！ #re_creative

よしこ @yoshiko_pg

私はとりあえず最初にease-in-outあてる #re_creative

沖 良矢｜世路庵 @448jp

荒井さん「たくさん使って好みのものを選んでいく」、安友さん「Robert Pennerのイージングばかりになってしまうけど？」、荒井さん「もちろん自作することもあるけど、基本はRobert Pennerイージングからチョイスすることが多い」 #re_creative

よしこ @yoshiko_pg

イージング作れる #re_creative / 他15コメント b.hatena.ne.jp/entry/cubic-be… “cubic-bezier.com” htn.to/yisB3rviJ

沖 良矢｜世路庵 @448jp

ホさん「イージングは、自分にとってはとても大事。cubic-bezierというサイトを使って作り込む」私もcubic-bezierはよく使ってます。いいすよねー。 cubic-bezier.com #re_creative

沖 良矢｜世路庵 @448jp

安友さん「距離や時間でもイージングの印象はとても変わってくるのが難しいですよね」（スピーカー同意） #re_creative

よしこ @yoshiko_pg

作業の3割がイージング調整・・・ｽｺﾞｲ #re_creative

沖 良矢｜世路庵 @448jp

池田さん「困ったらeaseInOutExpo。他に使うのはeaseOutBackで、そのまま使うとサンプルっぽくなるけど、パラメータを調整するといい。たまにカッコつけてeaseInOutQuart」 #re_creative

よしこ @yoshiko_pg

easeInOutExpoとeaseOutBackが使える（こういうの聞きたかった） #re_creative

よしこ @yoshiko_pg

easeInOutCubicをベースにしていじる。クセがないので #re_creative

沖 良矢｜世路庵 @448jp

東倉さん「サイトのデザインによってコロコロ変える。一番使う確率が高いのは、easeInOutCubic。これをベースにパラメーターをいじるのが多い。コーポレートのようなプレーンなサイトでは、クセのないイージングを使う」 #re_creative