転送：http://responsive.aruweb.net/design/responsivedesign/
Webサイト作成の打ち合わせに出かけると「レスポンシブデザイン」「フラットデザイン」などのキーワードが、Web担当者以外の方からもよく出てきます。言葉は知らなくても、なんとなくモノを知っていると言うか、「小耳にはさんだんだけどさ…。」という感じで。
なんとなく誤解をしている方が多い印象です。
Contents
レスポンシブデザインの誤解
レスポンシブデザインに関しては、元マークアップエンジニアだけに「やってみたい！」とずっと思ってきましたが、クライアントのサイトで導入できたのは今月リリースした某サービスの、販促のために作成したランディングページがお初でした。今までなぜ作ることができなかったかと言うと、もちろんデザイナーやHTMLコーダーの経験不足などもありますが-誰でも最初はあるものなので、私は気にせずやらせてしまうのですが-何よりも、そのサイトが「レスポンシブで作ることが最善の策か」というところにあります。
よく聞かれるのは
- レスポンシブデザインは、ひとつのHTMLファイルで2つ以上のデバイスの出しわけができるから、工数が削減できるんでしょ？！
- レスポンシブデザインは、ひとつのHTMLファイルだからお金が安くて済むんでしょ？！
- レスポンシブデザインは、ひとつのHTMLファイルだから運用もラクだし、SEOにも良いんでしょ？！
でしょうか。
レスポンシブデザインで工数が削減できるか？
レスポンシブデザインだからと言って、早く公開できるわけではない、ということはほとんどのWeb制作者の方の同意を得られるのではないかと思います。ひとつのHTMLファイルだから早い…ではなく、ひとつのHTMLファイルで複数のデバイスを表すから、逆に設計をきちんとする必要があり、手間がかかると言ってしまっていいかもしれません。
コンテンツをグリッド化して、スクリーンサイズが変わるごとに並び順やサイズが変わるわけですから、ユーザビリティやIAを気にかけることが山ほどあります。スタイルシートも長くなりますし、ただそれの記述だけをとっても複雑だろうなぁと…気が遠くなるのは、なんとなくHTMLを書く立場になってしまうからなんでしょうね。。
幾人かの製作者とこの点について話しましたが、「やってみたいが手間は一緒」「設計が大変だから避けたい」など賛否両論です。
レスポンシブデザインで制作費用が安くなるか？
すでに、レスポンシブだからといって工数が削減できるわけではないと言っているので、これまた当然ですが、費用は安くなり得ません。
構成やデザインを工夫することで3デバイス分作るよりは安くできる場合はありますが、その分デザインの制約が大きくなります。また、コーディング費用はデバイス分、つまり2デバイス対応なら×2、3デバイス対応なら×3と普通の制作と同じだけの見積もりが出てくることがほとんどです。
レスポンシブデザイン制作で大事なのは設計です。デバイスの幅が変わった時にどのように組み換わるのか、デバイスによってどのようにテキストやボタンなど、操作しやすいようにサイズや形状を変えるのか…ほとんどの人が最初から満点の設計を考えることはできないですから、途中途中で見直し、修正することもたびたびあります。
設計がきちんとしていないと、思っていた通りに変化しなかったり、異様に重くなったり更新しにくいCSSファイルになってしまったりと、逆にデメリットが増えてしまうのです。
経験がまだ少ない場合が多いので、デザインとHTMLコーディングが別の人（別会社）だったりすると、デザインを作ってから「このデザインでは無理なので、この部分は○○させてください。」とHTMLコーダー側から言われることもシバシバ。私も経験が浅かった頃は特に戻りが多かったです。
ただ、コンテンツ内のテキストの流し込みは1回で良いので…そこだけは確かに工数が減るかな。いや、むしろそこぐらいでしょうか。
レスポンシブデザインは運用にもSEOにも良い？
運用面で言えば、先述したとおりテキストを変更するだけなら工数は軽減できるでしょう。ただ、更新する箇所にレイアウトの変更が有った場合は、また設計をし直さないといけない場合があるのでラクとは言えません。また、見ているだけだと気づかないのは画像なども、場合によってはデバイスごとに出しわけをしているので、画像の修正も「1回で済む」とは限らないのです。
「SEOに良い」というのは、Googleがマルチデバイスの対応方法としてレスポンシブデザインを推奨しているからでしょう。
> Google Developers：推奨事項の詳細
現在では、スマホもパソコンでも同様の検索アルゴリズムが使われており、スマホのためのSEO対策は不要とされています。（テストは実施されているようなので、そのうち必要となるかもしれませんが）
よって、スマホとパソコンでアクセス数が分断されてしまうよりも、同じURLで同じコンテンツ内容のほうが良いのです。
とはいえ、もともと最近のSEOは小手先の技で順位を上げるのではなく、どれだけユーザーに有益な情報を提供しているかを基準として考えるべきなので、レスポンシブデザインにしたからといって「かなり有利」というわけではありません。
逆にレスポンシブデザインが適さない場合もある
私が現在担当しているサービスのほとんどがそうなのですが、動的なページが多く、デバイスによって動くロジックが異なる場合はレスポンシブデザインでは工数もかかりすぎソースも煩雑になります。また、とにかく徹底的にデバイスに最適化させたい場合は、デザインの制約が多いという点でもレスポンシブでない方が作りやすかったり、こだわったりすることができます。
また、UIやユーザビリティを考慮した結果、「PCはこうすべき。でも、スマホはこうすべき。」とデバイスのサイズや操作方法によりかなり異なる設計になる場合もあります。その場合、レスポンシブにすることで複雑さが増し、作るのも運用するのもかえって大変になる場合があります。
まとめ
レスポンシブデザインの制作事例は増えてきましたが、シンプルな情報サイトやブログサイトには適しているものの、そうでないものも多々あります。また、レスポンシブのためのデザインやHTMLコーディングもそれなりの技術が必要です。
これから作るサイトをレスポンシブデザインにするかどうかの検討を、サイトの目的・ターゲットユーザー・機能・制作する技術者など、多角的に実施することが大事です。