2019.09.04
こんにちは。
メディカルアジュール 加藤大雄です。
今回は、WEBページ（サイト）を制作する際に必要不可欠なレスポンシブデザインに関してご紹介します。
近年は、スマホやタブレットを使うモバイルユーザーが増えており、画面サイズの異なるPCとスマホの両方から同じwebサイトを閲覧することも珍しくありません。
このマルチデバイス(マルチスクリーン)の流れに対応するために、
を導入し、どの端末からアクセスしても最適なサイト表示をする必要性が高まっています。
Googleは、２０１５年の４月にモバイルフレンドリーアップデートを行い、モバイル対応済みページの検索順位を引き上げることを発表しました。
そして、webサイトをモバイルフレンドリーにする方法として、webサイトにレスポンシブなテンプレートやテーマを利用することを勧めています。
レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法
言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。
レスポンシブデザインを採用すると、
共通のwebサイトを1つ構築して、URLやHTML(画像やテキストを表示するために必要なコード)も、ページごとに１種類ずつ用意すれば良いというわけです。
このサイト構造のシンプルさがレスポンシブデザインの特徴であり、数々のメリットをもたらす要因となっています。
なぜ、１つのHTMLで、各デバイスに合わせた表示ができるのかというと・・・
表示幅などのデザインはHTMLではなく、CSSというファイルでコントロールするからです。
CSSとは、「cascading style sheets」の略語で、スタイルシートとも言います。
このCSSファイルの中にMediaQueries(メディアクエリ)を記述して、「ウィンドウ幅が何ピクセルの時は、このような表示をする」という指示を与えます。
そうすれば、サイトのレイアウトや文字の大きさ、ボタンの配列などを、画面の幅に応じて切り替えることができます。
（※詳しい話はここまでにしておきます）
レスポンシブウェブデザインでは、サイトの各ページのURLは１種類で、どのデバイスにも同じHTMLコードが配信されます。
これによって数々のメリットがもたらされますが、デメリットもあります。
レスポンシブデザインには、以下のようなメリットがあります。
上記のうち、
１番と２番はユーザー視点
３番と４番は検索エンジン視点
５番は運営者の視点です。
それぞれにメリットがあります。
レスポンシブデザインには、以下のようなデメリットがあります。
４番のデメリットを具体的に挙げると、たとえば以下のようなケースが考えられます。
・スマホでの表示速度を考慮して画像を軽くすると、PCサイトで綺麗に表示することができない
・PCでは丁度良いテキスト量でも、スマホでは文字だらけで読みにくいため文章を削ったり画像を挟んだりする必要が出てくる。
今回は、レスポンシブデザインの概要とサイト事例について紹介しました。
レスポンシブデザインは、増加するモバイルユーザーに「見やすく使いやすい」サイトを提供する有効な方法です。
Googleもモバイルフレンドリー化やマルチスクリーン対応につながるレスポンシブデザインを推奨しており、運営者にとってもサイト管理がしやすくなるなどのメリットがあります。
ただし、レスポンシブデザインはユーザビリティを向上する一つの手段であり、それ自体が目的ではありません。
自社サイトに導入するかどうかは、状況をよく考えたうえで判断した方が良いと思います。
WEB活用、ツール制作でお困りの場合は、是非ともメディカルアジュールへご相談下さい。
様々なWEBサイトの制作および、長期的なWEB活用の方法、社内でのITリテラシー向上に向けてのお手伝い致します。
メディカルアジュール 加藤 大雄
採用のお悩み、お聞かせください。
まずはお気軽に、採用に関するお悩みをお聞かせください。
状況やご予算に応じた最適なご提案をさせていただきます。