レスポンシブとはPC・スマートフォン・タブレットといったデバイスごとに最適な表示にすることです。

たとえばPCでは見やすいデザインであっても、スマートフォンではレイアウトが崩れてしまうことがあります。

すべてのデバイスで同じように表示させることは残念ながら不可能です。

どのデバイスでも見やすいと感じさせるには、デバイスに合わせて最適化が求められます。

この記事ではホームページにおけるレスポンシブ対応のやり方を解説します。

Webサイトを運営するうえで非常に大切な考え方ですので、ぜひ把握しておきましょう。

レスポンシブルデザインの特徴

まずはレスポンシブルデザインの特徴について解説します。

レスポンシブルデザインがどのようなものか、まずは知る必要があります。

デバイスに合わせた表示

レスポンシブルデザインとはデバイスに合わせた表示をおこなう手法です。

PC・スマートフォン・タブレットなど、Webサイトの閲覧が可能なデバイスは複数あります。

しかしデバイスによって画面の大きさや幅・縦横のバランスなどはまったく異なります。

そのためPCでは見やすいWebサイトが、スマートフォンだと見辛いケースが多いです。

レスポンシブルデザインはデバイスに合わせてデザインやレイアウトを変えて表示します。

そのためどのデバイスでも最適な表示がおこなわれ、快適な閲覧が可能です。

ひとつのHTMLで対応

レスポンシブルデザインはデバイスによって表示が異なります。

しかし実はひとつのHTMLで対応しています。

すなわちPC版とスマートフォン版でHTMLを組み直す必要はないということです。

PCサイトとモバイルサイトをそれぞれ作るのは非常に手間になってしまうでしょう。

しかしレスポンシブはひとつのHTMLで対応できるため、それほど大きな負担とはなりにくいです。

 

レスポンシブ対応をGoogleが推奨

レスポンシブ対応はGoogleが推奨している手法です。

Googleはスマートフォンからの閲覧しやすさも評価基準のひとつにしています。

PCとスマートフォン両方ともPC仕様の表示がされるサイトは、スマートフォンに不親切と認識されます。

するとGoogleからの評価が下がってしまい、検索順位も落とされてしまうのです。

Webサイトの訪問数や閲覧数を上げるためには、検索順位を上げる必要があります。

そのためGoogleが推奨しているレスポンシブ対応は必須といえるほどの施策です。

 

Webサイト・LP制作の事例はこちら

 

レスポンシブ対応のメリット

レスポンシブ対応のメリットを紹介します。

どのようなメリットがあるか把握することで、対策を積極的に進めるためのモチベーションが上がるでしょう。

サイトが見やすくなる

サイトが見やすくなることは、レスポンシブ対応をおこなう大きなメリットです。

レスポンシブ対応をしていなければ、特定のデバイスからの閲覧のみを前提としたデザインになります。

すると他のデバイスからはサイトが非常に見辛くなってしまいます。

サイトの見やすさはユーザーからの印象にかなり大きく影響する部分です。

好印象を獲得しWebサイトでの成果を出すためにも、レスポンシブ対応をして見やすいサイトにしましょう。

多様なユーザーを獲得できる

レスポンシブ対応をすることで多様なユーザーを獲得できます。

もしPCからの閲覧前提のサイトであれば、スマートフォンで閲覧するユーザーは獲得できません。

Webサイトの閲覧はPCでおこなわれることがほとんどだった頃はそれで問題なかったでしょう。

しかし今ではスマートフォンやタブレットなど、人によってWebサイトを閲覧するデバイスはさまざまです。

そのため特定のデバイスのみを対象ユーザーとしてしまっては、他のユーザーを逃してしまいます。

多様なユーザー獲得のためにも、レスポンシブ対応をおこなうべきです。

 

レスポンシブ対応のデメリット

一方でレスポンシブ対応にはデメリットも存在します。

メリットとデメリットの両方を把握することが、適切な活用のために大切です。

工数が増える

レスポンシブ対応をおこなうことで、どうしても工数が増えてしまいます。

特定のデバイスのみを対象としていれば、考えるべきことや必要な工程も少なくて済みます。

しかしレスポンシブ対応のためには、その分の工程が追加で必要です。

