ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

WEBページのスマホ対応でレスポンシブWEBデザインが注目されるその理由

  • WEBデザイン

スマートフォンで検索してWEBページにアクセスしたら、スマホ用にレイアウトされていて、とても見やすかった!資料請求もスムーズに行えた!そんな経験をお持ちの方も多いのではないでしょうか。スマートフォンからのアクセスにも配慮したWEBページは好印象を持たれ、集客効果もグッと高まります。

今回は、最近のWEB制作のキーワードにもなっている「レスポンシブWEBデザイン」を中心に、WEBページのスマホ対応について取り上げてみたいと思います。

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

ホームページは、今やパソコンだけで見るものではありません。iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット、その他にも様々な端末で閲覧されるようになっています。このような多様な端末のディスプレイ条件に応じて、WEBページを最適なデザインに切り替える制作技術が、いま注目のレスポンシブWEBデザインです。端末ごとの閲覧条件にレスポンス(応答)するという意味で、レスポンシブWEBデザインと呼ばれています。

まずは、その実際のイメージをつかんでおきましょう。「Media Queries」というサイトにパソコンから接続してみてください。レスポンシブWEBデザインで制作されたホームページがたくさん紹介されています。次に、その中のどれかに実際にアクセスして、ブラウザの左右幅を狭めてみましょう。ある幅になると、ページのレイアウトが切り替わっていくのがわかると思います。それが、レスポンシブWEBデザインの特徴です。

上記の体験からもわかるように、レスポンシブWEBデザインでは、端末の種類ではなくスクリーンサイズ(幅)が基準になっています。「このスクリーンサイズには、このレイアウトで見せよう」と言う考え方でデザインしていきます。それによって、パソコン、スマートフォン、タブレットなどのそれぞれに合った適切なページ表示を実現していきます。

レスポンシブWEBデザインの何がいいのか?

WEBページをスマートフォン対応させる手法は、大きく2つあります。

1)レスポンシブにしてパソコン用、スマホ用を1サイトで兼用するやり方
2)パソコン用、スマホ用に分けて別に制作するやり方

このうち、レスポンシブWEBデザインを採用する最大のメリットは、そのシンプルさにあります。ひとつのページであらゆる端末の画面表示に対応できるので、維持管理が楽になります。例えば、「PCサイトは更新したのにスマホサイトの更新を忘れてしまった」「両方の内容に誤差が出てしまった」などという問題も起こらなくなります。

また、スクリーンサイズ(画面幅)を基準にしてレイアウトを切り替える方式のため、新しい端末が登場した時にも、切り替え方の設定を変更するだけで容易に対応することができます。マルチデバイス時代と言われる今、そしてこの先の変化にも柔軟に対応できる合理的な方法でもあるのです。

ただし、デザインの自由度が低くなることや、ナビゲーションメニューの関係でページ数に制約が出てくることなどのデメリットもあるので、パソコン用、スマホ用と別サイトに分けて制作した方がいい場合もあります。このあたりは、業種によって、また企画内容によって、ケースバイケースでの判断ということになります。

レスポンシブ化は、これからのWEB制作での有力な選択肢

メディア調査の専門会社ニールセンによれば、2013年4月からの1年間にパソコンからのネット利用者は350万人(6%)減少したのに対し、スマートフォンからの利用者は1,100万人(38%)増加。20代、30代ではすでに、パソコンよりもスマートフォンからの利用の方が多くなっています。

0731

さらに、2015年にはスマートフォンからのアクセスが7割を超えるのではないかという見方も出ており、そのスムーズな閲覧に対応できないホームページは、多くの見込み客を逃してしまう時代になりそうです。

そのような流れの中で、レスポンシブWEBデザインは次のような点で注目されており、これらからのWEB制作での有力な選択肢のひとつになるでしょう。

コスト削減と運用の合理化ができる

一般に、パソコン用+スマホ用を別々に制作するよりも制作費は安くて済みます。ひとつの目安としては、別々に作成する際の費用を2とすれば、レスポンシブWEBデザインでは1.5という感じになります。また、更新も一本化できるので、運用面でも手間やコストを削減できます。

コンバージョンの向上が期待できる

どの端末に対しても同じURLで運用でき、ページのトーンやコンテンツ内容が異なることもありません。移動中はスマートフォン、オフィスではパソコンといった端末をまたぐ閲覧でも利用者のストレスがなくなり、ユーザビリティが大きく向上。スムーズなコンバージョンにつながります。

Googleでの上位表示につながる

検索エンジンのGoogleは、2012年6月に、WEBサイト運営者に対して「レスポンシブ ウェブ デザインを使うサイトを推奨する」と発表しています。実は、このことも、レスポンシブWEBデザインへの関心が高まった大きなきっかけになっています。Googleが推奨するということは、Googleの検索結果で上位表示を得るためにも重要ということ。SEOの観点からもレスポンシブ化は効果的であるというのが、現在の標準的な見方になっています。

今回のまとめ

  1. レスポンシブWEBデザインは、端末に応じて、自動的に最適な画面レイアウトに切り替わるようにするホームページ制作手法のこと。
  2. その特徴はシンプルであること。維持管理を楽にし、コストを削減もできる。
  3. 今後、集客や営業目的のホームページでもスマートフォン対応は必須。その際、レスポンシブWEBデザインは、ひとつの有力な選択肢になる。

レスポンシブWEBデザインの分野では、開発ツールや制作手法もかなり成熟してきました。ホームページの新規開設やリニューアルをお考えなら、今がちょうどいいタイミングです。ぜひ、レスポンシブなホームページで集客力アップをめざしてください!当社のインバウンドサイト制作でも、レスポンシブWEBデザインを含め、お客様に応じた最適な形でのスマートフォン対応のご提案をいたします!

<参考サイト>
Media Queries
http://mediaqueri.es/
スマートフォンからのネット利用者は直近1年間で1,100万人増加 ~ニールセン、2013年度(2013年4月~2014年3月)のネット利用動向を発表~
http://www.netratings.co.jp/news_release/2014/04/Newsrelease20140423.html
スマートフォン向けウェブサイトの構築
https://developers.google.com/webmasters/smartphone-sites/details

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  2. 2

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  5. 5

    言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    コンテンツマーケティングのお手本になる、企業オウンドメディア事例25選【2015年・BtoC編】

  9. 9

    【WEBデザイン10選】クリスマスから年末年始まで!「冬のキャンペーン」サイトまとめ

  10. 10

    【WEBデザイン10選】ナチュラルさが上手く表現されたWEBサイトまとめ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  4. 4

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  7. 7

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog
さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

ワンクリックに命がけのホームページ制作会社M-HAND