Webデザイン
アイディア帳

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

予約者限定特典あり

書籍もあるよ

News

SNSで毎週金曜日に動きのアイデアを投稿します!

SNSを1年間限定で2020年12月24日からスタートします。

毎週金曜日に、動きのアイデアを投稿していきますのでぜひフォローしてくださいね!

■ Twitter

https://twitter.com/ugokuweb

■ Instagram

https://www.instagram.com/ugokuweb/

【重要】書籍予約特典の受け取りについて

■書籍予約特典の受け取り方法について

書籍予約特典は、予約特典申し込みフォームにご入力いただくと受け取ることが出来ます。
Amazonや楽天のご予約をしただけでは受け取れませんのでご注意ください。

*予約特典申し込みフォームはこちらから
https://coco-factory.jp/ugokuweb/#gift

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

お問い合わせフォーム、もしくはTwitterのDMにて申し込みされた際の「お名前」と「メールアドレス」をご記入の上お問い合わせください

スライドショーとギャラリーを更新しました!

9パターンのスライドショーの動き
6パターンのギャラリーの動き、
を更新しました!

スライドショー

  1. 横移動させて全画面で見せる
  2. フェードイン・アウトさせて全画面で見せる
  3. ゆっくりズームアウトさせながら全画面で見せる
  4. 動きを組み合わせて全画面で見せる
  5. 動画と組み合わせて全画面で見せる
  6. 複数画像を並列に見せる
  7. 複数画像を中央に注目させて見せる
  8. 複数画像を流して見せる
  9. 2つの画像の動きを対比させて見せる

ギャラリー

  1. 複数の画像を一覧で見せる
  2. カテゴリ別に画像を並び替える
  3. 複合検索でカテゴリ別に画像を並び替える
  4. サムネイルをクリックすると、メイン画像が切り替わる1
  5. サムネイルをクリックすると、メイン画像が切り替わる2
  6. サムネイルをクリックするとグループ化された画像一覧を表示する

グローバルナビゲーション、ハンバーガーメニュー、テキストナビゲーションを更新しました!

26パターンのグローバルナビゲーションの動き、
9パターンのハンバーガーメニューの動き
11パターンのテキストナビゲーションの動き
を更新しました!

【グローバルナビゲーション】

  1. ドロップダウンメニュー(上)
  2. ドロップダウンメニュー(左)
  3. ドロップダウンメニュー(写真付 上ナビ)
  4. ドロップダウンメニュー(写真付 左ナビ)
  5. スクロールすると上部に固定
  6. スクロール途中から上部固定
  7. スクロールするとハンバーガーメニューに変化
  8. スクロール途中からヘッダーの高さが小さくなる
  9. スクロール途中でヘッダーが消え、上にスクロールすると復活
  10. スクロールすると位置が固定して追従
  11. クリックしたらナビが上から下に出現
  12. クリックしたらナビが下から上に出現
  13. クリックしたらナビが左から右に出現
  14. クリックしたらナビが右から左に出現
  15. クリックしたら背景が全面に広がる
  16. クリックしたら円形背景が拡大(上から)
  17. クリックしたら円形背景が拡大(下から)
  18. クリックしたら円形背景が拡大(右から)
  19. クリックしたら円形背景が拡大(左から)
  20. クリックしたら円形背景が拡大(右上から)
  21. クリックしたら円形背景が拡大(右下から)
  22. クリックしたら円形背景が拡大(左上から)
  23. クリックしたら円形背景が拡大(左下から)
  24. クリックしたら円形背景が拡大(中央から)
  25. クリックしたらナビ背景コンテンツがぼかされる
  26. 追従メニューの現在地ハイライト

【ハンバーガーメニュー】

  1. 3本線が×に
  2. 2本線が×に
  3. 3本線が1本線に
  4. MENUがCLOSEに
  5. MENUが×に
  6. 3本線が回転して×に
  7. 3本線が奥行きを持って回転して×に
  8. 3本線が横方向に回転して×に
  9. 3本線がジャンプして×に

【テキストナビゲーション】

  1. 中心から外に線が伸びる(下部)
  2. 中心から外に線が伸びる(中央)
  3. 左から右に線が伸びる(下部)
  4. 左から右に線が伸びる(上部)
  5. 左から右に背景が伸びる
  6. 左から右に線が伸びて背景になる
  7. 上下に線が伸びて背景になる
  8. 円が線に変化
  9. テキストが入れ替わる
  10. 線が伸びて枠線になる
  11. 左右から線が伸びて枠線になる

画面遷移とニュースティッカーを更新しました!

9パターンの画面遷移の動きとニュースティッカーを更新しました!

【画面遷移】

  1. 背景色が伸びる(上から下)
  2. 背景色が伸びる(下から上)
  3. 背景色が伸びる(右から左)
  4. 背景色が伸びる(左から右)
  5. 背景色が伸びる(中央から外)
  6. 背景色が伸びる(中央から上下)
  7. 背景色が伸びる(斜め)
  8. 背景色が円形に縮小(中央へ)
  9. 背景色が四角に拡大(四隅へ)

【ニュースティッカー】

  1. ニュースティッカー

基礎から学びたい方へ

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

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

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

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

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

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

書籍の事前予約購入で
13サイト分の
サンプルコードをプレゼント!

書籍情報

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

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

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

書籍予約購入者限定特典!

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

特典1

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

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

特典2

Animate.css×jQueryを使って要素を楽しく動かそう!
webオンライン講座無料受講!

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

※2月後半の開催を予定
※参加出来なかった方には録画データ(閲覧期限あり)のURLを共有します

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