購入前に目次をご確認ください
MdN Web Mook サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア
エムディエヌコーポレーション / 2012年11月27日 / 全257ページ
【「ワンランク上」の制作テクニックをしっかり学べる解説書！】 Webサイトを実際のサイトによく見られるコンテンツのタイプで分類し、各タイプに応じたリアルな作例を使ってWebデザインの制作テクニックを伝える解説書。「情報提供を重視したデザイン」、「商品を魅力的に見せるデザイン」など、4章に分類しています。それぞれのタイプ別に効果的なレイアウトやナビゲーション、エフェクトなどを、HTML、CSS、jQuery、Photoshopなどの技術で実現する手法を取り上げました。サンプルデータはWebからダウンロード可能。Webデザインの「ワンランク上」の制作手法をしっかり学べる1冊です。
目次
- 扉
- はじめに
- 目次
- 本書の使い方
- 本書のサンプルデータについて
- ◆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サイト
- 扉
- はじめに
- 目次
- 本書の使い方
- 本書のサンプルデータについて
- ◆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 ワンソースで手軽にスマートフォン表示に対応
- 目的別索引
- 用語索引
- 奥付
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
