CSSとJavaScriptで作る動くUIアイデアレシピ

著者名：Mana

インプレス（2025/04発売）

• ISBN：9784295021285

内容説明

※この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。

スクロールで現れる美しいアニメーション、Webサイトを彩る洗練されたUI。そんな「動くWebサイト」を、あなたの手でつくり出すためのアイデアが詰まった一冊です。現在のスタンダードであるCSSやJavaScriptを使った動くUIを詳細に解説し、実装の注意点も丁寧に説明しています。また、感性に頼らない、理論に基づいたデザインのプロセスも紹介しています。即戦力となるボタン／画像／背景・画面遷移／ナビゲーションメニュー／スクロールなどの実践的なUIパーツを厳選しています。

目次

表紙
本書について
はじめに
目次
本書の読み方
本書の使い方
Chapter 1 動きのデザイン
Lesson 1 動きのあるWebサイト
Lesson 2 動きの必要性
Lesson 3 動きによる印象の違い
Lesson 4 どんな動きにしよう？
Lesson 5 動きをデザインしよう
Chapter 2 CSS・JavaScriptアニメーションの基礎
Lesson 1 アニメーションのさまざまな実装方法
Column Webサイト制作のためのエディター
Lesson 2 CSS transitionアニメーションの基礎
Lesson 3 CSS keyframesアニメーションの基礎
Lesson 4 CSS keyframesアニメーションで指定できる値
Lesson 5 JavaScriptアニメーションの基礎
Lesson 6 JavaScriptで動きのきっかけを設定する方法
Lesson 7 デベロッパーツールを使ってみよう
Lesson 8 うまく動かないときの確認リスト
Chapter 3 印象に残るボタン
Lesson 1 ボタンの役割
Lesson 2 背景色をふわっと変える
Lesson 3 背景が流れる
Lesson 4 ボタンを押し込んだようなアクション
Lesson 5 ラインが動く
Lesson 6 矢印が変化する
Lesson 7 キラキラ光る
Lesson 8 くるくる回る
Lesson 9 ポンポン弾む
Lesson 10 波紋が広がる
Chapter 4 画像の魅力を引き出すテクニック
Lesson 1 画像の役割
Lesson 2 色味を変える
Lesson 3 画像をぼかす
Lesson 4 ふわふわ動かす
Lesson 5 ホバーで大きく表示
Lesson 6 別の画像に切り替える
Column 無料で利用できる写真素材Webサイト
Lesson 7 自動で横に流れる
Lesson 8 パラパラ漫画風
Lesson 9 ふんわり表示
Lesson 10 ゆっくり拡大していく
Chapter 5 全体の雰囲気を決める背景・画面遷移
Lesson 1 背景・画面遷移の役割
Lesson 2 背景色を徐々に変える
Lesson 3 背景画像を変える
Lesson 4 背景に動画を配置する
Lesson 5 粒子を散りばめる
Lesson 6 ローディング画面
Lesson 7 画面遷移のアニメーション
Chapter 6 迷わないナビゲーションメニュー
Lesson 1 ナビゲーションメニューの役割
Lesson 2 ホバーで伸びるライン
Lesson 3 ドロップダウンメニュー
Lesson 4 フルスクリーンで表示するメニュー
Lesson 5 クリックで開くスライドメニュー
Lesson 6 リンク間を移動するライン
Chapter 7 スムーズなスクロール
Lesson 1 スクロールの役割
Lesson 2 スクロールでページを操作しやすくする
Lesson 3 スクロールでコンテンツを表示
Column Intersection Observerとは？
Lesson 4 スクロールによるテキスト効果
Lesson 5 パララックス効果で遠近感を出す
Lesson 6 スクロールで色を変える
Chapter 8 制作効率を上げるライブラリー
Lesson 1 ライブラリーとは
Lesson 2 クラス指定だけでアニメーション「Animate.css」
Lesson 3 画像や動画を拡大表示「Fancybox」
Lesson 4 スクロールに合わせてアニメーション「AOS」
Lesson 5 手書き風マーカー「Rough Notation」
Lesson 6 カーソルに合わせて動く3Dテキスト「ztext.js」
Lesson 7 タッチ操作のできるスライダー「Swiper」
Lesson 8 シンプルなモーダルウィンドウ「SweetAlert2」
Lesson 9 グラフを作る「Chart.js」
Lesson 10 3Dアニメーションの背景「Vanta.js」
Column ライブラリーとフレームワーク
Column jQuaryとは
索引
著者プロフィール
奥付