MdNの本

web creators特別号 いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア

web creators特別号 いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア

web creators特別号 いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア

Webデザインのアイデアをまとめて1冊に凝縮!!

web creators編集部 編
A4変型判 / 144pP
ISBN978-4-8443-6316-3 / 価格(本体1,800円+税)
2013年01月29日発売

Webデザインとコーディング全般における、流行・定番テクニックと最新情報を1冊に凝縮しました。近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアを満載。掲載サンプル&コードもダウンロードできるので、動作を試しながら実践的に解説を読み進められます。Webデザインの“どうしよう?”を“これだ!”に変える、現場のためのネタ帳の登場です!

【CHAPTER1】デザイン&レイアウト
レスポンシブWebデザイン/jQuery Masonry/フルスクリーン画像/パララックス効果 etc

【CHAPTER2】ナビゲーション&メニュー
パンくずリスト/ドック風メニュー/アコーディオンメニュー/ドロップダウンメニュー/タブ etc

【CHAPTER3】インタラクション&エフェクト
Lightbox/ズーム/スライドショー/ツールチップ/カルーセルパネル/フォームの入力チェック etc

【CHAPTER4】HTML5&CSS3
CANVAS/SVG/セレクタの記述まとめ/IE対策/ボーダーと背景/グラデーション/Webフォント etc

【CHAPTER5】フレームワーク&API
Twitter Bootstrap/99lime/52framework/Yaml4/SassとLESS/Twitter APIの変更点 etc

【CHAPTER6】スマートフォンサイト
UI設計のポイント/画像フリック/jQuery Mobileテクニック/スマートフォンのViewport etc

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

ページイメージ

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










目次

クリックすると開きます

【目次】
Introduction 新しいデバイス、新しい技術がとりまくWebデザインの“現在”

CHAPTER1 デザイン&レイアウト
01 メディアクエリによるレスポンシブWebデザイン
02 コンテンツを隙間なくパネル状に配置する
03 可変グリッドを採用したレスポンシブWebデザイン
04 画像に沿ってテキストが回りこむレイアウト
05 水平に展開するフォトギャラリー
06 画面いっぱいに写真が広がるTOPページ
07 パララックス効果のユニークなスクロール
08 子ども向けサイトに似合うおもちゃのロゴ
09 墨がにじんだような和風文字を表現
10 光が灯ったイメージのナビゲーションパーツ
11 デザインのアクセントになる垂れ幕パーツ


CHAPTER2 ナビゲーション&メニュー
01 画像なしでグラフィカルなパンくずリストに
02 マウスの位置に反応するドック風メニュー
03 スライドして開閉するアコーディオンメニュー
04 CSSだけで作成するドロップダウンメニュー
05 マウスオーバーでアニメーションするメニュー
06 アクセシビリティにも配慮した軽量で簡単に実装できるタブ


CHAPTER3 インタラクション&エフェクト
01 Lightboxで画像をオーバーレイ表示する
02 ダイナミックにズームする画像ギャラリー
03 エフェクトアニメーションが豊富なスライドショー
04 画像やリンクの説明書きに便利なツールチップ
05 商品のディテールを伝えるズームアップエフェクト
06 ECサイトで定番のカルーセルパネル
07 フォントサイズの切り替えボタン
08 回転しながら出現するページトップボタン
09 送信前にフォームの内容をチェックする
10 画像をコマ送りで表示させるスライドショー
11 汎用的なJavaScriptのロールオーバースクリプト
12 CSSスプライトを使ったロールオーバー
13 HTML5のPlaceholderをIEでも利用可能に


CHAPTER4 HTML5&CSS3
01 canvasを使ってJPEG画像を透過させる
02 SVGで棒グラフのバーをアニメーションさせる
03 セレクタの記述方法を基礎から理解する
04 IEへの対応(1)|ライブラリを利用したIEへの対策
05 IEへの対応(2)|従来のCSSでも必要になるIE7対策
06 ボーダーと背景に関連したCSS3の新機能
07 ボタンの表現に使えるCSS3の機能いろいろ
08 CSS3でつくるつややかなボタン実例
09 フォントの選択肢が広がるWebフォントの活用


CHAPTER5 フレームワーク&API
01 Twitter Bootstrapを使ったサイト構築の流れ
02 Web制作をスピードアップする99lime
03 HTML5対応フレームワーク52framework
04 マルチカラムとグリッドレイアウトが充実したYaml4
05 複数のメタ言語に対応した320 and Up
06 Web開発の生産性を向上させるメタ言語Sass(SCSS)とLESSとは
07 Twitter APIのバージョンアップによる変更点
08 foursquare APIでロケーション情報を活用


CHAPTER6 スマートフォンサイト
01 株式会社ディー・エヌ・エーに聞く スマートフォンサイトUI設計のポイント
02 プラグインで簡単に「フリック」を実装する
03 可変グリッドによるPCとスマートフォンの両対応
04 jQuery Mobileで簡単にモバイルUIを作成
05 jQuery Mobileのデザインを容易にするテーマローラー
06 jQuery MobileプラグインDateBoxを利用する
07 表示サイズ調整の要となるViewportの設定

Webクリエイティブの現場を支えるIntuos5
BiND for WebLiFE* 6でつくるデザイナーズWebサイト