CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM9:30~PM6:30

スタッフブログ | レスポンシブデザインとは
スタッフブログ
レスポンシブデザインとは

レスポンシブデザインとは
そもそもレスポンシブデザインとは何を指すのでしょう。

Google は、

ユーザー のデバイス (パソコン、タブレット 、モバイル、非視覚的ブラウザ )に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)表示を変えることができます。

https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config?hl=ja
Google 検索エンジン は以下の3種類のモバイルサイトを認識しています。

1.レスポンシブデザイン
2.動的な配信(PHPなどによって吐き出されるページ 。実際のHTML ファイルは存在しない)
3.別々の URL (PC向けのHTML とモバイル向けのHTML を別々に用意し、URL も分けられている状態)

この3種類のなかで、Google はレスポンシブデザインの使用を推奨しています。
レスポンシブデザインの場合、どのデバイス に対しても共通のURL ・HTML ・CSS ファイルを使用しているため、例えばスマホでは通常に表示されているのにタブレット では表示エラーが起きる、という事象を避けることができます。

表示エラーが少ないとユーザビリティ が向上するという点や、Google 検索エンジン のクローラー の巡回の手間が少なくなるという利点もあるため、Google はレスポンシブデザインの使用を推奨しているのです。
レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド

ただ、レスポンシブデザインの使用を推奨しているものの、検索順位には特に影響は無いとGoogle は明言しています。
具体的にはどのようなメリットがあり、どのようなデメリットがあるのでしょうか。

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

先にも記載したとおり、レスポンシブデザインのメリットとしては、どのデバイス でも同一のファイルを利用できるため、管理が非常に簡単になることと、デバイス毎の表示エラーを減らせることにあります。

主なメリット

現在多くのブラウザ によってサポートされているCSS 3を使用しているため、汎用的である。より多くの人に見てもらえる。


カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになる。そのため、サイト上の情報を適切に得ることができる。


HTML を分けるモバイルサイトでは、デバイス の数だけHTML を増やしていかなければならないが、レスポンシブで制作すればHTML ファイルは同一なので管理がしやすい。修正も1つのHTML だけでよいので、モバイルサイトは古いままといった事態を防げる。

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

レスポンシブデザインを導入した際のデメリットは、スマホサイト 上で起こるものが多くあります。
パソコン用の情報をスマホで読み込むというのは、パソコンよりもスペックが劣るスマホにとっては、データ読み込みなど負荷のかかる作業になります。

スマホでの読み込み時間の遅さは、ユーザビリティ に大きく影響するため、掲載する情報はシンプルにしてできるだけ読み込みに時間がかからないようにすることが重要です。

主なデメリット


PC用のHTML コードやCSS も読み込むため、表示に時間がかかる。CSS で画面に表示しないようにしても、読み込みは行われるため、ユーザー が待ちきれなくなる恐れがある。


画像も同様。PC用の大きい画像では携帯用の3G/4G回線で読み込むのに時間がかかる。

シンプルなページ であればよいが、レスポンシブサイトの制作は通常より工数がかかる場合が多い。

PCサイトのテキストや画像が多すぎる場合、スマホページ では文字が溢れてしまうなどレスポンシブ化は難しくなる。

まとめ

Google が推奨しているとはいえ、レスポンシブデザインが最も正しいということはありません。
上記で紹介したようにデメリットも存在するため、あくまでデザインの選択肢の一つとして捉え、自社のターゲットユーザー がどのようなデバイス を使い、どのようなシーンで自社ホームページを利用するかを考え、最適なデザインを選択しましょう。

また、タブレット やスマホの新商品が次々と発売され、ディスプレイ サイズもまだまだ多様化していくことは明らかです。
どのような表示サイズ、表示方法がトレンドなのか、ではそれに合った見せ方は何なのかも常に模索する必要があります。



| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=91 |
| 《デザイン&SEO》のホームページ作成|制作 | 02:50 PM | comments (x) | trackback (x) |

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

リュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM9:30-PM6:30

無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00~PM7:00

スタッフブログ | レスポンシブデザインとは
CSS