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

目次

CHAPTER 1　サンプルサイトから見る機能にかかわる動き

SECTION 1-1　女性向けのエステサロンのサイト
SECTION 1-2　男性向けの輸入車販売代理店のサイト
SECTION 1-3　子ども向けの学習塾のサイト
SECTION 1-4　科学的な研究所のサイト
SECTION 1-5　写真が並ぶギャラリーのサイト
SECTION 1-6　大きく写真を見せるポートフォリオのサイト
SECTION 1-7　ミニマルな企業サイト
SECTION 1-8　先進的な企業サイト
SECTION 1-9　堅実的な企業サイト
SECTION 1-10　映画・音楽のエンタメ系サイト
SECTION 1-11　フラワーショップのECサイト
SECTION 1-12　アパレルのブランディングサイト
SECTION 1-13　和風の老舗料亭のサイト

CHAPTER 2　「動くWebデザイン」の基礎知識

SECTION 2-1　Webサイトにおける「動き」の役割
SECTION 2-2　Webサイトで「動き」が発生するタイミング
SECTION 2-3　Webサイトで「機能の動き」が組み込まれている場所
SECTION 2-4　Webサイトの動きを実現する仕組み

CHAPTER 3　Webサイトの動きを実現する仕組みと準備

SECTION 3-1　jQueryの基本
SECTION 3-2　CSSアニメーションの基本
SECTION 3-3　jQueryとCSSを組み合わせて動かす
SECTION 3-4　動かない時のチェック項目

CHAPTER 4　ローディング・画面遷移

SECTION 4-1　ローディング
SECTION 4-2　画面遷移

CHAPTER 5　ナビゲーション・メニュー

SECTION 5-1　グローバルナビゲーション
SECTION 5-2　ハンバーガーメニュー
SECTION 5-3　テキストナビゲーション
SECTION 5-4　タブメニュー

CHAPTER 6　ギャラリー・動画

SECTION 6-1　スライドショー
SECTION 6-2　ギャラリー
SECTION 6-3　動画

CHAPTER 7　ボタン・検索

SECTION 7-1　ボタン
SECTION 7-2　検索

CHAPTER 8　ページトップリンク・ページ内リンク

SECTION 8-1　ページトップリンク
SECTION 8-2　ページ内リンク

CHAPTER 9　グラフ・補足・関連情報の表示

SECTION 9-1　スクロールダウン
SECTION 9-2　アコーディオンパネル
SECTION 9-3　ツールチップ
SECTION 9-4　ニュースティッカー
SECTION 9-5　グラフ
SECTION 9-6　モーダルウィンドウ