Webデザイン
アイディア帳

jQueryとCSSアニメーションを
はじめたばかりの方へ
Webデザインのスクール講師が
「動かしたいパーツ」ごとの
逆引きリストをつくりました

購入特典あり!(4/30まで)

書籍もあるよ

News

【重要】特典の受け取りについて

(2/28追記)書籍の予約特典は、購入者特典として4/30まで延長いたします。

※3月30日にお問い合わせをいただいた甲府市で書籍をご購入いただいたAさま。
ご記入いただいたメールアドレスにお送りしたところアドレスが見つからず戻ってきてしまいました🙇‍♀️再度お問い合わせフォームまで、ご連絡ください💦

■特典の受け取り方法について

特典は、予約特典申し込みフォームにご記入いただくと受け取れるようになっています。
*予約特典申し込みフォームはこちらから
https://coco-factory.jp/ugokuweb/#gift

■予約特典申し込みフォームで申し込んだのにメールが届かない場合

特典は、申し込みフォームにご入力いただくと数分後に受け取ることが出来ます。
まずは迷惑メールフォルダに分類されているかどうかをご確認ください。
それでも届いていない場合は、お問い合わせフォーム、もしくはTwitterのDMにて申し込みされた際の「お名前」と「メールアドレス」をご記入の上お問い合わせ頂ければ幸いです。

「印象編」掲載スタート!

3/22(土)から「動くWebデザインアイデア帳-印象編-」WEB掲載がスタートです!
※印象編の書籍化は現在未定です。

■3/22up「画像リンクの動き」
https://coco-factory.jp/ugokuweb/move02-cat/link/

■3/29up「最低限覚えておきたい動き」
https://coco-factory.jp/ugokuweb/move02-cat/necessary/

ライブラリを使って手軽に要素を動かそう!(Animate.css×jquery.inview)

jQueryとCSS を組み合わせてスクロールをしたら要素を動かす

■3/30up「背景の動き」
https://coco-factory.jp/ugokuweb/move02-cat/background/

「エリアの動き」
https://coco-factory.jp/ugokuweb/move02-cat/area/

■3/31up「テキストの動き」

https://coco-factory.jp/ugokuweb/move02-cat/text/

■4/1up「イラスト・オブジェクトの動き」

https://coco-factory.jp/ugokuweb/move02-cat/illust/

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の卒業生で、現在は、デジタルハリウッド講師、スタッフ、フリーランス、会社員・・・とそれぞれの道で活動しています。

サポートスタッフ

「誰一人手を止めることなく講座を受講していただきたい」という想いから以下のような工夫をしました。

  1. 講師の操作についていけなくなったら、Zoomの「ブレイクアウトルーム」で、サポートスタッフが個別に相談を行う。
  2. 受講者は、作業完了後「アクション」ボタンを押して、講師に進捗を知らせ、講師は進捗を確認しながら進める。
  3. 受講後一週間、録画した講座を閲覧することが可能。

このように、オンライン開催ならではのサポート体制で臨みました。

4.Animate.cssを使って要素を動かしてみよう!

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

Animate.css

それでは、早速手を動かしていきましょう!あらかじめ用意されたHTMLに、Animate.cssを読み込んで、動きをつけたいHTMLタグにクラス名を付与すると・・・なんと、要素が動き出しました!
追加で動きを制御するためのクラスを付与したり、CSSファイルにオリジナルのクラスを作って設定をすることで、自分で動きを制御することも可能です。
やっぱり、動くと嬉しいですね!

Animate.css解説

Animate.cssを上手に活用すれば、簡単にサイトに動きをつけることができます。講座ではあらかじめ用意されていたコードをコピペをしましたが、復習するときは自分で書いてみて、使い方をマスターしたいですね!

5. jQueryを使って「動きのきっかけ」を作ってみよう!

jQueryは「JavaScript」という言語を短く簡単に記述できるライブラリの1つです。
”JavaScriptを野菜に例えると、jQueryはカット野菜のように調理しやすくなっているもの”と考えると分かりやすいとのこと。
jQueryを使うと、「スクロールをしたらふわっと表示させる」というような動きのきっかけを作ることができます。

jQuery 解説

では、こちらも手を動かしてみましょう。
まずは、jQueryをHTMLに読み込むところからスタートします。jQueryには様々なバージョンがありますが、その中から新しいバージョンを1つだけ読み込むようにしましょう。(※書籍では2019年から執筆した関係でバージョン3.4.1を使用されています)
jQueryを動かすためには、自作のJavaScriptファイルに命令を記述する必要があります。自作のJavaScriptは、必ずjQuery本体の後に設置して読み込みましょう。

自作のJSはjQueryの後に記述する解説

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

jQuery解説

