Follow #ソシム販売部Twitterアイコン

動くWebデザインアイディア帳実践編
[ 関連SNS ]
  • Twitterアイコン
  • Instagramアイコン

関連サイト

 

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

久保田涼子、杉山彰啓

サイトを印象付ける動きを厳選! コピペで使える、Webページに様々な動きを加えるサンプル集

定価
2,860円(本体価格 2,600円)
  • 発売日
    2021年7月31日
  • 判型/ページ数
    B5正寸、オール4C/424
  • ISBN
    978-4-8026-1323-1

この書籍を問い合わせる

キーワード:
/ /

「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!

「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーします!

本書は、好評の「動くWebデザイン アイディア帳」の姉妹本です。「動くWebデザイン アイディア帳」がWebデザインで使われる基本的な「動き」を解説していたのに対して、本書では実際にWebサイトの印象を決定付けることができる動きについて解説しています。 前書と同様に、専用サイトから簡単にコードをコピー&ペーストして利用することも可能です!

chapter01 サンプルサイトから見る印象に関わる動き

section 1-1 女性向けのエステサロンのサイト
section 1-2 男性向けの輸入車販売代理店のサイト
section 1-3 子ども向けの学習塾のサイト
section 1-4 科学的な研究所のサイト
section 1-5 写真が並ぶギャラリーのサイト
section 1-6 大きく写真を見せるポートフォリオのサイト
section 1-7 ミニマルな企業サイト
section 1-8 先進的な企業サイト
section 1-9 堅実的な企業サイト
section 1-10 映画・音楽のエンタメ系サイト
section 1-11 フラワーショップのEC サイト
section 1-12 アパレルのブランディングサイト
section 1-13 和風の老舗料亭のサイト

chapter02 「動くWebデザイン」の基礎知識

section 2-1 Webサイトにおける「動き」の役割
section 2-2 Webサイトで「動き」が発生するタイミング
section 2-3 Webサイトで「印象に関わる動き」が組み込まれている場所
section 2-4 Webサイトの動きを実現する仕組み

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

section 3-1 ライブラリを使って手軽に要素を動かそう!
section 3-2 CSSアニメーションとjQueryを組み合わせる① CSSアニメーションの基本
section 3-3 CSSアニメーションとjQueryを組み合わせる② jQueryの基本
section 3-4 CSSアニメーションとjQueryを組み合わせる③ jQueryとCSSを組み合わせて動かす

chapter04 最低限覚えておきたい現れ方

sample 4-1-1 FADE ふわっ その場で
sample 4-1-2 FADE ふわっ 下から
sample 4-1-3 FADE ふわっ 上から
sample 4-1-4 FADE ふわっ 左から
sample 4-1-5 FADE ふわっ 右から
sample 4-2-1 FLIP パタッ 下へ
sample 4-2-2 FLIP パタッ 左へ
sample 4-2-3 FLIP パタッ 左上へ
sample 4-2-4 FLIP パタッ 右へ
sample 4-2-5 FLIP パタッ 右上へ
sample 4-3-1 ROTATE くるっ X軸(縦へ)
sample 4-3-2 ROTATE くるっ Y軸(横へ)
sample 4-3-3 ROTATE くるっ Z軸(左へ)
sample 4-3-4 ROTATE くるっ Z軸(右へ)
sample 4-4 ZOOM IN ボンッ(拡大)
sample 4-5 ZOOM OUT ヒュッ(縮小)
sample 4-6 BLUR じわっ(ぼかしから出現)
sample 4-7 SMOOTH にゅーん(滑らかに変形して出現)
sample 4-8 枠線が伸びて出現 スーッ
sample 4-9-1 背景色が伸びて出現 シャッ 左から
sample 4-9-2 背景色が伸びて出現 シャッ 右から
sample 4-9-3 背景色が伸びて出現 シャッ 下から
sample 4-9-4 背景色が伸びて出現 シャッ 上から
sample 4-10 順番に現れる(CSS)
sample 4-11 ランダムに現れる(CSS)
sample 4-12 順番に現れる(CSS×jQuery)
sample 4-13 ランダムに現れる(CSSxjQuery)

chapter 05 背景の動き

sample 5-1 背景色が時間により変化
sample 5-2 グラデーションが時間により変化
sample 5-3 流体シェイプ
sample 5-4 パーティクル 幾何学模様
sample 5-5 パーティクル 雪が降る
sample 5-6 パーティクル 桜が散る
sample 5-7 パーティクル ホタルが舞う
sample 5-8 パーティクル 紙吹雪が舞う
sample 5-9 パーティクル 星がキラキラ
sample 5-10 波打つ 1つ、重なりなし
sample 5-11 波打つ 1つ、重なりあり
sample 5-12 波打つ 複数、重なりなし
sample 5-13 波打つ 複数、重なりあり
sample 5-14 波線(1つ)
sample 5-15 波線(複数)
sample 5-16 水滴が落ちる
sample 5-17 粒子が集まってタイポグラフィーを形成する

chapter 06 エリアの動き

sample 6-1 スクロールすると1画面移動
sample 6-2 スクロールすると画像やエリアが時間差で重なる
sample 6-3 スクロールすると画面分割した左右がそれぞれ動く
sample 6-4 スクロールすると画面分割した右側が動く
sample 6-5 スクロールすると紙芝居風に展開
sample 6-6 スクロールすると下のエリアがヘッダーにかぶさる
sample 6-7 スクロールするとHeader背景画像が拡大

chapter 07 画像リンクの動き

sample 7-1 画像が拡大
sample 7-2 画像が縮小
sample 7-3 画像が拡大+回転
sample 7-4 ぼかし
sample 7-5 透過
sample 7-6 モノクロからカラーへ
sample 7-7 セピアからカラーへ
sample 7-8 キラッ
sample 7-9 波紋
sample 7-10 背景が出現+テキスト 下から
sample 7-11 背景が出現+テキスト 上から
sample 7-12 背景が出現+テキスト 左から
sample 7-13 背景が出現+テキスト 右から
sample 7-14 背景が出現+テキスト 中央から横に
sample 7-15 背景が出現+テキスト 中央から縦に
sample 7-16 回転+テキスト X軸
sample 7-17 回転+テキスト Y軸
sample 7-18 回転+テキスト Z軸
sample 7-19 回転+テキスト Z軸2
sample 7-20 画像拡大(ぼかし)+テキスト
sample 7-21 画像縮小(ぼかし)+テキスト
sample 7-22 画像透過+グラデーション+テキスト
sample 7-23 枠線+テキスト

chapter 08 テキストの動き

sample 8-1 バラバラに出現
sample 8-2 流れるように出現 左から右
sample 8-3 流れるように出現 右から左
sample 8-4 流れるように出現 上から下
sample 8-5 流れるように出現 下から上
sample 8-6 アルファベットがランダムに変化して出現
sample 8-7 回転しながら出現
sample 8-8 ランダムに出現
sample 8-9 じわっと出現
sample 8-10 タイピング風に出現
sample 8-11 1文字ずつ文字が出現
sample 8-12 背景色が伸びて出現 左から右
sample 8-13 背景色が伸びて出現 右から左
sample 8-14 背景色が伸びて出現 上から下
sample 8-15 背景色が伸びて出現 下から上
sample 8-16 滑らかに出現
sample 8-17 ほのかに光りながら出現

chapter 09 イラスト・オブジェクトの動き

sample 9-1 GIFアニメーション
sample 9-2 PNGアニメーション(APNG)
sample 9-3-1 PNGアニメーション(CSS) PNG画像が1度だけ動く
sample 9-3-2 PNGアニメーション(CSS) PNG画像がループして動く
sample 9-3-3 PNGアニメーション(CSS) hoverするとPNG画像が動く
sample 9-3-4 PNGアニメーション(CSS+JavaScript)
sample 9-4-1 SVGアニメーション
sample 9-4-2 SVGアニメーションを使い、手書き風アニメーションを実現

ダウンロードデータ

本書で解説したサンプルデータをダウンロードできます。
なお、使用方法などに関しては、必ず書籍の該当箇所をご確認の上、ご利用ください。
ダウンロード後、解凍したファイル内に「readme.txt」ファイルなどが含まれる場合は、使用前にこちらもご確認ください。

お問い合わせ

本書に関するお問い合わせは、下記のボタンをクリックしてお問い合わせフォームよりお問い合わせください。

この書籍を問い合わせる

author執筆者紹介

久保田 涼子

1982年生まれ、広島市出身。東京都在住。東京女子大学 文理学部 心理学科卒業。

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

著書「Webデザイン良質見本帳(SBクリエイティブ)

コメント

1つの動きを実現する方法は様々ありますが、なるべくわかりやすい方法を選びました。

Webサイトを動かすことが苦手な右脳系ウェブデザイナーの皆さんが、サイトを動かす第1歩を踏み出すための「動きの逆引きサイト」になることが出来たら幸いです。

杉山 彰啓

1984年生まれ、東京都出身・在住。
大手システム開発系企業にて、移動ロボットの走行制御プログラミング開発に従事し現在は、フリーランスとしてWEB のフロントエンドを中心とした開発に携わる。

デジタルハリウッドSTUDIOで講師を行いながら、YouTubeやアプリ開発のディレクター、茨城県鹿行地区のNo1 ポータルサイト locoty(ロコティー)の運営などマルチに活動を行う。

コメント

サイトを利用して「動いた!嬉しい!」という気持ちを、その後のさらなる動きの仕組みへの探求心につなげて頂ければ幸いです。

[ この書籍をシェアする ]

関連する書籍

カテゴリから本を探す

シリーズから本を探す

本を探す