レスポンシブか？ファイルの読み分けか？

レスポンシブか？ファイルの読み分けか？

先日、コラムで「コーポレートサイトリニューアルにあたって配慮したこと（レスポンシブ対応編）」という記事を書いたんですが、やはり人の言動は何かを引き寄せるようです。
システム絡みでスマホ対応についての話がいつもよりちょっと多い気がする今日この頃です。
書いてみるもんだな・・・と改めて実感しました。

さて、スマホやタブレット端末に対応するための対策を色々考えることが増えたわけですが、”どのような対応が一番なのか？”と考えた時、結論だけを先に書くとすると、「どの対応であろうと一長一短ある。サイトの形態と設定したゴールにあわせる。」ということかなと考えています。
ECサイトでテンプレート機能があって既に根幹が出来ているところを、無理やりレスポンシブ対応にすると時間がかかりすぎますし、静的なページにわざわざプログラムを書き込んで振り分ける必要もないと思います。
ですので、その時々にあわせるのがベストだと思います。

ということで、今回のコラム記事では、そのお悩みの一助となるような内容にしたいと思っています。

弊社の基本的な関わり方や考え方として、ユーザビリティや使い勝手もそうなんですが、それよりも「検索エンジンがどのように判断するか」ということを大前提的に考えています。
ECサイトの場合、表示が1秒遅いだけで数割の無駄（機会損失）が発生すると言われてるので、もちろん、表示が遅いのは検索エンジンも評価を下げるわけですね。
デザインに関しては、色々なサイトを見てるので基本的なスクリプトを組む分には全然問題ありませんが、細かい分析までは専門としていませんので、そこについては厳密には応えかねます、予めご承知ください。

レスポンシブにしてもファイルの出しわけにしてもテンプレートの読み分けにしても、それらのサイトやページがどこを目指すのか・・・というのははっきりしておいた方がいいと考えています。
LP用のページでオーガニック検索からの集客を見込まない場合（ヘッダ内に nofollow を入れるなど）、レスポンシブにする必要はありません・・・というか、その場合それぞれの端末に向けて情報を整理する必要があるでしょう。

逆に、ECサイトのようにスマホからでも購入してもらうことを前提に考えると、余計な振り分けをして読み込み時間がかかるというのは避けたいところですよね。
ECサイトやシステムが絡むサイトの場合、smartyのようなテンプレートエンジンで組まれていることが多い気がします。
そのような場合、読み込むテンプレートファイルを分けてますよね。
一つ一つの仕組みで言えばそう大きくないかもしれませんが、積み重なると大きなモノになると思います。
出来れば、少しでも軽いロジックで表示させたいところですね。

ですので、まずは上記のようなゴールだけは最初に考えておきたいところです。
システムの仕様やゴールによって構成が変わるので、まずはゴールだけはきっちり抑えておきたいところです。

”出力ファイルを端末毎に変える”というのは、アクセスする端末によってURLが変わる・・・ということだと思って下さい。
例ですが、
PCからのアクセス : https://www.oosaka-web.jp/test.php
スマホからのアクセス : https://www.oosaka-web.jp/test_sp.php
のような形で出しわけすることを想定して下さい。
基本的にプログラムを組み込みます。
リダイレクトをさせなければいけないというところがポイントです。

• クローラーの振り分けはきっちりしておきたいところです。
  javascriptでリダイレクトをかけると確実なところかなと考えています。
• URLに変数などをつけて出し分ける場合でも、ユーザーとクローラーの割り振りだけはきっちりしておきたいところです。
• 二つのページが存在するということは、重複コンテンツになりかねませんので、metaタグにcanonicalを入れるなどして工夫をした方がいいのかもしれません。
• せっかく振り分けしてるなら、PCとスマホ用のページで出力する画像や読み込みファイルを適宜調整する必要があります。
  画像の軽量化などは色々なサービスやツールがあるので、お忘れなくというところです。
