HOME -> モバイル時代のSEO情報ブログ

このエントリーをはてなブックマークに追加
カテゴリー: スマートフォン集客・モバイルSEO

レスポンシブWebデザインにすると売上が下がることがあるのは何故か?

2017年10月06日

GoogleはレスポンシブWebデザインを推奨していることを以前のブログ記事で報告しましたが、SEOのため、Googleのために何でも良いので自社サイトをレスポンシブWebデザインにするという態度だと、とんでもないことになります。

とんでもないこととは「売上が落ちる」という最悪の事態です。

Googleがモバイル対応をしきりに奨め始めた2年くらい前から多くの企業が自社サイトをレスポンシブWebデザインで作り直しました。

しかし残念なことにレスポンシブWebデザインで作り直したら検索順位は維持出来ても、売上が急に落ちた事例がいくつもありました。

何故そのようなことになったのかというとレスポンシブWebデザインの落とし穴にハマったからです。

レスポンシブWebデザインの落とし穴とは:

1、レスポンシブWebデザイン = シンプルデザイン

2、レスポンシブWebデザイン = フラットデザイン

3、レスポンシブWebデザイン = 文字数少なめ

だという思い込みを抱くことです。

1、レスポンシブWebデザイン = シンプルデザイン
→ 自社サイトをレスポンシブWebデザインにする時に、Webページ上に配置する写真、イラスト、ボタンなどを極端に単純化した単色のアイコンにすることがよく有りますが、確かにデザインがモダンになる場合もあります。

しかしデザインが上手くいかないと子供がつくったお絵かきのようなページになってしまうことがあります。

《レスポンシブWebデザインでよく見受けられる基本レイアウト》



中でも、Webページ内のビジュアルを単純にし過ぎたために:

・お客様の顔に目、鼻、口などが無くなりのっぺらぼうになった

・サービス提供者の顔からも目、鼻、口などが無くなりのっぺらぼうになった

・商品の写真ではなく、商品の単純な線だけの極端にシンプル化したアイコンになった

というように何でもかんでも機械的に単純化しているWebページを見かけることがあります。

《目、鼻、口などが無い人物のアイコンの例》

《商品の単純な線だけの極端にシンプル化したアイコンの例》



しかし、ここまでシンプル化すると購買イメージをつかみにくくなり、サイトの魅力が消滅してしまうこともあるのできをつけなくてはなりません。

また、Webページ内のパーツをシンプル化するとそれら同士が近くにあるとデザイン的に見栄がよくなくなるので、シンプル化したパーツとパーツの距離を離して余白を広げるとそれが水平なら未だ良いのですが、垂直に余白を広げるとユーザーがそのページから情報を得ようとする時に縦にスクロールする回数が増えてしまい疲れてしまうことが考えられます。

そうした場合、いっその事もっとぎっしりとパーツ同士の距離を縮めてもらったほうが見るのが楽になると感じることさえあります。

2、レスポンシブWebデザイン = フラットデザイン
→ これもよくある誤解なのですが、レスポンシブWebデザインはイコール、フラットデザイン、つまり立体的な画像は使わず全てを平明にして色にグラデーションはつけないものだという思い込みを持つ風潮があります。

この考えに陥ると立体的な画像を1つも使わなくなり、全体的に単調でのっぺりしたデザインになりリアリティーの欠けたデザインになりサイトにこれまであったリアリティーを失い、購買イメージがつかめなくなってしまうということもあります。

また、フラットデザインの最も深刻な問題は、高いデザインセンスが求められるという点です。

全ての画像をフラットにするとページ内にあるパーツ同士の色のバランス、距離のバランス、余白のとり方などが非常に難しくなります。

この水準のWebデザインが出来るデザイナーさんの数は非常に少ないはずです。そのため無理やりフラットデザインにするとWebデザインのレベルが急に下ることがあるのです。

《フラットデザインの実例》



3、レスポンシブWebデザイン = 文字数少なめ
→ これは最も重大な問題ですがレスポンシブWebデザインの場合はとにかく文字を少なくしなくてはならないという思い込みがよくあります。

確かにスマートフォンの小さな画面でレスポンシブWebデザインのページを見時には何千、何万文字もあるとユーザーが縦にスクロールする回数が増えて手が疲れることが考えられます。