これまでレスポンシブ対応をしていなかったのであれば、工数の増加に戸惑ってしまうかもしれません。

工数が増える分、必要な時間やリソースも上がってしまいます。

レスポンシブ対応によって増える工数の分を考慮し、余裕を持った計画が必要です。

デザインの自由度が低下する

レスポンシブ対応をすることで、デザインの自由度が低下します。

スマートフォンサイトもデザインの幅が広がったとはいえ、やはりPC表示には敵いません。

PCでしか実現できないデザインというものが存在します。

PCサイトの強みが特殊なデザインだったとして、同じようにスマートフォンで再現することは難しいでしょう。

レスポンシブ対応ではデザインやレイアウトをデバイスごとに最適化が可能です。

とはいえ両者の親和性やブランドイメージなどを考えると、どうしても自由度は低下してしまいます。

レスポンシブ対応のやり方

レスポンシブ対応のやり方を解説します。

正しいやり方を把握しポイントを押さえることが、適切な対応のために大切です。

ビューポートを設定

まずはビューポートを設定します。

ビューポートとはHTMLにおけるname属性値のひとつで、ヘッダ部分を指定するheadタグに記述するものです。

ビューポートを設定することで以下が可能になります。

• ユーザーが閲覧に使用しているデバイスの横幅取得
• 表示する倍率の指定
• ページズームの可否設定

レスポンシブ対応において大切なのがデバイスの横幅です。

そのためユーザーが使用しているデバイスの横幅を取得する必要があります。

また表示する倍率を指定することも可能です。ただし倍率を変更することはそれほど多くありません。

もしズーム機能が必要であれば、ズーム機能を許可するべきでしょう。

必要なければ「no」の記述をおこない、ズームできないようにします。

ビューポートの設定は、レスポンシブ対応において前提といえる部分です。

スタイルシートの条件を分ける

レスポンシブ対応においてはスタイルシートの条件を分ける必要があります。

スタイルシートとはWebサイトの見た目に関する設定を記述するものです。

このスタイルシートをデバイスによって使い分けるために条件設定をおこないます。

ここで使用するのが、ビューポートで把握したデバイスの横幅です。

横幅が指定の数値を超えているときのスタイルシート、そうでない場合のスタイルシートなど分類をします。

この条件設定をおこなうことで、デバイスの横幅に合わせた最適な表示が可能です。

CSSでメディアクエリを設定

CSSでメディアクエリを設定します。

メディアクエリとはデバイスの種類だけでなく特徴まで把握できる仕組みです。

メディアクエリの設定方法には以下の2種類があります。

• headタグにおいてlink要素として指定
• スタイルシートに指定

横幅だけでなくデバイスの向きやピクセルの比率を把握することも可能です。

デバイスや閲覧環境に合わせたレスポンシブ対応のためにもメディアクエリの設定は欠かせません。

 

Webサイト・LP制作の事例はこちら

 

レスポンシブ対応で最適な画像サイズ

レスポンシブ対応で最適な画像サイズについて解説します。

画像を適切に活かすためにも、サイズについて注意が必要です。

なるべく大きめの画像を用意する

まずはなるべく大きめの画像を用意することが大切です。

レスポンシブ対応において、画像は自動で拡大・縮小がおこなわれます。

大きな画像を縮小する場合はともかく、小さな画像を拡大しようとすると見た目が悪くなってしまいます。

そのため画像サイズはなるべく大きめにすることがコツです。

フリー画像サイトの多くは画像サイズを自由に選ぶことができます。

そのような場面では大きめの画像を選ぶと良いでしょう。

もし自身で画像を用意するのであれば、なるべくフルサイズのまま使用するようにします。

きれいな画質を維持するコツ

レスポンシブ対応のWebサイトできれいな画質を維持するコツの例は以下のとおりです。

• PCで表示されるときのピクセルあたり画素数を上げる
• 画像の縦横比はPCに合わせるようにする

レスポンシブ対応において、画像のピクセル密度がかなり重要になってきます。

ピクセル密度は1インチあたりに含まれるピクセル数で考えられ、数値が大きいほど画像解像度が高いです。

