レスポンシブデザインはGoogleにも推奨されているWebデザインのひとつです。スマートフォンユーザーが増加し、PC以外にもさまざまな画面サイズのデバイスからWebページへのアクセスが増えたことをきっかけに注目されるようになりました。今回はレスポンシブデザインとは何か、知っておきたいWEBデザインの基礎知識について紹介します。
レスポンシブデザインとは
レスポンシブデザインとは、Webサイトのデザインスタイルのひとつで、閲覧者の画面サイズに合わせてページレイアウトを最適化するデザインのことを指します。レスポンシブウェブデザイン、と表現することもあるのです。
PC向けに作られたサイトはスマートフォンから閲覧するとレイアウトが崩れて見にくい場合があります。逆にスマートフォン向けに作られたサイトをPCから見ても、意図したレイアウト表示はされず見にくいことがあります。
これまではこの問題を解決するため、Webサイト運営者はPC向けとタブレット向け、スマートフォン向けの複数のコンテンツを用意し、アクセスするデバイスに合わせてページを描画していました。
これによってレイアウトが崩れて表示されることは回避されますが、ページを新規に作成したり、既存のページ内容を更新したりする場合に通常の数倍の労力がかってしまうのは管理者にとってはかなりの負担です。それを解決するのがレスポンシブデザインです。
レスポンシブデザインのメリット
レスポンシブデザインは、デバイスに合わせてページレイアウトを最適に微調整する機能をもつため、ページの修正や更新といった管理が簡単になります。また、デバイス毎の表示エラーを減らせるというメリットもあります。デバイスごとに異なるページを用意しなければならないところを一つのページにまとめることができるため、URLの管理が容易なことも挙げられるでしょう。
また、ユーザーコメントを取得するサービスを取り入れている場合、アクセスが1か所に集中するため評価・レスポンスが分散しないというのもメリットです。レスポンシブデザインは現在多くのブラウザでサポートされているCSS3を使用しているので、より多くの人に見てもらえるのも魅力です。
レスポンシブデザインのデメリット
レスポンシブデザインのデメリットとして、制御を担当するCSSの記述が複雑になることや、デザインレイアウトの制約を受けることが挙げられます。そのため表示するデザインが似てしまう傾向があります。
また、スマートフォンからのアクセスする場合には表示に時間がかかることがあるのです。これは、PC向けの掲載情報量の多いサイトをPCよりスペックの低いスマートフォンで読み込む場合データ読込に時間がかかってしまうためです。なかなかページが表示されないことでユーザーが待ちきれずにページから離脱してしまう可能性が高まります。
レスポンシブデザインの作り方
レスポンシブデザインの記述はHTMLファイルとCSSファイルを組み合わせて行います。
レスポンシブデザインでは、Webページにアクセスが想定されるデバイスの画面サイズを設定が必要です。一般的なPCモニタの画面サイズは1,280px以上、スマートフォンの画面サイズは320～540px、タブレットの画面サイズは600～1,024pxの範囲です。この範囲内で、各デバイスの端末サイズを決定します。
次にHTMLファイルにviewportタグを追加し、ユーザーがWebページにアクセスした際にデバイス情報を取得できるようにします。
次にCSSファイルでメディアクエリを使用して、画面サイズごとにデザインスタイルの切り替えを指定しましょう。たとえば画面サイズを1,024pxの範囲で指定する場合は“@mediascreenand（min-width:1024px）{}”、768～1,000pxの範囲内で指定する場合には“@mediascreenand（min-width:768px）and（max-width:1000px）{}”と記述し、{}内に適用させたいスタイルのコードを追加します。
メディアクエリは設定したいデバイスの分記述を行います。メディアクエリは記述の順番にも意味があり、画面サイズが小さい順に上から記述するモバイルファースト、画面サイズが大きい順に記述するデスクトップファーストがあるのです。
HTMLとCSSをレスポンシブ用に記述したら、実際にＷebページの見え方を確認します。PCのデベロッパーツールを使うことで、PC上からスマートフォンやタブレットでの見え方をチェックできます。また、Googleが提供しているモバイルフレンドリーテストというツールを使うことで、Webページがレスポンシブ対応になっているか確認することが可能です。
レスポンシブデザインを作るときの注意点
レスポンシブデザインを作る場合は、複数のデバイスで確認することが大切です。ページを拡大・縮小した際やスマートフォンの画面を横にした際など、いろいろなケースを想定してデザイン崩れの検証を行いましょう。
スマートフォンでも画面が大きめのものと小さめのものがあるので、可能であれば両方のサイズを使って実際に動作確認できれば望ましいです。正しい挙動をしない場合のありがちなバグとして、コードの書き間違いやサイズの設定ミスなどが考えられます。
また、レスポンシブデザインを作成する際には、画面サイズの小さいモバイル版ページからの作成がおすすめです。閲覧ユーザーが増えていることに加えて、画面幅に制約があるため、PC版ページなどの大きい画面サイズから縮小した場合の見づらさを回避できるからです。
Webページのデザイン方法の一つ、レスポンシブデザインについてご紹介しました。レスポンシブデザインはHTMLとCSSを組み合わせることで記述が可能で、アクセスが想定されるデバイスの画面サイズを指定することで、デバイスごとに画像や画面の表示スタイルを切り替えることができます。
レスポンシブデザインを導入することでデバイスごとにコンテンツを用意する労力を軽減できます。レスポンシブデザインを取り入れる際は、画面サイズの小さいモバイル版ページから作ると、大きい画面サイズから縮小した場合の使いづらさを回避することが可能です。
