BAU-YA『デザイナー必修 SVG 基本＆アニメーション』講座に行ってきた
BAU-YA主催『デザイナー必修 SVG 基本＆アニメーション』講座に行ってきましたので、参加の記録です。
※具体的なテクはあえて書きませんので、気になる方はぜひ講座を受けてください。笑
まだフォローアップが来ていない状態で書いているのでうろ覚えな感じで…。フォローアップではオススメの書籍なども教えてくれるとのことで楽しみです。お得！
書籍もいろいろですが、SVG第一人者のお墨付きなら安心して読めます。
概要
SVGの第一人者 松田直樹氏が解説する、デザイナーが知っておくべきSVGの基礎から作成・実装、フィルターやアニメーションまで学ぶ実践講座。
人気講座につき満席！
私はデザインではなくコーディングが主な仕事なので対象者ではないのですが、逆に、デザイナー側から見た視点も知りたいなと思っていることもあり、今まで知らなかったことも学べて参考になる講座でした。
中身が詰まっていて、時間が一瞬で過ぎ去ってしまいました。
講師
講師の松田さんはCSSNite等のイベントでなんども登壇されているだけあって、落ち着いた語り口でとても聞きやすかったです。
コードを解説するときも拡大してくれていたので、見やすかったです。
余談ですが、著書がいまKindle Unlimitedでも読めることを発見したのでとりあえず読みます。興味がおありの方はぜひ。笑
SVGは18才
SVG(Scalable Vector Graphics)の始まりは2001年、18年前とのことで実はかなり前からある形式だったんですね。
2001年が「18年前」なことにもプチショックを受けてますが…。
スマートフォンやタブレットなど、さまざまな端末に対応するためのレスポンシブデザインが主流になり、スケーラブルなSVGが着目されたのかなと思います。
SVGならアニメーション表現もラク
講座の中では具体的な使用例にも触れていましたが、『ちょっとした反応としてのアニメーション』に分があるようです。
GIFやPNGではパラパラ漫画のように1つずつコマを書き出すように作成しなくてはならず、変更があった場合に直すのも大変。HTMLやCanvasだと要素を1つずつ書き出してそれぞれを動かす必要があります。
その点、SVGは文書（テキスト）なので、それらよりも楽に実装できて、しかもアクセシビリティ対応しやすいとのことでした。
一方、SVGにはコピーガード機能がないので、無劣化の状態でダウンロードして使用されてしまうことも起こりうるので、その点は要注意。
ハマりどころを教えてくれる
SVGアニメーションをWebページ実装するにあたって、「ここだけは覚えておこう」というポイントと、ハマりやすいポイントについて解説してもらえました。
私自身もコーダーとしてCSSアニメーションを実装した時に「そうなるんかい」と脱力したポイントだったので、他の人も同じところで引っかかるのだなとホッとしました。
ネット上でも「使い方」の記事は引っかかりやすいですが、ハマりどころの記事は見つけにくいんですよね。アニメーションに関しては書籍だと説明しにくいですし。セミナー形式とアニメーションの解説って相性がいいですね。
ハンズオンで動かせる
後半のハンズオンでは、実際にSVGアニメーションを動かしてみよう！ということでサンプルファイルを編集しました。
「この絵…動くぞ！」と言いたくなるような実感が湧きました。本当に動かせました。しかもシャレオツな表現で。
コーダーは、デザインに関しては指示通りに組むのが仕事で、実装時に勝手にアニメーションを追加することは原則として許されないので（笑）、デザイナーが「要素を動かせること」そして「動きのバリエーションを知っていること」が大事かなと思いました。
ハンズオンに関してはJavaScriptライブラリの使い方が主体だったので、私個人としては、SVGそのものについてもう少し長く聞きたかったなと感じました。
しかしそれは「仕様読め」で片付いてしまうことですし（笑）、そもそもデザイナーがメインの講座、つまり普段コーディングしない方が対象なので、かくあるべきかなとも思います。
SVG単体だと話の内容が地味すぎる、それはあると思います…。
BAU-YAは開催間隔が割と短めでサクッと単体講座なので、スタンプラリーのように全種コンプリートしたくなります😁
この記事が気に入ったらサポートをしてみませんか？