レスポンシブデザインとは?Webデザインの基本解説!

Webデザイン
さいとぅ
さいとぅ

普段、Webサイトは何を使ってご覧になっていますか?
今この記事を読んでいるあなたもパソコンやタブレット、スマートフォンなど、時と場合によって使用する端末が異なるのではないでしょうか。

このとき、端末間の大きな違いは、画面サイズです。画面サイズが変化すると、当然画面内に表示されるコンテンツのサイズも変化します。そして、このサイズの可変に対応するための考え方が「レスポンシブ」です。

本記事では、この「レスポンシブ」について詳しくまとめていきます!

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

まず、レスポンシブには以下のような意味があります。

レスポンシブ(responsive) : 反応が良いさま。感じやすいさま。

出典元:レスポンシブの意味−デジタル大辞泉−コトバンク

Webサイト制作においては「レスポンシブデザイン」や「レスポンシブ対応」などの言い方をします。すなわち、レスポンシブデザインとは パソコンやタブレット、スマートフォンなどの異なる画面サイズに対し、柔軟かつ瞬時に変化するWebサイトのデザイン を指します。

レスポンシブデザインの必要性

レスポンシブに対応せずとも、パソコン用・タブレット用・スマートフォン用と個別のデザインとWebサイトを用意すれば、それぞれの端末で見やすくきれいに表示できます。(アダプティブデザイン)

しかし、昨今の端末は開発元や新旧モデルによっても画面サイズが変化しやすく、厳密な統一がされていません。そのため、上記の方法は制作期間やコスト、運用や改修などの手間もじわじわと割り増しされてしまいます。

さいとぅのコメント
さいとぅ

とくにスマートフォンはモデルチェンジや新型の端末が次から次へと発売されるので、変化が激しいですよね…

さらに、世界最大級の検索サイトGoogleでもレスポンシブデザインを推奨しており、レスポンシブ対応が主流となっています。

レスポンシブデザインのメリット

レスポンシブ対応にあたり、全体的なメリットは以下の通りです。

レスポンシブデザインのメリット

  • 管理がしやすい
    • URL がひとつで済む
    • HTML がひとつのファイルで済む
  • コンテンツのサイズが最適化される
  • Google が認識しやすい

管理がしやすい

レスポンシブではURLがひとつで済むため、端末によって異なるURLへの誤ったアクセスは起こりません。また、拡散用の発信やシェアする場合に使い分けなくて良いため、第三者でも扱いやすいというメリットがあります。

さらに、Webサイトの骨組みとなるHTMLファイル(※)がひとつで済むため、端末によって最新情報の更新漏れや修正漏れなどのリスクが抑えられます。

※ HTMLファイル:Webサイトに表示するコンテンツやテキストをHTML言語で記述したファイル

コンテンツのサイズが最適化される

レスポンシブデザインは、端末の横幅に合わせてWebサイトのデザイン(表示サイズ)が調整されます。
レスポンシブデザインによる表示の変化

レスポンシブでは、各要素や画像が画面サイズに合わせて調整されます。そのため、サイト上の動線や視認性は端末によって左右されず、常に適切かつ見やすいWebサイトが保たれます。

Google が認識しやすい

Googleでは、以下の3つのWebサイト(スマートフォンサイト)を認識しています。

1.レスポンシブWebデザイン(URLとHTMLファイルに変更がありません。)2.動的な配信(URLの変更はありませんが、HTLMファイルに変更があります。)3.別々のURL(URLとHTMLファイルどちらにも変更があります。)
モバイルサイトを実装する 3 つの方法

※ 動的な配信:ページを読み込んだとき、端末に応じて異なるHTMLを配信する方法

特定の手法が検索結果として優先的に表示されることはありませんが、レスポンシブの場合はサイトの内部が管理しやすく、どの端末向けのサイトであっても一括で認識できる(=サイトをGoogleのデータベースに登録しやすい)ため推奨されています。

レスポンシブデザインのデメリット

一方、デメリットしては以下が考えられます。

レスポンシブデザインのデメリット

・デザインに制限が生まれる
・CSS ファイルが複雑化しやすい
・読み込み時間が長くなる

デザインに制限が生まれる

骨組みとなるHTMLファイルは変更できないので、テキストや画像などコンテンツのボリュームに応じて最低限必要な表示範囲が決まります。そのため、全体のボリュームが多いほど冗長的になりやすい傾向があります。また、パソコンのデザインを保ちたくとも、画面サイズのわずかな違いによってレイアウトが崩れてしまう場合もあります。

デザインはあくまでも、伝えたい情報を見やすく、スッキリと伝える表現が求められます。

さいとぅのコメント
さいとぅ

パソコンのデザイン工程で、画面サイズによる表示の変化や切り替え方をあらかじめ想定しておきましょう!

CSS ファイルが複雑化しやすい

HTMLはCSS言語によって装飾されます。サイト全体の装飾をまとめたものがCSSファイルです。レスポンシブでは画面サイズの変化に対応するため、記述するCSSの分量も相対的に増量します。

ファイル自体はひとつなので管理のしやすさをメリットに挙げていますが、CSSの長文化や複雑化には注意が必要です。

さいとぅのコメント
さいとぅ

長文化を抑えるには、サイト内で共通するデザインのCSS一括指定(コンポーネント)が有効です!

読み込み時間が長くなる

上記にも関係しますが、HTMLやCSSファイルはアクセス時に全てを読み込むため、使用端末では表示されない領域の記述も必然的に読み込みます。また、パソコン用に大きい画像を用意したとき、スマートフォンでの読み込みに時間がかかることもあります。

