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

レスポンシブWebデザイン」とは、Webページ(ホームページ)制作でパソコンやスマートフォン(スマホ)、タブレット端末など様々な大きさの画面に対応してサイズや構成が変化するデザインのことです。

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

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

関西大学

  

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

 

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

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

 

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

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

 

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

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

  

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

 

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

 

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

スポンサーリンク

ご意見&コメント

パソコン用語解説」をご利用いただき、ありがとうございます。

「参考になった」「ちょっと違うかも?」というときは TwitterFacebookページを使ってご感想やコメントをいただけると嬉しいです!励みにもなりますし、必要に応じて情報の追加や修正もしてまいります。

 

こちらの記事もいかがですか?(一部広告含む)

関連した記事を検索

パソコントラブルQ&A」「パソコン用語解説」では関連Q&Aや用語解説を豊富に掲載中です。検索してみてください!

五十音順」インデックス

別サイトで「パソコン用語集」も公開しています。

過去の用語解説 (446 件)

編集長のプロフィール

編集長

:パソコン生活応援アドバイザー。「なにしろパソコン.com」サイト運営、メルマガ編集、セミナー講師からコラム・書籍執筆まで実績豊富!

「パソコン用語解説」では厳密さよりも、分かりやすさ、覚えやすさを優先しています。そのため強引なたとえを使ったり、編集長独自の見解も交えておりますのでご了承ください。解説の中でパソコンの設定や操作法を紹介していますが、お使いのバージョンなど環境によって違う場合があります。

また、本サイトを参考にしたパソコン設定、サイト閲覧、紹介したソフトウエアや機器の購入&使用、そしてトラブル対応やインターネット活用は『利用者の責任』でお願いします(免責事項)。