今、身につけたいウェブ制作のスキルを基本から学べるオススメのチェリー本 -レスポンシブWebデザイン

jQueryのドーナツ本、スマフォのマカロン本の人気シリーズから新たに発売されたチェリー本（でいいのかな）の「レスポンシブWebデザイン」を紹介します。

一言で言うとかなりの良書です。通読し、このレビューを書くために何度も読み返しましたが、新人さんはもちろん、バリバリやってる人もウェブ制作に携わる人であれば得るものがたくさんあると思います。
オススメの一番のポイントは、応用できる基礎力に重視していること。
僕も新人教育を何度もやってきて、常にこの応用力に重点をおいていました。今、役に立つだけでなく、これから先の未知のものにぶつかった時にもきっと役立つはずです。

ただ一点残念なのが、本のタイトル「レスポンシブWebデザイン」が平凡すぎることでしょうか。内容の大筋としてその通りですが、副題の「マルチデバイス時代のコンセプトとテクニック」のようにテクニックだけでなく、コンセプトにもフォーカスがあてられています。

本書は7/30に発売したばかりで、ちょうど店頭にあると思います。
ぜひ、手にとって中を見てみてください！

Amazonだと「なか見！検索」で30ページくらい掲載されていました。

本書は、レスポンシブWebデザインの提唱者：Ethan Marcotteが定義するレスポンシブの三大要素「フルードイメージ・フルードグリッド・メディアクエリ」に準拠し、単に流行に流されるのではないベーシックなスキルをしっかり学ぶことができ、実用的なテクニックからパフォーマンス改善のさまざまなアイデアまで、現場のテクニック満載の一冊となっています。
Ethan Marcotteをはじめとする数々のクリエイターからのアドバイスも（スゴイ！

ちなみに、レスポンシブ発祥は僕が知る限り下記の記事です。

• Responsive Web Design -A List Apart

紙面のキャプチャで、中身を少しだけご紹介。
「これは！」というのを撮っていたら、ものすごい量になってしまったので1/3ほどカットしました。

一番楽しみな章の合間にあるボーナスページも充実してます。
モバイルファーストの提唱者：Luke Wroblewskiのコンセプト

従来のワークフローがレスポンシブ対応になるとどう変わるのか

タイポグラフィのデザイン・実装もかなり詳細に解説されています。
文字は大事。

効率のよいMedia Queriesの書き方。

最近ちらほら見かける文字の新しい単位「rem」の解説。

比較画像を添えて、文字を読みやすくするテクニック。

「リセットCSS」でがっかりしたのですが、リセットではなく「ノーマライズ」の解説です。

そのNormalize.cssの日本語環境への最適化、充実の10ページ解説。

レスポンシブ対応の基本となるレイアウトパターンの考察。

後半の応用編では、高度なテクニックも紹介されています。
画面のサイズ(px)ではなく、文字の数をベースにしたブレイクポイントの設定。

パフォーマンス改善のための5つの施策。

画像の最適化も単に圧縮を調整するだけでなく、画像にオーバーレイを重ねて色数を減らしたり、画像の一部をぼかして容量を減らしたり、とかなり実用的です。

最後はこれからのテクニック。
ビューポートのサイズを基準にした単位「vm」の使い方、より詳細になるCSS4のMedia Queries、ネストを使った新しいMedia Queriesの設定方法など。

レスポンシブWebデザインの目次

1. 導入編：マルチデバイス時代とレスポンシブWebデザインの誕生

   レスポンシブWebデザインとは

   レスポンシブWebデザインの背景

   レスポンシブWebデザインによる解決

   レスポンシブWebデザインの事例

   レスポンシブWebデザインの3大要素

2. 基礎編：サンプルで学ぶレスポンシブWebデザインの基本

   レスポンシブWebデザインのワークフローと画面設計

   HTMLの用意とリセットCSSの作成

   フルードイメージの導入とタイポグラフィの基本設定

   ヘッダ・フッタとコンテンツ領域のスタイリング

   メディアクエリの設定とグリッドデザインの導入

   フルードグリッドへの変換

   レスポンシブタイプセッティング

3. 実践編：商用サイトで通じるプロのテクニック

   リセットCSSの最適化

   Less Frameworkを利用したグリッドレイアウト

   レスポンシブイメージの実装

   高解像度ディスプレイへの対応

   ナビゲーションパターンとレイアウト設計

   テーブルとビデオのレスポンシブ化

4. 応用編：高度なレスポンシブWebデザインの実践

   文字数をベースにしたブレイクポイントの設定

   パフォーマンス改善の基本

   Data URIとアイコンフォントによるHTTPリクエストの削減

   画像の最適化によるパフォーマンスの改善

   ソーシャルメディアボタンの最適化

   これからのレスポンシブWebデザイン

フロントエンドのコーダー・デザイナーだけでなく、ディレクターやプロデューサーなど、ウェブ制作の今に携わる人全てにオススメです。
自身のスキルアップ、新人さんへの指南書、とりあえず、今年読んでおきたい本の一冊であることは間違いないです。

献本の御礼

最後に、献本いただいたアスキー・メディアワークスの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス