近頃、レスポンシブデザインの案件が非常に多くなっています。
かつて、モバイル端末でウェブサイトを閲覧するときは、パソコン用にデザインされたウェブサイトを小さな画面のなかで拡大したりしながら閲覧することが一般的でした。しかしこれは訪問者にとって大きなストレスのかかる操作体験でした。
なかには、モバイル端末専用のページを本サイトとは別枠に制作することで、機種ごとに表示ファイルを振り分けていたという企業も多いのではないでしょうか。膨れ上がるファイル数に、今度はウェブサイトの管理者がストレスを感じることになりました。
しかし今では、レスポンシブデザインによって、単一のファイルで多様な機器にマッチしたデザインを見せることができるようになったのです。
(1) デスクトップパソコンで見たときの閲覧イメージ
幅769ピクセル以上の画面(ウインドウ)で見るときには「PC向けのデザイン」が表示されるように設定されています。
PC閲覧イメージ
(2)タブレットで見たときの閲覧イメージ
幅481ピクセル以上~768ピクセル以下の画面(ウインドウ)で見るときには「タブレット向けのデザイン」が表示されます。
タブレット閲覧イメージ
(3)スマートフォンで見たときの閲覧イメージ
幅480ピクセル以下の画面(ウインドウ)で見るときには「スマートフォン向けのデザイン」が表示されます。
スマートフォン閲覧イメージ
このように、レスポンシブデザインは機種単位の最適化ではなくウインドウサイズによって最適化を行います。スタイルシートでレイアウトの制御を行うため、マルチデバイスに対応したデザインを効率的に管理できることができます。いまではウェブサイトの新規立ち上げや、リニューアルを予定しているクライアントの8割以上がレスポンシブなデザインを求めてくるといっても過言ではありません。
なぜここまでレスポンシブデザインが注目されているのでしょうか?
本日は、その理由について書かれた海外ブログを紹介しながら今後の動きを考えてみたいと思います。意訳であることをご了承ください。
中小企業がシンプル&レスポンシブなウェブデザインに目を向けている理由
レスポンシブデザイン、2013年以降の台頭
昨年は、ずっとインターネット界隈のいたるところで「2013年はレスポンシブWEBデザインの年である」という表現が見られました。どのようにしてレスポンシブWEBデザインに対応していくべきか、ビジネスブログから大規模なサイトにいたるまで、誰もがそのことを論じてあっていました。(mashable.comが2012年12月にレスポンシブになった直後にその動きは始まったようです)
2014年の第一四半期がいま終わろうとしていますが、「今年もレスポンシブWEBデザインの年だ」というフレーズが、すでにインターネット界隈のあちこちで登場しています。
新しいトレンドが時代に姿をあらわすと、たいていはだんだん消えていったり、すぐに違うものに取って代わったりするものです。しかしレスポンシブWEBデザインは登場後も消えずに残っています。
レスポンシブデザインにするメリットはなにか?
レスポンシブデザインによる優位性を得るために大幅な見直しを行っている会社のなかでは、現在、レスポンシブでシンプルなデザインがとても人気になっています。レスポンシブデザインがSEOの内部対策と適切に結びつくことで、ネットマーケティング戦略は大成功を収める可能性があります。
レスポンシブにリ・デザインすることには、いくつものメリットがあります。そのメリットを理解すると、なぜ「レスポンシブになる」のにこんなにも長い時間がかかったのか…と不思議に思うかもしれません。
レスポンシブがなぜ有効な方法なのか。
それは以下にあげる3つのメリットを知ることで理由が見えてきます。
(メリットその1)1つの型で、すべてにフィット
デスクトップパソコンやノートパソコン、タブレットにスマートフォン。消費者はWEBサイトにアクセスできる様々な機器を使っています。どの機器からインターネットにアクセスしていているかは関係なく、どの機器からでも快適な利用体験が得られるようにすることが非常に重要なのです。
Googleも、レスポンシブなWEBサイトが大のお気に入りです。Google Developersのページでは「さまざまなメリットがあることから、レスポンシブ WEB デザインの使用をおすすめしています」と述べてさえいます。
デスクトップパソコンでの見栄えを重視した「伝統的なWEBデザイン」は、たいていモバイル画面にはマッチしません。ユーザーはWEBサイトを閲覧するために画面を動かしたり拡大・縮小したりしなければならなくなります。ナビゲートがしにくいと、多くのユーザーはサイトに辿りついても直ぐに離れてしまいます。
レスポンシブデザインのコンセプトの基本は、スマートフォンのような機器にWEBサイトを「調整」して、ユーザーにもっと楽しんでもらえるように表示する、ということですが、これだけが目的というわけではありません。
レスポンシブデザインによってコンバージョン率が上がるようなレイアウトに変えることもできます。たとえば、サイトの上のほうに行動のきっかけが表示されると、あなたの会社にとって望ましいかもしれません。なぜなら、ユーザーがWEBサイトに到着すると、すぐにそのオファーが目に入るからです。
レスポンシブデザインでは、モバイルユーザーにとって「過剰にスペースを取っている」とか「邪魔になる」と感じるものを、モバイルバージョンから取り除くことも可能になります。
(メリットその2)より少ないことは、より豊かなこと
最近は、シンプルですっきりとしたフラットデザインが大人気です。
今日の経済市場にもっとも影響力を持つブランドであるAppleがiOS 7をリリースしたときに、この傾向ははっきりと示されました。まったく新しいフラットデザインを見て、デベロッパーは新しいデザインにマッチするよう、すぐにアプリを作り替え、デザインを変更しました。
すっきりとしたライン、わかりやすさ、簡単なサイトナビゲーションが最近の流行です。
かつて、多くの企業では、アニメーションやフラッシュなど「すごい」を体験させる要素をふんだんに盛り込んだ、きわめて「デザイン重視」のWEBサイトを選んでいました。いまや時代は変わり、伝えたいことがはっきり伝わる、すっきりしたラインとフラットデザインへと企業サイトは切り替わっています。Google、Yahoo、Bingといった三大サーチエンジンもフラットデザインにスイッチし、新しいフラットロゴも公開しています。
ゴチャゴチャと表示しすぎていてナビゲートしにくいWEBサイトは、時として、忙しい訪問者にストレスを感じさせ、離れるキッカケを与えてしまいます。一方で、とても魅力的でありながらシンプルなデザインならば、訪問者を望ましいコンバージョンに向かわせる助けとなることでしょう。サイトの訪問者はユーザーエクスペリエンスに満足し、企業はその訪問者からコンバージョンを得る可能性が高まります。
どちらにとってもwin-winな状況です。
(メリットその3)流行の先端、でも機能的
ほとんどの企業は機能性を求めてレスポンシブWEBサイトに転換しています。なかには流行の最先端をもとめ、先進性を保つためにレスポンシブサイトに転向している会社もあります。でも、それはまったく間違っていません。
どの企業にとっても、レスポンシブデザインから受けられる恩恵が一つあります。
それはモバイルアクセス(集客)の増加です。
2014年、モバイルからの集客力はパソコンベースの集客力を超えることでしょう。
さらに驚愕の事実を話すと…モバイル機器で地元の会社やサービスを検索した消費者のうち、88%が24時間以内にそこに電話をかけたり実際に足を運んだりしているのです。このことや、またほかにもモバイルの成長に関する情報がこのインフォグラフィックにまとまっています。
かつて、モバイルからの集客はデスクトップほどコンバージョンにつながらなかったと言われていましたが、その原因の多くは、ユーザーエクスペリエンスが劣っていただけのことです。
レスポンシブデザインのおかげで会社はモバイル訪問者にナビゲートしやすいWEBサイトを提供でき、それによってモバイルユーザーのコンバージョンが促されます。モバイルユーザーとモバイル検索は急速に増加しており、企業には選択肢はほとんどありません。
あるのは「いずれ検索の多数派となるものに対応するか」あるいは「沈没しつつある船とともに沈んでいくか」という選択肢なのです。
※この記事はbusiness2community.comのブログに掲載された「Why Small Businesses Are Turning to Simple & Responsive Web Design」を翻訳した内容です。
記事の感想:いかがでしたでしょうか。
記事に書いてある通り、レスポンシブデザインに対応することはコンバージョン率の向上やSEOによる集客面でメリットが大きいのですが、落とし穴も存在します。
レスポンシブデザインは完璧なデザイン手法ではありません。あくまでも基準となるソースがあるため、そのソースに記録されていないコンテンツは表示することができません。わかりやすく言い換えれば、それぞれの機種ごとに「まったく異なるコンテンツ」を表示させることはできないのです。
また、デザインの基準にする機器をどれにするかの判断も慎重に行うべきです。もしもあなたのビジネスのターゲットが10代を中心にしているのであれば、デスクトップパソコンを基準にするよりも、彼らの生活のなかで最も密接な存在になっているスマートフォンを基準にして、コンテンツやデザインを最適化したほうが、ウェブサイトの閲覧体験はより豊かなものになるでしょう。(最近ではこのようなモバイルファーストな考え方が広がってきています)
かつて、モバイル端末でウェブサイトを閲覧するときは、パソコン用にデザインされたウェブサイトを小さな画面のなかで拡大したりしながら閲覧することが一般的でした。しかしこれは訪問者にとって大きなストレスのかかる操作体験でした。
なかには、モバイル端末専用のページを本サイトとは別枠に制作することで、機種ごとに表示ファイルを振り分けていたという企業も多いのではないでしょうか。膨れ上がるファイル数に、今度はウェブサイトの管理者がストレスを感じることになりました。
しかし今では、レスポンシブデザインによって、単一のファイルで多様な機器にマッチしたデザインを見せることができるようになったのです。
(1) デスクトップパソコンで見たときの閲覧イメージ
幅769ピクセル以上の画面(ウインドウ)で見るときには「PC向けのデザイン」が表示されるように設定されています。
PC閲覧イメージ
(2)タブレットで見たときの閲覧イメージ
幅481ピクセル以上~768ピクセル以下の画面(ウインドウ)で見るときには「タブレット向けのデザイン」が表示されます。
タブレット閲覧イメージ
(3)スマートフォンで見たときの閲覧イメージ
幅480ピクセル以下の画面(ウインドウ)で見るときには「スマートフォン向けのデザイン」が表示されます。
スマートフォン閲覧イメージ
このように、レスポンシブデザインは機種単位の最適化ではなくウインドウサイズによって最適化を行います。スタイルシートでレイアウトの制御を行うため、マルチデバイスに対応したデザインを効率的に管理できることができます。いまではウェブサイトの新規立ち上げや、リニューアルを予定しているクライアントの8割以上がレスポンシブなデザインを求めてくるといっても過言ではありません。
なぜここまでレスポンシブデザインが注目されているのでしょうか?
本日は、その理由について書かれた海外ブログを紹介しながら今後の動きを考えてみたいと思います。意訳であることをご了承ください。
中小企業がシンプル&レスポンシブなウェブデザインに目を向けている理由
レスポンシブデザイン、2013年以降の台頭
昨年は、ずっとインターネット界隈のいたるところで「2013年はレスポンシブWEBデザインの年である」という表現が見られました。どのようにしてレスポンシブWEBデザインに対応していくべきか、ビジネスブログから大規模なサイトにいたるまで、誰もがそのことを論じてあっていました。(mashable.comが2012年12月にレスポンシブになった直後にその動きは始まったようです)
2014年の第一四半期がいま終わろうとしていますが、「今年もレスポンシブWEBデザインの年だ」というフレーズが、すでにインターネット界隈のあちこちで登場しています。
新しいトレンドが時代に姿をあらわすと、たいていはだんだん消えていったり、すぐに違うものに取って代わったりするものです。しかしレスポンシブWEBデザインは登場後も消えずに残っています。
レスポンシブデザインにするメリットはなにか?
レスポンシブデザインによる優位性を得るために大幅な見直しを行っている会社のなかでは、現在、レスポンシブでシンプルなデザインがとても人気になっています。レスポンシブデザインがSEOの内部対策と適切に結びつくことで、ネットマーケティング戦略は大成功を収める可能性があります。
レスポンシブにリ・デザインすることには、いくつものメリットがあります。そのメリットを理解すると、なぜ「レスポンシブになる」のにこんなにも長い時間がかかったのか…と不思議に思うかもしれません。
レスポンシブがなぜ有効な方法なのか。
それは以下にあげる3つのメリットを知ることで理由が見えてきます。
(メリットその1)1つの型で、すべてにフィット
デスクトップパソコンやノートパソコン、タブレットにスマートフォン。消費者はWEBサイトにアクセスできる様々な機器を使っています。どの機器からインターネットにアクセスしていているかは関係なく、どの機器からでも快適な利用体験が得られるようにすることが非常に重要なのです。
Googleも、レスポンシブなWEBサイトが大のお気に入りです。Google Developersのページでは「さまざまなメリットがあることから、レスポンシブ WEB デザインの使用をおすすめしています」と述べてさえいます。
デスクトップパソコンでの見栄えを重視した「伝統的なWEBデザイン」は、たいていモバイル画面にはマッチしません。ユーザーはWEBサイトを閲覧するために画面を動かしたり拡大・縮小したりしなければならなくなります。ナビゲートがしにくいと、多くのユーザーはサイトに辿りついても直ぐに離れてしまいます。
レスポンシブデザインのコンセプトの基本は、スマートフォンのような機器にWEBサイトを「調整」して、ユーザーにもっと楽しんでもらえるように表示する、ということですが、これだけが目的というわけではありません。
レスポンシブデザインによってコンバージョン率が上がるようなレイアウトに変えることもできます。たとえば、サイトの上のほうに行動のきっかけが表示されると、あなたの会社にとって望ましいかもしれません。なぜなら、ユーザーがWEBサイトに到着すると、すぐにそのオファーが目に入るからです。
レスポンシブデザインでは、モバイルユーザーにとって「過剰にスペースを取っている」とか「邪魔になる」と感じるものを、モバイルバージョンから取り除くことも可能になります。
(メリットその2)より少ないことは、より豊かなこと
最近は、シンプルですっきりとしたフラットデザインが大人気です。
今日の経済市場にもっとも影響力を持つブランドであるAppleがiOS 7をリリースしたときに、この傾向ははっきりと示されました。まったく新しいフラットデザインを見て、デベロッパーは新しいデザインにマッチするよう、すぐにアプリを作り替え、デザインを変更しました。
すっきりとしたライン、わかりやすさ、簡単なサイトナビゲーションが最近の流行です。
かつて、多くの企業では、アニメーションやフラッシュなど「すごい」を体験させる要素をふんだんに盛り込んだ、きわめて「デザイン重視」のWEBサイトを選んでいました。いまや時代は変わり、伝えたいことがはっきり伝わる、すっきりしたラインとフラットデザインへと企業サイトは切り替わっています。Google、Yahoo、Bingといった三大サーチエンジンもフラットデザインにスイッチし、新しいフラットロゴも公開しています。
ゴチャゴチャと表示しすぎていてナビゲートしにくいWEBサイトは、時として、忙しい訪問者にストレスを感じさせ、離れるキッカケを与えてしまいます。一方で、とても魅力的でありながらシンプルなデザインならば、訪問者を望ましいコンバージョンに向かわせる助けとなることでしょう。サイトの訪問者はユーザーエクスペリエンスに満足し、企業はその訪問者からコンバージョンを得る可能性が高まります。
どちらにとってもwin-winな状況です。
(メリットその3)流行の先端、でも機能的
ほとんどの企業は機能性を求めてレスポンシブWEBサイトに転換しています。なかには流行の最先端をもとめ、先進性を保つためにレスポンシブサイトに転向している会社もあります。でも、それはまったく間違っていません。
どの企業にとっても、レスポンシブデザインから受けられる恩恵が一つあります。
それはモバイルアクセス(集客)の増加です。
2014年、モバイルからの集客力はパソコンベースの集客力を超えることでしょう。
さらに驚愕の事実を話すと…モバイル機器で地元の会社やサービスを検索した消費者のうち、88%が24時間以内にそこに電話をかけたり実際に足を運んだりしているのです。このことや、またほかにもモバイルの成長に関する情報がこのインフォグラフィックにまとまっています。
かつて、モバイルからの集客はデスクトップほどコンバージョンにつながらなかったと言われていましたが、その原因の多くは、ユーザーエクスペリエンスが劣っていただけのことです。
レスポンシブデザインのおかげで会社はモバイル訪問者にナビゲートしやすいWEBサイトを提供でき、それによってモバイルユーザーのコンバージョンが促されます。モバイルユーザーとモバイル検索は急速に増加しており、企業には選択肢はほとんどありません。
あるのは「いずれ検索の多数派となるものに対応するか」あるいは「沈没しつつある船とともに沈んでいくか」という選択肢なのです。
※この記事はbusiness2community.comのブログに掲載された「Why Small Businesses Are Turning to Simple & Responsive Web Design」を翻訳した内容です。
記事の感想:いかがでしたでしょうか。
記事に書いてある通り、レスポンシブデザインに対応することはコンバージョン率の向上やSEOによる集客面でメリットが大きいのですが、落とし穴も存在します。
レスポンシブデザインは完璧なデザイン手法ではありません。あくまでも基準となるソースがあるため、そのソースに記録されていないコンテンツは表示することができません。わかりやすく言い換えれば、それぞれの機種ごとに「まったく異なるコンテンツ」を表示させることはできないのです。
また、デザインの基準にする機器をどれにするかの判断も慎重に行うべきです。もしもあなたのビジネスのターゲットが10代を中心にしているのであれば、デスクトップパソコンを基準にするよりも、彼らの生活のなかで最も密接な存在になっているスマートフォンを基準にして、コンテンツやデザインを最適化したほうが、ウェブサイトの閲覧体験はより豊かなものになるでしょう。(最近ではこのようなモバイルファーストな考え方が広がってきています)