レスポンシブWebデザイン入門

2014年5月29日 著

400円という値段からして、おそらく文字量はさして多くないだろうと思い読み始めてみたところ、実際30分とかからずに読み終えてしまったのが『レスポンシブWebデザイン入門〜モバイルファーストの考え方からのアプローチ』。「はじめに」のなかで著者の前川氏は

一口にRWDと言っても、さまざまな形態があります。とくに話題になりやすいものは、デバイスごとに大きくレイアウトやデザインが変わるようなものです。RWDと聞いたときに思い浮かべるのはそういったサイトであることが多いと思います。しかしながら、そのようなサイトを制作するには、コンテンツの抽出、情報設計、デザイン、実装においてさまざまな知識やテクニック、経験が求められることが多く、本書のテーマである「入門」という点から見てあまり適した事例にはなりません。

と語っています。確かに本書は入門書なのですけど、上記の点については僕は真逆の？仮説をもっています。つまり初学者、RWDの実務経験が浅い人ほど、スクリーンサイズごとに分断してデザインを考え、「無理矢理」メディアクエリーを使ってワンソースマルチユースを実現する。その結果、表示パフォーマンスを犠牲にしたり、あるいは冗長な（同じ意味内容のマークアップが複数回、同じページ中に現れたりする）マークアップをしがちではないか？　というね。自分はレスポンシブWebデザインは「分けて考えない」でうまくいくと確信しているので、そういう気づきを得る内容こそがRWDの初学者には必要なんじゃないかなぁと思ったり。リセットとかノーマライズの説明とか、設計/実装上は必要な知識だけれど、RWDとあまり関係ないですし。ともあれ、

自分たちの「あたりまえ」を基準にしていると、実際のユーザとの感覚が乖離してしまう危険性があり、そうならないよう、つねに意識して注意すべきでしょう。

という指摘はまったくもって仰る通りで、RWDに限らず、常に留意したいところであります。ほか、気になったところを覚え書きしておくと、

• 表紙のデザイン趣意がよくわかりませんでした。01〜05の数字は何を意図されているのでしょう？
• 元々viewport自体がsafariの独自実装だったことや、各OSの挙動の差異などが原因でwidthとinitial-scaleを両方記述することを推奨というのは、逆に両方を記述しなかったときに何がどれだけ不都合が生じるのか、知りたいです。
• 「2.7 グリッドの構築」に出てくる、写真表示のボックスひとつひとつがsection要素でマークアップ（<section class="photo column third">）されていたのに違和感が。見出しもないみたいだし、そこはul/li要素を使うなぁ、自分なら。
• その「2.7 グリッドの構築」の末尾で一カ所、句読点の誤記を発見（今回は。Nicolas Gallagher氏によるclearfixを利用しました。）。
• 若干画像とキャプションの位置関係に齟齬があったり、本文が重複している箇所が見受けられたのは残念。これは僕の使っている端末（Nexus 7）固有の事象なのかそうでないのか、は未確認。