開催レポート｜書籍出版記念オンライン講座「Animate.css x jQueryで要素を楽しく動かそう」｜デジタルハリウッドSTUDIO

～『動くWebデザインアイディア帳』（著者：久保田涼子、杉山　彰啓）出版記念オンライン講座の開催レポート～

デジタルハリウッド株式会社

2021年3月10日 15時00分

　IT関連及びデジタルコンテンツの人材育成スクール、デジタルハリウッド（運営会社：デジタルハリウッド株式会社　本社/本校：東京都千代田区　学長：杉山知之）が運営をする、新しい学びのスタイルを通して多様なライフスタイルを支援し全国へ展開している、Webと動画について学べるラーニングスタジオ『デジタルハリウッドSTUDIO』のSTUDIOでは、2月21日に『動くWebデザインアイディア帳』の著者である久保田涼子氏と杉山彰啓氏に登壇いただき、事前予約購入特典付きのオンライン講座「Animate.css x jQueryで要素を楽しく動かそう」を開催しました。

■書籍の出版背景

デジタルハリウッドSTUDIOでトレーナーとして勤めている著者のお二人が、多数の受講生からの「jQueryやアニメーションに苦手意識があって前に進めない」という声をきっかけに執筆された書籍です。

1冊の書籍の中に必要な情報がまとまっており、学ぶ人はもちろんのこと教えている講師にも参考にしやすい構成の書籍です。

動いた！うれしい！という気持ちをその後の探求心につなげてほしいという著者の願いが込められています。

■オンライン講座開催の経緯

この書籍の出版にあたって延べ40名以上が携わっており、多数のデジタルハリウッド卒業生も本書籍の企画やデバックに協力しています。ここに関わる多くの卒業生の活躍、Webサイト制作に関わる多くの人が躓きやすい「動き」をより使いやすくするための工夫や、著者の思いに共感し、オンライン講座を開催いたしました。

■著者の紹介

久保田涼子氏

広島市出身。東京都在住。
フリーランスクリエイター／デジタルハリウッドSTUDIOトレーナー

「ワクワクするモノ・時間・場所を生み出す」をテーマにものづくりを行うフリーランスクリエイター。Web 制作ナレーター業務 Coco-Factory の代表をつとめ、国内外のウェブサイトをトータルプロデュースする他、デジタルハリウッドSTUDIO 講師としてオンライン講座や教材開発、ワークショップ開発に多数携わる。

杉山　彰啓氏

東京都出身・在住
フリーランス／デジタルハリウッドSTUDIOトレーナー

大手システム開発系企業にて、移動ロボットの走行制御プログラミング開発に従事し現在は、フリーランスとしてWeb のフロントエンドを中心とした開発に携わる。
デジタルハリウッドSTUDIOで講師を行いながら、YouTubeやアプリ開発のディレクター、茨城県鹿行地区のNo1 ポータルサイトlocoty（ロコティー）の運営などマルチに活動を行う。

■講座の内容

本講座では実際に受講者が手を動かし、コードを描きながら学んでいきました。

そのためメインで講座進める講師の他にサポートスタッフ6名も参加し、随時受講者をサポートしながら講座は進めていきました。

誰一人手を止めることなく講座を受講するため、メインルーム以外にサポートスタッフに個別で相談できるブレイクアウトルームを用意し、万全のサポート体制を組みました。

サポートスタッフはデジタルハリウッドの卒業生が務め、メインルームで講師の操作についていけなくなった受講者を個別でサポート。

■講座の様子

1. Animate.cssを使って要素を動かす

本来であれば、自分でCSSにアニメーションに関する設定を記述しますが、Animate.cssを利用し特定のクラスをHTMLに付与するだけで、動きをつけることができます。

あらかじめ用意されたHTMLを使用して実際に受講者が自分の手を動かしていきます。

2．jQueryを使って「動きのきっかけ」を作る

” jQueryは「JavaScript」という言語を短く簡単に記述できるライブラリの１つです。JavaScriptを野菜に例えると、jQueryはカット野菜のように調理しやすくなっているもの”

このたとえを聞いた時に、受講者から納得の声が上がっていました。

まずはjQueryをHTMLに読み込むところからスタートします。

JavaScriptのソースコードは一見難しそうですが、英語を翻訳するようなイメージで、一つずつ意味を理解していくと良いということでした。

とっつきにくいコードも少しは理解がしやすくなります。

3. ポイントを抑えて動かす

要素が動かせるようになると、嬉しくなって、ついついたくさん動かしたくなりますが、ポイントを押さえて動かすようにしなければならないとのこと。

大事な情報、ユーザーのアクションに応じた動きをつけると、ユーザーが利用する際心地よく利用できます。

講座を通して受講者からは知りたかった知識を吸収することができ、自分の制作の際参考にしたいという声が多く聞こえました。

■『動くWebデザインアイディア帳』について

書籍内容：サイトを動かす第1歩を踏み出すための「動きの逆引き事典」。近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介。

著者：久保田涼子、杉山　彰啓

出版社：ソシム株式会社

発売：2021/2/27

価格：3,080円（税込）

【デジタルハリウッドSTUDIOとは】

『デジタルハリウッド STUDIO』とは、「好きなことを、好きな時間で、好きな場所で、自分らしく学ぶ。」今までにない"ラーニングスタジオ"をコンセプトにした、目的や地域に特化した学習スタイルを提供するプラットフォームです。デジタルハリウッド設立より25年以上もの間、多くの実績を生んできた教育ノウハウとメソッドを集約し、確実にスキルが身につくカリキュラムを提供しています。

「ワーク・シフト」が注目されはじめ、働き方が大きく変わる中、併せて生活スタイルも時間の使い方そのものが変化をしはじめ、必然的に"学びのスタイル"も変化をしている流れをいち早く察知し、デジタルハリウッドでは2012年より、この「新しい学びのスタイル」を提供し始めております。

デジタルハリウッド拠点一覧： https://school.dhw.co.jp/school/index.html

■専科Webデザイナー専攻

現役デザイナーの指導により、現場で使われる最新スキルが身につくカリキュラムです。未経験からの就職・転職、フリーランス、起業など目的別選べるコースラインナップを、受講生が自身の理解度を詳しく確認できる独自の評価システム、また受講目的に応じた問題解決ができる対面式サポートや様々な繋がりが持てる環境、永年利用のサポートと一体とすることで確実に個々人の目標を実現します。