レスポンシブWEBデザイン・スマホ対応のWordPressテンプレートは本当に必要？

当ブログで販売中のWordPressテーマ「メシオプレス01」に関して
「レスポンシブWEBデザイン、マルチデバイス、スマホ対応の予定は？」
といったお問い合わせを毎月いただきますので、回答をシェアしておきます。

結論から言いますと、レスポンシブWEBデザインというか、
スマホ、タブレットユーザー向けに最適化したテンプレートに
バージョンアップさせる予定はあります。
次期大幅バージョンアップ時に盛り込む予定です。

ただし、ビジネス目的のサイトを単純にスマホ化させると、
コンバージョン率が下がる可能性が高く、色々と情報収集・検証しているところです。
CVRが下がる主な原因を3つ挙げてみます。

原因1：スマホとPCで利用目的が変わる場合がある

人によって利用目的は様々で一概には言えませんが、
パソコンユーザーはじっくりサイトを読み込みたい人、
スマホユーザーはすぐに素早く情報を知りたい人に向いている印象を受けます。

例えば、「リフレクソロジー　池袋」というキーワードをパソコンから検索した人は、

「今度、仕事で池袋に行く予定があるけど、最近疲れが溜まっているから、
　その帰りにリフレクソロジーサロンにでも寄ってみようかな。
　どこがおすすめ調べてみよう」

というケースが一例として想定できます。
その時に検索1位に表示されたホットペッパーのサイトを見てみると、
パソコンでは下記のように表示されます。

ページトップのメニューにはリフレクソロジーだけでなく、
「ボディケア」「足裏マッサージ」「アロマトリートメント」など、
さらに細分化されたメニューで情報を提示しています。
じっくり色々と調べてみたい人のニーズにマッチしています。

一方、このページにスマホ（iPhone5）からアクセスすると、
下記のようなページが表示されます。

パソコン版にあったメニューやヘッダー画像がごっそりなくなり、
近隣駅名のメニュータブが最上部に表示されます。これは例えば、

「池袋での打ち合わせが予定より早く終わったけど、
　今から戻るのには時間が早いから、近場のリフレクソロジーにでも寄って行こうかな」

という人が検索した場合に親切な設計であると言えます。
現在地の近くにあるお店をすぐに素早く検索しやすいように、
余計な情報を排除しているわけです。

このように、スマホ対応にするというのは、
ただ単にレイアウトや文字の大きさをスマホの画面サイズに合わせるのではないのです。

特に、店舗を構えているオフラインビジネス向けサイトでは、
ユーザーが「家からアクセスするケース」と、
「外出先からアクセスするケース」で利用目的が変わってきます。

よって、サイトで扱う情報や商品に応じて構成を設計し直していなければ、
単なる「自己満足スマホ対応」になってしまうこともあります。

原因2：グローバルメニューやサイドバーが消える・隠れる

安易なスマホ対応にしたことでコンバージョンが下がる原因として、
個人的に最も影響していると感じるのがこれです。
レスポンシブWEBデザイン対応のWordPressテンプレートが増えてきていますが、
そのほとんどが「アコーディオンメニュー」を実装しています。

アコーディオンメニューとは、メニューボタンをクリック（タップ）すると、
格納されていた中身が表示されるというものです。
スマホはパソコンほど回線が速くないので、読み込み内容を少なくして、
表示速度を上げるために実装している機能なのだと思います。

先日、レスポンシブWEBデザイン×アフィリサイト専門家のハタボさんに
Twitterでも教えていただいたのですが、
表示速度が上がったことでコンバージョンも上がったそうです。

https://twitter.com/iota333/status/330199607072137217

このハタボさんの事例のポイントは「モバイルファースト」で、
パソコン用サイトを作り直している点にあります。

https://twitter.com/iota333/status/330190956177543168

モバイルファーストとは何かというと、パソコンサイトをスマホ対応させるのではなくて、
「モバイル（スマホ）サイトから先に作る」という考え方です。

昨年、レスポンシブWEBデザインの勉強で参加した下記のセミナーでも、
モバイルファーストの重要性が語られていました。
SwapSkills doubbble vol.05｜One Web 2012

ところが、（ご存知のように）現在主流の「スマホ対応」と呼ばれるものは、
デスクトップファースト（パソコンサイトから先に作っている）がほとんどです。
パソコンで表示されていたグローバルメニューやサイドバーを
単純にアコーディオンメニューで隠したり、フッターに移動しているのです。

そうするとどうなるのかというと、コンバージョン率が低下します。
その証拠として、ランディングページでの事例になりますが、
下記のような報告が挙がっています。

多くの方がスマートフォンサイトにする際にナビを付けたりコンテンツを削ったり、試行錯誤してページを軽くしたり、サイトを整備してコンテンツを絞ったりするわけですが、それが大きな間違いなのかもしれません。
参考：スマートフォンサイトへの最適化はちょっと待った！

WordPressのスマホ対応プラグイン「WPtouch」を使う場合もそうです。
WPtouchを使うとグローバルメニューやサイドバーが表示されなくなります。
その結果どうなるのかというと、コンテンツ大王のパシさんが記事にしていました。
参考：WordPressサイトをスマホ対応したらPVと広告クリック数が激減

私も以前は「WPtouch」を使っていたのですが、
パシさんの記事を見てから「WPtouch」の使用をやめています。

ただ単にグローバルメニューやサイドバーを消しただけでは、
収益を度外視した趣味ブログなら良いかと思いますが、
ビジネス目的のサイトの場合は逆効果になる可能性が高くなります。

原因3：意図しないユーザーの導線が発生する

