レスポンシブWebデザイン、最近巷で賑わっているようですね。

私も自分なりに調べて使ってみましたが、巷で騒がれているような魅力や凄さは感じませんでした。
むしろ、この言葉に飛びついた社内の人間が「マルチ!低コスト!」とはしゃぎだすのが怖いくらいです。

私もちゃんと説明できるよう、備忘も兼ねて記事に残しておきます。

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

PC・スマートフォン・タブレットなどの複数のデバイスに対して、HTML側はワンソースで対応した、デザイン・技術のことです。

Media Queries(メディアクエリ)を使う方法が一般的なようです。
(あまり触れられているのを見ませんが、PSPなどのゲーム機でもMedia Queriesは有効なのでしょうか?)

使用上のメリット

制作期間が短く済む

複数のデバイスにワンソースで対応できるので、別々に制作するよりは制作期間は短く済みます。
まぁ、ケースバイケース(この言葉便利だよね)です。

修正が一度で済む

ワンソースならではのメリットです。

使用上のデメリット

設計が大変

例えば、私の使用しているスマホ(001HT)を横向きにした場合、タブレットのレイアウトになりますが、縦は短いので非常に見づらいです。
横向き禁止にすればいいのですが、ユーザビリティではなくなります。

トレードオフとなるような例はこれ以外にも出てくると思いますので、それを考えると設計段階での負担は非常に大きいです。

コンテンツの削減が必要

PCで複数カラムのレイアウトを採用した場合、スマートフォンではメインコンテンツの可読性を上げるために、サブカラムを削るなどの工夫が必要になってきます。

この際、コンテンツを非表示にしても読み込みは発生するので、非表示の領域に重い画像などを置くのは極力避けた方がいいでしょう。

クライアントとの調整が大変

どんな制作でも一番難しいところだと思いますが、通常のサイト制作の数倍は複雑です。
説明も難しく、クライアントにご理解頂くのにも時間がかかるでしょう。

こんなサイトに使うのがオススメ

  • Webサービス
  • 記事サイト(ブログ、コラム、ニュース)
  • 製品紹介(単一)

クライアントがおらず個人で制作する場合、デメリットの多くを自らの判断で進められるのでスピーディに制作が可能です。

こういったケースでは非常に有効な手段だと感じました。

こんなサイトには使いたくない

  • 企業サイト
  • 階層が深いサイト
  • 中~大規模サイト

中~大規模のサイトには向いてないと思います。
多くても10~20ページ程度のサイトが現実的でしょう。

スマートフォンで見たくないサイトが向いてないと考えると分かりやすいです。

誤解を招かないように

「制作期間が短く済む」と説明しましたが「コストが安くなる」とは限りません。

設計・検証での負担が大きいため、PC・スマホサイトを別々に作るよりも高くなる可能性があります。

この辺りは案件次第だと思いますが、安請け合いすると痛い目に合うことは間違いないです。


私はレスポンシブWebデザインを採用する場合、必ずしも全てのデバイスに対応する必要はないと考えています。
PCとスマートフォンだけ、タブレットとスマートフォンだけでもいいと思います。

最終的にクライアントにご納得いただける提案が出来て、エンドユーザーが満足すれば、正直なんでもいいんです。

「技術の先、効果的な使い方を考えるのは我々の仕事」(Twitterでエロい人が言ってました)
肝に銘じておきます。

ツッコミやご感想は、下記のコメントまたはツイッターでお願いします。

それでは。