モバイルファーストインデックスがGoogleにおいて本格的に適用されるようになってから2年が経とうとしており、これまでスマートフォン対応していなかった企業のWebサイトもスマートフォン対応のためのサイトリニューアルを進めているようです。
そんな中、耳にするのが「レスポンシブサイト」ですが、レスポンシブサイトをするメリットや手法はどのようなものになるのでしょうか。
ここでは、レスポンシブサイトの参考サイトや制作の注意点などをご紹介していきます。
レスポンシブサイトとは
まずは、レスポンシブサイトについて理解をしていきましょう。
スマートフォンに対応したサイトを制作するためには、大きく二つの方法があり、それは以下の二つとなります。
・スマートフォン用のサイトを0から制作する
・レスポンシブサイトにリニューアルする
「スマートフォン用のサイトを0から制作する」とは、現在あるメインのサイトとは別にもう一つサイトを制作するという方法ですが、スマートフォン用のサイトを制作することによって、運用面において2つのサイトを同時に更新していくため、更新作業が煩雑になります。
一方のレスポンシブサイトにするというのは、一つのサイトを閲覧しているユーザーのデバイス（機器）によってレイアウトを自動的に変更させ、スマートフォンで見ている場合にはスマートフォン用のレイアウトで見やすい表示にするという手法です。
いまでは、このレスポンシブサイトにする手法を多くの企業が取り入れています。
レスポンシブサイトのメリット・デメリット
次に、レスポンシブサイトのメリット・デメリットを見ていきましょう。
レスポンシブサイトのメリット
レスポンシブサイトにするメリットとして、まずはそもそもスマートフォン対応されていなかったサイトをスマートフォンサイトにすることで、ユーザーの見やすさを向上させることと、①Googleの評価を上げるということが挙げられます。
Googleはスマートフォン対応する際に、レスポンシブサイトにすることを推奨しており、その理由としては、ユーザーの利便性がレスポンシブの方が良いこと、レスポンシブにすることでリダイレクトしなくても良いため、リダイレクトするよりもページの読み込み時間を短縮できることなどが挙げられます。
また、Googleが推奨する形に合わせることによって、Googleからの評価を上げることができ、その結果オーガニック検索での上位表示につなげることができます。
一方、スマートフォン専用サイトを0から制作するのと比べてのメリットですが、一つのサイトを制作することになるため、更新作業を重複して行うという手間が無いこと、運用管理がしやすいというメリットがあります。
②レスポンシブサイトのデメリット
次に、レスポンシブサイトを制作するデメリットですが、一つのサイト制作となるため、運用管理はしやすくなりますが、その一方でデータ量が多くなるため、スマートフォンでの読み込みが遅くなる可能性があります。
また、レスポンシブサイトの制作は、パソコン用のみのサイトよりも制作難易度が高まることや、デバイスごとにこだわったデザインにすることが難しくなり、このことがデメリットに感じる方もいるでしょう。
スマートフォン専用サイトなどを制作する場合には、スマートフォンからの閲覧だけを考えて制作すれば良いため、凝ったデザインなどを利用することができますが、レスポンシブの場合にはそれぞれのデバイスのことを考えなければならないのはデメリットと言えます。
データ量を気にしながら制作することでそのようなデメリットも感じずに制作することができますが、容量が多くなってしまう可能性があることがデメリットとして感じる方もいるでしょう。
レスポンシブサイトを制作するときに意識しておきたい基本項目
レスポンシブデザインのサイトを制作する上で、押さえておきたい基本項目を見ていきましょう。
表示切替の条件を決める
次に、ブレイクポイント（表示切替をする条件）を決めます。
これは、スマホなら〇〇、タブレットなら〇〇という形ではなく、表示されているブラウザの横幅によって条件を決めるというもので、iPhone5/SEのユーザーまでカバーしたい場合は320px～、iPhone6/7/8ユーザーからカバーしたい場合は375px～という感じで、対応させたいデバイスのサイズからブレークポイントを考えます。世の中には様々な画面サイズのスマートフォン、タブレット、パソコンがあります。
ブレークポイントを細かく設定するのは理想的ですが、新しいデバイスの登場、検証機の準備、作業工数など対応が難しい場合もあるので、一般的にはメジャーなデバイスのみ対応するという考え方になります。
※まだまだiPhone5/SEのユーザーいるため320pxまで対応しているという制作会社も多いようです
③320から559pxまでがスマホ用のレイアウトといった形で設定するものです。
viewportを設定する
レスポンシブデザインのサイトを制作するためには、HTMLソースのheadタグにmeta要素として「viewport」を記述する必要があります。
例）
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”>
このviewportの中にはそれぞれ「横幅のサイズ」「倍率」「ズームの許可」を指定することができ、レスポンシブデザインにするためには必要な設定となります。
各デバイス用のcssを記述する
次に、④各デバイスのcssを記述する必要があり、これはパソコン用、タブレット用、スマートフォン用のユーザーに向けて、それぞれの設定をおこなっていきます。
ファイルサイズをできるだけ小さくする
⑤画像の代わりにcssでボタンを配置したりするなど、工夫することが必要です。
レスポンシブでサイトを制作する際には、パソコン用の画像とスマートフォン用の画像を用意したり、ソースコードの記述をデバイスごとに用意したりとページが重くなりやすい傾向があります。
ユーザーが閲覧したときの読み込み速度や、通信料にも影響する部分なので、画像ファイルのサイズを調整したり、画像圧縮サービスを利用したり、CSSで装飾が可能なもの（ボタンや枠線など）は極力CSSで対応する、又はベクター画像で対応できそうな場合はsvg、svgzを使うなどの工夫が必要です。
レスポンシブサイトの手法について
⑥次に、レスポンシブサイトの制作をするためには一般的に「レスポンシブ」と呼ばれるデザインには、「リキッドレイアウト」「フレキシブルレイアウト」の二つの手法があります。この手法についてそれぞれ見ていきましょう。
レスポンシブレイアウトの二つの種類
一般的にレスポンシブレイアウトと言われるものとして使われているのが、リキッドレイアウトとフレキシブルレイアウトというもので、これらを利用してレスポンシブ対応をしています。
リキッドレイアウト
リキッドレイアウトとは、レスポンシブデザインの手法の一つとして考えられており、リキッドレイアウトでは、利用するブラウザの横幅に合わせてコンテンツ（ページ）のレイアウトが伸縮されるデザインです。
そのため、相対的にレイアウトが変更されるという仕組みとなっています。
フレキシブルレイアウト
フレキシブルレイアウトとは、リキッドレイアウトと同様に、相対的にブラウザの横幅によってレイアウトが変更されますが、リキッドレイアウトと異なる点としては、最大値や最小値を入れるという点です。
最小値や最大値を入れることによって、ブラウザの幅が大きな場合においても最大の幅が決まっているため、横幅に余白が出ると言った形となります。
パソコンで閲覧しているユーザーに対しては、固定幅で表示したいという場合に利用される設定となります。
⑦レスポンシブサイトの参考事例探しに最適な参考サイト
次に、レスポンシブサイトの参考事例を探す上で、おすすめの参考サイトをご紹介していきます。
RWDJP
こちらは、日本国内の秀逸な「レスポンシブWebデザイン」を集めたサイトとなっており、Webのギャラリーサイトというイメージです。
RWDJPは、サムネイルがスマホ、タブレット、PCと別れており見やすくなっており、掲載している参考サイトの数も多いのが特徴です。
こちらで紹介されているサイトは、デザイン性豊かなものばかりなので、参考になります。
RWDJP
SANKOU!
こちらも、Webサイトデザインのギャラリーとなっており、URLは「レスポンシブデザイン」のギャラリーです。
カテゴリ分けが細かく、参考サイトを探しやすいのが特徴で、紹介しているサイトが大きく表示されているため、サムネイルの時点で見やすくなっています。
レスポンシブデザインだけではなくLPのデザインなどの紹介もしているため、様々なサイト制作のデザインで参考にできるでしょう。
SANKOU!
https://sankoudesign.com/category/responsive/
MUUUUU.ORG
こちらも、Webサイトデザインのギャラリーです。
デザイン性豊かなものが揃っていますので、参考になるでしょう。
MUUUUU.ORGは、カテゴリ分けが細かいため、参考サイトを探しやすく、掲載している参考サイトの数も多いのが特徴です。
デザインのカテゴリとして、デザインタイプ、サイトタイプ、カラーなど様々なカテゴリで選択することができ、クオリティが高い「縦に長いサイト」を厳選して集めているサイトです。
MUUUUU.ORG
https://muuuuu.org/category/taglist/responsive
よく使うブレークポイント
モバイルファーストの考え方を基準とすると、スマホベースでのレイアウトとなるため、ブレークポイントは以下のように設定すると良いでしょう。
⑧768px以上 @media screen and (min-width: 768px) {…}
1024px以上 @media screen and (min-width: 1024px) {…}
これは、320から767pxまでがスマホ用のレイアウト、768～1023pxまでがタブレット用、1024px以上がパソコン用という設定で、それ以外にも様々な考え方がありますが、基本となる考えとしては、このような設定が良いでしょう。
レスポンシブサイトで注意したいこと
最後に、レスポンシブサイトを制作する上での注意点を見ていきましょう。
フォントサイズの指定はremで行うと効率的
レスポンシブサイトを制作するとき、フォントのサイズ変更や要素のサイズ指定をするときに役立つのが「rem」の存在です。
サイズを一括で変更する方法はrem以外にもありますが、remはフォントだけではなく要素のサイズ変更をする際にも、設定した基準を元に簡単に変更することができるためおすすめです。
画像の容量について
次に、画像の容量ですが、レスポンシブサイトにすることで、容量が多くなり、スマホで閲覧する際に容量が大きいことで読み込みが遅くなることがあります。
そのため、容量を少しでも減らすため、画像のファイルサイズを小さくすることが必要です。
その他の注意点
サイト制作をする上で、パソコン上で制作をするため、パソコン上のイメージを重要視してしまいがちですが、スマホで見たときにどのような見え方になるかの方が、モバイルファーストという観点では重要です。
そのため、⑨スマホで閲覧したときにはフォントサイズを大きくする・文章の改行や量が適正か確認するなどのチェックをすることが必要です。
一般的にはスマホで閲覧したときのフォントサイズは16px、行の高さのline-heightは1.5～2.0が見やすいといわれていますが、必ず自身の目で確認をしましょう。
レイアウトが崩れていないか、解像度の違いによって画像が荒れていないか、文字の大きさや文章の改行位置、行間など年配の方でも閲覧しやすいつくりになっているかをチェックすることが必ず必要です。
まとめ
ここまで、レスポンシブサイトを制作する手法や、注意点、参考サイトについてご紹介してきました。
レスポンシブサイトを制作することは、モバイルファーストの現代においてはサイトを持つ上で必要不可欠の設定と言えるでしょう。
レスポンシブサイトを制作する際には、ファイルのサイズに注意し、モバイルファーストだけではなく、ユーザーファーストの目線で制作をすることで、サイト評価を上げることができるでしょう。