昨今の急激なiOSやAndroidを搭載したスマートフォンの普及により、スマートフォン最適化が必要とされるBtoCサイトが増えてきました。
スマートフォンは、今まで多くのユーザに利用されて来たフューチャーフォン（ガラケーの方が一般的でしょうか？）にとって代わり、モバイル端末の主役として無視できない存在となっています。
フューチャーフォンの内蔵ブラウザでは、通信速度や画面ザイズの制限により、CHTML(簡略化されたHTML)をベースにしたマークアップ言語が利用され、一部FlashLiteによる表現豊かなコンテンツも存在しましたが、概ねシンプルなテキスト中心の表現が主流でした。
スマートフォンに搭載されたブラウザは、表現の豊かさはパソコンのブラウザと同じですが、画面サイズは４インチ前後と、パソコンに比べると1/3ほどの大きさしかありません。結果的に、スマートフォンならではのデザインが必要となります。この様な、スマートフォン向けにデザインを行ったサイトを、スマートフォン最適化サイトと呼ぶようになりました。
一言でスマートフォン最適化といっても、その手法は多岐に渡っています。ここでは、代表的な制作方法と、Webサーバの設定方法(Apache)について取り上げて見たいと思います。
レスポンシブサイト
Web制作者の間ではトレンドとなっている制作方法です。HTML(XHTML)を、パソコン用とスマートフォン用で共用とし、css3のメディアクエリを利用して、それぞれの横幅に合わせたデザインを記述したcssを読み込みます。
こちらのサイトで詳しく解説されています。
ゼロから始めるレスポンシブWebデザイン入門
Google推奨の方法ですが、現状のHTML(XHTML)の書き換えが必要になるなど、コストが高く付き、すぐに対応は難しいケースが多そうです。
パソコン用のページとは別に、URLの異なるスマートフォン用のページを制作する。
パソコン用のページとは別に「/sp/」などのディレクトリを作りそこにページを新たに作る方法です。従来のパソコン用のページに静的なページが多く、更新頻度が低いサイトでは採用しやすい方式です。パソコンのサイトとは別に作る為、制作の自由度は高くなります。
また、スマートフォン用に配布されているフレームワークを利用して手軽に制作を進めることができます。
主なスマートフォン用のフレームワーク
- jQuery mobile – JavaScriptフレームワークでお馴染みのjQueryが提供するフレームワークです。多機能で様々なテーマや効果を追加することができます。
- iUI – iPhoneの標準インターフェイスに近いシンプルなUIを簡単に構築できます。
- jQTouch – 独自、iPhone風テーマの選択が可能です。また、多彩なアニメションを利用したUIを構築できます。
反面、パソコンサイトに更新が必要となった時、スマートフォンサイトも更新する必要があり、更新コストがかかるのがネックです。
サーバ設定の方法
スマートフォンでアクセスされた時には、「/sp/」ディレクトリに自動的にリダイレクト（転送）される仕組みが必要となります。また、スマートフォンでパソコン用のページを閲覧したいユーザーにも対応する必要があります。
スマートフォンに、パソコンサイトを見せるために、「?mode=pc」などのパラメータを付与して通常のアクセスと区別する方法が使われます。
レンタルサーバを含めた、多くのWebサーバでは「mod_rewrite」を利用可能ですので、この設定により上記機能を実現します。設定は、「.htaccess」ファイルに行います。
「.htaccess」に以下を設定。
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R,L]
こちらで、詳しい解説がされています。
PC版とスマートフォン版サイトを自動振り分けする方法
パソコン・スマートフォンで同じURLを利用し、システムでUser-Agentから出力を振り分け
パソコンサイトがシステム化されていれば、URLを変えずにUser-Agentから、出力HTMLを出し分けることによりスマートフォンサイトを最適化可能です。
サイトがシステム化されていれば、おそらく、コンテンツの更新もCMS（コンテンツ・マネージメント・システム）を利用したり、DBを参照したりして、直接ソースコードを編集するようなことはないと考えられますので、更新コストは今ままでと同じになります。
Webサーバ上で動いているサーバサイドの言語であれば、User-Agentを参照できないものはほぼ無いと言えますので、User-Agentを判断基準に、条件分岐で、パソコン用とスマートフォン用の出力を切り替えるような仕組みを実装し、スマートフォン用のテンプレートを用意すればよいでしょう。
その他
WordPressなどのCMS（コンテンツ・マネージメント・システム）を利用している場合には、「WPtouch」などのプラグインを利用して、容易にスマートフォンに対応することも可能です。
WordPressでは、テーマを変更することで簡単に、HTML,CSSを変更できますので、「Twenty Twelve」などのテーマを利用することで、カスタマイズによりレスポンシブデザインを採用することも容易です。
まとめ
スマートフォン最適化と言ってもご紹介した通り様々な手法があり、その利点・欠点があります。実際に制作する際には、現状のサイト状況（利用ユーザー動向）、制作コスト、運用コストを考えた上で最適な方法を選びたいものですね。
