動くWebデザイン
アイディア帳

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

購入者特典復活！(7/6～)

書籍もあるよ

News

5-1-7　「グローバルナビゲーション-スクロールするとハンバーガーメニューに変化-」に関するコード不備のお詫び

5-1-7　「グローバルナビゲーション-スクロールするとハンバーガーメニューに変化-」のコードに不備がございましたので修正いたしました。

【該当箇所】
https://coco-factory.jp/ugokuweb/move01/5-1-7/

【内容】
ハンバーガーメニューになった際にメインコンテンツが選択できない

【修正後】
CSSに下記を追加することで解消

/メインコンテンツを前面に/
section{
position: relative;
z-index: 1;
}

「動くWebデザインアイデア帳（黄色本）」P154とP163のJavaScriptに記述ミスがございました。

「動くWebデザインアイデア帳（黄色本）」P154とP163のJavaScriptに記述ミスがございました。
Webサイトおよび、特典のコードは修正済みです。
大変ご迷惑をおかけしますが、以下をご参照いただきますよう、よろしくお願いいたします。

●P154とP163のJavaScript

誤： $(“.has-child>a”).removeClass(‘active’);//activeクラスを削除
↓
正：$(“.has-child”).removeClass(‘active’);//activeクラスを削除

【該当ページ】

■　5-1-1「グローバルナビゲーション-ドロップダウンメニュー（上）-」
https://coco-factory.jp/ugokuweb/move01/5-1-1/

■　5-1-2「グローバルナビゲーション-ドロップダウンメニュー（左）-」
https://coco-factory.jp/ugokuweb/move01/5-1-2/

■　5-1-3「グローバルナビゲーション-ドロップダウンメニュー（写真付 上ナビ）-」
https://coco-factory.jp/ugokuweb/move01/5-1-3/

■　5-1-4「グローバルナビゲーション-ドロップダウンメニュー（写真付 左ナビ）-」
https://coco-factory.jp/ugokuweb/move01/5-1-4/

■　1-11「フラワーショップのECサイト」
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-11/1-11.html

お問い合わせフォームをご利用いただく方へ。

特典の送信不備などで、お問い合わせフォームをご利用いただく方へ。
最近、迷惑メール対策を取られたメールアドレスを記載していることが原因で、返信をしても戻ってきてしまうケースが増えています。
お心当たりの方がいらっしゃいましたら、ご連絡いただければ幸いです。

※恐れ入りますが、掲載されているソースコードの利用方法や応用方法などの個別の回答は行っておりませんのでご了承ください。

※書籍関連のお問い合わせはhttps://www.socym.co.jp/contactよりお願いいたします。

※送信後に受付完了の自動返信メールが送信されます。
フリーアドレスや迷惑メール排除の設定をしている場合、メールが届かない場合があります。
その際はお手数をおかけしますがメールアドレスを変更して再送してください。

2021.8.29開催「Animate.css x jQueryで要素を楽しく動かそう」講座レポート！

1.講座と書籍のご紹介

こんにちは、デジタルハリウッドSTUDIO卒業生の小島ひな（@piyopiyo_wd）と申します。今は制作会社で、Webデザイナー兼コーダーとして仕事をしています。

8/29に『動くWebデザインアイディア帳 実践編（https://coco-factory.jp/ugokuweb/）』の書籍購入者特典・オンライン講座「Animate.css x jQueryで要素を楽しく動かそう」に、サポートスタッフとして参加しました。サポートスタッフの目線から、講座のレポートをお届けします。

『動くWebデザインアイディア帳 実践編』は、今年の3月に刊行された『動くWebデザインアイディア帳』の姉妹本です。前書で語りきれなかった、サイトの「印象に関わる動き」を解説している本です。

動くWebデザインアイデア帳「実践編」

2.講師プロフィールと講座の進め方について

講師は、著者の久保田涼子（くぼたりょうこ）先生と、杉山彰啓（すぎやまあきひろ）先生です。

久保田先生は、フリーランス・講師歴10年以上で、講座開発、企画展プロデューサーなど、東京〜地元の広島まで、ジャンル・場所を問わず様々な分野で活動されています。

杉山先生は、元々は企業でSEとして働いていましたが、フリーランスのフロントエンドエンジニアに転身しました。最近では、茨城県にショップ兼オフィスを開業し、忙しくも充実した毎日を送っているそうです。

お二方とも、フリーランスで様々な活動をされている傍ら、デジタルハリウッドSTUDIO（https://school.dhw.co.jp/）の講師としても活躍されています。

「jQueryやアニメーションに苦手意識があって前に進めない」という悩みを抱える受講生の力になりたい、と思ったことが、『動くWebデザインアイディア帳 』シリーズを執筆するきっかけとなりました。

本講座では、講師2名の他、3名のサポートスタッフも控えており、コーディングで詰まってしまったときは、「ブレイクアウトルーム」で、個別にサポートを受けることができる環境を用意しました。

また、講師は、各作業ごとに、「リアクション」機能で、参加者の皆さんの進捗を確認しながら進めました。

オンライン開催のイベントですが、できる限りリアルにコミュニケーションをとっているような感覚を持っていただけるよう取り組みました。

3.Animate.cssを使って、要素を楽しく動かそう！

今回の講座では、動きそのものはAnimate.cssという動きがつめこまれたCSSを使い、動きのきっかけをjQueryで指定します。Animate.cssとjQueryを組み合わせることで、「スクロールしたら要素がふわっと浮き上がる」というような、様々な動きを実現することができます。

まずは、Animate.cssを使って、要素を動かしてみましょう！

Animate.cssは、90種類以上のアニメーションがまとまっているライブラリです。Animate.cssを利用すると、自分でCSSを書かなくても、用意されているクラスを設定するだけで、簡単にアニメーションを実装することができます。

