レスポンシブデザインの仕組みとメリット

ユーザーからのアクセスがデスクトップからモバイルへと移行してきたことで、サイト制作の現場では、現在ほぼ全てのサイトがレスポンシブで制作されるようになってきました。

これはユーザーのアクセシビリティに加えて、SEOや制作面におけるメリットが大変大きいからです。

ディレクターとして経験が浅い方はそもそもレスポンシブがどのようなものかわからないという方もいらっしゃるかもしれません。制作に携わる以上基本的なことは理解しておきたいですよね。

そこで今回はレスポンシブデザインについて基本的な仕組みから、レスポンシブで制作するメリットまで解説したいと思います。

レスポンシブデザインの仕組み

レスポンシブデザインとはiphoneやipad、パソコンなど様々なデバイスがある中で、それぞれの画面サイズに合わせて適切なデザインを表示すること、デバイスの画面サイズに依存しないwebサイトを構築する手法のことをいいます。

ユーザーが使うそれぞれのデバイスのウィンドウ幅に応じて、見やすい表示に自動で切り替わるようになっているデザインのことを言います。。

プログラム上ではブレイクポイントというものが設定されていて、例えば画面幅が768px以下になれば4カラム（列）で一覧表示されていたものが、2カラムになるといったような指示を出し、閲覧しているデバイスの幅に応じて自動的にサイト表示が切り替わるようになっているんですね。

アクセシビリティ（ユーザーの使いやすさ）という点においてレスポンシブデザインでサイト制作をするということは非常に重要だと言えます。

例えば皆さんもスマホでPCサイトが表示されると

・字が小さくて見にくい
・リンクが押しにくい

といった不便さを感じたことありませんか？

こうした使い勝手を考慮し、ユーザーがインターネットで情報にアクセスしやすい環境を提供するということは制作者の使命でもあるのです。

Googleはこのレスポンシブデザインを推奨していて2015年の4月にモバイルフレンドリーアップデートというものを行いました。

これはモバイル端末に対応しているページの検索順位を引き上げるもので検索エンジン対策、SEO上の観点からも有効です。

これは上記でも触れましたが、最近はスマホの普及によりスマホやタブレットを使うユーザーが急激に増えたためで、私たちWeb制作者は、画面サイズが大きく異なるPCとスマホの両方から閲覧されていることを意識する必要があります。

特に若い世代のほとんどはスマホからのアクセスになるため、マルチデバイスの流れに対応するためにもレスポンシブデザインを導入し、どのデバイスからアクセスしても見やすい最適なサイトを表示をする必要性が高まっています。

ユーザーへの使い勝手、SEOの観点からのメリットについて語ってきましたが、サイト管理においてもメリットがあるのがレスポンシブデザインです。

レスポンシブデザインが普及する前というのは、PC用のサイトとスマホ用のサイトを別ドメインで制作している時期がありました。

別ドメインにしなくても、アクセスするデバイスによってPCサイトを表示、スマホサイトを表示という形で切り替えていたりしました。

いずれにしてもPCとスマホで別々のソースを書かなくてはいけないわけです。

こうなるとですね、実に面倒な手間が発生するんですよね。

例えばクライアントからの修正の要望があり、一部の修正を行う際、場合によってPCとスマホの2サイトの修正が必要になるわけですよね。

規模の大きな制作会社になると数百から千以上のクライアントのサイトを管理しているでしょうから、クライアントによってはPCサイトしかないクライアントもいれば、両方あるクライアントもあったりします。

そうなると「ここのクライアントはPCだけだったのか？スマホもあるのか？」と確認する必要があるわけです。まず確認の手間が発生するわけです。

またどっちかの修正だけやって、どちらかを忘れたなんてこともあるかもしれません。

実は私も過去に大きな過去を犯したことがありました。

それはサイト公開時にタイトルとディスクリプションを設定する際、ディスクリプションをPCサイトにのみ設定し、スマホには設定せずに公開してしまったなんてことがありました。

お客様から指摘されて気付いたのですが、管理するWebディレクターとしてはお話しにならない失敗ですよね。

そうした意味ではレスポンシブでサイト制作をすることは管理を一つにまとめることができることで、ミスも防げるというメリットもあるのです。

レスポンシブデザインのメリットをまとめると、スマートフォンなどの小さな端末で閲覧した際の見やすさ・使いやすさの向上、URLが1つであるためリンクの共有をしやすいこと、Googleが推奨しているため、検索順位に有利に働くことなどに加えて、更新やメンテナンスがしやすい点などが挙げられました。

制作面でもレスポンシブデザインを採用すると共通のwebサイトを1つ構築すれば済むため、 PC用とモバイル用に分けてサイトを作る必要がありません。

URLやHTMLも1種類ずつページ毎に用意すれば良いので、サイト構造がとてもシンプルで管理しやすくなるのです。