モバイルから考えないレスポンシブデザインは「ありえない」と言うことをみんなもっとちゃんと知ってほしい

レスポンシブデザインでないサイトを作る方が珍しい昨今であるが、この手法があまりにも「軽く」みられている状況があることについて、物申したく、記事にしました。怒りに任せてツイッターでつぶやいたもののまとめです。

この記事をよく読んで欲しい人

自分は優れたウェブサイトのディレクションをしていると思っている人
また、優れたディレクタになりたいと思っている人
レスポンシブデザインのサイトをデザインしたことがある人
また、レスポンシブデザインを考えてみたい人
自社のサイトがレスポンシブデザインのサイトであるウェブ担当者
また、レスポンシブデザインを採用したいと考えているウェブ担当者

レスポンシブデザインとは？

その説明自体を今ここですると長くなるのではしょります（すみません検索してください）。一言で言うと、画面サイズに合わせてサイトのデザインが変わること、そのデザイン、と言えると思います。Adobeのサイトの説明がわかりやすかったので、参考にどうぞ。

https://helpx.adobe.com/jp/dreamweaver/how-to/responsive-web-design-basics.html

また、この記事で話すレスポンシブデザインの定義は、以下をお借りします。

Webサイトをスマホ対応させるためのアプローチ技術

CSSメディアクエリを核とする

ワンソース・マルチユース

出典：http://qiita.com/kohki-shikata/items/3bf5d0bb1269515dfdea

レスポンシブデザインが注目される理由

Googleさんが「レスポンシブデザインのサイトがいいと思うな」と言うようなことを表明したのが、大きな理由であったんじゃないかと思います。
https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=ja

じゃあなぜGoogleさんはレスポンシブデザインがいいな、と言うのか？
その背景について、ここからは想像のお話ですが、一応きいていただけると嬉しいです。

モバイルでインターネットをする人が増えてきて、そのために、モバイル用のウェブサイトやコンテンツを作る人が増えました。モバイル対応の先駆者たちが取った方法は、モバイル用のサイトを、PCサイトとは別に作る、と言う方法でした。初めはその方法が一般的だったと思います（私も作っていた時期があります）。そうすると、インターネット上には、主たる内容は同一だが、PCとモバイル向けと言う複数のページが存在することになります。また、大体の場合、PCとモバイル向けのページはURLが異なるものであることが多かったと思います。
この状況は、検索エンジンにとっては、2つの異なるページをインデックスしなければなりません。また、その異なるページが「デバイス別のページなだけであって、同一の内容を示すページ」として処理しなければなりませんでした。そのほかいろいろと、とにかく手間がかかる手法であったと言えます。
しかし、レスポンシブデザインであれば、「ワンソース」「デバイス間で共通のURL」になるので、検索エンジンがインデックスするときの手間が大幅に減ることになります。

・・・・と、言うような理由が、先にあげた参考記事にも、書かれています。Googleさんがレスポンシブデザインにする理由としてあげている内容です。

URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。

対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックスプロパティの割り当てが正確に行われます。

同じコンテンツのページをいくつも維持管理する手間が省けます。

モバイルサイトでよくある誤りに陥る可能性を抑えることができます。

ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザーエージェントに基づくリダイレクトはエラーが発生しやすく、ユーザーエクスペリエンスを損なうおそれがあります（詳しくは、ユーザーエージェントを正しく検出するをご覧ください）。

Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザーエージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブウェブデザインの場合は、1 つの Googlebot ユーザーエージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。

ここであげられていることは、検索エンジン側のメリットとも言えますが、ユーザにとっても、サイトを管理/運営する人にとっても、レスポンシブデザインはメリットが多い方法と言えます。

レスポンシブデザインは万能ではない