https://animate.style/

やることは簡単。以下の3つのステップで実現できます！

①Animate.cssを<head>タグに読み込む
②動かしたいアニメーションの種類（クラス名）をサイトの右側から選択
③動かしたい対象の要素にanimate__animated というクラス名とanimate__＋アニメーションの種類のクラス名を追加

それでは、実際に手を動かしてみましょう。

配布済のHTMLファイルに、Animate.cssのクラス名を入力すると、要素がふわっと現れる効果が付けることができました！

③で、さらに特定のクラスを設定すると、動きだすタイミングや、動きの回数を制御することができます。また、自作のCSSを組み合わせることで、オリジナルの設定をすることも可能です。

Animate.cssに用意されているクラスのみだと、決まった制御しか出来ませんが、自作のCSSと組み合わせると、自分で良い塩梅に調整できるので、オススメです。

4.jQueryを使って、「動きのきっかけ」を指定しよう！

続いては、jQueryを使って、「動きのきっかけ」を指定してみましょう。

jQueryはJavaScriptのライブラリの一種で、Web制作で使われることが多く、比較的初心者でも扱いやすいライブラリです。

「スクロールをしたらふわっと要素を出現させる」を一緒にやってみましょう。

「スクロールをして、”きっかけの起点となるクラス名”を持つ要素の位置まできたら、”アニメーションを指定したクラス名”を付与する」というシンプル仕組みで実現しています。

こちらも簡単、以下の３ステップで導入できます。

①HTML内の動きをつけたい要素にきっかけの起点となるクラス名を付与する
②jQuery本体を</body>直前（※headタグ内等任意の位置でOKです）に読み込む
③自作のJavaScriptファイルを、jQuery本体の後に読み込む

注意点としては、必ず自作のJacaScriptファイルを、jQuery本体のあとに読み込むことです。
また、jQuery本体は、色々な種類・バージョンがありますが、どれか一つを読み込めばOKです！

③の自作のJavaScriptファイルについては、いきなりこのコードを一から書くのは難しいので、今回はすでに書いてあるコードを利用します。ただ、書いてあるものの意味は理解するようにしましょう。

特に、色のついている部分は、変更することで、様々な動きが実装できる部分です。しっかりと押さえておいてくださいね。

次に、実際にサンプルコードを触り、違う動きを設定してみましょう。

まずは一つめのコードをコピペして、下の位置に貼り付けます。続いて、「fadeInUp」となっている箇所を、「fadeInDown」に書き換えると・・・別の動きを設定することができました。

仕組みとしては、「fadeAnime」という関数に、動きをまとめて、スクロールしたときと、画面が読み込まれたときにそれぞれ動かす、という処理を行っています。（※関数名はなんでもOKです）

5.要素を動かす際のポイント

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

大事な情報に絞って動きをつける、ユーザーが最後までページを読み進めるよう促す、ユーザーのアクションに応じた動き（マイクロインタラクションといいます）をつける、と言う形で、意図を持って取り入れることで、ユーザーが心地よくWebサイトを使うことができます。

6.「#動くWeb」をつけて感想をシェアしよう！

講座の感想は、SNSで「#動くWeb」をつけて、投稿していただきました。

講座終了後には、「分かりやすかった」「今すぐサイトが作りたくなった」「jQueryに対する苦手意識が減った」と、たくさんの嬉しい感想をいただきました！

書籍・講座が、皆さんが楽しく学習できる「きっかけ」になりましたら、関わったメンバーとして、これほど嬉しいことはありません。

『動くWebデザインアイディア帳』では、TwitterとInstagramでの情報発信を行っています。今後の学習にお役立ていただくと共に、感想やサイト制作に書籍の内容を使用された際には、ぜひ「#動くweb」をつけての投稿してくださいね。スタッフ一同、励みにしております。

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

【コード使用に関しての注意とお願い】
動くWebデザインアイデア帳のサイトは、書籍に明記している通り「3年間の期限付き」です。
（※書籍の売れ行き次第で変わります。）
CSSやJSの https://coco-factory.jp からはじまるリンク（例：<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/・・・）を、そのままご自身のサイトに直リンクをして使用している場合、サイトが閉鎖されると影響が出ます。書籍付属のコードをご利用下さい。

基礎から学びたい方へ

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

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

JavaScriptアイコン
・jQuery
jQueryと自作のJavaScriptの設置方法
jQueryで動く「きっかけ」を指定しよう
サイト内でよく使われているjQueryの単語集
CSSアイコン
・CSS
CSSアニメーションの使い方
CSSアニメーションで動きを指定しよう
CSSで要素を変形させよう
JavaScript×CSSアイコン
・jQuery×CSS
ライブラリを使って手軽に要素を動かそう！（Animate.css×jquery.inview）
jQueryとCSS を組み合わせてスクロールをしたら要素を動かす

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

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

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

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

書籍の購入で13サイト分の
サンプルコードをプレゼント！（7/6～復活)

書籍情報

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

書籍紙面サンプル

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

書籍紙面サンプル

出版社：ソシム株式会社
2021/7/31 発売

書籍購入者限定特典！
(7/6～復活)

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

特典1

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

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

特典2

   

【8/26締め切りました】Animate.css×jQueryを使って要素を楽しく動かそう！webオンライン講座無料受講！

   

スクールでも好評だった”スクロールをしたらふわっと要素が出てくるお手軽な方法”を解説したオンライン講座を無料で受講できます。
→以前開催したレポートはこちらから

   

2021年8月29日（日）11:00-13:00開催。
※講座のお申し込み締め切りは8月26日（木）23:59まで。
※26日までお申し込みをいただいた方は、受講ができなくても、1週間のアーカイブ視聴が可能です。

特典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