読み込み時間は長いほど閲覧時のストレスを高めるため、デザインの確認と同時にアクセス時間の短縮が必要です。

さいとぅのコメント
さいとぅ

画面サイズに応じた画像の最適化や、サイト内で使用している文字のみのフォントファイルを用いる(サブセット化)などの工夫で全体の軽量化が可能です!

レスポンシブデザインの種類

基本的な性質をふまえ、続いては実際の画面サイズによって変化するレスポンシブデザインの種類をまとめていきます。

レスポンシブレイアウト

レスポンシブレイアウトでは、端末ごとに代表的な横幅を設定(固定)します。
レスポンシブレイアウトのサイズ指定例

レスポンシブレイアウトは、端末の代表的な横幅を設定してデザインします。設定した横幅以上で表示される端末はパソコンサイト、最小幅以下で表示される端末はスマートフォンサイト、その間はその他タブレット用などのレイアウトに切り替わります。

全体の構成要素は変化せず、表示する端末の横幅に応じて パソコン、タブレット、スマートフォンのいずれかのサイズに調整されるイメージです。

リキッドレイアウト・フレキシブルレイアウト

リキッドレイアウトは、各端末の画面サイズを基準として横幅を決定します。
フレキシブルレイアウトのサイズ指定例

リキッドレイアウトは、表示される各端末の横幅に合わせてコンテンツの各要素の位置・サイズが変化していきます。(各要素のサイズを画面を占める割合で指定しています。)そのため、常に表示される端末の画面に対してサイズが調整されますが、極端に大きい・小さいなどのサイズでは見づらくなります。

そこで、リキッドレイアウトに最大と最小の横幅を設定する手法がフレキシブルレイアウトです。主要な端末ではどれでも同様の見た目が保たれつつ、指定幅を超えるイレギュラーな画面サイズでも表示が崩れないようにできます。

グリッドレイアウト

グリッドレイアウトは、均一化された要素を並べる数量が画面サイズに応じて変化します。
グリッドレイアウトのサイズ変化例

グリッドレイアウトは、コンテンツの各要素をブロックやカードなど画一的なフォーマットに落とし込んで連続表示する手法です。画面の横幅で表示可能な数量を超えると折り返されるように設定するため、横幅に応じて一行の表示数は変化するものの、各要素のデザインは崩れません。

しかしながら、グリッドレイアウトは多用するとただ要素を並べただけの印象を生むため、部分的な使用やデザイン時の検討が必要です。

レスポンシブデザインの5つのポイント

実際にレスポンシブデザインが適用されるとき、パソコン→タブレット→スマートフォンの具体的な変化や制作時の注意点など、注目ポイントをまとめていきます。

コンテンツ幅の決定方法

レスポンシブデザインの各サイズ調整では、基準となる横幅を決定する必要があります。(この横幅をコンテンツ幅と言います。)コンテンツ幅は端末の新規モデルやシェア率、ターゲットによって変化をともなうため、各統計サービス( statcounterMMD研究所 など)で随時情報を確認して最適なサイズを設定します。

また、軸となるコンテンツ幅から外れる場合はどう対応するか、どこまで対応するかなどの基準もあらかじめしっかり決めておきましょう。

グローバルナビゲーションの表示方法

パソコンで配置した画面上部のグローバルナビゲーションを小さい画面で表示すると画面の多くを占めてしまいます。そのため、画面の横幅が小さいときのナビゲーションは基本的に開閉式とし、ボタンを配置します。このボタンはサイト内のどこにいてもナビゲーションを開けるように画面上に固定します。

要素の縦積み

横幅が小さくなるにつれて、各要素は縦に積まれていきます。もともと横並びのレイアウトをしていた要素が縦に再配置された場合も、目的となる情報が伝わるように画像やボタンなどの位置関係・表示/非表示など工夫が必要です。

操作方法による注意点

たとえば、スマートフォンは指で操作する(常に画面には触れていない)ので、パソコンのマウス使用時のようにホバーの演出はしません。(タップ時の演出は可能)また、スクロールの頻度やスピードも情報量に応じて変化します。

端末に応じて各要素のサイズが変化しても、閲覧時に操作方法とそぐわないデザインでは見ている人が不便さを感じてサイトから離れてしまいます。サイズ調整にくわえて、端末での操作感が損なわれないような注意が必要です。

テキストの確認

各要素のサイズが変化しても、もとになるテキストの文量は変化しないため、文字のサイズ(フォントサイズ)や文長によって改行が増えてしまいます。この場合はフォントサイズの縮小や行間の調整、文節での分割などが有効です。

とはいえ、フォントサイズを小さくしすぎるとスマートフォンでの可読性が低下するため、いずれも実機での確認が重要となります。

まとめ

今回はレスポンシブデザインについてまとめました。スマートフォンの利用が当たり前になった現在では、レスポンシブデザインが主流となっています。Webサイト制作時はそのサイトを見る人がしっかり情報を受け取れるように端末に応じて見え方を調整しましょう。

Wepot では常に最適なWebサイトを提案、制作いたします。ぜひお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
さいとぅ

さいとぅ
デザイナー

さいとぅ
デザイナー

Webデザインをはじめロゴデザインやインフォグラフィックなどのグラフィックデザインも幅広く対応可能です。コンセプトを重視し、ビジュアルから想いが伝わりひろがるようなデザインを軸としています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。