動く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　モーダルウィンドウ