このピクセル密度ですが、PCでの表示に合わせるとスマートフォンで閲覧したとき劣化してしまいます。

そのためPCでは画像の大きさが半分以下になるように設定し、その分ピクセル密度を高くすると高画質になります。

また画像の縦横比をスマートフォンに合わせてしまうと、PCで閲覧したとき画像が大きすぎてしまうでしょう。

スマートフォンでPCと同じ縦横比の画像が表示される分には大きな問題がないため、PCに合わせます。

レスポンシブ対応の文字サイズは？

レスポンシブ対応をおこなうときに気になるのが文字サイズです。

文字サイズを指定する単位には複数の種類があります。

• px　ピクセルを1とする　大きさが固定されるため、レスポンシブには不向き
• ％　親要素に対する割合を指定　親要素の影響が大きく、文字サイズではあまり使われない
• em　親要素のフォントサイズを1とする　親要素によって変わり、同じ1でも違いが生じる
• rem　html要素のフォントサイズを1とする　古いブラウザではサポートされていない

サイズが固定されているとデバイスによって見やすさがかなり変わってしまうため、pxは避けましょう。

相対的なサイズ指定ができるemや、扱いやすいremが便利です。

レスポンシブ対応の確認方法

レスポンシブ対応が適切におこなわれているかを確認する方法を紹介します。

上手く表示されているかしっかり把握することが大切なため、必ず確認しましょう。

ブラウザの機能を利用

PCにおけるブラウザの機能を利用する方法があります。

PCのブラウザでWebサイトを閲覧し右クリックをすると「検証」という項目が表れます。

こちらは他のデバイスでどのように表示されるかを確認できる機能です。

実際に別のデバイスを使わなくても、検証機能を使えばスマートフォンなどでの表示が確認できます。

Webサイトを公開する前に、実際の表示について確認をすることがほとんどです。

その際に検証機能を活用し、スマートフォンなどでの表示についても確認するのが便利です。

実際に異なるデバイスで確認

ブラウザの検証機能でもスマートフォンでの表示が確認できますが、イメージはしにくいかもしれません。

そのため実際に異なるデバイスで確認するのも効果的です。

実際にスマートフォンなどで確認することで、PCでは気付けなかったポイントに気付くかもしれません。

自身の目で確認しないとわからないことは多いです。

余裕があれば、実際に異なるデバイスを用意したうえでチェックをすると確実です。

そのうえで修正や改善が必要と思われる部分を見つけたら、公開前にすぐ対応するようにします。

 

 

Webサイト・LP制作の事例はこちら

 

ホームページのレスポンシブ対応で困った時は？

ホームページを運用するにあたって、レスポンシブ対応は必須といえるでしょう。

多くのユーザーを獲得したうえで好印象を得るためには、デバイスによって最適な表示が必要です。

しかしレスポンシブ対応には手間や時間がかかります。

HTMLやCSSなどの知識が求められる場面もあるため、戸惑ってしまうことも多くあります。

もしレスポンシブ対応で困ったことがあればデジマクラスへご相談ください。

デジマクラスはWebサイトの制作や運用に関する実用的な知識やノウハウを多く保有しています。

そのためWebサイトのレスポンシブ対応についても効果的なサポートが可能です。

Webサイト運用において大切なのは、正しい知識や理解・効率的な進行です。

すべてを抱え込まず外部のサポートを利用するのも、有用な手段といえます。

 

まとめ

Webサイト運用をするうえで、レスポンシブ対応は必須といえる施策です。

スマートフォンの利用率が非常に高まっているなか、PCからの閲覧を前提にしては危険といえます。

Googleもレスポンシブ対応は重視しているポイントです。

スマートフォンなど、デバイスごとにデザインが最適化されることで見やすさがアップします。

ユーザーからの好印象にもつながり、集客やファン化などにおいても効果が期待できます。

Webサイトで成果を実現しようと考えるのであれば、レスポンシブ対応を進めましょう。

とはいえ知識が求められる部分も多いため、すべて自身で進めようとしては悩んでしまうかもしれません。

もしお困りのことがあれば、ぜひデジマクラスへご相談ください。

適切なレスポンシブ対応でより良いWebサイトになるようサポートをいたします。