デスクトップファーストで作成したサイトを自動振り分けして、
スマホ対応したアフィリエイトサイトを見るとよくわかりますが、
サイドバーがフッターに移動すること自体もマイナス要因だと思います。

例えば、この記事を書いている2013年5月7日時点で、
「酵素ドリンク　比較」でGoogle検索1位の下記サイト。
酵素ドリンク比較@人気の酵素を集めました。

パソコンサイトではこのページの記事終わりがアフィリリンクで終わっていますが、

このページをスマホから見ると、下記のようになっています。

スマホだとその下にズラズラとサイドバーメニューが並んでしまうのです。
記事を読み終えたところでアフィリエイトリンクをクリックしてもらいたいのに、
それ以外の出口（サイドバーメニュー）が目立って表示されてしまうのです。

他にもサイトトップのランキング表をパソコンで見てみると、
下図のようになっていますが、

これをスマホから見ると下図のようにテキストが右端に寄せられ、
縦に間延びしたいびつなランキング表になっています。
イメージ画像も画面内に表示されずに外に出てしまっています。

これがスマホに最適化された表示には私は見えません。
むしろ、余計に読みにくいと思うのです。

ちなみに、スマホ対応していないサイトでもそうですが、
パソコンでは綺麗に改行したつもりでも、
スマホで見ると改行のタイミングがおかしなことになっています。

特に私のブログのように文章を文節区切りで改行をしていると、
スマホで見た時の改行のタイミングが変なことになります。
スマホからの閲覧を考えるなら文節区切りで改行するのではなくて、
段落区切りで改行していったほうが良さそうです。

スマホ対応はモバイルファーストで、それが無理なら無理にスマホ化しない

以上のような理由から、デスクトップファーストで作られたサイトを
安易に振り分けたり、レスポンシブWEBデザインに対応にしただけで、
「スマホ最適化」と呼べるのかというと、私は非常に疑問に感じています。

スマホ対応にするならモバイルファーストでスマホ用に設計することが重要で、
それが無理ならパソコン表示のままにしておくのが無難だと思います。

例えば、スマホ用にサイトを作り直している例として、
わかりやすいのがYahoo!JAPANのニュースサイトです。
パソコンで見るとサイドバートップに広告枠がありますが、

スマホで見ると画面最上部に広告枠が移動してきます。

もし、サイトアフィリエイターがスマホ用サイトを作るなら、
特別単価や固定費のアピールのために、
こういった目立つ場所への広告枠が必要なのではないでしょうか？

ページ最下部の画面もサイドバーをズラズラ並べて終わるのではなく、
広告枠でしっかりと収益化を狙いにいくように設計されています。

パソコンサイトはスマホを横にして見れば問題ないと思うのです・・・

また、スマホ対応していないサイトをスマホで見てみると、

パッと見ではテキストはほとんど読み取れません。
ですが、スマホを横に倒して見てみると、

なんとか読めますよね？
記事本文に関してはまったく問題ないレべルだと思います。

パソコンで設計したコンテンツが全て表示されますので、
パソコンユーザーもスマホユーザーも利用目的が変わらないサイトなら、
パソコン表示のままにしたほうが良いのではないでしょうか。

当ブログの場合だと、スマホの縦表示は下図のような感じです。

文節区切りにしているので、改行タイミングが変になっていますが、
横にすれば普通に読めると思います。

つまり、スマホ対応していないサイトをスマホから見る時は、
「画面を横にして見る」という習慣がユーザーに根付けば、
スマホ対応する必要もないのでは？と思うのです。

ただし、RWD×アフィリサイト専門家のハタボさんが言及していたように、
スマホ最適化されたサイトは「表示速度が早い」というメリットがあります。
また、実店舗系サイトはユーザーがアクセスする時と場所によって、
サイトの利用目的が変わる場合もあります。

なので、表示されるまで待てないせっかちなユーザーを囲い込んだり、
実店舗系サイトの場合はスマホ対応が必要になってくるのかなと思います。

ちなみに、ランディングページをスマホ最適化する場合は、
必要な情報は「全部載せ」にした縦長ページが有効とのことです。
参考：スマートフォンサイトはながーくながーく！

サイト構成よりも前に、某アクセス解析の広告を排除するべき

結局のところ、メシオプレス01をスマホ対応させるにしても、
安易なレスポンシブWEBデザインにするのではなくて、
スマホ用に再設計できるようなテンプレートのほうが良いのかな？
など色々と考えている最中です。

ただ、アフィリエイターなら広告主のLPが最適化されていれば良いので、
今はそこまで気にすることでもないのかなとも思っています。
https://twitter.com/tottori_koji/status/297670087954022400

スマホ最適化していないことで収益が下がるようなことになったら、
真剣に考えれば良いのではないかと思います。
その頃には色々な検証データも揃っているでしょうし。

それよりも、広告が表示されるアクセス解析を使っている人は、
どでかい広告が表示されないようにアクセス解析を変えることが、
今すぐできる最も簡単なスマホ対策だと思います。

この広告はスクロールしても画面下部や画面上部にずっと表示されるので、
ユーザーからしたらめちゃくちゃ邪魔ですし、
アダルト広告が表示されたりしたら印象も悪いです。
Google Analyticsを使えば広告も表示されません。

いずれにしても、私がスマホ（iPhone）を購入したのは2013年2月で、
スマホサイトのことはまだまだ勉強中の身です。
ゆえに、今回の記事は机上の空論で間違ったことを書いているかも知れませんので、
何か突っ込みどころがありましたら、突っ込んでいただけると幸いです。

関連記事
はてブユーザーは、スマホサイトの現状をどう思っているのか？