先日、「レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと」という投稿をした際に、その内容に関するTwitterでのやり取りの中で@shokutoさんから以下のコメントをいただきました：
@rriver そうですね、なぜレスポンシブデザインという手法を採用したのか、がもう少し説明されていると良かったなと思いました。新しいから、だけではないと思いますし、設計思想的なものって評価として重要な要素ですので。
— sunami hokuto (@shokuto) May 2, 2012
たしかに、「なぜレスポンシブWebデザインを採用したのか」は、すごく重要な部分ですよね。
ということで、以下にまとめてみました。前回の投稿と同様に、これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。
僕が携わった大学ウェブサイトのリニューアル・プロジェクトで、レスポンシブWebデザインを選ぶ際に考慮したのは主に以下の4点です。
- 運営体制・制作環境
- 複数サイトを運営することの問題点
- CMSの可能性と課題
- アクセス端末ごとにコンテンツが違うことの問題点
1. 運営体制・制作環境
レスポンシブWebデザインで制作をする際に必要な条件を、僕は以下のように考えています：
a. フレキシブルな制作体制
デザイナー、コーディング、コンテンツ制作担当が各役割の境界を超えて作業ができ、それぞれの担当が、レスポンシブWebデザインやその根底となる考え方などに精通している必要があります。また、そのためのプロセスを柔軟に調整しながら制作を進められるチーム環境が必要だと思います。
b. プロトタイプで検証できる
制作までの準備に時間を使いすぎず、早い段階でプロトタイプを作ってしまう。そして、そのプロトタイプを検証、修正、改善してファイナルプロダクトまで作り上げるという方法でないと、レイアウト、デザイン、コンテンツが流動的なレスポンシブWebデザインという手法での制作は難しいと思います。ある程度ワイヤーフレームなどで検証してもいいかもしれませんが、それを作ってる時間をプロトタイプを作る時間に当てた方が時間の有効的な使い方だと思います。
c. 細かい部分は任せてもらえる
詳細に関しては制作側に決定権があり、たとえばデスクトップでの表示には承認プロセスを経るとしても、他の端末での表示などは基本的な見え方やユーザビリティ以外については、すべて任せてもらう。任せてもらえるという意思決定者（コンテンツオーナー）との信頼関係、また、意思決定を任せてもらうための事前承認はすごく大切だと思います。
今回のリニューアル・プロジェクトは、 コンテンツ制作、デザイン、コーディングなど、制作全般をほぼすべて内製でできる環境で、少人数のチームで制作ができ、意思決定に関してもスピーディに行える環境で行えました。また、制作フローも以前からスパイラル型に近い方法で行うようになっていたため「プロトタイプ作成 → 検証」を繰り返し行い承認を得るというフローにも慣れていました。また、CMS導入も視野に入れコンテンツをモジュール化したページ制作をすでに行っていたため、ある程度、基盤となるものは揃っていました。
2. 複数サイトを運営することの問題点
現在、いわゆるデスクトップ向けウェブサイトとは別に携帯（ガラケー）向けのウェブサイトを運営しているのですが、2つ運営するサイトがあると単純に更新作業が2倍になるだけでなく、チェック作業も2倍、アクセス解析も2倍といったように、すべてが2倍になります。同じコンテンツを掲載していたとしても、デスクトップ向けのサイトを更新した際に、携帯版のものも更新しなければなりません。更新作業のリソースが分断されるため、クオリティをキープするのが難しくなるだけでなく、単純な更新忘れや更新のタイミングが遅れてしまうなど、運営が煩雑になりがちです。
さらに、僕が運営に携わっている大学ウェブサイトのようにバイリンガルでコンテンツを展開している場合、その作業がさらにその2倍になります。今後、スマホやタブレット端末のみでなく、まだ未知の端末向けにサイトを運営すること、また中国語や韓国語などの他言語展開を考慮すると、それらを複数の別サイトで制作し運営するのは限りなく非現実的です。ワンソースで複数の端末の表示に耐えうるサイトが作れる「レスポンシブWebデザイン」という手法は、リスクを負う価値のある魅力的なものでした。
3. CMSの可能性と課題
CMSには導入のメリットもあると思います。たとえば、
- コンテンツ制作を社内でクラウド化できる
- 更新に関する技術的ハードルが低い
- RSSやソーシャルメディアへの発信が自動化できる
- 震災などの緊急時でも更新できる運営体制を築ける
など。
しかし、CMSの導入や運営は安易に実行できるものではないと思います。ざっと思いつくだけでも、多くの課題や乗り越えるべきハードルがあります。
- 導入初期コストへの投資
- CMS運営コストへの投資
- 設計・構築などの負担
- ページの入れ込み作業などの負担
- マニュアルづくり
- 社内ワークフローの確立と社内教育
- 社内テクニカルサポート
など。
これらの詳細は割愛しますが、上記に一覧したものを見るだけでも、CMSの導入には担当者の相当な覚悟、根気、精神力、実働時間もさながら、かなりの導入期間が必要とされます。そのうえ、費用対効果が得られるのか、また、初期投資を超えるリターンが出るまでどの程度期間が必要かを考えると、よほど大きなメリットがないと導入に踏み切るのは難しいと思います。
さらに、更新の手間はCMSではない方法で運営するのとさほど変わらないのでは?という懸念もあります。複数のデザイン・テンプレートに対応していて、モジュール化されたコンテンツの出し入れがページ単位でコントロールできる高機能なCMSでも、管理や運営はそう簡単にはいかないことが容易に想像できます。
4. アクセス端末ごとにコンテンツが違うことの問題点
まず第一に、ユーザ目線からの問題点から。
現在、僕はiPhone、iPad、MacBook Airを持っていて、それぞれを用途やシチュエーション、気分などによって使い分けています。たとえばeBookはiPadで、ニュースリーダーはiPhoneとiPadで、Photoshopを使ったりコーディングをするのはMacBook Airで、といったように、用途別に使うこともありますが、通勤の際、電車で座れない時はiPhoneでeBookを読んだり、MacBook Airで作ったKeynoteプレゼンをiPadで人に見せたり、一つの端末でやっていたことを、他の端末で引き継いで行うことも多々あります。
複数の端末を使っていると、同じ行為を違うシチュエーションで行うことも自然に起こります。たとえば、デスクトップで見たウェブサイトに、同じ情報を求めてiPhoneやiPadでアクセスすることもあるわけです。
たとえば、
- 家でMacBook Airで見たときはサイトにあった情報が、携帯からアクセスしたら携帯サイトにリダイレクトされてしまって見つからない
- PCサイトへのリンクはあって、クリックしてみた
- しかし、PCサイトは携帯からでは使い勝手が悪く、結局情報を探すのを諦めてしまった
また、その逆で、携帯向けに作られたウェブサイトがデスクトップでは見られなかったり。結構頻繁に残念な思いをします。
今後、端末の種類が増え、利用コンテキスト（文脈）も多様になることを考えると、複数端末に同じコンテンツを提供することがユーザにとって親切な場合も多いのではないかと考えています。
第二に、今度は運営側から考えた問題点ですが、これは「運営の手間 = 人的コスト」です。複数のサイトを持つだけでもメンテナンスは大変なのに、それぞれの端末に最適化された違うコンテンツを常に更新された状態に保つには、相当の「手間 = コスト」がかかります。そのコストを払う余裕があったとしても、そこにリターンが見込めない限り、良い投資とは言えないと思います。
まとめ
最後にとても印象的だった出来事をご紹介します。
このプロジェクトのプロトタイプのデモを行った際、ブラウザのウィンドウサイズを変更して「レスポンシブWebデザイン」を見せた際、「へぇ、すごいね」という反応はありました。が、反応はその程度です。大げさに言ってしまうと、ブラウザのウィンドウサイズを変更して「おぉ～、すげぇ～」と喜んでいるのは制作側だけで、実際にウェブサイトを利用して顧客と接するスタッフにとっては、大切なのは必要な情報が分かりやすく掲載されていることや電話で顧客と話す際のナビゲーションの説明のしやすさだったりするわけです。
技術的な要素は、たとえばインフラを改善して効率化を計ったり、いままで出来なかったことを可能にするという意味で、とても重要です。しかし、そこに固執しすぎて、コンテンツなどの重要な部分をおろそかにしては本末転倒です。何においてもそうですが、重要なのはバランス感覚だと思います。ご紹介したリニューアル・プロジェクトでは、主に上記4つの理由でレスポンシブWEBデザインという手法を採用しましたが、条件や要件によっては、その他の手法がベストな可能性もあります。さまざまな要因を検証したうえで、ユーザにとっても運営側にとっても最適と思われる選択をするのが、ユーザ、サイトオーナー、サイト制作者の3者がハッピーになれる「幸せなウェブサイト」を作る鍵なのではないでしょうか？
2012年5月11日に公開された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。