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

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

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

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

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

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

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

１、レスポンシブWebデザイン　＝　シンプルデザイン

２、レスポンシブWebデザイン　＝　フラットデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

《アコーディオンの例》

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

《タブの例》

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

レスポンシブWebデザイン　イコール（＝）

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

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

つまり・・・

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

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

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

ということになります。

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

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

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

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