スマートフォン時代の「レスポンシブWebデザイン」とは

「レスポンシブ（Responsive）」には「反応が良いさま」「感じやすいさま」などの意味があり（「デジタル大辞泉」より）、いろんな機器の画面サイズでサイトを開いた瞬間に反応して、表示を自動調整できる様子を表しています。

言葉で説明するより、見ていただいたほうが早いので、たとえば以下のサイトを開いてみてください。ブラウザーのウインドウサイズを変えるだけで、滑らかにデザインが変わっていくのが分かるはずです。

◆ 関西大学

画像もバナーもサイズが変わるだけで基本的には一緒です。そのため統一感があります。

ウインドウのサイズに合わせて滑らかにサイズや配列、メニューの表示方法が変化します。

滑らかに構成が変化する設計は「液体」のようなので「リキッドレイアウト」と呼ぶ場合もあります。

スマホをお持ちであれば、パソコンとスマホでの表示の違いを見たり、スマホの向きを縦から横にして変化を見てみましょう。すでにいつも使っているサイトも「レスポンシブWebデザイン」かもしれません。

◆ Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

「レスポンシブWebデザイン」と対照的なのがスマホ専用のサイトを別途、制作して、スマホのときだけ切り替える方法でしょう。スマホでの表示に、より最適化できるメリットもありますが、ひとつの記事に 2種類のページができてしまうので、管理がなにかと面倒です。

たとえば「なにしろパソコン・ドットコム」は別々のページを作成しています。

共通のコンテンツはあるものの、まったく別のデザインです。

数年前にスマートフォンの普及を想定せずに制作したサイトをあとから「レスポンシブWebデザイン」にするのは大変なので、導入するなら新たに立ち上げるか、全面的なリニューアルにしたいところです。

「なにしろパソコン.com」も、まずはスマホ専用サイトを新たに追加して作成しましたが、今後、大きくリニューアルする機会があれば、そのときに「レスポンシブWebデザイン」はありだと考えています。