Webデザイン
アイディア帳

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

購入者特典復活!(7/6~)

書籍もあるよ

News

「動くWebデザインアイデア帳-実践編ー」7/31発売決定!&購入者特典復活!

お待たせいたしました!前書「動くWebデザインアイデア帳」に入りきらなかった
サイトの印象を決定付ける動きを「動くWebデザインアイデア帳 – 実践編 -」として7/31に発売します!

本書「動くWebデザインアイデア帳 – 実践編 -」は、「動くWebデザインアイデア帳」(2021年3月刊)の姉妹本です。
前書がWebデザインで使われる基本的な「機能に関わる動き」を解説しているのに対して、新書では、サイトの世界観を作る「印象に関わる動き」をご紹介しています。
また、Web制作の現場で活用できるオンラインジェネレーターや、素材サイトなどもコラムに掲載しています。

あわせて、サンプルサイトのコードダウンロードと、無料講座の特典も復活します。
ご購入(ご予約)後、お申し込みフォームよりお申し込みください。
※前書の「動くWebデザインアイデア帳」も対象です。
https://coco-factory.jp/ugokuweb/#form

動くWebデザイン アイディア帳 ー実践編ー

2021/7/31 発売

「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!コラム12ページ書き下ろし!
「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーします!

■ Amazonからのご購入はこちらから 
■ 楽天からのご購入はこちらから

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

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

2021/2/27 発売

Webサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。
近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介します。

■ Amazonからのご購入はこちらから 
■ Amazon Kindle版のご購入はこちらから
■ 楽天からのご購入はこちらから

特典受け取りが出来ない場合は、こちらをご確認ください

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

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

※迷惑メール防止フィルターがかかっているメールアドレスから、お問い合わせフォーム経由で特典が届かないご連絡をいただくケースが増えてきています。
返信をしても返ってきてしまいますので、恐れ入りますが、フィルターがかかっていないメールアドレスからお申し込みをお願いいたします。

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

基礎から学びたい方へ

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

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

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

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

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

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

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

書籍情報

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

書籍紙面サンプル

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

書籍紙面サンプル

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

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

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

特典1

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

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

特典2

   

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