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

「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
「JavaScript の本を購入してみたが、実際のサイトにどう組みこめばいいか具体的なイメージがわかない」
「動きの原理を最低限理解して、とにかく早く実務にいかしたい」

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

ハンバーガーメニューの開閉、スクロールに合わせたフェードイン、ホバーで反応するボタン。サイトに動きをつけるたびに同じ検索を繰り返し、見つけたコードを貼っても動かない。『動く Web デザインアイディア帳』 (久保田涼子 / 杉山彰啓 著、ソシム、2021 年 2 月刊、B5 判) は、版元がまさにその悩みを 4 つ並べて見せるところから始まる本で、Web サイトを動かすことが苦手な「右脳系ウェブデザイナー」が第一歩を踏み出すための、動きの逆引き事典と位置づけられています。

520 ページの逆引き事典という作り

副題は「jQuery、CSS アニメーションの初心者でもコピペで動く!」。実装したい動きから該当ページを引き、サンプルコードをそのまま使って動かせることを看板にしつつ、コードの丸写しで終わらせず、基本的な動きの原理や仕組みの説明が添えられています。520 ページという厚みは読み物としてではなく、手元に置いて必要な動きを引くための事典としての分量です。

コピペから入る学び方が動きの実装では合理的な理由

「コピペで動く」教材には学習効果を疑う声もつきものですが、動きの実装に限っては合理的な入り方です。Web のアニメーションは、CSS のトランジションとキーフレーム、そして JavaScript による発火条件 (クリック / スクロール / 時間) の組み合わせに帰着します。動く完成品を先に手に入れ、数値や条件を変えて挙動の変化を観察するほうが、仕様書を読み上げるより構造が早く見えます。デザインカンプに「ここはふわっと」とだけ書かれて途方に暮れる場面で、共通の語彙と実物例を与えてくれる本でもあります。

購入前の注意: jQuery 前提の 2021 年刊

購入前に押さえたいのは 2021 年刊で jQuery を前提とした構成だという点です。React や Vue といったフレームワークの案件ではコードをそのまま貼れず読み替えが必要になりますし、jQuery 自体を採用しない現場も珍しくありません。それでも、CSS アニメーションの部分はそのまま通用し、jQuery で書かれた発火のロジックも「何をきっかけに何を変えるか」という原理の水準ではどの環境にも持ち越せます。制作会社の Web サイト案件やポートフォリオ、WordPress サイトのような jQuery が健在な領域では、いちばん摩擦なくそのまま使えます。

向いている読者と次の入口

デザインはできるがコードに苦手意識のあるデザイナー、静的なページは組めるようになったが動きで手が止まるマークアップ担当者、そして自分のサイトに演出を足したい人が、この本の読者像です。動きの実装を毎回の検索から卒業させ、手元の 1 冊で完結させるという価値は、ページを引くたびに回収されていきます。原理の説明を足がかりに、そこから JavaScript の学習 へ進む入口としても機能する一冊です。