【書評】「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」菊池崇 著

レスポンシブWebデザインアスキー・メディアワークスさんより、「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック(菊池崇 著)を、献本いただきました。ありがとうございます!

スポンサードリンク

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

そもそも「レスポンシブWebデザイン」とはなにかというと、

レスポンシブWebデザイン(Responsive Web Design)は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック P12 より引用

ということだそうです。

・モバイルサイトとPCサイトのURLを別々にする
・PCでアクセスした場合とガラケーでアクセスした場合に別々のhtmlを表示する

という手法ではなく、一枚のhtmlを複数のデバイス向けに表示を最適化しようぜ!という考え方です。

日本での例として本書では、パン屋さんのアンデルセングループが紹介されています。

Googleでも推奨されてますし、たしかに、流行ってますよね、レスポンシブWeb。

サンプルサイトをつくろう

レスポンシブWebデザインさて、本書ですが、レスポンシブWebの概要説明のあと、第2章の基礎編では、架空のカフェ「カフェ ビーン」のWebサイトをレスポンシブWebデザインで実際に組み立てながら、基礎的な制作知識を身につけていくことができます。
html、cssのソースの解説もきちんとされていて分かりやすかったです。よい復習になりました。
サンプルソースはHTML5で記述されていて<hgroup>が使用されていますが、<hgroup>要素は削除になりましたよー、とこっそりツッコミを入れておきます。

実践編もお役立ち

003第4章の応用編では、サイトパフォーマンス改善のテクニックなども紹介されています。レスポンシブWebデザインだと、いろいろなデバイスで単一のhtmlを表示しようとするので、特にスマートフォンでの表示速度が課題だったりするのですよね。このあたりも、ぼくが知らないテクニックがちょくちょく紹介されていて勉強になりました。

まとめ

ぼくは普段の仕事の案件でも何サイトか経験したことがあったので、「レスポンシブWebデザイン」自体は、ある程度の知識は持っているつもりでした。しかし、なんとなくしか分かっていなくて、用語として知らなかった「ブレイクポイント」という概念などをおぼえたり、本書を読んでみて、理解が深まりました。

「レスポンシブWebデザイン」が唯一の正解かというのはわかりませんが、Web制作を仕事にしている方は、案件として触れる機会も多くなると思います。Webデザイナーやマークアップエンジニアの方はもちろん、むしろ上流のディレクターの方に読んで欲しいかも、とおもいました。「レスポンシブWebデザイン」でサイト制作する、ならば、上流での設計から、分かってる方がやらないとたぶんグダグダになりますから、ね。

入門書としては、読みやすく分かりやすかったのでオススメです。

本書は、次のWeb上の連載が元になっていますので、そちらもあわせてどうぞ。

最後に、「レスポンシブル」Webとまちがえて覚えている人がやたらと多い印象です。みなさん「レスポンシブ」なのでお間違えのなきよう。

その他みつけた本書の書評

RWDの入門書「レスポンシブWebデザイン」(菊池崇氏著) を読んだよ | [M] mbdb

【書評】レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック – これからゆっくり考L

通常書籍版

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

kindle版

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (アスキー書籍)

Special Thanks Chinacky.