良いことの多いレスポンシブデザインにもできないことがあります。たくさんあります。しかし、レスポンシブデザインが持つ問題は繊細なことで、エンジニアじゃないと判断ができないことが多いんです。エンジニア、特にフロントエンドのエンジニアは、サイトの最終工程を担っているにもかかわらず、作業や仕事の流れ、意思決定の流れにおいては「下流」に配置されているように感じることが多いです。
ディレクターやデザイナが決定済みのことに対応すると言うような状況があまりにおおいです。
レスポンシブデザインのサイトを設計する際の意思決定にエンジニアが参加しないと、悲劇しか起こらないです。ディレクターやデザイナーが書いた青写真を実装できるかどうかの判断をエンジニアに確認しなかったら、あとあと「こんなのできませんよ」って言うことがボロボロ出てくるんです。

エンジニアの努力不足で実装ができない？
そう言うことももちろんあるでしょうが、レスポンシブのことをよくわかっているとは言えないまま、実装不可能なデザインや仕様を書くことが正しいこと、とは思わないでほしいです。エンジニアに聞け、素直に。

では、実装不可能なデザインや仕様になってしまいがちな原因はどこにあるのか？ここで、タイトルに掲げたことが出てきます。モバイルから考えないから失敗するんです。

そもそもサイトをレスポンシブデザインにする理由は？

サイトをレスポンシブにする理由は、そもそもなんだでしょうか？
Googleさんが良いって言うから、従っておかないと！と言う理由、それは大きいでしょうね。そのGoogleさんが目指しているのは「モバイルフレンドリー」です。スマホとかモバイルでウェブサイトを使う人にも、フレンドリーであれ、使いやすいサイトであれ、と言うのが理想なんです。モバイルフレンドリーに、なりたい。そう思うからレスポンシブデザインにするわけです。はい、ここから私の怒りポイントです。

＼じゃあなぜモバイルビューのデザインが出てこないんですか？！／　

モバイルフレンドリーを掲げたいからレスポンシブにするのに、出てくるのはPCビューのデザインだけなんですよ、大抵。それって何か、やっぱりモバイルはおまけってこと？？（以下しばらく、愚痴です…）

ここで、考えたい、モバイルビューのデザインが出てこない理由。
・デザイナーが作れない
・予算が少なくてデザイナーに頼めない
これですかね、恐らくは。

ウェブ担「レスポンシブデザインでお願いします」
ディレクタ「わかりました。ではデザインはモバイルビューから進めますね」
担「ええそうですね、楽しみにしてます」
ディ「お任せください」

これがあるべき流れだが、おそらく、現実はこう。

ウェブ担「レスポンシブデザインでお願いします」
ディレクタ「わかりました。ではデザインはモバイルビューから進めますね」
担「え、なんでですか、先にPCが見たいです」
ディ「え、でも、レスポンシブってそう言うものですよ？」
担「上司がそう言うのよくわかってないんで、PCでしかウェブ見ないんで」
ディ「あー、はい。」

とかじゃないかな。。。ここで頑張るディレクタもおそらくいないんだろう。そのぐらいモバイルへの意識が低いと思いたくないですけど・・・・。

レスポンシブデザインにまとわりつく「誤解」

レスポンシブデザインが、モバイルユーザーフレンドリーなサイトを作る時にメリットが多く「安価な」方法であるという誤解があるのではないかと思う。誤解です。だって結局「PCサイト」「モバイルサイト」の2つを作るのと同じぐらい手間がかかります。デザインからしてそもそも2つ考えるわけですから、安価になるなわけがない。レスポンシブデザインが「安価」と言う誤解がどうして生じたのかはわからないです。流行りだから、と勝手にレスポンシブサイトで決めてきて、モバイルのデザインも用意しないで、フロントエンドエンジニアに全部おっかぶせてるだけじゃね、と思います。

もしも、レスポンシブデザインが「安価」になるとすれば、それは「モバイルファースト」を採用して、「PCビューにはあんまりうるさく言わない」場合だけだと思います。かつ、保証する動作環境は「ブラウザ最新バージョン」のみです。もう少し丁寧な言い方をすると、CSS3に対応しているブラウザが前提。（それってどのブラウザですか？と問わねばわからない人は、そもそもレスポンシブサイトを手がけちゃいけない人かもしれませんよ・・・・・。）