※本ページにはプロモーション(広告)が含まれています
「レスポンシブデザイン」という言葉を聞いたことはありますか。
スマートフォンやパソコン、タブレットなどで見るサイトの中にも、多くのレスポンシブデザインのものがあります。
ここでは、レスポンシブデザインの基礎的知識やメリット・デメリット、注意点、作成ステップなどについて、紹介しています。
デザイン業界でない方も、言葉や意味を覚えておいて損のないものです。自身でホームページなどを作る際に役立つ可能性もあります。
内容を確認して、お気に入りのサイトや企業のホームページなどがレスポンシブデザインかどうか確認してみましょう。
目次
1.レスポンシブデザインについて知る
まずは、「レスポンシブデザイン」がどのようなものか、メリット・デメリットも含め確認していきましょう。
2.レスポンシブデザインとは?
レスポンシブデザインとは、1つのHTMLファイルでパソコン、タブレット、スマートフォンなど、各デバイスの異なる画面サイズに応じた最適化される技術・仕様のことです。
デバイスの種類ごとにサイトを作らなくても、1つのサイトで画面サイズごとに最適なコンテンツを表示できます。
何かのサイトを見る際は1つのデバイスから見るわけではなく、パソコンやタブレット、スマートフォンなど、さまざまなデバイスから確認します。
レスポンシブデザインであれば、スマートフォンでは通常通り表示されたのに、タブレットではエラー表示になってしまうなどの事象を避けることができます。
今ではあたりまえのように使われていますが、2012年にGoogleが公式にレスポンシブデザインを推奨したことで急速に広まりました。
3.レスポンシブデザインのメリット
レスポンシブデザインにはどのようなメリットがあるのでしょうか。主な4つのメリットについて見ていきましょう。
1.1つのHTMLファイルで実装できるため制作・管理が容易
レスポンシブデザインの大きなメリットは1つのHTMLファイルで実装できることです。
パソコン、タブレット、スマートフォンなど、各デバイスに合わせてサイトを用意するとなると、制作にも更新にも時間がかかり、更新作業やチェック作業、アクセス解析など、膨大な労力を費やさなければなりません。
しかし、1つのサイトを用意するだけであれば、これらの作業負担を大きく軽減することが可能です。
管理もラクになり、運営側は他のことにリソースを充てることができます。
2.URLが統一されているため拡散されやすい
サイトが複数ある場合は、それぞれでURLも異なるため拡散されたとしても適切に表示されない場合があり、効率的なものとは言えません。
レスポンシブデザインであればURLが1つのため、どのデバイスでも最適に表示され効率的な拡散が可能です。
拡散したにも関わらず、適切に表示されない場合は、機会損失になりファンが離れる原因になりかねません。
3.SEOにも有効的
Googleも公式でレスポンシブデザインを推奨しているほどで、パソコン用ページとモバイル用ページが単一URLになることで、SEOにも有効的になります。
4.一貫性のあるデザイン
パソコンとスマートフォンなど、各デバイスごとに細かくデザインを分けて考える必要がないため、コンテンツに一貫性を持たせることができます。
4.レスポンシブデザインのデメリット
レスポンシブデザインのメリットを把握した後は、デメリットも確認しましょう。デメリットも踏まえた上で制作・運用していくことが大事です。
1.複雑で工数が増える
レスポンシブデザインは、1つのファイルになるため制作後の管理はラクになります。
ただし、制作にあたって多くのデバイスに対応させる必要があるため、切り替えるレイアウトに合わせてデザインを用意したり、コーディング構築が複雑になるなど、通常よりも工数が増える場合が多いです。
また、チェック項目も増えますし、従来よりも費用がかかる場合もあります。
2.デザイン・レイアウトに制限がある
レスポンシブデザインはワンソースで構築するため、CSSで対応可能なレイアウトやデザインの範囲内で考える必要があるなど制限があります。
そのため、デバイスごとに用意するコンテンツのようにきめ細かい配慮をすることが難しくなります。
3.広告対応
パソコン用・モバイル用で広告を分けている場合は、レスポンシブデザインの場合だと表示方法を含め対応が難しくなります。
4.重くなる傾向がある
レスポンシブデザインの場合は、1つのファイルの中に各デバイスに最適なパターンが埋め込まれていますので、その分ファイルは重くなり、読み込みに時間がかかる傾向があります。
2.レスポンシブデザインで気を付けるべき点
代表的なものでリキッドレイアウトやフレキシブルレイアウト、可変グリッドレイアウトなどがありますので、それぞれの特徴も確認しておきましょう。
1.リキッドレイアウト
リキッドレイアウトでは、常に画面サイズに応じてテキストなどが相対・可変で表示することができます。各デバイスに応じて要素が非表示になるのではなく、テキストや画像が伸縮して表示されます。
2.フレキシブルレイアウト
フレキシブルレイアウトも画面サイズい応じてテキストなどが相対・可変的に調整されるため、リキッドレイアウトと似ています。
リキッドレイアウトとの違いは、最小幅と最大幅の指定ができることです。これにより、パソコンなどの大きな画面サイズの場合は余白が生まれます。
3.可変グリッドレイアウト
可変グリッドレイアウトは、ブロックごとに配置できるレイアウトが特徴のグリッドレイアウトに加えて、リキッドレイアウトと同様に可変ができます。
そのため、各デバイスのサイズに応じてテキストや画像が再配置されます。スマートフォンなどの小さい画面になると見づらい場合があります。
3.レスポンシブデザインの作成手順
レスポンシブデザインを作成する際のステップは大きく3つです。これらのステップを通して、パソコンやスマートフォンでも適切に表示されるサイトができあがります。
①ビューポート(viewport)の設定
まずは、ビューポートをHTMLのヘッダー内にメタタグで設定をします。ビューポートの設定を行うことで、各デバイスの画面幅に応じて画面表示が自動で調整されるようになります。
②cssの切り替え地点を決める
切り替え地点を決めることで「画面サイズが◯◯pxになればパソコン用画面表示」など、パソコン用とモバイル用など、画面幅の切り替えタイミングを設定できます。
③cssでメディアクエリを指定
メディアクエリによって、デバイスの横幅によりcssを変えることができます。これにより、スマートフォンでもレイアウトが変更されて見やすいサイトになります。
まとめ
レスポンシブデザインであれば、パソコン用やスマートフォン用など、各デバイス別にサイトを作らなくても1つのサイトで応用が可能です。
そのため、制作後の管理・更新の手間も抑えることができます。また、Googleが推奨していることもあり、SEOにも強い特徴を持っています。
ただし、複数のデバイスに対応できるように多くのデザインを用意するため、複雑で工数が増えたり、重くなるなどのデメリットもあります。
もし、サイトなどを作る際はメリット・デメリットを把握した上で、判断するようにしましょう。まずは、普段見ているサイトがレスポンシブデザインかどうか確かめてみましょう。