レスポンシブWEBデザイン
レスポンシブWEBデザインとは、ユーザーが使用しているデバイスに合わせて画面サイズを自動で調整するWEBデザインの方法です。略してレスポンシブデザインと呼ばれることが多いです。WEBページをモバイルフレンドリー化させるための、Googleが推奨しているデザイン方法でもあります。
メリット
レスポンシブデザインを導入するメリットは大きく分けて2つあります。
デバイスごとにページ設計をする必要がない
レスポンシブデザインはページを構成するHTMLは１つで、デザインやレイアウトについて記述する「CSS」をデバイスごとに記述します。HTMLのmetaタグでページにアクセスしているデバイスの画面サイズを読み取り、それに応じたCSS記述にて画面サイズを変更する仕組みになっています。このように、HTMLを１つしか用意しなくて良いので、ページの更新を行う際も変更がしやすく、メンテナンス性が高い事が特徴です。
URLが共通（リダイレクトの必要がない）
レスポンシブデザインでは１つのURLで全てのデバイスのデザインに対応します。したがってサイト内のコンテンツ管理やページ共有がしやすくなります。またデバイスごとに画面サイズを変更する際にリダイレクトで別のURLに再アクセスする、という工程が無くなるので読み込み時間も短くできます。一般的にページ読み込み時間が長いとSEO対策上で不利であると言われています。
デメリット
レスポンシブデザインを導入するにあたって、通常のWEBページを制作をするよりも手間がかかる点や制約を受ける点があります。以下のそれらのデメリットついて紹介します。
事前に綿密なページ構成を考える必要がある
デザインの構成を考える時、画面サイズの変更に対応しやすいレイアウトをよく吟味して考える必要があります。そのため事前打ち合わせの工数が増えるかもしれません。また、デバイスの画面サイズごとにCSSを記述する必要があります。
デザインに制約を受ける
前項で解説した通り、レスポンシブデザインに対応しやすいレイアウトでページを構築する必要があり、ページデザインに制約を受けます。制約を受けずに自由に凝ったデザインを作りたい場合は、「動的な配信」というサイト設計方法を取り入れると良いでしょう。この設計方法ではURLは統一ですが、HTMLとCSSがデバイス毎に違うものを用意します。したがって、画面サイズに合わせて自由にデザインを作ることができます。
小ネタ
この項ではパソコンの画面から、レスポンシブデザインに対応したWEBページを閲覧する方法を解説します。
今回はGoogle Chromeを使用しています。まずは適当なページ上で右クリックを押します。そして「検証」をクリックします。
「検証」を押した後の画面です。ページを構成している要素が表示されました。次は写真内の赤枠で囲った部分をクリックします。
先程のボタンをクリックすると、上記写真の様に画面が切り替わります。既に画面サイズに合わせてレイアウトが縮んでいるのが分かります。
四角で囲ったボタンをクリックすることでデバイスの候補が表示され、それぞれのデバイスに応じたページレイアウトを確認する事ができます。
以上、PC画面でスマホ画面表示にする方法について解説しました。