【動画】レスポンシブWebデザインとは - MTt（エムティティ）

ＨＯＭＥ > お知らせ > 【動画】レスポンシブWebデザインとは

【動画】レスポンシブWebデザインとは

2015年06月12日

パソコンの場合

ブラウザーのスクリーンサイズを、マウスドラッグで狭めてみます。

スクリーンサイズに合わせてレイアウトが変化しました。
一般的なスマホサイズになりましたね。

ブラウザーのスクリーンサイズを戻してみましょう。

パソコン用のレイアウトになりましたね。

このように、単一のウェブページを　スクリーンサイズに合わせてレイアウトを最適化させる手法が、レスポンシブWebデザインです。

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

URLが1つなので、ユーザーがコンテンツを簡単に共有したり　リンクしたりできます。

同じコンテンツのページを、いくつも維持・管理する手間が省けますので
ミスが発生する可能性を抑えることができます。

それでは次に
スマートフォンで閲覧した場合を　見てみましょう。

スマートフォンの場合

画面を回転させることでレイアウトが変化します。
メニューをタップすると、サイドメニューが開きます。

レスポンシブWebデザインのデメリットの一つに、
パソコン用レイアウトの確認が難しいことがあげられます。

弊社の制作したウェブサイトでは、スマートフォンの画面が横向きの場合には
パソコン用レイアウトになるように調整しています。

それにより、デメリットを抑え
幅広いデザインに対応することができるようになりました。

また、パソコン用とスマホ用のウェブページが同一であることからGoogle検索のインデックスが正確に行われ、高いSEO効果も期待できます。