レスポンシブデザインとは
生活に欠かせないインターネットは、多くの人がスマートフォンで接続するようになりました。パソコンの画面が横長なのに対し、スマートフォンの画面は縦長です。以前は各デバイスに合わせ、デザインを作ったこともありました。
その問題を解決したのが『レスポンシブデザイン』です。そもそも、レスポンシブデザインとは何なのか、詳しく見ていきましょう。
画面の大きさに関係なく見やすいデザイン
レスポンシブデザインをひとことで言うと、パソコンやスマートフォン、タブレットなど、デバイスの画面の横幅に合わせて、自動的にデザインを変えてくれる仕組みのことです。レスポンシブデザインを使わない場合、パソコン用、スマートフォン用と、別デザインを作る必要があります。
しかし、レスポンシブデザインなら、全てのデバイスで1つのデザインを共有できます。同じサイトなのにデバイスによってデザインが違うと、違うサイトを見ていると勘違いさせてしまうことも。デバイスが違っても同じデザインが表示されることは、ユーザーに安心感を与えます。
横幅毎にレイアウトが変化
レスポンシブデザインなら、パソコンで見るデザインも、横幅が狭いスマートフォンで見た場合、自動的にレイアウトが変わります。パソコンで見ると写真の横に文章があるデザインも、スマートフォンで見ると、写真の下に文章が表示されたりします。
レスポンシブデザインの重要性
検索でよく使われるGoogleも、スマートフォンからの検索の増加から、スマートフォン利用者が見やすいホームページを上位表示させる取り組みもされています。ここでは、なぜレスポンシブデザインが大切なのかを詳しく見ていきましょう。
スマホユーザーの増加に対応しよう
調べ物でインターネットを活用する人が増えました。以前であれば、パソコンでインターネットに接続するのが普通でしたが、近年では、スマートフォンを利用する人が増えています。
総務省が調査した平成29年通信利用動向調査の結果によると、世帯におけるスマートフォンの普及率は、平成22年は9.7%だったのに対し、平成29年には75.1%と8倍以上の伸びです。スマートフォンは携帯する人が多く、電源が入っているためすぐに見られる利便性もあります。
インターネットを見る時の利用機器調査では、半数以上がスマートフォンを利用しており、今後ますますその数は増えてくるでしょう。
レスポンシブデザインの注意点
良い点が多いレスポンシブデザインですが、決して万能ではありません。ここでは、レスポンシブデザインを使うデメリットと、レスポンシブデザインを使う上での注意点を見ていきましょう。
ターゲットによっては効果が期待できない
メリットが多いレスポンシブデザインですが、サイトによって向き不向きがあります。
レスポンシブデザインの良いところは、1つのテキスト情報が全てのデバイスで使われることです。テキスト情報がよく更新されるサイトでは、パソコンサイトは更新したのにスマートフォンサイトは以前のままでということがなくなるので、レスポンシブデザインが向いています。
また、ECサイトは商品の仕様、価格、写真など、必要な情報がほぼ決まっています。デバイスによって情報を加減する必要がほとんどないので、レスポンシブデザインでサイトを作ると良いでしょう。
表示速度に気を付けよう
レスポンシブデザインのサイトは、スマートフォンユーザーにサイトが重いと思わせることがあります。理由は、スマートフォンサイトの場合、パソコンサイトに比べて、表示される情報量が少ないことが多いのですが、読み込むファイルは同じ量だからです。
そのため、情報量が少ないのになぜか表示が遅いというストレスを与えてしまい、離脱につながることがあるので気をつけましょう。
デザイン構築に時間とコストがかかりやすい
これまでのサイト設計では、デバイスごとに別のデザインを使っていたため、パソコン用とスマートフォン用を分けて考えることができました。しかし、レスポンシブデザインは全てのデバイスに対応するので、サイトの設計からデザイン、コーディングにこれまで以上の工数が必要です。
また、レスポンシブデザインでは、画面が小さいスマートフォンサイトでも見やすく操作しやすいデザインでなければなりません。どのデバイスで見てもデザインや操作性に問題がないかを確認するため、コンテンツの精査にも時間がかかります。
そのため、レスポンシブデザインのほうが構築コストは高くなる傾向があります。
レスポンシブデザインの作り方
いよいよレスポンシブデザインの作り方を見ていきましょう。レスポンシブデザインは同じデザインのサイトが、デバイスの画面幅に合わせて見え方を変えます。パソコンで見える横長の表示を縦長のスマートフォンでも最適化して見えるように、ブレイクポイントの設定が必要です。
ここでは、ブレイクポイントについてと、ユーザーにふさわしい最適化について詳しく見ていきましょう。
まず、ブレイクポイントとは何か
パソコンで見ると、画像の横に文字が表示されているホームページをがあります。同じホームページをスマートフォンで見ると、画像の下に文字が表示されていたりします。これは、画像と文章の間にブレイクポイントを設置しているからです。
このように、横幅のあるデザインに区切りを作って、デバイスによって見え方を変える境界線のことをブレイクポイントと言います。
ブレイクポイントは複数設置できます。例えば、600ピクセル未満、600～1280ピクセル未満、1280ピクセル以上の3種類を作りたい場合は、600ピクセルと1280ピクセルの2点がブレイクポイントです。デバイスごとに表示を分けたいときは複数のブレイクポイントを使います。
よく使われている画面サイズを確認しよう
例えばスマートフォンだけを見ても、画面の幅はメーカーや機種によって違います。となると、開発者としては、ブレイクポイントをどこに設定するか、ブレイクポイントをいくつ設定すれば良いのかで悩むのではないでしょうか。
ブレイクポイントに絶対はありません。ブレイクポイントを増やすことはプログラムの不具合につながりやすくなります。仮に、全デバイスに対応するブレイクポイントを設定しても、今後新しいサイズのデバイスが出る可能性もあります。
解決策としては、アクセス解析でよく使われているデバイスを分析し、多くのユーザーに使われている画面サイズでブレイクポイントを設定するのが良いでしょう。
ターゲットやデザインにより細かい最適化を
レスポンシブデザインは当初、パソコンと同じデザインをスマートフォンでも見られるようにするという意味合いで使われてきました。しかし最近では、さまざまな画面サイズのデバイスが登場し、あらゆるサイズに対応することが求められる場合があります。
そして、レスポンシブデザインで大切なのは、全ての解像度でスムーズに表示できることです。ブレイクポイントの設置場所も大切ですが、無段階に画面サイズを変えつつ、どのデバイスでもデザインが表示されるかを確認する必要があります。
ブラウザで確認する場合は、Google Chromeのデベロッパツールや、Safariのレスポンシブデザインモードを使うと良いでしょう。
メディアクエリを知ろう
メディアクエリとは、コードを使ってブレイクポイントを設置することです。コードの書き方にも2種類あり、パソコンとスマートフォン、どちらのメディアを中心にするかによって書き方が異なります。基本的なCSSの書き方を通してブレイクポイントの書き方を見ていきましょう。
レスポンシブ対応に欠かせない要素
横幅のあるデザインに区切りを作って、デバイスによって見え方を変える境界線のことをブレイクポイントと言いますが、実際に、コードでブレイクポイントを書くことを『メディアクエリ』と言います。
例えば<link rel="stylesheet" href="css/style.css" media="screen">というコードでは、アクセスしているデバイスの種類はわかっても、画面の大きさによって見せ方を変えることはできません。これまではできなかった画面の大きさで見せ方を変える方法がメディアクエリです。
PCファースト、モバイルファーストとは
メディアクエリには2種類の書き方があります。一つが『PCファースト』、もう一つは『モバイルファースト』です。
PCファーストは、パソコンサイトのデザインを組んでから、モバイル表示で崩れてしまう部分をメディアクエリで記述する方法です。一方のモバイルファーストは、スマートフォンサイトのデザインを組んでから、パソコン表示で崩れる部分をメディアクエリで記述する方法です。
サイト設計の際には、パソコン、モバイルのどちらを中心にスタイルを組んでいくかを先に決めておく必要があります。
基本のCSSの書き方
メディアクエリの記述にはいくつか方法がありますが、ここではCSSの基本的な書き方をご紹介します。
/* パソコン */
@media screen and (min-width: 961px) {
/*パソコン用スタイルを記述*/
}
/* タブレット */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*タブレット用スタイルを記述*/
}
/* スマートフォン */
@media screen and (max-width: 640px) {
/*スマートフォン用スタイルを記述*/
}
こうして画面の大きさによって見せ方を分けます。
min-width、max-widthで指定
CSSでメディアクエリを記述する場合、min-widthで画面の最小幅を、max-widthで画面の最大幅を指定します。先ほどの例で言えば、ブレイクポイントを2箇所に設置しています。
画面幅が640ピクセルまではスマートフォン用デザインを使い、641ピクセルから960ピクセルまではタブレット用デザインを使い、961ピクセル以上ならパソコン用デザインを使う設定になります。
CSSフレームワークを使ったレスポンシブ対応
ここではCSSフレームワークを使ったレスポンシブ対応についてご紹介します。CSSフレームワークを使うメリットは、簡単にレスポンシブデザインのサイトが構築できるため、サイトの作成時間を短縮できることです。
CSSフレームワークの中でも、よく使われているフレームワークがBootstrapです。Bootstrapに対応したWordPressテーマも出ていますので、詳しく見ていきましょう。
CSSフレームワークとは
フレームワークとは、プログラミングで必要なある機能を持った枠組みのことです。ライブラリと似ていますが、ライブラリは呼び出し側でプログラム全体の制御構造を指定することができないため、別物としています。
CSSフレームワークの代表的なものに『Bootstrap』があります。Bootstrap最大の特徴は、情報量が多いサイトでも素早く開発ができること、主なブラウザとの互換性がある使いやすさです。サイト作りに必要なボタンやメニューなどの部品がテンプレートになっているほか、ソースの流用も可能です。
レスポンシブルデザインへはバージョン2.0以降で対応しています。
Bootstrapで細かく分岐
Bootstrapでは『グリッドシステム』という手法が使えます。グリッドシステムとは、デザインのレイアウトを格子のように分けて配置するデザイン手法です。グリッドシステムを使うことで、デザインの縦位置を簡単にそろえることができます。
Bootstrapでは12カラムのグリッドシステムが使われており、レイアウトを縦に最大で12分割できます。カラムには片方15ピクセルのグリッドカッターというpaddingがつき、paddingの幅は自由にカスタマイズができるので、見やすいコンテンツデザインが作れます。
Bootstrapのテンプレート
アプリランディングページ用WordPressテンプレートAPPは、Bootstrapの便利なテンプレートの1つです。
APPはWordPress公式の有料テーマで、テーマの設定もWordPressの管理画面で簡単にできます。CSSフレームワークの最新版、Bootstrap4に対応しているため、品質や保守性はもちろん、高い拡張性があるのが特徴です。
APPのオリジナル機能として、レスポンシブデザインのみならず、ユーザー自身がパソコン表示に切り替えることができます。デザインの一貫性を保ちたいユーザーにおすすめの機能です。
出典：アプリランディングページ(LP)用WordPressテンプレート | LIQUID PRESS
レスポンシブデザインを確認する方法
レスポンシブデザインを使った場合、どのデバイスでもデザインが崩れず表示されるかを確認する必要があります。しかし、その都度スマートフォンで確認して、パソコンで確認してを繰り返すのも面倒ですよね。Safari、Google Chromeでレスポンシブデザインを確認する方法をご紹介します。
Safari レスポンシブデザインモードの使い方
safariの開発ツールには、レスポンシブデザインモードがあります。メニューの『開発』から『レスポンシブ・デザイン・モードにする』を選択します。デバイスの一覧からデバイスを選べば、各デバイスでデザインが崩れていないかを確認できます。
レスポンシブデザインモードの便利なところは、Macなのにインターネットエクスプローラーでの表示も確認できるところと、解像度も変更しながら表示を確認できることです。Webインスペクタも同時に使えるので、開発作業がかなりはかどるのではないでしょうか。
Google Chromeの場合
GoogleChromeの場合、このような手順でスマートフォン表示を確認できます。
- F12を押し『Developer Tools』を開きます。
- 画面右上の『>_』をクリックします。
- 下に枠が表示されるので『Emulation』をクリックします。
- 表示されるスマートフォンマークをクリックします。
- 『Device』の『Model』から確認したい機種を選びます。
- F5を押して画面を更新します。
画面をパソコン表示に戻す場合は『Reset』を押すか『Developer Tools』を閉じ、F5を押して画面を更新すればパソコン表示に戻ります。
参考になるレスポンシブデザイン事例
参考になるレスポンシブデザインサイトを2つご紹介します。東京農業大学、マクドナルドとも、画面の変化に合わせてスムーズにデザインが変わるので、サイトづくりの参考にしてください。
東京農業大学
東京農業大学のサイトは、画面の大きさに合わせてデザインの配置が見やすいように切り替わります。
パソコンで見ると、左横に学校の写真があり、情報は右横に集約されています。画面の幅が一定以下になると、右横の情報部分が学校の写真の下に配置され、どの画面幅でもデザインを崩さずスムーズにサイトを見ることができます。
- 公式サイト 東京農業大学
マクドナルド
マクドナルドのサイトの特徴は、情報を横スライドで表示していることです。アイコンを並べると、スマートフォンで見た時に縦に長いサイトになりますが、情報を帯状に並べて自動的にスライド表示させることで、スマートフォンユーザーが少ないスクロールで情報を見られるようにしています。
- 公式サイト マクドナルド
まとめ
スマートフォンユーザーが増えたことをきっかけに、レスポンシブデザインのサイトも増えました。メリットが多いレスポンシブデザインですが、表示に時間がかかりユーザーの離脱にならないように注意が必要です。
今後ますます増えると見込まれるスマートフォンユーザーに向けて、レスポンシブデザインも進化していくことでしょう。開発者側はユーザーの思いを意識しながら開発を進める必要がありそうです。