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

2015年2月、
Googleはスマホ対応サイトをモバイル検索結果で優遇するアルゴリズム変更を発表しました。

また、Google検索において、ついにスマホがPCを超えたという結果も発表されました。


随分と前からスマホ時代到来は目に見えていましたが、今までは、スマホではパソコン用とは別のスマホ専用に作ったホームページを見せなければ使い勝手よく表示されませんでした。

それで、それまでに有力サイトに育て上げてきたサイトさんも、実は、スマホ専用サイトをせっせと別に作って対応してきたわけです。

即ち、従来のガラケーにも対応するサイトも含めれば、同じ内容で3つのホームページを作って対応して来たわけです。

それが、PCとスマホは今や一つのhtmlで両方に対応できるようになりました。
【レスポンシブ Web デザイン(Responsive Web Design)】です。

言い方を変えれば、先達の苦労を差し置いて、新参者がただ一つのホームページで、スマホからもPCからもW集客ができる時代に入ったということです。

これらのことから、当然、

『スマホからのアクセスもより多く獲得できるように努力しない手はないでしょ!』

と言いたいところですが、実は、それほど単純なことでもありません。

後述しますように、メリットもあればデメリットもあるということを理解された上で選択されることが大切です。

当事務所の制作支援で【レスポンシブ対応】を掲げましたのは、せっかくホームページを持たれるのであれば、

  • メリットの方が大きいのではないかと判断している
  • 【非対応】に戻すにも比較的容易にできる
  • 逆に【非対応】から【対応】に変更するのも比較的容易にできる

という3点に依ります。

当然、【対応】【非対応】のいずれを選ばれるかの選択はご自由です。

レスポンシブWebデザインは伝家の宝刀?

私はというと、実は、スマホ専用のホームページは作りませんでした。
スマホでPCサイトを見ると確かに小さいのですが、PCサイトそのままのイメージで見れますし、小さいと思ったら部分拡大もできますから、私としてはあまり問題にしていませんでした。

即ち、PCサイトそのままのイメージで見たい人にとっては、スマホ対応した構成にしてしまうと、反って違和感を感じるケースも発生するということも言えるのではないでしょうか?

しかし、実は、スマホでPCサイトを見るときの不満ベスト3は、

  • 文字が小さすぎる
  • そのために部分拡大・縮小するのも面倒くさい
  • 間違ったところをクリックしてしまってイライラする

ということのようで、これでは、やっぱり考えが甘いようです。

とは言っても、私のように、PCサイトそのままのイメージで見たい人も現実に居られることも確かですし、現実にスマホからご注文も多くいただいているとなると、【レスポンシブ対応】したことで逆に上得意様にマイナス要因となってしまってはと不安になってしまいますよね。

何事でもそうですが、『マルチ機能』あるいは『複合機能』というものは、何かを得た分何かを失うということから逃れることはできません。

ですから、【レスポンシブ Web デザイン】も万能というわけではないのです。

では、運営する側としての主なメリットとデメリットを挙げておきましょう。

メリット

  • 一つのhtmlでPCにもスマホにも反映できる1ソース管理

    追加も更新も別個にする必要がなく、漏れやミスがなくなり、管理が楽です。

  • googleが推奨している=SEOの優位性

    google推奨:スマートフォンに最適化されたサイト構築の推奨
    googleが推奨しモバイル検索結果で優遇すると公言していることにより、SEOとしての優位性が見込まれる。

  • 閲覧環境によってシェアやリンクの違和感を失くせる

    PCでスマホ専用サイトに誘導されたり、スマホでPCサイトに誘導されたりした場合の違和感が無くなる。

    前者は確実にすぐに離脱となるだろう一方、後者はPCに慣れた人ではそうでもないとは考えますが、一般的には妥当と言えるメリットでしょう。

デメリット

  • スマホでの閲覧時、読み込みにやや時間を要す

    私としては全く気にならないのですが、スマホが主流の方には僅か3,4秒が致命的なのかもしれません。
    しかし、私のPCサイトをスマホで閲覧して下さる方も多いですから、特には気にしないことにしています。

  • スマホやタブレットでPCサイトのイメージで見たいニーズを逃すことになる

    今までスマホで問題なく注文に至っている方に対しての影響がプラスと出るのかマイナスと出るのか?

  • やっぱりガラケーには対応できない

    もともとガラケーは別ですからデメリットとまでは言えませんが...。

読み込みにやや時間を要するデメリットに対してはそれほど気になりませんが、PCサイトのイメージで見たいニーズがどうしても気になるところです。(PCサイトのイメージが強すぎるのだと思いますが)

当方の運営するサイトもスマホからのアクセスが4割ほど占めていますから、PC専用サイトのままで突き進むのも一つの道だと考えています。

ただ、PCに慣れた層にはスマホにおいてスマホ対応表示にしても許してもらえるであろう一方、スマホを常用している層にはPC表示だと離れられるケースが比較的多いのではないかと考えることもあって、やはり【レスポンシブ対応】を採用した方が得策ではないかと考えています。

何よりもgoogleが推奨しているという事実を無視するわけにはいかないと判断するからです。

スマートフォン ユーザーに配信するサイトでは、可能であればレスポンシブ ウェブ デザインを採用することをおすすめします。ただし、フィーチャーフォンには CSS メディア クエリに従う機能がないため、フィーチャーフォンに配信する場合、動的な配信か別個の URL を使ってフィーチャーフォン用のコンテンツを配信するようにサイトを設定する必要があります。

※フィーチャーフォン=ガラケー

引用:googleモバイルSEO<フィーチャーフォン

