レスポンシブデザインに変えてWEBをモバイルユーザーにも見やすくする

レスポンシブデザインレスポンシブWEBデザインとは、1つのhtmlでパソコンでもタブレットでもスマートフォンでも最適表示をしてくれる可変幅対応のデザインCSSである。エージェントで切り替えてパソコン用やスマートフォン用に作成された別々のhtmlを見せる方式は複数のhtmlが存在してしまうため管理がややこしい。これからはレスポンシブ対応を主にしていきたい。
アクセス解析を見ていると、今年に入ってから急激にスマートフォンユーザーのアクセスが増加しており、すでにパソコンユーザーの閲覧数を超えているWEBサイトが多い。この急激な変化にネットショップやブログなどのWEBサイトがまだ対応できていないという例も多い。レスポンシブ対応の近道として、WordPressやMovableTypeなどのブログで、レスポンシブ対応のデザインテーマを選択することである。

レスポンシブデザインを採用しているWEBサイトは増えており、当ブログもMovableTypeのRainierというレスポンシブテーマを利用している。

レスポンシブデザインの表示の違いは以下の画面で比較してみた。

レスポンシブデザインの表示の違い

左がスマフォやタブレットなど横幅が狭い時、右はパソコンで十分に横幅が広い時、同じURLでも表示する端末の状況で最適な表示幅に自動的になってくれるのがレスポンシブデザインである。

このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  
 

この記事のURL「https://dm2.co.jp/2014/02/responsive.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2014/02/responsive.html」をQRコードで表示「https://dm2.co.jp/2014/02/responsive.html」
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。