レスポンシブデザイン

2022-08-03
Editor

デバイスのディスプレイ幅に「応じて」(=responsive)Webサイトのレイアウトを変更・整える仕組みをいう。つまりブロックが横方向に並んでいたら、スマホになったときにはそれを縦方向に並べ替えてくれる。

これのおかげで小さい画面でも最適な表示をしてくれるためユーザーは助かるが、最適な表示になるようにサイトを作る側は設計段階からよく検討する必要がある。つまりいろんなデバイスで見られることを想定して、「小さい画面ではこのパーツがこっちへいって……」のような感じでレイアウト時に織り込まないといけない。

というわけで、

  • 設計時の工数増加
  • さらに実装工数がかなり増加

実装工数については、イメージ的には例えば「PC用、タブレット用、スマホ用」に対応したレスポンシブサイトを作るとしたら、各デバイス用にサイトを3つ作るようなことに近い。各デバイスでのレイアウトの微調整工数がかさむためだ。まあ単純に×3は言い過ぎだけど。システム面の機能開発についてはもちろんデバイスの画面幅には関係ない。

このレスポンシブデザインの登場によって、Webサイト制作は少し複雑になり予算規模も上昇したことは間違いないだろう。

ただし WordPresss やその他 Wix みたいなもの(SaaSタイプ)を使う分には、予めレスポンシブ対応がなされているので心配ない。またオリジナル開発の場合でもたいてい WordPress などをベースに使うので、基本は問題ない。デザインやユーザービリティにこだわり出すとどんどんコストが上がるというだけだ。デバイスの種類は様々で、しかも新しい大きさのものが増え続ける。