サイト運用コラム

ホームページ制作にあたり

‹‹ コラム一覧へ戻る

3-8レスポンシブデザインのホームページとは

 2015年調べのスマートフォンの所持率は67.4%となり、初めてスマートフォン以外の所持率を上回りました。ホームページを作る上でスマートフォン対応は避けられないものとなっています。
 また、まだまだ、ガラパゴス携帯を所持している方も多いのが実情です。そんなインターネット事情の中で、ホームページを作成する際には、スマートフォンサイト、携帯サイト、PCサイトの3つの様式を考えなくてはならないのです。




   従来では、そのために3つのHTML文章を記述していました。

 
パソコンで閲覧している際はパソコン用のHTMLが表示され、スマートフォンで閲覧している場合はスマートフォンのHTMLが表示され、ガラパゴス携帯で閲覧する場合はガラパゴス携帯用のHTMLが表示されていたのです。この3つの手間は大変なことです。
 また、SEO対策として考えても、別々のページが作成されていたわけですから、アクセスも分散してしまっていました。


   そのような苦労もあってか、近年ではレスポンシブWebデザインを採用するページが増えてきました。

 レスポンシブデザインはOSやブラウザを判断基準にして表示するのではなく、ブラウザの横幅のサイズを判断基準にしてcss(スタイルシート)を切り替えてページを表示する方法です。

 レスポンシブデザインでは、HTML文章は一つ、ページを作るのは一つで済みます。スタイルシートの設定を幾つか作ることで全てのブラウザに対応できるのです。今では、ホームページを閲覧する方法も増え、携帯だけでなく、タブレットでホームページを閲覧する人も増えてきました。

 そのような多様化する閲覧方法にも対応するためにも、レスポンシブデザインは有効なのです。スタイルシートの設定を増やすだけで対応できるのです。  

 また、グーグルがサイトの構築方法としてレスポンシブWebデザインを推奨しています。レスポンシブデザインにすることによってURLが統一されるために、ユーザーがサイトをシェアしやすくなるのです。つまり、サイトのユーザビリティーが向上するために、検索エンジンの評価も高くなるのです。





   しかし、いいことばかりでもありません。

 
スタイルシートで設定していたとしても、見えないだけで実際にはそのコードが存在しています。スマートフォンなどでレスポンシブサイトを閲覧した時は、表示されるのに少し重くなる可能性もあります。

 また、スタイルシートの設定を多くすると構築に時間がかかります。HTML文章自体も、レスポンシブデザインを念頭に置いて書いていかなければならないため、複雑になってきます。

 さらに、スマートフォンでPCサイトを見たい場合などに見ることができなかったり、スマートフォンやタブレットの横向きと縦向きで、ガラリと違うデザインになったりと混乱を招く可能性もあるのです。






 レスポンシブデザインのホームページを作る際にも、メリット・デメリットを理解してから手がけるようにしましょう。

 

Column