Creators MeetUpでCSSアニメーションについて登壇しました
2013年05月02日

4月27日に開催されたCreators MeetUpにスピーカーとして登壇させて頂いたので、最近よく遊んでいるCSSアニメーションについてお話しさせて頂きました。
元々アニメーションが得意とかそんな事もなくFlashもほとんど触らずに過ごしてきたので、アニメーションを作るという事自体が新鮮で結構楽しいです。
もうちょっとCSSで何か作れるようになってきたら次はEdgeAnimateあたりで遊んでみようかなぁとか思ってるんですが、何かまとまった時間が取れれば良いなぁと思ってます。
Creators Meet Up
DESIGN SATELLITESの小島さん(@crossnode)が主催されている勉強会で、クリエイターが刺激しあう場を、ということで開催されていて、その第三回にお邪魔させて頂きました。
いつのまにか定員が70名とかになっていて、当日は割とビビっていたのは内緒ですよ。
会場はオラクルさん
余裕で70名も入って、しかも数日前に増員の都合をつけて頂いたとのステキ対応を行って頂いた会場は、何と天下のオラクルさん。写真撮ってくるの忘れたけどエントランスにあったサーバがむっちゃ格好良かった!!
写真一枚だけ撮ってた!まだ余裕があった時の写真です。
凄く広くてキレイでオサレな会場でした。お貸し頂いたオラクルさん、ご担当の甲木さんに感謝ですね。
発表内容
CSSアニメーションについての簡単な説明と、アニメーションの制御について簡単に説明をしました。
普通にWebサイト制作を受注でやっている場合はスマートフォン案件を多くやらない限りはCSSでアニメーションをさせる事はあまりないんじゃないかなぁというのがあり、また、cssでアニメーションが使える事は知っていても書いた事がある人は少ないだろうし、ましてやそれを制御する、となると割と少ないんじゃないかなぁと思ったのがきっかけです。
今回お話したことが自分のものになれば、いわゆる「html5でスマートフォンWebアプリ」みたいなものの動きも割と普通に出来るようになりますし、スプラッシュアニメとかも作れるようになると思います。
この発表で始めてみた方がいれば良いなぁ、と思っております。みなさんいかがですか?
ついでに雑感
さて、今回、いつものスライドの書き方とは頑張って変えてみて、スライドは箇条書きで話すことを中心にしてみたつもりです。すると、スライドだけ見ても「なるほど!」ってならない感じになった気がするんですけどまぁ良いとしましょう。
発表する際にはよく考えるんですが、僕は基本的にデモをほとんどやらずにスライドだけで完結する感じの、さらに話す言葉はほとんどスライドに入れる感じの、「後で見る人に優しいスライド」を作ってきたつもりです。
でもま、今回はアニメーションだしデモ多めに作ってみました。スライドにもデモURL記載ページを追加しています。
よろしければどうぞ。
CSSアニメーションについて思う事
発表自体については以上です。これから先は思ったことをだらっと書いてるだけなのでさらっと流して頂けると幸いです。
アニメーションというとちょっと意味が広くなってしまうかもしれませんが、動きってのは人間にとって「自然なもの」であると同時に「注意を引くもの」であるため、UIとしても使われるし、より強く訴求したいものにたいしても強い効果が期待できるため、好んで使われる傾向にあると思っています。
だからこそあそこまでFlashの勢いが凄かった時代もあったわけで、今はみんなで「次のFlash」を求めているんじゃないか思います。いやもうね、JSでアニメーションとか作ってみて分かったんだけどFlashすげーわ、完成されてる。とりあえずWeb上でのアニメーション・プログラムのプラットフォームとしては。
ただ、時代の流れとして、もうこれ以上FlashというかSWFファイルをWebページに埋め込む形のコンテンツは減っていく一方なので(もちろんFlashが終わったという意味ではない)、次の表現先をクリエイターは探しているんじゃないかと思う訳です。まぁとりあえずはJSになるんだろうけど、今のところ手段は色々ありすぎて、しかしFlashクラスのオーサリングツールはまだなくて、という状況な訳ですよね。
なので、別にCSSじゃなくても良いとは思うんですが、僕はせっかくアニメーションが楽しくなってきたところだし、この流れは追っていって僕程度のスキルでも楽しい物が作れるようになると良いなぁと思ってます。
今のところ、冒頭でも書きましたが Canvas を使った Adobe Edge Animate が有力かなぁと思っているのでちょっと追っかけたりしてみてるんですが、そもそもAndroidは4系でCanvasにバグがあるって話が合ったりなかったりだし、IEは8以下がダメだったりするしで、ままならんなぁと思いつつそれでも僕は楽しんでます。
しかしまぁ、何はともあれ、こう、なんだ、Flashすげーってなってた時代が終わり、今はその節目にあたるのかなぁと思う訳ですが、その節目に僕は立っているんだなぁと思うと何かちょっと嬉しくなりますね。みんな楽しくやっていきましょうね−。
他にこんな事も書いてます
- JavaScript祭スピンオフ! フロントエンド祭り in Co-Edo でオブジェクトベースのJSについて話してきた
- 第5回 HTML5minutes! で話してきた
- Creators Meet Up でJadeについて話をしてきた
- 秋のJavaScript祭りで話をしてきた
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- スマートフォンサイトで要素タップ時の挙動を頑張った
- 「Concrete5ってなに?」に参加してきました
- CSSアニメーションをAdobeEdgeAnimateでも作ってみた感想
- css3でローディングアニメーションを作るチュートリアル
- マウスホバーでリンク画像を不透明にする
FBでコメント
2個のコメント
@anticyborgさんのスライド! “SS | Creators MeetUpでCSSアニメーションについて登壇しました” – http://t.co/xDvBvzOnKb #cmujp
SS | Creators MeetUpでCSSアニメーションについて登壇しました http://t.co/SRiGB6LfQp @anticyborgさんから
トラックバック/ピンバックはありません。