しかし、Googleで上位表示をするためにはなるべく多くの文字数を載せなくてはなりません。この事を完全に無視してデザインが難しい
レスポンシブWebデザインでサイトを作り直すことが目的化してしまいとにかく文字を減らすということになるととんでもない問題が生じます。

それは、ユーザーに自社商品の良さ、競合他社との違いというような肝心のメッセージが伝わらなくなることです。
メッセージがユーザーに伝わらなくなれば、成約率は下がり、サイトからの売上が減るのは当然の結果になります。

レスポンシブWebデザインを作ることが目的化してしまい、文字数を減らし、検索順位は下がり、売上も下がるのでしたら本末転倒になります。

こうした最悪の事態を避けるためにも、文字数を極端に少なくすることは避けなくてはなりません。
文字数を減らさずにページの長さを短くするには「もっと見る」だとか、「詳細を見る」というリンクを張りそれを押すと下により多くの文字が表示される開閉式のアコーディオンという効果をJavaScriptで実装することが一つの解決策です。

《アコーディオンの例》



もう一つの解決策は、ページ内に水平にタブをいくつかつけてそれぞれのタブを押すとそのタブに関連付けられた文字が表示されるというタブをJavaScriptか、CSSで実装することが一つの解決策になります。

《タブの例》



以上が、レスポンシブWebデザインでサイト作り直す際に陥りやすい落とし穴です。

レスポンシブWebデザイン イコール(=)

・シンプルデザイン
・フラットデザイン
・文字数少なめ


ではなく、ノットイコール(≠)であることがほとんどなのです。

つまり・・・

1、レスポンシブWebデザイン ≠ シンプルデザイン

2、レスポンシブWebデザイン ≠ フラットデザイン

3、レスポンシブWebデザイン ≠ 文字数少なめ

ということになります。

ぜひ、こうした点に気をつけて少しでも早く御社の全てのサイトのモバイル対応を急いで下さい。

こうしている間にもGoogleはモバイルサイトの内部だけを見ることによってモバイル版Googleの検索順位だけではなく、PC版Googleの検索順位を決めるモバイルファーストインデックス導入の準備を進めています。その日は確実に近づいて来ています。

【関連情報】
結局Googleは全てのWebサイトをレスポンシブWebデザインに移行して欲しいのか?

【重要】Googleが再度モバイルファーストインデックス導入の延期を発表!年末か来年初頭まで延期

結局Googleは全てのWebサイトをレスポンシブWebデザインに移行して欲しいのか?

2017年09月23日

最近セミナー受講者の皆さんからいただくご質問で「サイトをレスポンシブWebデザインにするのが一番良いのか?」というご質問が増えています。

Googleは元々、PCサイトの全てのページをモバイル対応することを推奨しています。

特に、今年の年末から2018年初頭にかけて実施が予定されているモバイルファーストインデックス(PC版Googleとモバイル版Googleの検索順位を決める時に従来のようにPCサイトを見るのではなく、主にモバイルサイトのWebページの中身を見る新方式)の実施が近づいているなか、Googleが新たな情報をGoogleウェブマスター向け公式ブログで2017年9月15日金曜日に発表しました。


※ https://webmaster-ja.googleblog.com/2017/09/how-to-move-from-m-dot-urls-to.html

その記事で書かれているポイントは:

1、ウェブマスターの方々の間で、モバイル用に別途設定する URL(英語)からレスポンシブ Webデザインの利用に移行することへの関心が高まっている

2、レスポンシブWebサイトの準備ができたら、移行時にモバイル用の URL からレスポンシブWebデザインの URL に 301リダイレクトを設定し自動転送すること

3、レスポンシブWebデザインで作ったサイトに移行すると、メンテナンスやレポート作成が簡単になる。すべてのページについて別々の URL を管理する必要がなくなるだけでなく、さまざまな手段や技術も取り入れやすくなる

の3つです。

今回の発表では明らかにWebサイトのモバイル対応のためにレスポンシブWebデザインが最適だということを強調しています。

そもそもモバイル対応するには次の3つの方法があります:

