20数年ほど前までは、ホームページを作るとなるとパソコン用・携帯用というように別ページに分けて制作する必要がありました。
しかし現在のホームページ制作の現場では、異なるデバイスや画面サイズに対応したレスポンシブデザインが主流です。
今回はレスポンシブデザインとは何か、レスポンシブデザインにするべき理由を解説してまいります。
レスポンシブデザインとは
スマートフォン、タブレット、デスクトップパソコンなど、現在ホームページを見ようと思った時に使えるデバイスは多様化しています。
レスポンシブデザインは、これら異なるデバイスに対応したページレイアウトにする技術のことを指します。
レスポンシブデザインにすることで、どの端末からみても自動で最適なデザインにし、表示させます。
レスポンシブデザインを実現する方法
レスポンシブデザインを実現化するには、主に２つの方法があります。
まず一つは、パソコンやスマートフォン、タブレットごとに別のURLを用意する方法です。
スマートフォンが普及する前のホームページではこちらの方が主流でしたが、今ではあまり見かけなくなっています。
現在ではもう一つの手段である、パソコンでもスマホでも共通のURLで表示させる方法が主流です。
大手検索サイトのGoogleでもこの手法を推奨しています。
どのデバイスに対しても共通のファイルを表示させているため、コンテンツは一元化され、異なるデバイス間であっても同じ情報が共有されます。
レスポンシブデザインでのサイト制作が必須となっている理由
スマートフォンの普及に伴い、外出先からでも気軽に検索できる環境が整っています。
特に個人をターゲットにしたホームページになると、約70％がスマートフォンからアクセスしているというデータもあります。
そのことから、Googleもモバイルファースト、つまりモバイル端末でより使いやすいホームページを重視して評価しています。
一方で先にご紹介したデバイスに合わせて別にURLを用意する方法のように、パソコンとスマートフォンで別の内容だったり構成が異なるレスポンシブの手法は好まれていません。
レスポンシブデザインにすることは、ユーザーにとっての使いやすさの為だけではなく、ホームページ全体の評価にも影響することになります。
そのため、現在新たにホームページを作ることになると必然的にレスポンシブデザインのホームページ制作が求められるのです。
自分のホームページがレスポンシブデザイン対応か確認する方法
運営しているホームページがレスポンシブデザインに対応しているか、Googleの掲げるモバイルファーストなホームページになっているかを調べるには、Googleが用意している診断ツールを利用することをおすすめします。
使い方は簡単で、モバイルフレンドリーか否かを調べたいホームページのURLを入力するだけです。
問題がない場合は「このサイトはモバイルフレンドリーです」と表示され、問題がある場合はその問題点を教えてくれます。
レスポンシブデザインのメリット・デメリット
レスポンシブデザインのメリットとデメリットをご紹介いたします。
メリット
ホームページの更新が楽になる
レスポンシブデザインでは、全てのデバイスに共通のファイルを使用する為、ホームページの更新作業が楽になります。
例えばテキストを少し変えたいという時、URLが別だと2つのファイルを更新しなければなりませんが、レスポンシブデザインなら1つのファイルを更新するだけですむのです。
片方のファイルを更新し忘れて、パソコンとスマートフォンで違う情報が表示されてしまうといったことも防げます。
SEOに有利
すでにご紹介している通り、どのデバイスでも閲覧しやすいレスポンシブデザインのホームページをGoogleは高く評価しています。
レスポンシブデザインというだけで一定のSEO評価が得られます。
デメリット
レスポンシブデザインに対応したコーディングが必要
ホームページはHTMLやCSSなどの言語で書かれています。
レスポンシブ化するには、まずHTMLにviewportでデバイスごとのコンテンツの表示領域（ブラウザの幅）を設定し、CSSで表示領域ごとの表示内容（デザイン）を記載していきます。
特にCSSでは、パソコン用のデザインはこれ、スマートフォン用のデザインはこれというように分けてコーディングする必要がでてきます。
デザインに制限が出る場合も
レスポンシブデザインにすると、パソコンやスマートフォンでの基本的なデザイン構造は同じになります。
そのため、多少の違いなら問題ありませんが、パソコンとスマートフォンで全く違う見た目にしたい、ということが難しいです。