BLOG

レスポンシブWEBデザインについて

「レスポンシブ(Responsive)」は聞いたことがなくても「レスポンス(Response)」という言葉を耳にしたことがある方は多いと思います。
「レスポンス」が名詞であるのに対して「レスポンシブ」は形容詞になりますが、どちらも「反応」を表す際に使用される言葉になります。
今回は、そんな「反応」するWEBデザイン「レスポンシブWEBデザイン」を紹介します。

レスポンシブWEBデザイン(Responsive Web Design)とは

レスポンシブWEBデザインとは、画面サイズに最適化された見やすいデザインが 同じURL へのアクセスで表示されるスマホ対応のWEBページのことです。
スマホ対応のWEBページを制作する別の法方として、パソコン版・スマホ版とそれぞれにページを準備して対応する法方もありますが、近年では、スマホ対応のWEBページの多くが「レスポンシブWEBデザイン」で制作されています。

レスポンシブWEBデザイン

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

スマホ対応のWEBページを制作するもう一つの方法、パソコン版・スマホ版で別のURLのページを準備する場合と比較した時の特徴になります。

情報編集がしやすい

WEBページの画像や文章は、HTMLという言語により表示されています。(HTMLとCSSについて
パソコン版・スマホ版が別のURLの場合、同じページの同じ文章の修正だとしても2つのHTMLを修正する必要があります。
レスポンシブWEBデザインの場合、パソコンやスマホ、タブレットでも、同じHTMLを使用しているので、1つのデータ修正で完了する情報編集のしやすさがあります。

SEO対策がしやすい

GoogleのSEOガイドラインでは、同じWEBサイト内の似た掲載情報のページは「重複コンテンツ」として扱われるため良くないとされています。
パソコン版・スマホ版を別のページで制作すると、互いを重複コンテンツとして扱わないように、HTMLの設定でcanonicalの設定によるURLの正規化が必須となります。
レスポンシブWEBデザインの場合、同一URLのため重複コンテンツの発生を防ぎやすくなります。

URLが伝えやすい

名刺や会社案内、SNSなど、URLやリンクを伝える時に、パソコン版・スマホ版が別の場合「パソコンでのアクセスは ○○○.com」「スマホでのアクセスは ○○○.com/sp/」と案内する必要があります。
JavaScriptやPHPを使用して、画面サイズに適切なURLに変移させることもできますが、レスポンシブWEBデザインの場合、基本的に1つのURLの案内だけで完了します。

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

パソコンの大きな画面でキレイに表示するための解像度と、スマホでキレイに見れる解像度は違うため、パソコン版の画像をそのままスマホで読み込むと、データ通信容量を無駄に消費させたり、通信環境によっては読み込みの遅延を引き起こす原因となります。
そのため、レスポンシブWEBデザインでは、1枚の画像に対してサイズの違う複数枚を準備し、画面サイズに最適な画像を表示させるコードをHTMLに記述する必要があります。

WordPressには、自動的に複数サイズの画像を生成して、ユーザーの環境に最適な画像を提供する機能もあるので、WordPressの使用をオススメしています。

「viewport」と「ブレイクポイント」について

レスポンシブWEBデザイン用に制作されたデザインの コーディング には、「viewport」と「ブレイクポイント」の設定が必要になります。

viewport(ビューポート)とは

viewportとは、HTML内に記載するmeta要素です。
設定することで、パソコンやスマホの表示領域を設定することができます。
例えば、レスポンシブWEBデザインであっても、タブレットまではパソコン版の縮小画面を表示するなどの設定が可能です。

ブレイクポイントとは

レスポンシブWEBデザインは、ブラウザの横幅に応じて適用するCSSの値を変えて、レイアウトやサイズを変化させています。
ブレイクポイントとは、CSSが切り替わるブラウザの横幅のサイズのことです。

ブレイクポイントとは

こう記述することで、h1要素の文字サイズは、ブラウザの横幅が800px以上の時は30px、800px以下の時は20pxになります。
「@media screen and (○○○)」で指定できるブレイクポイントの値は 「ブラウザの横幅」「端末の向き」「デバイスピクセル比」 などがあります。