2015.3.3

サイトリニューアルでレスポンシブwebデザインをやめた理由

どうも、しげあきです。
通常業務の合間をみて弊社サイト(一人で作ったため2ヶ月近くかかってしまいましたが…)をリニューアルすることができました。
デザインもすべて変更することにしました。

そこで本記事ではリニューアルをご報告するとともに、昨今のWebデザインについて少し言及しておきたいことがあります。

レスポンシブWebデザインについて

最近、ネット上の多くのサイトがレスポンシブデザインで制作されているのを目にします。

かく言う弊社サイトも以前はレスポンシブデザインで制作されたサイトでした。

それに伴いレスポンシブサイト構築のご依頼は多々あり、現在でも多々ご相談いただきます。

レスポンシブWebデザインのメリットは言うまでもなく、
あらゆるデバイスに合わせた表示をできることです。

resuponsa

レスポンシブデザインは基本的にワンソースで作られているため、スマホサイト表示によってURLが変わったりすることもなく、1つのファイル更新ですべてのデバイスに適応できることに意味があります。

そのためレスポンシブサイトは「SEOに最適」、「Googleが推奨」などと聞かれるようにもなりました。

また、Google公式ブログより4月21日より、サイトがスマホ対応しているかどうかがランキング結果の要因になると発表されました。

Googleが公式ブログで、モバイルフレンドリーをランキングシグナルに採用することを正式に発表しました。

ちなみにスマホ対応されているサイトはスマートフォンGoogle検索で以下のように表示されます。

jsjdfijsd

「レスポンシブ=良い」は偏見

レスポンシブはまるで魔法かのように言われ、レスポンシブWebデザインの意味もわからずサイトリニューアル案件についてレスポンシブにしたいとご相談をされてくる方が多々います。(本当にたくさんいらっしゃいます…。中には「レスポンシブ」というものをサイトに入れれば自動的に今のサイトがすべてのブラウザに最適化されるようになるんじゃないの?という方もいました…汗)

実は本記事はそういった方に読んでいただくために書いた記事でもあります…。

そもそもレスポンシブデザインって何?

そもそもレスポンシブデザインって何?と思う方も多いと思いますし、説明しても少し難しいところもあるかも分かりませんが、端的に言えば、「デバイスのブラウザサイズによって表示内容を変える」と言ったものになります。

お手元のPC、スマートフォン、タブレットなど各種端末によってディスプレイサイズが全く異なることはお分かりいただけるかと思います。

レスポンシブWebデザインはメディアクエリを用いて各ディスプレイサイズで読み込むCSSなどを変え、それらサイズ毎に表示を最適化させています。

レスポンシブサイトにはメリットとデメリットがある

メリットについてはこれまで語ってきた通りです。
そしてデメリットについては主に以下のようなものがあります。

  • デザインが限られる
  • 表示が重くなる
  • 決してそれぞれのデバイスで最適化しているわけではない
  • 制作には通常より工数・予算がかかる

まずはじめに、以下の問いについて考えてみてください。

「あなたのWEBサイトは、今、世の中にある、あらゆるPC・スマートフォン・タブレットから閲覧されていますか??」

上記問いについてはっきりと「Yes」と答えるのは、とても大規模のWEBサイトに限られるかと思います…

ブラウザのバージョンなども含めば、はっきり言ってすべての端末・ブラウザ・バージョンに最適化されたWebサイトと言うのはかなり非現実的です。

もし、今世の中に出回っているすべてのデバイス・ブラウザで最適に表示されるようにWeBサイトを作ろうとしたら、コストがどれだけかかることか、、、

よく勘違いされてしまうのが、レスポンシブデザインとは閲覧しているブラウザのスクリーンサイズによって表示を変えているだけで、それぞれの個別の環境で最適化させているわけでは決してないと言うことです。

ブレイクポイントをたくさん設けるより、しっかりとしたSP・PC用サイトを作るべき

ブレイクポイントとはブラウザスクリーンサイズを判定して切り替えるポイントのことです。
レスポンシブサイト作成で一番大きな課題となるのがブレイクポイントです。

あらゆるデバイスで最適化させようと思ったら、どれだけ細かくブレイクポイントを設けなければいけないか、、
さらに前述しましたが、レスポンシブサイトは基本的にワンソースなため、デザインに制限がでてきたり、デバイスによっては必要のないコードも読み込んでしまうため表示の遅滞にも繋がり、それらをCSSで無理やりdispaly:noneとかやって消す必要があります。

すべてのデバイスで最適化させることが非現実的なのは想像していただけたかと思いますが、まずは、やはり大きく別けて、スマートフォン専用、そしてPC+タブレット専用のデザインの2つを制作するべきです。

URLが変わるのが嫌なら、PHPでユーザーエージェントを判別して振り分けるとか.htaccessとかで分けるのが基本かと思います。

そもそもレスポンシブサイトはつまらない

レスポンシブデザインが流行りなのか、テンプレートの普及なのかは分かりませんが、
同じようなデザインのサイトが多いってことです。

さらにそれらに共通して言えることは、あらゆるディスプレイサイズで最適化させようとするあまり、デザインがとても単調になってしまっているということです。

たとえばwordpressを使ったブログ型のサイト。
弊社サイトもWordPressですが、オリジナルでテーマから制作しております。
WordPressでレスポンシブのテーマを少しカスタマイズして使っている人や、
たくさん普及しているようなレスポンシブテンプレートを使ってサイトを作っている人、、、

どのサイトも遜色なく、オリジナリティに欠けます。。。

個性やUIが大切なWebの世界において、ただ流されるがままにレスポンシブサイトにしてしまっている場合は注意が必要です。

結論:「案件による」

最後に、投げやりになって申し訳ないのですが、これが結果答えです。

例えば、スマートフォンをあまり使わないようなユーザー向けのサイトを作る時、無駄にスマートフォンサイトのUIにこだわる必要性はありません。
逆に、10代、20代の女性をメインターゲットとするファッションサイトなどで、スマートフォンよりPCサイトを優先するのは愚の骨頂です。

特にランディングページ(LP)でレスポンシブはあまりに無意味

弊社ではランディングページ制作案件をいただくことがとても多いです。
そして「ランディングページをレスポンシブにしたい」とご相談されることもとても多いです。。

SEOで上位表示を目指すためのランディングページ(以下、LP)なら、まだレスポンシブにしたい気持ちも分からないでもないのですが、リスティング用や単発のLPをレスポンシブで作るのはあまりにも無意味で逆効果です。

前述しておりますが、レスポンシブはただブラウザのスクリーンサイズによって表示を変えているだけで、何も各デバイス毎に最適化させているわけではありません。

無理矢理あらゆるデバイスに最適化させようとレスポンシブサイトを作っても、それは単調なデザインにしかならず、最もCVRが重要視されるLPで、個性や主張が無くなるのはもはやLPを作る意味すらないと言ってもいいです。

以上、長くなり熱くなってしまうところもありましたが、なんとなく言いたいことはお分かりいただけましたでしょうか。

まずはレスポンシブサイトを作ろうと考える前に、サイトを使うエンドユーザーのことを第一に考えるようにしましょう。

それではまた!

この記事に付けられたタグ