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

  • Amazonで購入
  • 楽天で購入

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

この書籍の購入

  • Amazonで購入する
  • 楽天で購入する