次に、別の動きも指定してみましょう。1つ目のコードをコピペして、クラス名を別のものに変えると、1つ目と異なる動きを指定することができました。

JavaScriptでは、動きを関数にまとめることができます。
「動きのきっかけ」は一つではなく、スクロールした時に動く、ページが読み込まれた後に動くなど、複数になることが多いです。
その際に、関数にまとめておくと、コードが短くなり、処理がはやくなり、メンテナンスもしやすくなります。注意点としては、同じ名前の関数を複数作らないようにしましょう!

6.ポイントを抑えて動かそう!

最後に、要素を動かす際のポイントです。要素が動かせるようになると、嬉しくなって、ついついたくさん動かしたくなりますが、ポイントを抑えて動かすようにしましょう。

大事な情報に絞って動きをつけたり、ユーザーのアクションに応じた動き(マイクロインタラクションと呼ぶそうです)をつけると、ユーザーが心地よく利用できます。
一方で、子供向けのサイトなど、ワクワクする印象を付けたい場合は楽しさを感じてもらうために多くの要素を動かす、というのも手法の一つです。

7. 出来立ての書籍と「印象編」のチラ見せ!

講座の終わりには、出来立てほやほやの書籍と次巻「印象編」の紹介がありました!無料で公開をしているWeb版との大きな違いは、大きく3つあります。

  1. 全体を俯瞰して直感的に逆引きが可能
  2. クラス名やID名に色がついているので、HTMLとCSS、JavaScriptの関連性が理解しやすい
  3. Web版では未掲載の動きの概論や、コラムがあり、基礎からじっくりと理解できる
Webと書籍の違い解説

実際に本を手にしてみると、文字サイズが大きめだったり、章ごとに色分けされていることで、現場でも活用しやすい作りになっているのを感じます!
分厚いこのボリュームで、原稿全体の半分とのこと!

今後、2冊目も「印象編」として「ふわっ」「パタッ」といったオノマトペで動きを逆引き出来たり、雪や花びらが舞う効果といったバリエーション豊かな表現が掲載される予定です!

「印象編」の発売は1冊目の売れ行き次第で決定ということですので、書籍を気に入っていただけたら、ぜひSNSで発信したり、周りの方におすすめしていただけると幸いです!

『動くWebデザインアイディア帳』では、TwitterとInstagramでの情報発信も行っています。
感想やサイト制作に書籍の内容を使用された際には、ぜひ「#動くweb」をつけて投稿してくださいね。

Twitter:https://twitter.com/ugokuweb
Instagram:https://www.instagram.com/ugokuweb/

2/21無料講座へお申し込みの方へ開催概要とアーカイブ動画をお送りしました

無料講座へ沢山のお申し込みを頂きありがとうございました!
講座受講をお申込みいただいた方には、2/19 0時過ぎにメールで開催概要をお送りいたしました。

また、22日18時までに特典お申し込みフォームへご記入いただいた全ての方へ、アーカイブ動画をお送りいたしました。

万が一届いていない場合はお問い合わせフォームよりお知らせくださいませ。

応募者特典サンプルサイト1-2 CSSの修正について

応募者特典のサイト1-2
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-2/1-2.html
の画像拡大表示(下記画像部分)が一部おかしくなっていたため、CSSを修正いたしました。

