岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

レスポンシブデザインとは?今最適なスマホ対応の方法

公開日: : ホームページ制作関連

レスポンシブデザインとは?今最適なスマホ対応の方法_カバー画像

レスポンシブデザインとは簡単に説明すると、PC、タブレット、スマホなど様々な端末の画面サイズに合わせてホームページのデザインが変化する技術です。

現在では、PC、タブレット、スマホなどホームページが見られる環境が多様化しています。レスポンシブデザインを導入すれば、画面幅に合わせてデザインレイアウトを変化させられるので、ほぼすべての端末でホームページを見やすいデザインで表示することができます。

こう書くと完璧な技術じゃないですか!と思いますが、実はメリットの他にも、デメリットもあります。

この記事では、一般の方に分かりやすくレスポンシブデザインの仕組み、メリット、デメリットを説明していきます。

自社サイトなどに導入する際の参考にしていただけると幸いです。

レスポンシブWebデザインの呼び方(名称)

レスポンシブwebデザインの呼び方(名称)

レスポンシブウェブデザイン、レスポンシブデザイン、レスポンシブなどいくつか表記のされ方がありますが、基本的に同じ意味です。正式な単語としては、「レスポンシブwebデザイン」「レスポンシブウェブデザイン」となります。

個人的には、レスポンシブなデザインはwebにしかないので、webは省略して「レスポンシブデザイン」と表記したり言うことが多いです。

レスポンシブWebデザインとそれ以外のスマホ対応比較

PC用とスマホ用サイトを別々で対応する方法

PC用とスマホ用サイトを別々で対応する方法

PCサイトとスマートフォンサイトを別々で制作する方法です。スマホサイトの表示対応には幾つか方法があります。1.URLをPCとスマホで切り替えて表示させる方法。

2.URLは同一にしてサーバーサイドでアクセスされた端末を自動判別して表示される方法などが代表的です。

URLを切り替えて運用すると管理の手間が倍増するので、2.のURLは統一して対応するほうが一般的です。

レスポンシブwebデザインのスマートフォンへの対応方法

レスポンシブwebデザインのスマートフォンへの対応方法

レスポンシブデザインの特徴は、HTMLのファイルが1つでアクセスされた端末の画面幅に応じて表示を切り替えます。

CSSメディアクエリを利用した記述により表示を切り替えているので、CSSのコード量は増えますが、上記の1ページにHTMLテンプレートが2つ必要になる方法よりも管理がラクで、多くの端末に最適化することができます。

レスポンシブ対応サイト表示例

MWORKSで制作したサイト例です。画面幅に対応して見やすくなるようCSSでデザインを調整しています。

PC幅

レスポンシブ_PC幅

タブレット幅

レスポンシブ_タブレット幅

スマホ幅

レスポンシブ_スマホ幅

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

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

htmlファイルが一つでいい(作成・修正する際の運用がラクになる)

上記で図解しましたが、レスポンシブwebデザイン以前の方法ですと、テンプレートを複数用意するので修正が必要な場合、PC用とスマホ用それぞれのファイルを修正する必要があります。

レスポンシブWebデザインであれば、htmlファイルが一つなので修正が簡単です。
(CSSの記述は端末毎にされている箇所もあるので、こちらは両方修正が必要な場合があり注意が必要)

より多くのユーザー環境に対応できる

以前は、PC、スマホなどテンプレートを用意して複数の端末で見せる場合、どちらかを見せるという選択肢しかありませんでしが、レスポンシブwebデザインでは、画面幅に対応してレイアウトが変化させることが可能です。

端末毎ではなく画面の横幅毎でデザインを最適化することで、ユーザーに見やすい環境を作ることができます。

シンプルなサイトであれば作業が少なく構築できる

以前は端末毎に複数のテンプレートを作成する必要がありました。またアクセスされた端末を判定してテンプレートをPC用かスマホ用に振り分ける設定も必要でした。

レスポンシブWebデザインは1ページのwebページに対して、1つのテンプレート(htmlファイル)で済むのでその分作業工数を減らすことができます。

とは言え、レイアウトの変化はCSSの記述でPC、タブレット、スマホなど対応させたい画面幅分必要になるので、サイトが複雑になる場合はレスポンシブWebデザインが向いていない場合もあります。サイトの構成を見て導入の判断をすることが必要です。

