【リダイレクト】スマートフォンとタブレットとPCで表示する方法

スマートフォンとタブレットとPCを上手く表示する方法としては、HTML5のCSS振り分け機能と、CSS3（スタイルシート）の機能と、Apacheの機能（htaccessファイル）による振り分けする方法があります。

この場合の振り分けとは、スマートフォンやタブレット端末でアクセスされた場合は、スマートフォン・タブレット専用ページにリダイレクトすることです。

リダイレクトと言うのは、自動転送と言う意味です。

アクセスするだけで、任意のページへポーーーンと飛ばしてしまいます。
このようなリダイレクトは、大手レンタルブログなどでもよく使われている方法です。

やり方としては、まずは、スマートフォン・タブレット用のhtmlファイル（phpファイルなど）を作成し、スマホ・タブレット用の専用フォルダに作った htmlファイルを放り込みます。

次に、以下のhtaccess ファイルを作成し、ドメインのルートフォルダに設置します。

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /●●●/ [R,L] </IfModule>

【参考】
PC版とスマートフォン版サイトを自動振り分けする方法

上記のコードは、ユーザーエージェントにiPhoneとか、スマホやタブレット端末特有の文字が入っている場合はリダイレクトする設定になっています。

英語で書かれてあるのでちょっととっつきにくいですが、よく見たらユーザーエージェントとかiPhoneだとかAndroidだとか書かれてあるのがわかります。(；´∀｀)

ちなみに、携帯電話（スマートフォンじゃなくガラケー）を『 ▼▼▼ 』フォルダにリダイレクトさせる為の書き方は以下の通りです。

こちらも、ユーザーエージェントでドコモだとかKDDIだとか入っているものを『 ▼▼▼ 』フォルダに自動転送する仕組みになっています。

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank) RewriteRule ^$ /▼▼▼/ [R,L] </IfModule>

【参考】
「.htaccess」でパソコン・タブレット・スマホ・ガラケーを振り分ける場合のメモ。

これで、PCの場合は普通のURLへ、スマホ・タブレットの場合は専用ページにリダイレクトされます。

端末別にリダイレクトすることのデメリット

端末別にリダイレクトする方法で振り分ける場合、デメリットがあります。
一番のデメリットは、何と言っても 『手間』 です。

一つのページを作成する度に、2つのページを作成する必要があるのです。
これは大変な手間です。

Wordpress のプラグインや function.php の設定や、大手レンタルサーバーが自動で振り分ける設定にされている場合は、全然問題ないのですが、静的ファイルでページを作成する場合、このデメリットが露骨に出てきます。
（私は、この手間があるので、レスポンシブデザインで対応することに決めました）

もう一つの問題点は、SEOです。

Yahoo!Japan は Google検索を元に検索結果を表示してますので、2016年現在、Google検索が日本の検索のシェアの8～9割にまで達しています。

そんなGoogle検索が、いつの日か、このやり方をペナルティとして設定する可能性もなきにしもあらずなのです。
（大手レンタルブログがこの方法をとっていますので、恐らく、この方法をペナルティにすることはないとは思うんですが・・・）

不正なリダイレクトではないのは確かなのですが、不正でないとGoogleが判定し続ける保証はどこにもないのです。

もし、不正だとGoogleが判断することになれば、大量のファイルをレスポンシブ化させる必要が出てきます。

そうなれば、最初からレスポンシブ対応をしていた頃よりも、かえって手間と時間をかけてしまうことになります。

レスポンシブ対応させるのはなかなか大変な作業ではありますが、レスポンシブ対応しないままで起こりえる問題を考えると、多少レスポンシブ対応に時間はかかっても、レスポンシブ対応した方が後々のためになるような気がします。