(1)レスポンシブWebデザイン
→ これまでのPCサイトの各ページをレスポンシブWebデザインで作り直すことにより、WebページをPCで見るとPC用のデザインとして表示され、画面の小さなスマートフォンで見ると画面が小さくても見やすくレイアウトされたページに液体のように変形するもの。
→ WebページのURLはPCサイトもモバイルサイトも全く同じ



(2)動的配信
→ 文字情報がデータベースに記録されており、WebページをPCで見るとPC用のデザインレイアウトが適用されてPCサイトが瞬時に表示され、画面の小さなスマートフォンで見ると画面が小さくても見やすいデザインレイアウトが適用されてモバイルサイトが瞬時に表示されるもの。
→ WebページのURLはPCサイトもモバイルサイトも全く同じ



(3)別個のモバイルサイト
→ これまで運営してきたPCサイトはそのままで、別途新たにサイト内にディレクトリ、サブドメインとして別URLのモバイル専用サイトを設置するもの。
→ WebページのURLはPCサイトとモバイルサイトでは異なる



前から言われていたのはGoogleはWebページのURLはPCサイトもモバイルサイトも全く同じである:

(1)レスポンシブWebデザイン

(2)動的配信

を推奨しているのではということでしたが、最近の海外のSEO業界のニュースや今回のGoogleウェブマスター向け公式ブログでの発表を見る限り、どうやらGoogleは明らかに

(1)レスポンシブWebデザイン

を一番推奨しているということがハッキリしてきました。

レスポンシブWebデザインはGoogleが:
「レスポンシブWebサイトに移行すると、今後のメンテナンスやレポート作成が簡単になります。すべてのページについて別々の URL を管理する必要がなくなるだけでなく、さまざまな手段や技術(国際化のための hreflang、高速化を実現する AMP、検索機能の向上に役立つ構造化データなど)も取り入れやすくなります。」
といっているようにモバイルサイトを極限まで軽量化するAMP技術や構造化データのGoogleへの通知等において最も適していると述べているのが最も重要なポイントです。

レスポンシブWebデザインにはメリットだけではデメリットがあります。

最も大きなデメリットは、Webデザインがシンプルになるという点です。

何故ならレスポンシブWebデザインは基本的にはほとんど同じWebデザインをPCのブラウザで見た時には幅広で大きめに、スマートフォンのブラウザで見た時は幅を狭く小さめに変形するWebデザイン技術だからです。

こうした特性のためレスポンシブWebデザインでサイトを作る時は、スマートフォンのブラウザで見た時にどう見えるかからデザインをして、それをPCで見た時には幅を広くして文字も多めに表示するというように、モバイルで見た時のデザインから着想することになりがちです。

つまり従来の古いWebデザインでは・・・

・PCサイトをデザインする → それのモバイル版サイトをデザインする

とういうものでしたが、今後は・・・

・モバイルサイトをデザインする → それのPC版サイトをデザインする

というように順番が逆転することになるのです。

皆さんの中で未だモバイル対応が済んでいない方は、モバイルサイトからデザインをするレスポンシブWebデザインでサイトを作る直すことをおすすめします。

確かに難しいのは、「自社サイトのWebデザインを今さらシンプルにするのは抵抗がある・・・」という気持ちがどうしてあるかも知れません。

また、「モバイルサイトからWebデザインを考えるのは慣れていない・・・」という気持ちもあるか知れません。

しかし、時代も、Googleもモバイルから全てを着想するというモバイルファーストを求めるようになってきているのです。

そしてモバイルファーストというのは結局は、シンプルデザインなのです。昔のPCサイトのように雑誌のような複雑な段組のレイアウトでもなく、3カラムの古臭いレイアウトでもないのです。



大きなフォント、大きなボタン、画像が横ではなく、垂直に並ぶもの、というような今時のシンプルなデザインがモバイルファースト対応デザインなのです。Webデザインの世界から複雑さというものがモバイルファースト時代になろうとする今、消え去ろうとしているのです。複雑さは悪であり、シンプルさは善なのです。それが新しいWebデザインのルールになりつつあります。

毎回何度も同じことを言うようですが、周りをみても重たいPCでネットをやっている人よりも、通勤、通学、帰宅途中、エレベーター、エスカレーター、カフェ、レストラン、いたるところで下を向いて軽くて薄いスマートフォンを見ている人たちばかりになってきています。

