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

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

『動く Web デザインアイディア帳 実践編』 (久保田涼子、杉山彰啓 著、ソシム、2021 年 7 月刊) は、Web サイトの印象を決める動きを集め、コードをコピー & ペーストして使えるサンプルとして解説した本です。版元は本書を『動く Web デザイン アイディア帳』の姉妹本と位置付けており、前書が Web デザインで使われる基本的な動きを解説していたのに対し、本書は Web サイトの印象を決定付ける動きを扱うと案内しています。副題は「jQuery、CSS アニメーションの初心者でもコピペで動く!」で、版元は専用サイトからコードをコピーして使えると案内しています。

全 9 章の構成、サンプルサイトから SVG アニメーションまで

目次は chapter01「サンプルサイトから見る印象に関わる動き」から chapter 09「イラスト・オブジェクトの動き」までの全 9 章です。chapter01 はエステサロン、輸入車販売代理店、学習塾、研究所、ギャラリー、ポートフォリオ、企業サイト 3 種、エンタメ系、フラワーショップの EC サイト、アパレルのブランディングサイト、和風の老舗料亭という 13 のサイトを題材に、業種と印象に合わせた動きを見せます。chapter02「「動く Web デザイン」の基礎知識」は動きの役割、動きが発生するタイミング、印象に関わる動きが組み込まれる場所、動きを実現する仕組みの 4 節、chapter03「Web サイトの動きを実現する仕組みと準備」はライブラリを使う方法と、CSS アニメーションと jQuery の組み合わせ方を扱います。chapter04 から先はサンプル集で、chapter04「最低限覚えておきたい現れ方」、chapter 05「背景の動き」、chapter 06「エリアの動き」、chapter 07「画像リンクの動き」、chapter 08「テキストの動き」、chapter 09 が並び、パーティクルや波打つ背景、スクロールに合わせた画面分割や紙芝居風の展開、画像リンクの拡大やぼかし、モノクロからカラーへの変化、タイピング風に現れる文字、PNG と SVG のアニメーションまでを収めます。

CSS アニメーションと jQuery を組み合わせる仕組み

Web ページの動きは、CSS の transition と keyframes でどう動くかを定義し、JavaScript でいつ動かすかを決める分担で作られます。要素がスクロールで画面に入った瞬間や、クリックやホバーの瞬間に、スクリプトが要素へクラスを付け外しし、そのクラスに書かれた CSS アニメーションが再生されるという流れです。jQuery は JavaScript のライブラリで、本書の chapter03 は CSS アニメーションの基本、jQuery の基本、jQuery と CSS を組み合わせて動かす方法を順に扱います。

版元の執筆者紹介

版元の執筆者紹介によると、久保田涼子はフリーランスのクリエイターとしてデジタルハリウッド STUDIO の講師を務め、杉山彰啓はフロントエンドを中心とした開発に携わり同じく講師を務めています。本書は業種別のサンプルサイトと動きの基礎知識から、現れ方、背景、エリア、画像リンク、テキスト、イラスト・オブジェクトの動きのサンプルまでを全 9 章に収めています。