2021.2.21開催「Animate.css x jQueryで要素を楽しく動かそう」講座レポート！
こんにちは、デジタルハリウッドSTUDIO卒業生の小島ひな（@piyopiyo_wd）と申します。
今は制作会社で、Webデザイナー兼コーダーとして仕事をしています。
2/21に『動くWebデザインアイディア帳（https://coco-factory.jp/ugokuweb/）』事前予約購入特典のオンライン講座「Animate.css x jQueryで要素を楽しく動かそう」に、サポートスタッフとして参加しました。
今回は、サポートスタッフの目線から、講座のレポートをしたいと思います！
【目次】
1 『動くWebデザインアイディア帳』著者（講師）のご紹介
2 『動くWebデザインアイディア帳』について
3 オンラインでも誰一人取り残さない！講座の進め方
4 Animate.cssを使って要素を動かしてみよう！
5 jQueryを使って「動きのきっかけ」を作ってみよう！
6 ポイントを抑えて動かそう！
7 出来立ての書籍と「印象編」のチラ見せ！
1.『動くWebデザインアイディア帳』著者（講師）のご紹介
講師は、著者の久保田涼子（くぼたりょうこ）先生と、杉山彰啓（すぎやまあきひろ）先生です。
久保田先生は、フリーランス歴11年、講座開発、企画展プロデューサーなど幅広い分野で活動されています。
杉山先生は、フリーランス歴9年、フロントエンドエンジニアのお仕事を中心に、YouTubeのコンテンツ企画やアプリの開発などにも携わっています。
お二方とも、フリーランスで様々な活動をされている傍ら、デジタルハリウッドSTUDIO（https://school.dhw.co.jp/）の講師としても活躍されています。
2.『動くWebデザインアイディア帳』について
この書籍は、3年ほど前から企画を始めたもので、「jQueryやアニメーションに苦手意識があって前に進めない・・・」という悩みを抱えるたくさんの受講生の力になりたい、と考えたことが執筆のきっかけとなったそうです。
出版までには、ソースコードのデバッグなども含め、40名以上が携わりました。
私自身も、デジタルハリウッドSTUDIOの受講生時代に、久保田先生の授業を受けていたご縁で、デバッグのお手伝いをしました。
たくさんの方が関わり、想いのこもった書籍に仕上がっています。
3.オンラインでも誰一人取り残さない！講座の進め方
この講座では、受講者のみなさんに実際に手を動かしてコードを書きながら学んでいただきました。講師2名の他、6名のサポートスタッフが控えており、随時、受講者のサポートをしながら進めていきました。
サポートスタッフは、デジタルハリウッドの本科やSTUDIOの卒業生で、現在は、デジタルハリウッド講師、スタッフ、フリーランス、会社員・・・とそれぞれの道で活動しています。
「誰一人手を止めることなく講座を受講していただきたい」という想いから以下のような工夫をしました。
- 講師の操作についていけなくなったら、Zoomの「ブレイクアウトルーム」で、サポートスタッフが個別に相談を行う。
- 受講者は、作業完了後「アクション」ボタンを押して、講師に進捗を知らせ、講師は進捗を確認しながら進める。
- 受講後一週間、録画した講座を閲覧することが可能。
このように、オンライン開催ならではのサポート体制で臨みました。
4.Animate.cssを使って要素を動かしてみよう！
Animate.cssは、約100種類のアニメーションがまとまっているライブラリです。本来であれば、自分でCSSにアニメーションに関する設定を記述しますが、Animate.cssを利用すると、特定のクラスをHTMLに付与するだけで動きをつけることができます。
それでは、早速手を動かしていきましょう！あらかじめ用意されたHTMLに、Animate.cssを読み込んで、動きをつけたいHTMLタグにクラス名を付与すると・・・なんと、要素が動き出しました！
追加で動きを制御するためのクラスを付与したり、CSSファイルにオリジナルのクラスを作って設定をすることで、自分で動きを制御することも可能です。
やっぱり、動くと嬉しいですね！
Animate.cssを上手に活用すれば、簡単にサイトに動きをつけることができます。講座ではあらかじめ用意されていたコードをコピペをしましたが、復習するときは自分で書いてみて、使い方をマスターしたいですね！
5. jQueryを使って「動きのきっかけ」を作ってみよう！
jQueryは「JavaScript」という言語を短く簡単に記述できるライブラリの１つです。
”JavaScriptを野菜に例えると、jQueryはカット野菜のように調理しやすくなっているもの”と考えると分かりやすいとのこと。
jQueryを使うと、「スクロールをしたらふわっと表示させる」というような動きのきっかけを作ることができます。
では、こちらも手を動かしてみましょう。
まずは、jQueryをHTMLに読み込むところからスタートします。jQueryには様々なバージョンがありますが、その中から新しいバージョンを1つだけ読み込むようにしましょう。（※書籍では2019年から執筆した関係でバージョン3.4.1を使用されています）
jQueryを動かすためには、自作のJavaScriptファイルに命令を記述する必要があります。自作のJavaScriptは、必ずjQuery本体の後に設置して読み込みましょう。
JavaScriptのソースコードは一見難しそうですが、英語を翻訳するようなイメージで、一つずつ意味を理解していくと良いということでした。
次に、別の動きも指定してみましょう。1つ目のコードをコピペして、クラス名を別のものに変えると、1つ目と異なる動きを指定することができました。
JavaScriptでは、動きを関数にまとめることができます。
「動きのきっかけ」は一つではなく、スクロールした時に動く、ページが読み込まれた後に動くなど、複数になることが多いです。
その際に、関数にまとめておくと、コードが短くなり、処理がはやくなり、メンテナンスもしやすくなります。注意点としては、同じ名前の関数を複数作らないようにしましょう！
6.ポイントを抑えて動かそう！
最後に、要素を動かす際のポイントです。要素が動かせるようになると、嬉しくなって、ついついたくさん動かしたくなりますが、ポイントを抑えて動かすようにしましょう。
大事な情報に絞って動きをつけたり、ユーザーのアクションに応じた動き（マイクロインタラクションと呼ぶそうです）をつけると、ユーザーが心地よく利用できます。
一方で、子供向けのサイトなど、ワクワクする印象を付けたい場合は楽しさを感じてもらうために多くの要素を動かす、というのも手法の一つです。
7. 出来立ての書籍と「印象編」のチラ見せ！
講座の終わりには、出来立てほやほやの書籍と次巻「印象編」の紹介がありました！無料で公開をしているWeb版との大きな違いは、大きく3つあります。
- 全体を俯瞰して直感的に逆引きが可能
- クラス名やID名に色がついているので、HTMLとCSS、JavaScriptの関連性が理解しやすい
- Web版では未掲載の動きの概論や、コラムがあり、基礎からじっくりと理解できる
実際に本を手にしてみると、文字サイズが大きめだったり、章ごとに色分けされていることで、現場でも活用しやすい作りになっているのを感じます！
分厚いこのボリュームで、原稿全体の半分とのこと！
今後、2冊目も「印象編」として「ふわっ」「パタッ」といったオノマトペで動きを逆引き出来たり、雪や花びらが舞う効果といったバリエーション豊かな表現が掲載される予定です！
「印象編」の発売は1冊目の売れ行き次第で決定ということですので、書籍を気に入っていただけたら、ぜひSNSで発信したり、周りの方におすすめしていただけると幸いです！
『動くWebデザインアイディア帳』では、TwitterとInstagramでの情報発信も行っています。
感想やサイト制作に書籍の内容を使用された際には、ぜひ「#動くweb」をつけて投稿してくださいね。
Twitter：https://twitter.com/ugokuweb
Instagram：https://www.instagram.com/ugokuweb/