「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。
そう考えると、なんでもかんでも安易にRWDで良いかというと、そうでもないように思います。長期的な視野で考えるとRWDのような手法が良いと考えていますが、だからといって現段階でそれが唯一の方法だとは考えていません。ゼロか百かの選択肢だけじゃなく、必要な場合は、ちょっとレスポンシブという臨機応変な対応もありですし、プロジェクトによっては個別スマホサイトを作ったほうが良いケースもあるかもしれません。
では、ウェブサイトの制作手法を選ぶにあたって、なにを考えておけば良いのでしょうか？
例によって長文ですが、レスポンシブWebデザインで実際にウェブサイトを作り、運営して、本まで書いて考えてきたことを、トピックを絞ってもう一度整理してみます。
目次
- 「そもそも論」が必要な時期になっている？
- なぜ、いまレスポンシブWebデザインなのか？
- 「モバイル」だからこその「コンテキスト」
- 情報の出し分けではなく、強弱を調整する
- 手法選択に影響をおよぼすビジネス要因
- プロジェクトの目的
- 発注側の企業文化
「そもそも論」が必要な時期になっている？
「そもそも論」は自著「レスポンシブWebデザイン – 制作の実践的ワークフローとテクニック」で十分書いたつもりだったので、このブログで書く必要はないと思っていました。しかし、先日参加させていただいたCSUN参加報告会セミナーの後に木達さんとお話ししたことをきっかけに、「そもそも論」的な話の必要性をもう一度考えさせられました。そして、自分の考えを共有して、それをベースに意見交換ができたらという考えに至りました。
これからレスポンシブWebデザインで（主に受注をして）制作を始めようという方や企業、もしくは、これからレスポンシブWebデザインで制作を発注しようと考えている方や企業が、ウェブサイトが出来上がってきてから「こんなはずじゃなかった（涙）」というアンハッピーなことにならないように、プロジェクトのキックオフの段階までに考えておくべきことを自分なりに整理してみます。
なぜ、いまレスポンシブWebデザインなのか？
制作手法の選択について考える前に、なぜ、いまRWDのような手法が必要とされているのか理解しておくことが大切です。ここをしっかり理解しておかないと、誤解やズレが生じやすくなり、後々の工程で「聞いてなかった」とか「こんなはずじゃなかった…」という不幸な状況に陥る原因になると思います。
では、なぜ、いまRWDのような手法が必要とされているのか？
RWDという手法が広まっている背景には、技術の進化によってもたらされたユーザのネット閲覧環境の変化があり、それらの変化に伴いウェブサイトにも進化が求められるようになったことがあります。
1. モバイル対応
ユーザは圧倒的なスピードでモバイル（特にスマホ）にネット閲覧の場を移しています。ウェブサイトも、モバイルに対応せずには生き残れない時代がすぐそこまで来ています。既存のデスクトップ向けに作られた固定幅のウェブサイトでも、モバイルからの閲覧が1/3を超えている、もしくは半分に達しているというサイトも多くなっているのではないでしょうか？ユーザは、スマホで普通にウェブサイトを見るようになっています。
ただ、デスクトップ向けに作られたウェブサイトでは、若干使い勝手が悪かったり、サイトによってはダウンロードに時間がかかるなどの課題があります。決してユーザにとって使いやすいものとは言えないでしょう。先日の高解像度対応の話もそうですが、モバイル対応も「今でしょ！」の状態になっています。
2. マルチデバイス対応
2010年のiPadの登場からしばらく経ち、現在ではAndroidタブレットもよい端末が充実してきています。ユーザは、デスクトップPCやスマホだけでなく、タブレットなどの端末も使ってウェブにアクセスするようになっています。しかも、一人のユーザが同じウェブサイトに複数の端末からアクセスすることも、これからは多くなるでしょう。その際に、デスクトップPCで見た情報や機能がスマホやタブレットでは見つけられない（逆もしかり）なんてことが起こらないような対応が必要です。
3. 未知の端末への対応
最近登場するネット閲覧端末の画面サイズは様々です。また、画面サイズだけでなく、Firefox OSやTizenなどの登場によりモバイルOSの多様化も始まろうとしています。また、以前からテレビやカーナビなどの端末にもブラウザは搭載されていますが、スマートTVやAndroid搭載のカーナビの登場によって、それら端末でのネット閲覧環境が大幅に改善される可能性があり、それに伴ってユーザの利用も増加する可能性があります。
そういった端末が続々と登場する昨今、丹精込めて作ったウェブサイトが数年も経たないうちに閲覧に適さない状態になってしまう可能性が高くなっています。そう考えると、長期的な運用が必要なプロジェクトでは特に、まだ見ぬ端末にも対応ができている可能性が高い手法、または臨機応変に対応しやすい手法が求められます。
ユーザの要望に応えるために
このような状況を考えると、デスクトップでの閲覧しか考えない制作手法ではユーザの要望に応えることが難しくなってきています。「ユーザの要望に答えられない = ビジネスの目的が達成できない」と考えると、早急になんらかの対応をしないとビジネス自体の生き残りにも影響を与える可能性があります。
ユーザの要望に応えて、ビジネスとして生き残るためには、なんらかの対策を講じる必要があるわけです。
「モバイル」だからこその「コンテキスト」
上述した3つの対応に加えて、モバイルでのネット閲覧が普及したからこそ求められるようになったことが、もう一つあります。それは、モバイルという特殊な環境だからこその「コンテキスト（文脈や背景）」への配慮です。たとえば、「モバイル端末で外出先でウェブサイトを閲覧している」という状況や「急な出張先の駅前で今晩泊まるホテルを探したい」というウェブサイトを閲覧する際に存在する文脈や背景は、家の書斎やオフィスのデスクでという固定された場所で行われていたネット閲覧ではあまり考慮する必要がありませんでした。
しかし、「モバイル端末」という、いつでも、どこでもネットを閲覧できる端末では、ウェブサイトの使われ方が違うシチュエーションも出てきます。ウェブサイトを提供する側はそういったネット閲覧環境の変化をふまえ、「誰が」「なぜ」「どのように」だけでなく「いつ」「どこで」「どのようなシチュエーションで」といったことをより強く意識して制作を進める必要があります。
ただ、モバイルだからといってコンテキストを深読みしすぎるのも危険です。
コンテキストを配慮しすぎる危険性
たとえば、ユーザが外出先でレストラン情報を見ている場合、以下のような文脈の可能性が考えられます：
- 食べに行く店を探して予約したい → 電話をかけたい
- 今から行く店を探している → 地図を見たい
しかし、こういった「文脈」を意識し過ぎるのも危険です。それは、ユーザがスマホなどのモバイル端末を使っているからといって、外でウェブサイトを閲覧しているとは限らないからです。
自宅でもデスクトップPCを立ちあげたりノートPCを開くのは面倒なので、ちょっとした検索やネット閲覧はスマホやタブレットで行うことが多くなっているのではないでしょうか？ソファで寝そべりながらスマホやタブレットでネット閲覧をするのは、いまではTVを見るよりも頻繁に行われていることかもしれません。そう考えると、レストランの例でも、モバイル端末からアクセスしているからと言って、必ずしも予約を取りたいとか地図を見たいというのがユーザの第一の目的であるとはかぎらないわけです。
Googleが行った調査でも、ユーザはスマホをあらゆる場所で使うことがわかっています。自分の行動を思い返してみても、ほとんどの方が調査結果にうなずけるのではないでしょうか？
情報の出し分けではなく、強弱を調整する
まずはユーザを知る努力から
先日イギリスで開催された「Responsive Dayout」のAudio版でも言及されていたのですが、ユーザのことはユーザにしかわからないというのは、長年ウェブサイトの運営に携わっていて常々実感することです。
だからといって制作者として何もできないわけではなくて、ユーザ調査やアクセス解析などから得られる情報をベースにユーザを知るための努力が行えます。そこから仮説を立て、培ってきた情報設計・UIの知識などを最大限に活かして制作をする。そして、完成したサイトをユーザテストやアクセス解析で検証して、再びユーザを知るための努力を行い、改善を繰り返していく。そういったPDCAサイクルを確立することが重要です。ウェブ制作とは「ユーザを知る」ための努力を続けることなんですよね。
バランスの良いコンテキストへの配慮
では、コンテキストをどのように考慮して、ユーザにモバイル端末での閲覧体験を提供するべきなのでしょうか？
まず第一に上述したPDCAをしっかりまわしてユーザのことを知ることが大切です。そして、そこで知り得た情報をもとに、端末によって情報の強弱を調整して表示するのが良いと考えています。たとえば、一人のユーザが複数の端末を使って同じウェブサイトに訪れることを考えると、どの端末で閲覧しても同じ情報に辿り着けるべきです。個人的にも「家で見たときはここにあったのに…」スマホで見たらなかったというストレスの多い体験を多くしています。
そんな体験をユーザにさせないためにも、端末ごとに情報の出し分けをするのではなく、あくまで情報の強弱を変えることに留める。そして、どの端末から閲覧しても、ユーザが同じ情報にアクセスできるようにしつつ、レイアウトやデザインの工夫で情報の強弱を調整する。ユーザがマルチデバイスでネットを閲覧する今、それがベストな方法だと考えています。
たとえば、前述したレストランの例で、スマホでの閲覧時は地図と電話番号のニーズが高いと判断した場合、スマホでの閲覧時は地図と電話番号を強調したデザインにしてみてはどうでしょうか？
アクセシビリティへの配慮
木達さんが「レスポンシブWebデザインとアクセシビリティ — 覚え書き@kazuhi.to」という記事で紹介されているのですが、アクセシビリティへの配慮も重要です。
Webは、さまざまな人々がさまざまなアクセス手段でもって利用するものであり、それがWebの利点でもあります。なかには、視覚系ブラウザで閲覧しながら、同時にスクリーンリーダーのような音声読み上げ環境を使う、つまり視覚と聴覚の両方でもってWebを利用する人もいます（弱視の方など）。その種のユーザーにとって、Webページの読み上げ順序（＝HTMLのソースオーダー）と見た目上のレイアウト（位置関係、近接度合い）が過度に乖離してしまうと、理解の妨げになりかねません。
こういったスクリーンリーダーでの読み上げ順序などを配慮しつつ、強弱をつけた絶妙なバランスを持つデザインをするのが理想だと考えています。ただの装飾ではなく、こういったデザインこそが、デザイナーの真の腕の見せ所だと思います。
手法選択に影響をおよぼすビジネス要因
ビジネスに用いるウェブサイトでは、まず目的があって、それを達成するための手法があります。そして、数ある手法の中から最適なものを選んで、うまく活用できるように戦術や戦略を考えるわけなんですが、「あるべき姿」ばかりを追って仕事をしようとすると無理が生じる可能性も大いにあります。
では、レスポンシブWebデザインという手法を選ぶにあたり、どのようなビジネス要因を考えておけばよいのでしょうか？僕は、以下の2つが重要だと考えています。
プロジェクトの目的
ビジネス・プロジェクトでは、ウェブというツールを活用してなんらかのビジネスの目的を達成するためにウェブサイトを作るわけですから、その目的が達成できなければ意味がありません。では、プロジェクトの目的を達成するために、すべてのプロジェクトでレスポンシブWebデザインという選択肢が良いかと言うと、決してそうではないでしょう。極論を言ってしまうと、そもそも、ウェブというツールがプロジェクトの目的達成に適していない場合もあるわけです。
たとえば、アクセス解析でモバイルからのアクセスが数%しかないのに、直近でレスポンシブWebデザインにする意味はあまりないと言って良いでしょう。もちろん、リニューアルを頻繁に行えないウェブサイトでは、数年後を見越してなんらかのモバイル対応も視野に入れておく必要はあります。
また、ただ単に「モバイル対応」だけでなく、コアとなるビジネスの目的や直近のプロジェクトの目的を考えて、短、中、長期的な視点から、どのような手法が最適なのか考える必要があるでしょう。流行っているからではなくて、目的を達成するための最適な手法はなんなのかという観点から選ぶべきです。
発注側の企業文化
ウェブ制作では特に発注する側の企業文化がプロジェクトの進行に与える影響は大きいように思います。ここではあまり深堀りしませんが、それはウェブサイトが企業活動に密接に関係するもので、企業と顧客のコミュニケーションの中心となるものだからだと思います。だからこそ、企業の体質や考え方などの「企業文化」がウェブ・プロジェクトには大きく影響を与えます。
では、レスポンシブWebデザインのような手法でウェブ制作をする場合、発注側にはどのような準備が必要なのでしょうか？ここではいくつかに絞って整理してみます。
どれもレスポンシブWebデザインだからというよりも、そもそも組織としてそういう働き方ができないのはまずいんじゃないの？ということばかりですが、レスポンシブWebデザインという手法で制作をするからこそ、浮き彫りになるものも多いと感じています。ただ、一つだけ特筆しておきたいのは、今準備ができていないからといって諦めるべきだといっているのではなくて、プロジェクトを進めるうえで、どんな工夫ができるか、どんな変化が必要になるかしっかり考えておく必要があると感じています。
余談になってしまいますが、どうすれば目的を達成できるか頭を捻らせて工夫する。そんな楽しさが、レスポンシブWebデザインのキモでもあると思っています。そして、それは、変革期を迎える日本の企業が必要としている変化なのだと思います。
担当者の力量とウェブに関する知識
プロジェクトの結果は担当者の力量に比例すると思います。そのため、担当者のウェブに関する知識やレスポンシブWebデザインについての知識、また、根本的なやる気やコミュニケーション能力、社内での調整力なども、手法の選択に大きく影響を与える要因です。そして、担当者に適した手法を選ぶのも、制作側の責任であり、プロジェクトを成功に導く秘訣です。
組織の風通し
プロジェクトの成功には担当者の力量も大切ですが、企業組織のなかで一個人ができることは限られています。どんなにすばらしい担当者でも、担当者とその上司、上司とトップ役員などの間で風通しがよくない企業文化がある場合、細かい調整が多く必要になるレスポンシブWebデザインのような手法は向いていないかもしれません。反対に組織全体の風通しがよく、コミュニケーションが上手に取れている、また、それゆえにマイクロマネージメントが必要のない組織のほうが、レスポンシブWebデザインは向いていると思います。
対等な働き方ができる関係
「発注者 > 制作者」という上下関係ではなく、平等に分け隔てなくコミュニケーションのできる組織でないと、レスポンシブWebデザインでの制作は難しいと感じています。なぜなら、RWDでは単純に制作の量が増えるだけでなく、細かい調整や臨機応変な対応が多く必要になるからです。発注側と制作側が平等な立場で意見交換のできる仕事の仕方でないと、臨機応変な対応をするのが難しいだけでなく、細かい調整が必要な際に、制作側からの説明が増えてしまったり、多くの文書を用意して承認を行うなど、成果物以外に費やす時間が増えてしまいます。発注側も制作側も一つのチームとして、建設的な議論を交わしながらプロジェクトを進められる環境が理想です。そして、そのための努力と調整力が、いま最も求められているスキルなのではないでしょうか？
その他の要因
制作側（受注側）の体制
発注側だけでなく、受注する制作側でも準備が必要です。特に分業化が進んでいる中〜大規模な制作会社では、仕事のやり方を変えていく必要があるかもしれません。僕が言わなくても変えているとは思いますが。。。自著でも書きましたが、チームメンバーがそれぞれの領域のことしかやらないのではなく、領域を超えて一緒に制作が行える垂直統合型のスキルを持ち合わせたチーム作りが必要になってくると思います。垂直統合型スキルを持ち合わせたチームについてはこちらの記事がとても参考になりました。
ウェブ制作に対する考え方を変える
これは、サイト・オーナーも制作側も同様に言えることなのですが、レスポンシブWebデザインという手法で制作を行う場合、ウェブ制作に対する考え方を変えたほうが、プロジェクトをスムーズに進めることが出来ると思います。これについては、「レスポンシブWebの時代だからこそ見直すべき、3つの「ウェブの哲学」」という記事を書いているので、ぜひそちらをご覧ください。
そのほかにも、以下のような要因で手法の選択は変わってくると思いますが、だいぶ長くなってきたので、今回はこの辺で終わりにしたいと思います。次回があれば、以下のようなことについても触れてみたいと思います。
- 既存サイトの構成や規模
- 既存CMS
- スマホサイトやガラケーサイトの存在
- 現在の運営体制
- 予算と納期
などなど。。。
まとめ
ウェブ・プロジェクトには本当にさままな要因があって、目的を達成するために、解決するべき課題がたくさんあります。ウェブに直接関わらない社内調整なんかも、一つの大切な要因です。そのため、「未来はレスポンシブWebデザインにある！」と息巻いてみても、空回りさせてしまえば不幸なプロジェクトになる可能性が高くなります。理想と現実をしっかり見極めて、どこまで理想をプッシュできるのか総合的に判断しつつ、最適なソリューションを選ぶべきです。
たとえば、クライアント側がレスポンシブWebデザインでの制作のための準備ができていなくても、基盤はレスポンシブな作り方にした固定幅サイトを作るのもありだと思います。フレキシブル・グリッドで作っておけば、後々レスポンシブ対応する際にもベースとなるグリッドシステムは活用できます。今できないから変わらないのではなくて、水面下でも着々と準備を進めていくべきだと思います。
臨機応変に、楽しく行きましょう！
2013年4月16日に公開され、2013年4月18日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。