opacity、transition、transformのかけあわせで発生するバグのようです(続

追記したCSSは下記になります。

.zoomInRotate{
backface-visibility: hidden;
}
特典をダウンロードをしてくださった皆様にはご迷惑をおかけしますが、上記をparts.cssの最後に追記していただければ幸いです。

※2/15 18:00以降に特典DLをしてくださった方のデータへは反映済み。

※「印象に関わる動き」は3/22からwebで無料公開致します。
現在販売中の書籍は「機能に関わる動き」のみですのでご了承ください。
「印象に関わる動き」書籍化の際はSNSでお知らせいたします、

<要素を動かす際のポイント>
・サイトの掲載内容に集中できなくなるような動きは入れない
・大事な情報を動かして目立たせる
・ユーザーの視線の流れを考え、下まで読み進めるような動きを取り入れる
・画面遷移時など、ユーザーのアクションに対するフィードバックが直感的に分かるような動きを取り入れる
・ユーザーにコンテンツの楽しさを感じてもらうために動きを取り入れる

基礎から学びたい方へ

Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう

Webサイトの動きを
実現する仕組みと準備

動かない時のチェック項目

もっと詳しく理解したい人は
書籍で学ぼう!

「動き」を組みあわせると
こんなサイトが出来ます!

このサイトで使用している「動き」を実際のサイトにどう反映したらいいのかを
イメージしていただくために、架空のサンプルサイトを13個つくりました!
動きを取り入れるとウェブデザインにも奥行きが出ますので
是非いろんな組み合わせを試してみてください!

書籍の事前予約購入で
13サイト分の
サンプルコードをプレゼント!
(4/30まで延長!)

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。

書籍紙面サンプル
書籍紙面サンプル

出版社:ソシム株式会社 
2021/2/27 発売

書籍購入者限定特典!
(4/30まで延長!)

ご購入いただいた方に特典をご用意しました。
ご注文をされた注文番号やご予約書店名を書き込み
申し込みフォームよりお申し込みください。
登録していただいたメールアドレスに情報をお送りします。

特典1

サンプルサイトを13個、zipでプレゼント!

動きを組み合わせた事例のサンプルサイト13個のソースコードをzipでプレゼントします!

特典2

   

【お申込み終了】2/21(日)11:00-13:00開催 Animate.css×jQueryを使って要素を楽しく動かそう!webオンライン講座無料受講!

   

スクールでも好評だった”スクロールをしたらふわっと要素が出てくるお手軽な方法”を解説したオンライン講座を無料で受講できます。

   

※著者主催の講座は終了致しました。次回開催の際はSNSなどでお知らせを致します。

特典3

「印象」編のサンプルコード一部を先行プレゼント!

スクロールに連動して現れる様々な動きを28個詰め合わせたサンプルコードを先行でプレゼントします!

特典お申し込みフォーム

  • お名前:
  • メールアドレス:
  • 注文番号:
  • コメント:

※特典はご登録頂いたメールアドレスに配信致します。
※フリーアドレスや迷惑メール排除の設定をしている場合、メールが届かない場合があります。
その際はお手数をおかけしますがメールアドレスを変更して再送してください。
※Gmailの場合、迷惑メールの中に振り分けられる可能性がありますので届かない場合はお問い合わせフォームよりご連絡ください。

このサイトをつくった人

久保田涼子

久保田 涼子 Ryoko Kubota

1982年生まれ、広島市出身。東京都在住。
東京女子大学 文理学部 心理学科卒業。
「ワクワクするモノ・時間・場所を生み出す」をテーマにものづくりを行うフリーランスクリエイター。WEB 制作ナレーター業務 Coco-Factory の代表をつとめ、国内外のウェブサイトをトータルプロデュースする他、デジタルハリウッドSTUDIO 講師としてオンライン講座や教材開発、ワークショップ開発に多数携わる。
著書「Webデザイン良質見本帳(SBクリエイティブ 2017)

杉山彰啓

杉山 彰啓 Akihiro Sugiyama

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

企画やデバッグに
ご協力いただいた方々(敬称略)

全国のデジタルハリウッドSTUDIOの在卒業生、講師、スタッフの皆さん / 秋吉真里奈 / 阿諏訪聡美 / 飯田沙絵佳 / 岩田晶葉 / 伊藤哲朗 / 五十嵐大樹 / 一杉あみ / 植木美穂 / 梅木勇輝 / 遠藤雅俊 / 大山和美 / 大畠昌也 / 小田切美音 / 葛西美歌 / 柿島奈美 / 加藤 真美 / 鴨志田京子 / 川井真裕美 / 栗谷幸助 / 小池 優子 / 小島ひな / 小寺 香澄 / 小林美紀子 / 近藤里虹 / 櫻井美保 / 柴田いづみ / 鈴木真実 / スチュアート亮子 / 谷本浩治 / 田丸俊樹 / 築地海露穂 / 津久井智子 / 中野拓 / 中村早雪 / 西田優香 / 西田あやの / 西原礼奈 / 野澤由史子 / 花川雄太 / 浜中望帆 / 羽深小百合 / 林 桃子 / 廣重千晶 / 福井克彦 / 圃本さあや / 堀内崇子 / 堀部葵 / 松浦和佳 / 馬渡絢美 / 三橋功 / 山下継太 / ソシム株式会社 片柳様 三浦様 中村様 / 他 サポート・助言・応援をしてくださった皆さん

サイトを訪れた方へ
メッセージ

「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
「JavaScript の本を購入してみたが、
実際のサイトにどう組みこめばいいか具体的なイメージがわかない」
「動きの原理を最低限理解して、とにかく早く実務にいかしたい」

スクールで教えていると、このような声をたくさんいただきます。
このサイトは、Webサイトを動かすことが苦手な右脳系ウェブデザイナーが、
サイトを動かす第1歩を踏み出すための「動きの逆引きサイト」です。

近年のウェブサイトで使用されている基本的な動きの原理や仕組みを
「機能」と「印象」に分けて、サンプルコードと共にご紹介しています。

1つの動きを実現する方法は様々ありますが、なるべくわかりやすい方法を選びました。
サイトを利用して「動いた!嬉しい!」という気持ちを、
その後のさらなる動きの仕組みへの探求心につなげて頂ければ幸いです。

久保田涼子 & 杉山彰啓

Page
Top