制作 書籍紹介

2022.07.21

初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

こんにちは!仕事で使えそうな本を会社に持って来すぎてロッカーが本棚になりそうなコーディングユニットの小川です!

WEB制作(コーディング)の勉強をしていく中で、jQuery(javascript)やCSSアニメーションでサイトに動きを付けてみたいけれどどうやっていいかわからない、簡単な動きは付けられるけれどもっと色々な動きを付けてみたいと思うことはありませんか?
また、コーディングに慣れている人は難しい動きを作るのに時間を取って、よく使われる簡単な動きは時間を掛けずにササっと作れるようになりたい!と、思うことも多いと思います。
本屋さんで書籍を探してみても、入門書は数が多くどれにしたら良いかも迷ってしまいますよね…。

今回はそんな時にぜひ手に取ってみていただきたい、動くWebデザイン、jQuery の書き方について丁寧にまとめられている本の書評を書いてみました!

ご紹介書籍「”動く”Webデザインアイデア帳」

今回ご紹介する本 「動くWebデザインアイディア帳 」です。
2021年の2月にソシム株式会社さんから出版されました。
1冊でもかなりボリュームがあり参考になるのですが、8月にはより現場で使える内容が書かれた「動くWebデザインアイディア帳 実践編」も出版されています!
今回はまず初心者の方に読んでいただきたい、最初に出版された方をご紹介させていただきます!

書籍の内容

こちらの書籍はパーツごとにチャプターが分かれており、簡単に付けたい動きを見つけることができるような構成になっています。

  1. CHAPTER 1  サンプルサイトから見る機能に関わる動き
  2. CHAPTER 2  「動くWebデザイン」の基礎知識
  3. CHAPTER 3  Webサイトの動きを実現する仕組みと準備
  4. CHAPTER 4  ローディング・画面遷移
  5. CHAPTER 5  ナビゲーション・メニュー
  6. CHAPTER 6  ギャラリー・動画
  7. CHAPTER 7  ボタン・検索
  8. CHAPTER 8  ページトップ・ページ内リンク
  9. CHAPTER 9  グラフ・補足・関連情報の表示

期間限定でCHAPTER4以降の動きのサンプルを実際に確認できる書籍と連動したサイトも公開されています。
連動したサイトがあると、本と同じ動きを付けたいときに全部のコードを頑張って書かなくてもコピーして使うことができるので、初心者の方でもjQueryを触りやすい嬉しいポイントですね!

おすすめポイント

最初にしっかりとjQueryの基礎が身につけられる!

実際の動きについての説明に入る前のCHAPTER1〜3では書籍の読み方やWebページで動きを付ける時に最低限知っておきたいjQueryやCSSアニメーションの基礎がきちんと説明されています。
イラスト付きのわかりやすい説明に加え、実際に動きを取り入れている参考事例のWebサイトが紹介されているため、jQueryやCSSを使って動かすためにはどうしたら良いか、作成するデザインにはどんな動きを取り入れたら良いかを考えて学びながら読み進めることができます。

また、作ってみた動きがWebサイト上で動かない時にチェックしたい項目についても触れているため、基礎と合わせてjQueryの陥りやすいミスについても学ぶことができます!

どんな風に見えるかを確認できるサンプルサイトがある!

期間限定の書籍と連動したサイトとは別に、書籍で紹介されている動きを実際のWebサイトに使ってみるとどんな風に見えるのかを確認することができる架空のサンプルサイトが10種類以上紹介されています。
女性向けエステのサイト、子供向け学習塾のサイト、堅実な企業サイトなど様々なパターンがあるため、自分の作成しようとしているサイトではどんな動きを取り入れたら良いかを実際の見え方からイメージすることができます!

また、書籍通りに書いてみたものの上手く動かない…という場合にはサンプルサイトで実際に動いているコードと自分の書いたコードを照らし合わせ、上手く動かない原因や書き間違えてしまっている部分を見つけることもできます。

チャプターごとに色分けされていて探しやすい!

動きに関する説明のあるCHAPTER4以降のページはチャプターごとに色分けがされています。
そのため、実際の紙の書籍を横から見るとこのようになっています。

今回はグローバルナビゲーションを作りたいから青色のページを探してみよう!といった紙の本ならではの探しやすい工夫がされています。
使い慣れてくると目次からページを確認して開くのではなく、色からすぐにページを開くことができるため個人的にはとても使いやすいです!

〈まとめ〉jQuery初心者の方はまず手に取ってみてほしい本

基礎知識の丁寧な説明やサンプルサイトがあるため、サイトを作ったことはあるけれどjQueryやCSSアニメーションを使って動きを付けたことがない、動きを付けることに苦手意識がある人にはまず手に取ってみてほしい本です!
また、よく使う動きの簡単な実装方法がしっかりとまとめられているため、コーディング初心者だけではなく実際にコーディング業務に当たっている人も手元にあるとふとした時に役立つ書籍です!

気になる方はぜひ下記リンクから本の詳細を見てみてください!

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

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

こちらの書籍もおすすめ!

この記事をシェアする

関連記事

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    制作

    コーディング

  • 2023.12.29

    CSSで文節が切れるようになった話

    制作

    コーディング

  • 2023.12.29

    FigmaでWebPが書き出せるようになった話

    制作

    コーディング

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×