JavaScript

2021.05.24

【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

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

jQueryやCSSアニメーションでサイトに動きを付けてみたいけれどどうやっていいかわからない、簡単な動きは付けられるけれどもっと色々な動きを付けてみたいと思うことはありませんか?
また、コーディングに慣れている人は難しい動きを作るのに時間を取って、よく使われる簡単な動きは時間を掛けずにササっと作れるようになりたい!と、思うことも多いと思います。

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

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

今回ご紹介する本 「動くWebデザインアイディア帳 」です。
今年の2月にソシム株式会社さんから出版され、発売日の前後ではTwitterで話題になっているのをよく見かけて気になったため、紙の書籍を購入してコーディング作業時に活用させていただいています!

書籍の内容

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

  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以降の動きのサンプルを実際に確認できる書籍と連動したサイトも公開されています。

おすすめポイント

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

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

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

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

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

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

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

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

〈まとめ〉動くサイトを作ってみたい人にはまず手に取ってみてほしい本

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

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

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

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

0

関連記事

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【簡単レスポンシブ対応】jQueryのみでPC/SP(スマートフォン)の画像を切り替える方法

    JavaScript

  • 2021.03.30

    【jQuery】text()メソッドでHTML要素内のテキストを操作する

    HTML5

    JavaScript

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!