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

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

進むスマホシフト。レスポンシブWEBデザインはマルチデバイス時代の最適解か?

  • WEBデザイン

今年も残すところわずかになりましたね。ところで、この1年を振り返って、みなさんはWEBサイトをどのような環境でご覧になりましたか。PC以外にも、移動中などのスキマ時間を使ってスマートフォンやタブレットで見ることが増えたという方も多いのではないでしょうか。

年代によっては、すでにPCとスマートフォンでの閲覧時間は逆転。WEBデザインは、さまざまなサイズの端末、つまり「マルチデバイス」に対応しなければならない時代になりました。そして、その解決策の1つとして一気に広まった手法が「レスポンシブWEBデザイン」です。しかし、レスポンシブWEBデザインもその登場から数年が経ち、閲覧環境にもさらなる変化が生じています。そんな今、そしてこれからを考えた時、レスポンシブWEBデザインは、最適解と言えるのでしょうか。今回はそれについて、ご一緒に考えてみましょう。

レスポンシブWEBデザインのメリット、デメリット

まずは、あらためてレスポンシブWEBデザインのメリット、デメリットについてまとめておきましょう。

レスポンシブWEBデザインのメリット

このインバウンドブログでも、「WEBページのスマホ対応でレスポンシブWEBデザインが注目されるその理由」という記事でレスポンシブWEBデザインについて取り上げています。レスポンシブWEBデザインが爆発的に広まった理由やその背景、メリットなどが書かれていますのでぜひご覧いただきたいのですが、この記事にも書かれているメリットをまとめると、次のようなことが挙げられます。

  • コスト削減と運用の合理化ができる
  • コンバージョンの向上が期待できる
  • Googleでの上位表示につながる

PC用サイトとスマホサイトをひとつでまかなえてしまうわけですから、コスト削減が可能になり、運用も行いやすい。さらには、URLも1つになるのでコンバージョン率も上がり、Google推奨だから検索結果の上位表示にも良いだろう……、ということです。

デメリットもあるレスポンシブWEBデザイン

以上の内容を見るとメリットだらけのように見えるレスポンシブWEBデザインですが、残念ながらデメリットもあります。具体的に挙げていきましょう。

1.開発時間の長さ

レスポンシブWEBデザインの大きなマイナス点のひとつは、制作時間の長さ。端末ごとにレイアウトを変えるとはいえ、つくるのはひとつだから時間もそんなにかからないはず、と思う方もいるかもしれませんが、そうではありません。

PC、タブレット、スマートフォンと、それぞれのデバイスで最適に見えるようにサイトを設計し、コーディングしていくためには、通常のHTMLだけで組まれたWEBサイトの制作に比べると、より多くの時間がかかってしまいます。

2.端末ごとに利用方法を変えることはできない

レスポンシブWEBデザインで制作されたサイトは、端末に合わせてレイアウトが変わるだけで、しくみや内容が変わるわけではありません。基本的には、端末が変わってもコンテンツ内容は同じでいいという場合に使える手法です。

例えば旅館のホームページを作るとして、PC版では旅館全体の情報があり予約もできるようにしたいが、スマホ版では予約とアクセス紹介だけに特化した内容で制作したい……などという場合には不向きです。PC版とスマホ版で同じ内容を表示すべきか、そうでないのか、最初の情報設計が重要です。

3.スマホでもPC版サイトの方がわかりやすい場合もある

レスポンシブWEBデザインを考える上でもっとも重要なことは、それを採用することによってそのWEBページが「本当に閲覧しやすくユーザビリティの高いものになっているかどうか」です。

見慣れたPC版のサイトをスマートフォン上でも見たいのに、アクセスすると勝手にスマホ版になってしまうため、自分の見たい情報がどこにあるのかわからない、そんな経験をしたことがある方も少なくないと思います。この問題はとても重要ですので、次に詳しく見ていきましょう。

スマートフォンが大型化してく中でのスマホサイトの意味は?

今年はiPhoneでも6、Plusとこれまでよりも大きなサイズのものが発売され、Android同様にスマートフォンの巨大化が顕著になった年でした。iPhone 6 Plusのような大型スマホは、「Phone」と「Tablet」とを合わせた造語で「Phablet(ファブレット)」と呼ばれています。このようにスマートフォンが巨大化し徐々にタブレットサイズに近づいてきているということは、「そもそもPC版とはちがうスマホ版のレイアウトを作る必要があるのか」という問題提起につながってきます。

「PCサイト」と、スマートフォンの画面サイズに合わせ最適化表示される「スマートフォン専用サイト」とでは、どちらが活用されているのか、というあるアンケートでは、6割以上の人がスマートフォン専用サイトに対して利便性を感じていない、という調査結果も出ています。ユーザーにとって有益なサイトにするめに、レスポンシブWEBデザインを用いた結果、逆に使いづらくなってしまう場合もあることがこの調査結果からもわかります。

<参考サイト>

8割以上の人、スマートフォン専用サイトの必要性を感じていないことが判明
http://wired.jp/2012/05/29/android-fragmentation-one-developer-encounters-3997-devices/

年寄りを困らせる「レスポンシブWebデザイン」
http://consult.nikkeibp.co.jp/staffroom/archives/20140218_384

トレンドの先にあるレスポンシブWEBデザインの未来は?

スマートフォンの普及とともにレスポンシブWEBは爆発的に広まって、WEBデザインの一大ブームとなりました。しかし、それから数年が経ち、そろそろそのトレンドの先にあるレスポンシブWEBデザインのあり方について考えていかなければならない時期に来ていると言えそうです。

端末の種類だけをとってみてもこれほど選択肢の多い時代に、すべての制作に対して1つの最適解を導くことは不可能です。適材適所で、目的や状況に合った技術を使っていかなければいけません。

そのためにも、ホームページのターゲットはどのような層なのか、閲覧する環境はPC中心なのかスマートフォン中心なのかなどをしっかりと分析、把握することが、ますます重要になりそうです。その上で、それぞれにあった情報設計やデザイン手法を用いることが大切になると思います。

今回のまとめ

  1. マルチデバイス時代への対応策としてレスポンシブWEBデザインが登場し、数年が経過した。
  2. スマートフォンの大型化などによって閲覧環境はさらに変化している。
  3. レスポンシブWEBデザインもひとつの選択肢としながら、今後のマルチデバイス対応では個別の検討がより重要になる

制作技術の1つとして、レスポンシブWEBデザインに多くのメリットがあることは確かです。しかし、「スマホ対策も考えて、とりあえずレスポンシブ対応にしておけば良いだろう」という時代は終わっています。ユーザー目線に立って、使いやすいホームページを考えていくことから、マルチデバイス時代に対応したWEBデザインが生まれていくはずです。このテーマについては引き続き、もう少し具体的に書いてみたいと思いますので、ぜひ、またご覧ください!

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  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

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