レスポンシブデザインを一言で説明するとPC、タブレット、スマホでページを表示した時に画面サイズに合わせてレイアウトが変形するデザインです。
Googleも推奨するレスポンシブデザインですが企業サイトやWordPressのテーマでも採用され、注目を浴びています。
今日は通常のWEBサイトやブログのレイアウトを変える時に役立つレスポンシブデザインの基本構造を分かりやすくご紹介!
レスポンシブデザインとは?
元々PCの大画面用に最適化されているWebサイトをユーザーがスマホやタブレットで閲覧した場合、視認性や操作性が悪くなります。
これを解決すべく提唱されたデザインがレスポンシブデザイン。
技術的な面ではPC、タブレット、スマホ、アンドロイドの画面サイズに合わせて、1つのファイルで表示の最適化を行います。
通常のWEBサイトとの違いって?
大きな違いはファイルの数です。
通常のWEBサイトはPCとスマホでファイルを区別します。
例えばトップページ(top.htmlとします)を作成する場合、サーバー側のフォルダ構成は
PC/タブレット | /top.html |
スマホ/アンドロイド | /sp/top.html |
となります。
PCとスマホのtop.htmlはそれぞれルート直下とsp下に設置され、別階層になります。
デバイスによって表示を切り分けるから。
外注でホームページの制作を依頼する場合、スマートフォン最適化の項目で別途費用がかかるのは、PCとは別にスマホ用ファイルを作成する工程が発生するからです。
ブレークポイントでCSSを切り分ける
レスポンシブデザインで必ず必要なブレークポイント。
端末の画面サイズによってCSSを切り分けるポイントをブレークポイントと呼びます。
一般的なブレークポイントは480pxと768pxを境界とし、3種類の表示に切り分けて考えます。
スマホ縦向き/スマホ横向き | 〜480px |
タブレット縦向き | 480px〜768px |
タブレット横向き/PC | 768px〜 |
この3点が僕がよく使用するブレークポイント。
CSSではこのような記述をします。
//スマホ縦向き/スマホ横向きのCSSはここに記述 @media screen and (min-width: 480px) { //タブレット縦向きのCSSはここに記述 } @media screen and (min-width: 768px) { //タブレット横向き/PCのCSSはここに記述 }
レスポンシブデザインではこの3パターンの表示レイアウトを事前に決めなければなりません。
ここでは3つのブレークポイントを設定しました。
ブレークポイントにはこれが正解という指針がないため、設計者の都合に合わせていくつでも設定可能です。
画像は使わず極力CSSで対応
1つのファイルでスマホ/タブレット/PCの表示をまかなう為、ファイル容量が大きくなり、スマホユーザーでは表示の遅延が発生しがちです。
アイコンフォント(CSSでアイコンを表示する技術)やCSSスプライト(複数の画像を一つの画像にまとめる技術)の導入で、ファイル容量を軽減し、ユーザーにストレスを与えない工夫が必要です。
レスポンシブデザインのメリットとデメリット
メリット
レスポンシブデザインの最大のメリットはメンテナンスのしやすさです。
作成するファイルが1つなので、作業工程が大幅に軽減できます。
デザイン面ではスマホ〜タブレット〜PCまで一貫したデザインを簡単に作成できます。
デメリット
デメリットには、設計の難しさが挙げられます。
ブレークポイント、デバイス毎のレイアウトはコーディングを始める前に決定しなければならないので、設計の段階で多くの時間を費やします。
又、ソース上の問題で、デバイスによって表示や非表示を切り分ける条件分岐の記述が多くなります。
何も考えないでコーディングを始めると、根本的な仕様変更が発生した時、最初からコーディングをやり直すはめになるのでご注意を。
レスポンシブデザインでは構造上、レイアウトの自由度が制限されます。
雑誌風な自由なレイアウト、子供向けのイラストを多用したサイトは作成しずらいです。
EVERNOTEのオフィシャルサイトで使用されている、水戸黄門型と呼ばれるデザインが多いのもレスポンシブデザインの特徴です。
Web業界ではこのようにヘッダ画像の下に3つのブロックが横並びになるレイアウトを水戸黄門型と呼んでいます。
まとめ
いかがでしたか。
レスポンシブデザインは最初の設計が一番重要です。
構造を理解できれば、コーディングは比較的簡単です。
制作会社にレスポンシブデザインを依頼しようとしているあなた。
以下の2点に注意しましょう。
❶レイアウト(デザイン)の制限がある
❷設計に時間がかかる為、費用が高くなりがち
▽レスポンシブデザインの実例がパターン毎に解説されてるのでオススメ!
コメント