彼らに自社サイトを見てほしいのなら迷わずモバイルファーストのデザイン、モバイルファーストのSEO、モバイルファーストのWebマーケティングをしなくてはなりません。

モバイルファーストインデックスの導入の日は刻々と迫ってきています。

少しでも早めの対応を行い新たなチャンスをもたらすことになる「ゲームリセットの日」に備えて下さい。


【関連情報】

《重要発表》Googleがモバイル版とPC版を分離する事を発表!数ヶ月以内に実施の予定(2016年10月14日)

《吉報!》Googleがモバイルファーストインデックス導入時期の延期を発表!(2017年04月01日)

《重要》Googleが再度モバイルファーストインデックス導入の延期を発表!年末か来年初頭まで延期(2017年04月07日)

英国のSEOカンファレンスでは何が話題になっているのか?

2017年05月28日

先週の2017年5月22日からロンドンで開催されたSMX London 2017に参加して先ほど帰って来ました。

ロンドンのWebマーケティングのカンファレンスは今回で2回目ですが、米国のカンファレンスとは次のような点が違うように思えます:

1、英国は島国であり、ヨーロッパにある多くの近隣国との貿易に力を入れている国なので海外SEOの話題が多い
→ 1日目5月22日のプレカンファレンスではその名も「International Search Summit 2017」(国際サーチサミット)という海外SEOの話題だけで丸一日多数の講座が開催されました。SEOの対象はGoogleだけではなく、Yandex(ロシア)、Baido(中国)、Wechat(中国)等に多岐に渡るものでした。



どうしても日本人相手のビジネスばかりで精一杯になりがちですが、英国にとってヨーロッパ諸国があるように我々日本人も近くのアジア諸国という成長市場を対象にSEOを実施すれば大きな成長機会を得ることが出来るはずです。

2、米国のカンファレンスはGoogleが最近どのような発表をしたのかという解説が多いのに対して、英国のカンファレンスはそれを踏まえてどのような対策を取るべきかというGoogleとは一定の距離を置くスタンスが見れる
→ Googleの技術スタッフが公式、非公式に発表する方針に一喜一憂するのではなく一定の距離を置いて、中長期的な流れを掴み、本質的な対策を取ろうという姿勢がありました。こうした落ち着いた態度も必要なのではないかと思いました。

海外SEO以外ではどのような話題があったのかというと主に:

(1)モバイルファーストインデックスの事前対策

(2)AMPというダウンロードスピードが高速なサイトの活用方法

(3)ソーシャルメディア活用がSEOにどのくらい効果があるのか?

(4)ボイスサーチ(音声検索)とAI(人工知能)対策

(5)最新の検索順位決定要因調査結果

(6)Googleのあらゆるパターンの手動ペナルティー対策

(7)モバイル対応をしている各種SEOツールの発表

というようにそのほとんどが今後私たちWebサイト運営者に求められるモバイルファーストのSEOについてでした。

今回学んだことは今後のブログ記事に反映し、詳細については全日本SEO協会の会員専用サイトにある動画ニュースコーナー「週刊SEOビデオニュース」と
「月刊会報誌 MONTHLY SEO REPORT」https://www.ajsa-members.com
などで報告させていただきます。

Googleの公式発表によると今年末から来年初頭にかけてモバイルサイトの内部を検索順位決定要因とするモバイルファーストインデックスが導入されます。
5月も終わろうとしており、残された時間は半年しかありません。

モバイルファーストインデックスが導入されてしまったらPCサイトをいくらいじってもモバイル版Google、PC版Googleの検索順位には反映されなくなります。モバイルサイトの内部対策がモバイル版Google、PC版Googleの検索順位に反映されるようになります。

その日が来るまでの間に何としても、自社サイトのモバイル版の充実と軽量化、そして他のモバイルサイトやSNSから紹介してもらえるようなコンテンツ造りに邁進して下さい。

このエントリーをはてなブックマークに追加
                    
鈴木将司の最新作品
プロフィール
一般社団法人 全日本SEO協会 代表理事

鈴木将司
2017年 10月 >>
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
最新記事