レスポンシブWebデザイン 制作の実践的ワークフローとテクニック

2013年1月6日 著

ひょんなことから、著者の渡辺竜さん（@rriver）より『レスポンシブWebデザイン 制作の実践的ワークフローとテクニック』をいただきました、ありがとうございます。基本編、準備編、実践編の3部構成で、実際に手を動かしページを作るところまでカバーしながらも、どちらかといえばレスポンシブWebデザイン（以下「RWD」）の考え方や発想に比重が置かれており、これから学び始める人向けには良書だと思いました。何かと動きの速い分野だけに、時間の経過に伴う影響を受けにくい内容・構成というのは紙媒体の書籍として正解だと思いますし、勤務先でもデザイナー・ディレクターの別を問わず当面の教科書として使えそうです。以下、個別に気になったところなど：

• 一つの手法（p.11）、選択肢の一つ（p.18）のようにRWDを捉えているのは、個人的に安心感、信頼感を覚えます。
• p.21に出てくるのですが、Future Friendlyを「未来にやさしい」と訳しているのですね。自分が勤務先で紹介したときは確か別の訳しかたをした記憶があります。イメージとして「変化に耐えやすい」とか何とか。
• p.28の本来はどちらがファーストでもないというのは重要な指摘だと思います。モバイルファースト、というのは業界に発想の転換、モバイル寄りへの軸足の移動を促すための宣伝文句/キャッチコピーでしかなく、それを乗り越えた先には結局のところコンテンツファーストなりコンテキストファーストに自ずと気づかざるを得ないという。
• p.36にamazon.co.jpの画面キャプチャが載っているのですが、その左下に映っているのは僕の欲しい腕時計、CASIOのオシアナスでは？ひょっとして渡辺さんはオシアナスのオーナーでしょうかw
• p.40のレスポンシブWebデザインだからといって、アクセシブルなウェブサイトであるとはかぎりませんというのも重要なメッセージ。そこを勘違いしている人は結構いそうな気がしているので。
• p.41に登場する、「Create Once, Publish Everywhere」の頭字語「COPE」、初耳のような。
• p.47でレスポンシブ・アーキテクチャとRWDの相関を論じているくだりには、違和感がありました。Webはまだまだ利用者の側からのコントロールが不十分という認識が僕のなかには昔からあって、誰もがユーザースタイルシートを（CSSを知らずとも編集できるようなGUIでもって）自在に扱えるような状況でもない限り、空間の民主主義には比肩できないだろうと。RWDも結局のところ制作側からの一種の「お仕着せ」ではありますから。
• p.53でalt属性に画像の説明を入れるのが制作の基本とありますが、ちょっと誤解を生むかもしれません。入れるべきは、あくまでも代替テキストだと思うので。
• p.61を皮切りに、www.tuj.ac.jpではRespond.jsを採用したことが何度か語られるのですが、その理由が明記されていません。個人的にはそこに興味があります。
• p.87にデザイナーが学ぶべき技術的な知識が挙げられているのですが、自分ならアクセシビリティを加えますね。
• p.97の顧客の思い描く「コントロール」と制作者の思い描く「コントロール」を制御していくのは大変というくだりに深くうなずきました（苦笑
• p.116で「ナビゲーション・フロー」「レイアウト・フロー」「コミュニケーション・フロー」といった言葉が出てきます。言わんとしていることは何となくわかりますが、できれば「フロー」の意図を書き下していただきたかったです。
• p.124〜127のあたり、「モバイル・ファースト」でメディアクエリを記述した場合、それに対応していないブラウザにはモバイル向けの表示がなされる点は強調したほうが良いと思いました。p.186で説明されてはいますけど。
• p.162のテスト環境についての記述で任意のバージョンのChrome、Firefoxとありますが、いずれも自動更新でバージョンアップ「してしまう」ブラウザですから、任意というより「最新の」としたほうが自然かなと。p.165には基本的には最新版でのテストで良いと書かれてますし。
• 古いSafariの入手先としてp.166で紹介されているOldApps.comは初耳でした。自分はMulti-Safariを使っていました。
• p.169でFirefoxのレスポンシブデザインビューに言及されていますが、見出しにバージョン番号の「15」は不要でしょうね。15から追加、は事実ですが、15に特化した機能ではないですから。
• p.174のデスクトップのみに対応したウェブサイトにモバイル端末からアクセスした際のコンバージョン率は、デスクトップからのアクセスのコンバージョン率の1/2〜1/10程度という推測の根拠を知りたいです。
• p.190の「表示領域」「閲覧可能領域」というのは、日本語的に違いがわかりにくい印象があります。かといって、良い代案はないのですが......。
• p.218の「0.5÷1140px」という記述は微妙に誤記のような気が。
• p.249でセマンティックなHTML記述ではないですがとお断りを入れていますけども、であれば内容のないi要素など使わず、:before/:after擬似要素を使ったほうが良かったのでは。p.252にIE6でも問題なく表示されますとあるので、ブラウザサポートが理由なのかなと察しましたが、となると本書全体のトーンなり方向性とやや整合しない印象を受けます。
• あとがきで「Progressive Enhancement」というレスポンシブWebデザインに取り入れられるべき考え方も議論が進んでますとありますが、自分はRWDそのものがプログレッシブ・エンハンスメントに則った手法、テクニックであると認識しています。

[2013-01-10 追記] 著者の渡辺さんより、上記の内容につき返信いただきました。もし興味があれば、Rriver » レスポンシブWebデザイン談義【返信記事】もあわせてご覧ください。