ワンクリックに命がけの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

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

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

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」