Googleがレスポンシブデザインを推奨している

検索エンジンを開発しているGoogleがレスポンシブWebデザインを推奨しています。上記で説明した「PC用とスマホ用サイトを別々で対応する方法」と比べて、以下のような点でメリットが多いとGoogleも考えているようです。

  • ユーザーがページをシェアやリンクしやすくなる(URLを同一にできるので)
  • ページ読み込みの時間が短縮される(リダイレクトが必要ないので)
  • リダイレクトの設定が必要ない(導入時作業が必要なくなる)
  • アクセス解析がしやすい(URLが同一になるので)


Googleがレスポンシブウェブデザインをオススメする理由

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

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

スマホで表示が遅くなることがある

htmlファイルが1つで済むことがメリットなのですが、その点に関してデメリットがあります。

スマホはPCに比べて処理能力が低いので、サイトで読み込むコードの記述量が多くなる場合や、画像サイズや数が多い場合は、表示が遅くなる場合があります。

また、PC側では表示させて、スマホ側では表示させたくない画像やテキストがある場合は、スマホ側で非表示(display:none)にできますが、htmlのコードは読み込まれてしまいます。

表示速度の改善にはレスポンシブwebデザイン特有のスキルが必要になります。

CSSの記述が増える

htmlファイルは1つで済みますが、PC、タブレット、スマホなど画面幅に対応させる方法として、CSSのコードを使用しています。

細かな部分まで最適化させることは可能ですが、その分CSSの記述が増えることになり、その分ブラウザが読み込むCSSの分量も増えることになります。

あまり増えすぎると、表示速度に影響する場合もありますので、最適化させる範囲の検討、記述方法の整理、CSSの圧縮などをして対応することが必要です。

スマホでPCデザインを見たい時に見ることができない(別途対応をすれば可能)

通常のレスポンシブwebデザインで構築したサイトは、スマホでサイトを閲覧している際に、PCデザインを表示することができません。

レスポンシブwebデザインによって、スマホで見やすく最適化しているはずなので、基本的にPCデザインを見る必要はないと思います。

しかし何かしらの理由でPCサイトもスマホ上で確認できるようにしたい場合は、別途対応が必要となります。

サイト構成的に向いていない場合がある

レスポンシブwebデザインによる、メリットは大きいのでスマホ対応のために最近では多くのサイトが導入しています。しかし複雑なサイトやPCとスマホのコンテンツ内容を大きく変えているサイトなどには向いていません。

上記に説明したように、コードが増えて作業工数が増えますし、修正や運用も複雑になります。

表示対応箇所が増えて表示が遅くなることにもつながるので、そのようなサイトには別でスマホサイトを制作した方良い場合もあります。

まとめ

【レスポンシブWebデザインとは?今最適なスマホ対応の方法】でしたが、レスポンシブWebデザインは現在新しく制作されるホームページでは多くのサイトが導入している技術になります。

MWORKSでも最近はほぼすべてと言えるくらいレスポンシブでスマホ対応を行っています。

今回はデメリットも紹介していますが、対策を行えば問題ないですし、ほとんどのサイトにとってレスポンシブWebデザインはメリットの方が上回ると思います。

レスポンシブWebデザインの導入で、ユーザーやGoogle検索エンジンにとって、使いやすく読み取りやすいサイトを運営することで、Webを活用してビジネスで成果を上げていきましょう!

この記事の他に、ホームページ制作関連のブログ記事も公開していますので、ホームページ制作|記事一覧をご参考くださいませ。

ホームページ関連おすすめ記事

ホームページに目的は必要?代表的な例8つ

会社ホームページを開設するメリット、デメリット

お問い合わせはこちら

MWORKSでは、この記事で取り上げた『ホームページの目的』を形にするサービスを提供しています。

『ホームページを開設したいけど、どこに頼めばいいかわからない…』
『自社で運営しているが、成果がぜんぜん上がらない…』など、
お困りの点がありましたら、お気軽にお問い合わせください。

お電話、メールフォームから、ご都合に合わせてどうぞ。

【MWORKSでは、個人事業主の方、中小企業の商売の役に立つサービスを提供しています。】

ホームページ制作の内容はこちら >>

Webマーケティングの内容はこちら >>

サービス・プランの内容はこちら >>


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています