---------------------------------------- CHAPTER 1 情報提供を重視したデザイン ---------------------------------------- ■CASE STUDY 01 シンプルなつくりでも人目を引くコーポレートサイト A マウスオーバーで波紋が広がる円形メニュー B 軽快な動作を手軽に実装できるドロップダウンメニュー C 画像を使わず実現するグラフィカルなパンくずリスト D Googleマップをオリジナルにカスタマイズ
■CASE STUDY 02 Webフォントを取り入れたテキスト主体のサイト A Webフォントで表現した画像を使わないタイポグラフィ B CSSのテクニックを利用したリストや見出しの装飾 C CSS3を活用した角丸・ストライプのテーブル D ラベルテキストを内包したユーザーフォーム E Webフォントアイコンで装飾したフォーム F ふわっと出現して消えるツールチップ
---------------------------------------- CHAPTER 2 商品を魅力的に見せるデザイン ---------------------------------------- ■CASE STUDY 03 心地よいエフェクトでページの回遊を促すECサイト A 折りたたみ自由なアコーディオンメニュー B タブパネルで切り替えるフィーチャーリスト C クリックで画像が切り替わるイメージビューア
■CASE STUDY 04 限られたスペースで多くの写真を見せるECサイト A 複雑なメニュー情報を一度に見渡せるメガメニュー B ズームインエフェクトを使った商品紹介 C スキンのカスタマイズ可能なセレクトメニュー D 複数の画像をスライドさせるカルーセルパネル
■CASE STUDY 05 コンパクトなスペースで商品の特長を伝えるスマートフォンサイト A JPEG画像を透過表示させたフリック機能 B クリックで開閉するアコーディオンメニュー
---------------------------------------- CHAPTER 3 写真を効果的に使うデザイン ---------------------------------------- ■CASE STUDY 06 エフェクトで優雅な雰囲気を演出したECサイト A フェードしながら段階的にコンテンツを表示 B フロートボックスを隙間なく敷き詰める C マウスオーバー時にフェードで画像を切り替える D 独自のカスタマイズができるフォームバリデーション E jQuery UIを利用したログインフォーム
■CASE STUDY 07 写真をふんだんに使った商品カタログサイト A 画面全体に写真を表示したインパクトのあるトップページ B マウスオーバー時に拡大させる画像のアニメーション C スライダー式に遷移する商品写真のLightbox表示 D 商品情報を表示するツールチップ
■CASE STUDY 08 写真加工やレイアウトでナチュラル感を出したプロダクトサイト A パーツ類の透過画像をPhotoshopで作成 B 写真をネガティブ値で配置してインパクトを出す C 要素をランダムに配置してデザインに動きを出す D 掠れた角丸フレームとマスキングテープ風のパーツ
---------------------------------------- CHAPTER 4 インタラクティブ性の高いデザイン ---------------------------------------- ■CASE STUDY 09 動きのある仕掛けで世界観を表現したキャンペーンサイト A パララックス効果を用いた奥行きのある表現 B 最下部に固定された曲線のフッター C ソーシャルサイトのシェア系ボタンを設置 D カスタマイズが簡単なスライド式フォトギャラリー E nth-childを利用したデザイン性の高い表組み F 独自スクリプトで実装する表組みの絞り込み機能
■CASE STUDY 10 ユニークなインタラクションを実装した音楽系サイト A シャッターが開くようにページがスライドするエフェクト B 表示・非表示が切り替わる開閉式ナビゲーション C ワンソースで手軽にスマートフォン表示に対応
