【CONTENTS】

  • なぜレスポンシブWebデザインが
  • レスポンシブWebデザインとは
  • メリット
  • 事例紹介

なぜレスポンシブWebデザインが
必要なのか?

現在Webサイトは様々なデバイスで閲覧されています。
利用者の閲覧環境に応じて最適なページレイアウトに切り替えられるマルチデバイス化が必須です。

レスポンシブWebデザインとは?

「レスポンシブWebデザイン」とは、パソコンやスマートフォン、タブレットごとの画面の横幅に合わせ、ページのレイアウトデザインを柔軟に自動調整する手法です。
デバイスごとにHTMLファイルを作成する必要がなく、1つのHTMLファイルをスタイルシートで制御し、ブラウザの横幅に応じてページのレイアウトデザインを調整します。

従来の制作方法、デバイスごとにHTMLを作成

レスポンシブWebデザインの制作方法、1つのHTMLで管理可能!!

【例】アピ株式会社

画面の横幅が一定のサイズになると、表示が自動で切り替ります。
アピ株式会社様の場合は、620px以下がスマホ、960px以下がタブレット、それ以上はパソコン用表示になります。

デバイス別のレイアウト

デバイス別で表示の必要が無いものを非表示にしたり、デバイスに合ったレイアウトに移動します。

レスポンシブWebデザインのメリット

  • スマホやタブレット専用のページを作成するより、制作コストが削減できる
  • HTMLファイルを一本化するので更新作業に伴うコストやミスを削減できる
  • URLを統一できSEO効果が高まる
  • 将来登場するスマホやタブレットのサイズにも対応出来る

注意

  • HTMLのソースが増えるため、ファイル容量が大きくなり、表示が遅くなる場合があります
  • スマホやタブレットであえてPCサイトが見たいという場合に表示できません
  • 古いブラウザでは表示に対応していない場合があります

さあ、体験してみよう!