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

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

From: PR TIMES

2021-03-10 19:17

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



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

[画像1: (リンク ») ]



■書籍の出版背景

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

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

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


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

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


■著者の紹介

久保田涼子氏

[画像2: (リンク ») ]


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

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

杉山 彰啓氏

[画像3: (リンク ») ]


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

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


■講座の内容

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

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

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

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


■講座の様子

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

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

[画像4: (リンク ») ]


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

[画像5: (リンク ») ]


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

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

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

[画像6: (リンク ») ]


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


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

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

[画像7: (リンク ») ]



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

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

[画像8: (リンク ») ]


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

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


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

[画像9: (リンク ») ]


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

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

出版社:ソシム株式会社

発売:2021/2/27

価格:3,080円(税込)


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

[画像10: (リンク ») ]


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

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

デジタルハリウッド拠点一覧: (リンク »)


■専科Webデザイナー専攻

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


受講期間:6ヶ月
対象者:未経験から入学可能。
開講校舎:デジタルハリウッドSTUDIO各校舎 (校舎一覧  (リンク ») )
詳細: (リンク »)


プレスリリース提供:PR TIMES (リンク »)
本プレスリリースは発表元企業よりご投稿いただいた情報を掲載しております。
お問い合わせにつきましては発表元企業までお願いいたします。

デジタルハリウッド株式会社の関連情報

【企業の皆様へ】企業情報を掲載・登録するには?

御社の企業情報・プレスリリース・イベント情報・製品情報などを登録するには、企業情報センターサービスへのお申し込みをいただく必要がございます。詳しくは以下のページをご覧ください。

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    「デジタル・フォレンジック」から始まるセキュリティ災禍論--活用したいIT業界の防災マニュアル

  2. 運用管理

    「無線LANがつながらない」という問い合わせにAIで対応、トラブル解決の切り札とは

  3. 運用管理

    Oracle DatabaseのAzure移行時におけるポイント、移行前に確認しておきたい障害対策

  4. 運用管理

    Google Chrome ブラウザ がセキュリティを強化、ゼロトラスト移行で高まるブラウザの重要性

  5. ビジネスアプリケーション

    技術進化でさらに発展するデータサイエンス/アナリティクス、最新の6大トレンドを解説

ZDNET Japan クイックポール

自社にとって最大のセキュリティ脅威は何ですか

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]