• htmlのようなインターフェイス出力のファイルの数が単純に2倍になるので、管理ができる体制は整えたいところです。

やはり振り分けだけはきっちりしておきたいところですね。
PC用のページ、スマホ用のページ、それぞれ明示した上でクローラーの振り分けをしたいところかなと思います。
スマホからPCページにアクセス出来、PCページからスマホページにアクセス出来るようにしておく機能を持つのも一つかなと思います。

レスポンシブ対応とは、1枚のhtmlファイルの中でブラウザや端末のサイズ毎に読み込むCSSファイルを変え、情報そのものは変えず見た目を調整することです。
そのため、PCとスマホでは読み込まれる情報は同じでも表示のされ方に違いが出てきます。
URLも変わりません。
プログラムを組み込む必要もありません。

• PCでも表示が重いような重い画像やファイルは出来るだけレンダリングさせないように配慮する。
• CSSやJavascriptの読み込み量が増えるため、多用しすぎない方がいいかもしれません。
• スマホだけに表示させるリンクでも、PCで検索した時に出るサイトリンクに表示されることがあるため注意したいところです。
• PCとスマホコンテンツを出し分ける時、display:none;を使うことが多いと思います。
  多用しすぎることで何か起きるかもしれないので注意したいところです。
• PCの情報全てをスマホで表示する場合、だいぶ長くなる可能性があるので、上手く調整したいところです。
• ビューポートの設定は忘れずに。
• tableタグを使って大きな表などをつくってる際には、スマホ表示用対策はしておきたいところかもしれません。

だいたい上記のような感じでしょうか。
CSSの内容など、慣れると難しくありませんが、PC向けに書く記述とは根本的に違うところがあるので注意したいところですね。

”読み込むテンプレートファイルを端末毎に変える”ということですが、一般的なケースとしてどの端末でアクセスしてもURLは変わらないけど表示させるソースは端末毎に変わる・・・ということだと思って下さい。
例ですが、
PCからのアクセス : https://www.oosaka-web.jp/test.php
スマホからのアクセス : https://www.oosaka-web.jp/test.php
という形でURLは変わらないけど、出力内容が異なっている状態です。
プログラムが組み込まれています。

• テンプレートファイルの数が多くなるので、管理がきっちりできる体制を整えたいところです。
• テンプレートの読み込みが多くなるため表示に時間がかかるかもしれません。
  これだけは最も避けたいところです。
• クローラーの振り分けはきっちり対処しておきたいところです。
• テンプレートを出し分けるだけにしても、URLも別けておきたいところかもしれません。
  一つのURLで複数のインターフェイスを持つということはGoogleが判別しにくい可能性があります。

「家具 通販」のようなECサイトが出てくるであろうキーワードで検索してみると、よくわかると思います。
たまにではありますが、スマホ対応が出来ているサイトでも「スマホ対応」と表示されていないことがあります。
たまたま表示されてなかっただけかもしれませんが、それでもやはりきっちりしてればそのようなことになる可能性は非常に低いです。
スマホからのクリック率を下げないためにも、十分に配慮したいところです。

念のためですが、スマホ対応の有無は検索ランキングに影響しないことをGoogleは2015年9月現在、明言しています。
ですので、スマホ対応は検索順位とは無関係だと思って頂いた方がいいのかもしれません。

とは言え、（重ね重ねですが）やはりCTRに影響が出るため、無視は出来ないところですよね。
ゴールを考え、配慮すべきことを考え、とるべき対応を取るのがベストだと思いますので、工数（時間や費用）だけの問題で考えないことをおすすめしたいと思いました。

補足ですが、今回の記事では3つのケースとして分けましたが、細かい設定などを含めると多数のケースが出てきます。
細かい部分には触れていませんが、細かい設定をする際にはさらに配慮が必要になるので、十分にご注意頂ければと思います。

執筆 : 清水 隼斗