MdNの本

サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア

サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア

サイトのタイプ別につくる Webデザインテクニックブック 仕事ですぐに役立つプロのアイデア

「ワンランク上」の制作テクニックを リアルな作例を通して、しっかり学べる解説書!

MdN編集部 編
B5判 / 256pP
ISBN978-4-8443-6302-6 / 価格(本体2,800円+税)※電子版の価格は販売ストアにて
2012年11月27日発売

Webサイトを実際のサイトによく見られるコンテンツのタイプ別に分類し、各タイプに応じたリアルな作例を使ってWebデザインの制作テクニックを伝える解説書です。テキスト主体で情報を伝える「情報提供を重視したデザイン」、ECサイトに代表されるような「商品を魅力的に見せるデザイン」、写真ビジュアルを豊富に取り入れた「写真を効果的に使うデザイン」、ユーザーを楽しませるエフェクトを使った「インタラクティブ性の高いデザイン」の4タイプ(4章)に分類しました。
それぞれのタイプ別に、コンテンツをより魅力的に見せるためのレイアウトやナビゲーション、UI、エフェクトなどを選び、制作手法を丁寧に解説しています。作例とテクニックの内容に応じてHTML、CSS、jQuery、Photoshopなどの技術を使い分けており、見栄えのいいデザインや派手な仕掛けを取り入れることを目的にするのではなく、実務案件で使うことを前提にした実践的なテクニックを取り上げました。解説で使用している作例データ(サンプルデータ)はダウンロード可能。Webデザインの「ワンランク上」の制作テクニックをしっかり学べる1冊です。

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本










目次

クリックすると開きます

【目次】
----------------------------------------
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 ワンソースで手軽にスマートフォン表示に対応


目的別索引
用語索引

カスタマーレビュー(出典:amazon.co.jp)

カスタマーレビュー(出典:amazon.co.jp)