HOME | レスポンシブデザインって何?


レスポンシブデザインって何?

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

 
パソコン、タブレット、スマホなど複数の閲覧環境に対してそれぞれに合ったレイアウトに最適化し表示切り替え可能なデザイン仕様のことです。
数年前までは、PC用とは別にスマホサイトを制作し、更新管理も別でした。
レスポンシブデザインは、同じページを横幅に応じてレイアウトを自動調整できます。
ページ更新も同時です。制作費も更新コストも削減できるわけです!

 

Googleも推奨

最近では、スマホでの閲覧がPCからの閲覧を超えてきました。サイトによっては80~90%はスマホから、というのも珍しくありません。Googleでは閲覧者の利便性を重視し、スマホでスムーズに閲覧できるかどうかを、検索結果に反映するという宣言をしました。レスポンシブデザインをGoogleは正式に推奨しています。つまり、レスポンシブサイトの方が検索結果は良くなる可能性が高いということになります。これは大変重要なファクターです。

レスポンシブサイトの見分け方

 

  1. パソコンでサイトにアクセスします。
  2. ブラウザ(Chrome、インターネットエクスプローラなど)を全画面から少し小さい表示に変更します。閉じるボタン(×)の左側の小さい□アイコンをクリックするとブラウザが少し小さくなり、背景にデスクトップが見える状態にします。
  3. マウスでブラウザの右端(又は左端)に触れて、カーソル(矢印)が出たら、左クリックしたままマウスをスライドさせて画面幅を徐々に小さくしていきます。
 
レスポンシブデザイン

 
レスポンシブデザインで作られたサイトは、横幅に応じて画面全体が縮小拡大されます。
(通常のサイトの場合は画像などは縮小されず、横スクロールバーが出ますよね)
さらに横幅を小さくしてスマホサイズになった時点で、今まであったメニューはスマホタイプの横三本線のメニューに収納されます。
この方法でレスポンシブサイトかどうか判別できますよ。やってみてください。