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

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

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

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

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

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

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

コメント

  1. WEBサイトへのモバイルアクセスが増加、いよいよPCよりスマフォやタブレットでの閲覧者が多い時代になった

    この画像は「tohdamikio.com」のリアルタイム検索。グーグルアナリティクスでは今どれくらいのアクセスがあるかがリアルタイム検索でわかる。その内容…

  2. WP用のFTPパスワードが更新の都度必要なcoreserverはWordPressの運用に向かない

    coreserverにWordPressをインストールして使ってみたがどうにも使い勝手が悪い。他のサーバならクイックインストール機能があり簡単にできるイン…

  3. スマホの検索結果に「スマホ対応」が表示されるかどうかをチェックしておこう

    スマホの検索結果に「スマホ対応」という文字が表示されてるだろうか?Googleは2014年12月からスマートフォンの検索結果でスマートホン対応ができている…

  4. WEBサイトがスマホ対応してないと検索順位は低下させる!とGoogleウェブマスター公式ブログから発表された

    Googleウェブマスター公式ブログから「」という発表があった。タイトルは「検索結果をもっとモバイル フレンドリーに」というやさしい表現だが、書いてある本…