実際に、PCサイトをレスポンシブ対応に変えた結果、スマホからの訪問者の離脱率(すぐに他のサイトに移動する訪問者の率)が大幅に減ったという報告が多々見られます。

「やっぱりそうなんだぁ!」ですね。

当事務所の制作支援するレスポンシブ対応は、一般的には意外にできていなかったりする

  • 横長の表もスマホではスワイプして表のイメージのまま見れます。
  • google mapやyoutubeの埋め込みもスマホでは自由自在に拡縮表示されます。

等の嬉しいユーザビリティをチューニングしてあります。

最後に、ガラケーに対してはどうかというと、携帯サイトが叫ばれ始めた当初は、携帯からの客層は要注意の雰囲気がありましたし、ニッチな商品やサービスをそこまでして認知してもらう必要も感じないという事情もあって、そのまま何もしないでここに至っています。

今日では、多くの方がスマホに移行しておられますが、40代以降の層ではガラケーのシェアが依然として50%以上あるようですから、当方のような30代以上がメインターゲットとなるようなケースでは、本来は携帯サイトを別に持っておく方がよいことは確かでしょう。

しかし、今後の動向を考えると、携帯専用ページまで作って、その甲斐があるのかどうかは私としては大いに疑問です。

極めつけの理由として、やっぱり面倒くさいという思いが先だってしまうことがありますが...。

これからサイトを持たれるのであれば、あれもこれも狙わず、はっきり「PCかスマホでしかご注文は受け付けていません」というスタイルを通す方が結果として合理的だと考えます。

携帯専用サイトを作る必要が出れば、PCやスマホのホームページとは関係なくいつでも付け足せるのですから。(厳密には重複コンテンツと見なされないようにタグを埋め込まねばなりません)

【レスポンシブ Web デザイン】をPCで確かめるには?

【Responsive Checker】というレスポンシブデザインの検証サービスがあります。

当サイトTrinity、あるいは、サンプルサイト「ICLサンプル塾」の確認したいページのURLをコピーし、【Responsive Checker】のページ最上部のURL入力欄にペーストされて、左サイドバーから確認したいスマホ端末を選んでいただければ、どのように表示されるかが確認できます。


レスポンシブが機能していることのザックリの確認でよければ、簡単に次のような方法でも確認できます。

【レスポンシブ Web デザイン】のサイト、例えば当サイトのサンプルサイトを普通にPCで見ると下のように見えます。

【レスポンシブ Web デザイン】サイトをPCで見る

ブラウザの縮小ボタン(上図↑)を押して小さくなった表示の右端を幅を狭める方向にドラッグして、実物のスマホと同じ程度の幅に狭め(下図左)、上下にスクロールしてご覧いただく表示(下図右)がスマホでの表示となります。

【レスポンシブ Web デザイン】サイトをPCブラウザの左右を縮小して見る-1

PCで見る表示の①→④の順番で(下図参照)スマホ画面にマッチした表示がされていくことになります。

【レスポンシブ Web デザイン】サイトをPCブラウザの左右を縮小して見る-2

【レスポンシブ Web デザイン】サイトをPCで見る

画像は自動的に縮小され、文章はスマホの表示画面に合わせて折り返し表示されることが分かりますね。

ちなみに、レスポンシブ非対応の場合は、スマホではPCサイトで見たままの表示が単に縮小された形で表示されます。(下図)

【レスポンシブ Web デザイン】サイトをPCで見る

一旦作ったホームページを変えるのは大変?

多くの方は、
「ホームページを持っていれば、構成を違う枠組みに変更するぐらいは簡単だ!」
と思っていらっしゃるのではないでしょうか?

これは大きな間違いです。

ホームページは一旦作ってしまうと、
いざ変更するとなると結構大変な作業になります。

意外にそうは思っていない方が多いようです。
「こんなはずではなかったのに...」とならぬよう、この際に再認識されて下さい。

同様に、今持たれているホームページを【レスポンシブ対応】に変えるにはスタイルシートCSSとhtmlを追加・改造すればいい訳ですが、素人では出来ません。
制作を依頼したところに再度依頼しなければなりません。

あるいは、新たに同じコンテンツを【レスポンシブ対応】した新しいCSS・htmlに適用させて作り直すいう方法も取れます。
当事務所がお受けできるのはこちらのタイプになります。

費用面は考え方にもよって大きく変わってきますが、本質的には大して差が出ないのではないでしょうか?

結局はどちらにしても結構な手間がかかるということです。

ところが、これから初めてホームページを持つあなたは、
いきなり【レスポンシブ対応】から出発できるのです。

当事務所が制作支援するホームページのベースcss・htmlはレスポンシブWebデザインで作り込んだ後で「やっぱり無効にしたい」と結論されても、簡単な作業で無効にすることが出来ます。

また、逆にレスポンシブWebデザイン非対応で作り込んだ後で対応させる変更も容易に行なえます。

新参者なのにベテランと同じスタートラインから出発できる最大のチャンスが訪れたと言うこともできますね。

サブコンテンツ

留意点

ホームページ制作に必要な原稿・画像等を当事務所にご来所の上、ご説明していただける場合は受注を優先させていただきます。

また、アポなしでの突然のご来所には、ご対応できかねますので、この点お含みおき下さい。

ホームページ制作受注に向けての営業活動でお伺いすることは致しませんが、同様に、受注させていただいた場合も、打ち合わせ等のため当事務所の方からお伺いすることは致しません。

対面での打ち合わせが必要な場合は、申し訳ございませんが、アポ取りの上ご来所お願い申し上げます。

このページの先頭へ