ウェブサイトのスマートフォン対応方法をどうするか

PCとスマートフォンでは画面サイズが大きく異なる

PCとスマートフォンでは画面サイズが大きく異なる

スマートフォンはPC用に作られたウェブサイトでもそのまま表示可能です。しかし画面サイズが小さいため、そのままでは読みにくい可能性があります。その場合の対策としては、 などの方法があります。

更新や管理が楽なのはレスポンシブ・ウェブデザインだが……
単一ページでPCにもモバイルにも対応するレスポンシブ・ウェブデザイン (ソニー製品情報サイトでの例)

単一ページでPCにもモバイルにも対応するレスポンシブ・ウェブデザイン (ソニー製品情報サイトでの例)

更新や管理の労力を考えれば、レスポンシブ・ウェブデザインを採用する方が楽でお勧めです。その方が、同じ情報を掲載したページを複数用意する必要がありませんし、新しい端末が登場しても(おそらくは)何もせずに対処可能ですから。

(参考) ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選

しかし、既存のPC用サイトがレスポンシブ化しにくいデザインである場合や、スマートフォンの特性を活かしたウェブサイトを用意したい場合などでは、PC版サイトとスマートフォン版サイトを分離した方が望ましいでしょう。

PC版サイトとは別に、スマートフォン専用サイトを作った場合

アクセス環境に応じて振り分け

アクセス環境に応じて振り分け

もし、ウェブサイトをPC用とスマートフォン用の2種類に分けたなら、「アクセス者の端末によって自動的にアクセス先を振り分ける機能」も用意してみてはいかがでしょうか。

アクセス者が利用しているブラウザの種類(ユーザエージェント名)を調べれば、使われている端末(環境)を判別してアクセス先ページを自動的に振り分けることができます。

この自動振り分け機能を用意しておけば、スマートフォンからのアクセス者を「スマートフォンに適した専用ページ」に誘導することができます。ただし、スマートフォン利用者の中には、直接PC版サイトを閲覧したいと望む人々も居るでしょうから、「アクセス者が望むならPC版の方を閲覧できる機能」も併せて用意しておくと良いでしょう。

スマートフォン端末を識別して、アクセス先を自動的に振り分ける方法

.htaccessファイルを記述して、自動振り分け機能を作る

.htaccessファイルを記述して、自動振り分け機能を作る

自動振り分けにはいくつかの方法がありますが、今回は、ウェブサーバ「Apache」の設定ファイルである「.htaccessファイル」を使って振り分ける方法をご紹介いたします。

この「.htaccess」(のRewriteモジュール)を使えば、ユーザエージェント名が特定の条件に合致している場合にだけ、指定したページへ移動(リダイレクト)させることができます。

今回ご紹介する方法では、下図のように、
  • 代表のURLを「PC用サイトのURL」としておき、
  • スマートフォンを用いてアクセスされた際にだけ、自動的に「スマートフォン用サイト」へ移動(リダイレクト)する
という仕様を例にして解説いたします。

PCでアクセスされたらそのまま表示、スマートフォンでアクセスされたら移動(リダイレクト)する仕組み

PCでアクセスされたらそのまま表示、スマートフォンでアクセスされたら移動(リダイレクト)する仕組み


閲覧端末を判別してアクセス先を自動的に振り分けるために必要な2点

上記の自動振り分け機能を実現するためには、
  • アクセス者が使用している環境のユーザエージェント名を調べて、スマートフォンによるアクセスなのかどうかを判別する方法
  • スマートフォンからのアクセスだった場合にだけ、自動的にスマートフォン用ページに移動(リダイレクト)させる方法
の2点が必要です。本記事では、この2点を順にご紹介いたします。

※本記事は、2011年10月24日に初版を公開し、2013年9月9日に一部を改訂、2015年10月に再改訂したものです。

それでは最初に、ユーザエージェント名を調べて、スマートフォンによるアクセスかどうかを判別する方法から見ていきましょう。