レスポンシブレイアウトブログ活用(Blog)

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

この記事は約1分で読めます。

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

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

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

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

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