レスポンシブWebデザインの参考になるサイト12選
総務省が行った調査によると、日本におけるスマートフォンを保有する世帯の割合が、2017年にPCを上回りました。We...
- Webデザイン
- モバイル
- レスポンシブデザイン
レスポンシブデザインとは【意味/読み/英語表記】（れすぽんしぶでざいん/Responsive Design）
レスポンシブデザインの概要
レスポンシブデザインとは、PC、タブレットなどデバイスの画面サイズに依存しないデザイン手法です。
レスポンシブデザインの詳細
デバイスのウィンドウのサイズに反応（レスポンス）し、見やすい表示に自動で切り替わる仕組みを持つデザインのことを指します。スマートフォンやタブレットを使うユーザーの増加に伴って、画面サイズの異なるPCとスマホの両方から同じwebサイトを閲覧することが多くなりました。
このマルチデバイスの流行に対応するのがレスポンシブデザインであり、どのデバイスからアクセスしても最適なサイト表示ができます。
以前はPC用のWebサイトとタブレット用のWebサイトが別々に作られていました。しかしレスポンシブデザインの台頭により、共通のwebサイトをひとつ作成することでURLやHTMLも、ページごとに1種類ずつ用意すれば事足りるようになったのです。このサイト構造のシンプルさが、レスポンシブデザインの最大のメリットといえるでしょう。
またGoogleは「表示エラーが少ない」「ユーザビリティが向上する」「Google検索エンジンのクローラーの巡回の手間が減る」といった理由から、レスポンシブデザインの使用を推奨しています。
レスポンシブデザインがもたらすメリットは以下の通りです。
■ひとつのHTMLファイルで複数デバイスに対応できるため、作成後のメンテナンス工数が軽減できる
■全デバイスの情報を統一できるため、デバイス間の設計、情報整理が容易になる
■PCとタブレット端末で異なることなく、決められたひとつのデザインやUIで制作ができる
■デバイス間のURLを統一できる
レスポンシブデザインの関連項目
・Adobe XD
・UI/IUX
・SVG
・デザインガイドライン
・デザインシステム
