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

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

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

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

本のキャプチャ

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

本のキャプチャ

レスポンシブWebデザイン
[Amazonでみる]
[楽天でみる]

著:
菊池 崇
出版社:
アスキー・メディアワークス
発売日:
2013/7/30

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

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

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

紙面のキャプチャで、中身を少しだけご紹介。
「これは!」というのを撮っていたら、ものすごい量になってしまったので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デザイン

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

本のキャプチャ

レスポンシブWebデザイン
[Amazonでみる]
[楽天でみる]

著:
菊池 崇
出版社:
アスキー・メディアワークス
発売日:
2013/7/30

献本の御礼

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

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

top of page

©2017 coliss