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

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

「サイトの印象を決定付ける動き」をこの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 ランダムに現れる（CSSｘjQuery）

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アニメーションを使い、手書き風アニメーションを実現