ひょんなことから@kazuhitoさんに拙著「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」を献本させていただいたのですが、早くも「覚え書き@kazuhi.to」でコメントをまとめていただきました。せっかくコメントをいただいたので、このブログで回答をまとめてみました。
[追記: 2013/1/15]
ありがたいことに、以下の僕のコメントの一部に対して返信をいただきました。内容は「覚え書き@kazuhi.to」でご覧ください。木達さんのアクセシビリティへの思いに特に共感しました。アクセシビリティは個人的に弱い部分なので、まずは第一歩をどこから進めるべきかじっくり考えたうえで、すばやく行動に移せるように心がけたいです。日々これ勉強！
[追記: おわり]
いただいたコメントへの回答集
以下、グレーの箱に入った部分が「覚え書き@kazuhi.to: レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」からの引用で、その下に僕の回答やコメントを書いています。見出しは、記事を読みやすくするために僕が勝手につけたものです。
「Future Friendly」の和訳について
p.21に出てくるのですが、Future Friendlyを「未来にやさしい」と訳しているのですね。自分が勤務先で紹介したときは確か別の訳しかたをした記憶があります。イメージとして「変化に耐えやすい」とか何とか。
たしかに、意訳としては「変化に耐えやすい」というのがわかりやすくて良いですね。ただ、Future Friendlyという言葉の選択には、未来への思いというか、志みたいなニュアンスもあるのかなと個人的には捉えています。そういった意味で、あえてそのまま直訳で「未来にやさしい」にしてあります。
モバイル・ファーストの考え方について
p.28の本来はどちらがファーストでもないというのは重要な指摘だと思います。モバイルファースト、というのは業界に発想の転換、モバイル寄りへの軸足の移動を促すための宣伝文句/キャッチコピーでしかなく、それを乗り越えた先には結局のところコンテンツファーストなりコンテキストファーストに自ずと気づかざるを得ないという。
これはコラム枠に書いた内容ですが、重要ですよね。ユーザのことを第一に考え、コンテンツやコンテキストを考えたら、自然とモバイルやデスクトップといったものを別け隔てなく考えるようになるんでしょうね。どちらにも「対応」できるレスポンシブWebデザイン（RWD）のような手法が確立して、プログレッシブ・エンハンスメントなどで「最適化」ができるようになり始めたら、なおさらですね。
オシアナスについてw
p.36にamazon.co.jpの画面キャプチャが載っているのですが、その左下に映っているのは僕の欲しい腕時計、CASIOのオシアナスでは？ひょっとして渡辺さんはオシアナスのオーナーでしょうかw
持ってはいないですが、気になってチェックしていたからかもしれません。笑
アクセシビリティとRWDについて
p.40のレスポンシブWebデザインだからといって、アクセシブルなウェブサイトであるとはかぎりませんというのも重要なメッセージ。そこを勘違いしている人は結構いそうな気がしているので。
僕も、ここは勘違いされやすいポイントだと思ったので、あえてセクションを設けました。
アクセシビリティは個人的に弱い分野なので、遅いですが、これから本格的に取り組んでいけたらと考えています。本でも触れましたが、せっかくレスポンシブにするなら、アクセシブルであるべきだと思います。なかなか、そこまで辿り着かないというのが本音というか言い訳なんですが。。。まずはJISやWCAGを勉強してみます。
CSRを考慮している責任ある企業ならばアクセシビリティへの細かい配慮や対応は当然のことと思いつつも、営利的な投資対効果が見えにくい、または見込めないことにはなかなか手が回らないというのも事実なのではと思っています。難しい問題ですが、ビジネス向けのウェブサイトでは費用対効果を重視せざるをえないとすると、アクセシビリティは2の次になってしまっているのが、アクセシビリティ対応ができていない企業ウェブサイトの現状ではないでしょうか？
結果を出せるサイトを制作するだけでも大変で、ただでさえ足りないリソースをどこに費やすかは難しい判断です。アクセシビリティ対策の優先順位があげられるように、上司や意思決定者に納得してもらうための強力な説得材料が必要だろうなぁと考えています。
ただ、スマホやタブレットのおかげで、これからは60代、70代、また、それ以上の年齢の、ネットにあまり慣れていない多くの方々がネットに入ってくると（もしくは入ってきて欲しいと）思っています。つい最近、70歳近い僕の父親もiPhoneとMacデビューを果たしたところです。
そういった方々のことも考えると、「アクセシビリティ」が一層重要になってくると想像しています。文字サイズのような視覚的なもの、目が見えない方への音声ブラウザへの対応、タッチ入力などの入力のしやすさへの対応などなど、それらなしには売れないWebサイトも増えて行くのかなと。また、それらの対応ができていないウェブサイトへの評価が下がるようになるとも想像しています。
レスポンシブ・アーキテクチャと空間の民主主義について
p.47でレスポンシブ・アーキテクチャとRWDの相関を論じているくだりには、違和感がありました。Webはまだまだ利用者の側からのコントロールが不十分という認識が僕のなかには昔からあって、誰もがユーザースタイルシートを（CSSを知らずとも編集できるようなGUIでもって）自在に扱えるような状況でもない限り、空間の民主主義には比肩できないだろうと。RWDも結局のところ制作側からの一種の「お仕着せ」ではありますから。
たしかに、「ユーザが自分の好みにコントロールできる」までには、まだまだ不十分ですし、ちょっとここの表現は大袈裟だったかもしれません。そして、「RWDも結局のところ制作側からの一種の「お仕着せ」」というのは、まさにその通りですね。
ただ、レスポンシブWebデザインのように、より柔軟な考え方をベースとした制作が一般化して、制作者の意識が変化して「ページ」に対する考え方が変わり、ウェブサイトの「デザイン」が進歩すると、少しずつ「ユーザのコントロール」の幅が増えてくると考えています。ウェブサイト（もしくは情報発信源）は、ユーザが情報を好きなときに好きなカタチで読めるような柔軟なものに、ゆっくりですが、なっているような気がします。
alt属性の記述ミスについて
p.53でalt属性に画像の説明を入れるのが制作の基本とありますが、ちょっと誤解を生むかもしれません。入れるべきは、あくまでも代替テキストだと思うので。
たしかに誤解を生む表現ですね。画像が表示されない場合の代替テキストのほうが誤解を生みませんね。
メディアクエリに未対応のブラウザ対応について
p.61を皮切りに、www.tuj.ac.jpではRespond.jsを採用したことが何度か語られるのですが、その理由が明記されていません。個人的にはそこに興味があります。
2つ理由があります。
www.tuj.ac.jpをレスポンシブWebデザインで制作した当時、せっかくレスポンシブWebデザインにするのであれば、たとえば800 x 600pxの端末でIEを使ってサイトにアクセスするユーザにも対応できたらという欲が出てしまったというのが一つの理由です。
もう一つの理由は、IE向けに別対応をするよりも、他のブラウザと同じように対応したほうが、考え方や運営上もしかしたらシンプルかつスムーズに進められるのでは？と考えたからです。
リニューアルしてから1年以上経ちますが、結論としてはメディアクエリに対応していないブラウザに対して、あえてレスポンシブ対応する必要はないと考えています。本書のサンプルでは、Respond.jsを使わずに、IEでは固定幅でレイアウトを実装しています。ターゲットとなるユーザの特性とアクセス解析データを見ての判断になりますが、よほど特別な理由がない限り、そのような対応が良いと考えています。
アクセシビリティはデザイナーが学ぶべき知識の1つ
p.87にデザイナーが学ぶべき技術的な知識が挙げられているのですが、自分ならアクセシビリティを加えますね。
たしかに必須の知識にするべきかもしれません。高齢化が進む日本では特に、これからアクセシビリティの重要性が増しますよね（数の問題ではないというのは重々承知なんですが。。。）。
ちなみに、アクセシビリティへのこだわりは、ウェブはどんな人でも、どんな端末からでも平等にアクセスできるべきというW3Cの理念に基づいたものでしょうか？他にも理由はあるのでしょうか？木達さんのアクセシビリティへのこだわりや思いにすごく興味があります。
「フロー」の意味について
p.116で「ナビゲーション・フロー」「レイアウト・フロー」「コミュニケーション・フロー」といった言葉が出てきます。言わんとしていることは何となくわかりますが、できれば「フロー」の意図を書き下していただきたかったです。
ページの連なりであるウェブサイトでは、ユーザがウェブサイトで情報を得る、または体験する際の情報の流れ（フロー）がとても重要だと考えています。ユーザがナビゲーションをどのように使って情報を発見し、レイアウトやビジュアルからヒントをつかみ、紐解き、理解し、情報発信側が意図したコミュニケーションを成立させることができるのかといった一連の「流れ」と意図したつもりです。それら一連の流れを、いかにユーザにわかりやすく、スムーズに体験してもらえるかがウェブサイトの良し悪しを決めると考えています。そして、その流れ（フロー）を、ナビゲーション、レイアウト、コミュニケーション（発信側の伝えたいことが、受信側に正確に伝わること）の、それぞれの観点から作り上げて行くための「フロー」というイメージなんですが、まだまだ抽象的でしょうか。
情報の伝達には、伝わりやすい順番や言葉、見た目のデザインや設計があって、情報がユーザの脳に無理なく入っていけるように、良い情報の流れを作る必要があるとの考えです。
コンバージョン率について
p.174のデスクトップのみに対応したウェブサイトにモバイル端末からアクセスした際のコンバージョン率は、デスクトップからのアクセスのコンバージョン率の1/2〜1/10程度という推測の根拠を知りたいです。
レスポンシブWebデザインでリニューアルしたセクションのアクセス解析数値をリニューアルの前後で比較したものを基に、だいたいその位の数値に落ち着くのではないかという予測を立てました。数値はレスポンシブWebデザインという手法自体の成熟度と制作者の熟練度、また、モバイル対応の経験値などに大きく左右されると思います。そのため予測の幅もかなり大きくなっています。本来であれば、具体的な数値が出せれば良いのですが、まだそこまでは至っていないです。上述したサイトの前後比較も同時期のA/Bテストではないので、正確な比較とは言えませんし。
「表示領域」「閲覧可能領域」の表記について
p.190の「表示領域」「閲覧可能領域」というのは、日本語的に違いがわかりにくい印象があります。かといって、良い代案はないのですが……。
たしかに、ご指摘の通り、違いがわかりずらいですよね。しかし、僕も分かりやすい単語が思いつきません。。。汗
「0.5÷1140px」について
p.218の「0.5÷1140px」という記述は微妙に誤記のような気が。
「0.5px÷1140px」と書いたほうが分かりやすいですかね。
IE6、7の小数点以下のピクセル値の扱いを調整するための値なので、これであっているはずです。よろしければ、こちらの記事をご参照ください。
CSSスプライトのアイコンに使用した<i>タグについて
p.249でセマンティックなHTML記述ではないですがとお断りを入れていますけども、であれば内容のないi要素など使わず、:before/:after擬似要素を使ったほうが良かったのでは。p.252にIE6でも問題なく表示されますとあるので、ブラウザサポートが理由なのかなと察しましたが、となると本書全体のトーンなり方向性とやや整合しない印象を受けます。
はい。これはIEでも無理なく対応できるようにとの考えからです。JavaScriptなどで対応させることもできると思いますが、それはそれで他の問題を生みそうなので、セマンティックを犠牲にしてしまいました。個人的にも違和感が残る部分ですが、IE対応の複雑さを考えると、ここは仕方がないと自分を納得させています。
プログレッシブ・エンハンスメントとRWDについて
あとがきで「Progressive Enhancement」というレスポンシブWebデザインに取り入れられるべき考え方も議論が進んでますとありますが、自分はRWDそのものがプログレッシブ・エンハンスメントに則った手法、テクニックであると認識しています。
たしかに、ただのモバイル対応ではなく、これから進化するRWDで各デバイスでのユーザ体験にウェブサイトを「最適化」しようとする場合、「プログレッシブ・エンハンスメント」は欠かせないと思います。しかし、RWDは必ずプログレッシブ・エンハンスメントでなければならないという「答え」には、自分の中ではまだ到達していません。いまのところ、RWDではすべての端末で総合的には同じユーザ体験を提供できるようにするという考え方が一番しっくり来ているので、プログレッシブ・エンハンスメントを「ブラウザの機能にあわせてサイトの機能を補強（強化？）する」と捉えた場合、端末によって機能に差が出てしまうというのに少しだけ違和感が残ります。
デスクトップPCでは使えたのに、スマホではその機能がないとか、逆にスマホでは使えたのにデスクトップPCでは使えないといったふうに、ユーザをがっかりさせるのが嫌だなと。柔軟に考えればいいとも思うんですが。。。こればっかりは、もう少し経験を積んで、ユーザの行動を検証してからでないと答えは出せないかなと思ってます。
まとめ
いただいたコメントに回答をすることで、再度自著の内容について考えを深める良い機会になりました。まだまだ掘り下げて知識を深めるべきことが沢山で、いまの時代のウェブは本当に面白いなぁと再び実感しています。こちらから一方的に献本させていただいたのに、読むだけでなくコメントまでまとめていただいた木達さんに、改めて感謝します。こういった意見交換をさせていただけるのは本当に光栄ですし、楽しくもあり、感謝感激としか言いようがありません。ありがとうございました。
2013年1月9日に公開され、2013年1月15日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。