Google+ もご覧ください
ユーザーアイコン

ピックアップ

Webサイトをスマートフォンに最適化するための技術メリット&デメリットまとめ

Webサイトをスマートフォンに最適化するための技術メリット&デメリットまとめ

スマートフォン、タブレットからのインターネットアクセスは増大しています。数年前からWebサイトを作る場合にはスマートフォンに最適化するのが一般的になっています。スマートフォンに最適化する方式は幾つかあります。

ここではその主な技術と、そのメリット/デメリットを挙げていきたいと思います。

レスポンシブWebデザイン

レスポンシブWebデザインとはWebブラウザの幅によって表示を変更するデザインです。一般的にCSS3のメディアクエリーを使って表示を切り替えます。デザインを切り替える幅を指定しますが、一般的にスマートフォンの幅、タブレットの幅、それ以外といった3パターン程度に分かれています。

メリットとしては一つのHTMLテンプレートで全てのデバイスに対して情報が配信できるということです。数年前まではレスポンシブWebデザインでコーディングするのは知識が必要でしたが、今は情報も多くなっており、多数のHTMLフレームワークがレスポンシブに対応していることで敷居が下がってきています。

またデバイスの幅によってコンテンツを変更するので、向きを感知してコンテンツを変更できるというのがあります。縦向き、横向きによってメニューを常時表示するしないといった制御をすることも簡単にできます。

デメリットとしては、デスクトップにだけ出したい情報、スマートフォンだけに出したい情報などが多くなっていくとHTML構造がとても複雑になります。そうなると元々分けてしまった方が早くなります。また、更新コストが大きくなりがちです。一つの変更がどのデバイスにどう影響するのかを考えなければならないのが面倒です。

もう一つ、そのデバイス向けには不必要なリソースも読み込んでしまうという問題があります。特に大きな画像などスマートフォン向けには小さくても良い場合も最大幅に合わせて考える必要があります。デバイスごとに変更するライブラリもありますが、レスポンシブの良さが失われてしまうように感じます。

レスポンシブWebデザインはブラウザの幅によってコンテンツを変更するという手法になるので、特にスマートフォンやデスクトップなどにこだわって考えない方が良いように思います。デスクトップであっても幅が狭い状態であればどう情報を出すのが良いのかと言った観点でデザインするのが良いようです。

JavaScriptレンダリング

既存のデスクトップ向けWebサイトに対してJavaScriptでDOM構造を変更してスマートフォン向けに変換します。メリットとしてはクライアントパワーでスマートフォンに最適化させるのでサーバサイドの変更は一切不要というのがあります。

シンプルなWebサイトであればメニューを折り畳んだり、viewportを追加するだけでもそれなりの見栄えになることがあります。さらに作り込んでいくことで高度なスマートフォン最適化サイトも作れます。

メリットとしては上記のクライアントサイドだけであるという他、デスクトップ向けの要素追加がそのまま活かせるというのがあります。リスト構造を処理するようにしておけば、デスクトップ側の変更をスマートフォンも自動で追従してくれます。

デメリットとしてはHTML構造の変更に対して弱いという点があります。ちょっとした変更がスマートフォン側に影響する恐れがあるため、その点のノウハウを蓄積するのがコツになります。そういった点において、コマースやCMSなどシステムで出力されるものは構造が統一されているケースが多いのでおすすめです。

レガシーなWebサイトにおいてはHTML構造がそもそもぼろぼろであったり(閉じタグがなかったり)すると、jQueryなどを使ったDOM構造解析がうまくいかないケースがあります。この場合、CSSセレクタだけでなく、Xpathを使うことで解決できる場合があります(下記フラミンゴはXpath対応です)。また、JavaScriptの実行タイミングを考えないとDOMの高さ計算が重複して行われるために表示速度の低下を招くケースがあります。

JavaScriptレンダリング型サービスを提供しているフラミンゴについて、こちらで詳細レビューしています。

サーバサイドによるテンプレート分け

ガラケー時代から良く行われているのがサーバサイドでの表示分けです。WordPressであればWPTouchがあったり、各言語、各フレームワーク向けに多数の手法が存在します。メリットとしては同じURLでデスクトップ、スマートフォンの表示分けができることでしょう。

一般的にこの表示分けはユーザエージェントを使って行われます。そのためユーザエージェントを変更すれば、そのデバイスでの表示がどのようになるか確認するのが簡単というメリットもあります。ただしサーバサイドのユーザエージェントではデバイスの向き(幅や高さ)は取得できませんので、それに合わせたレンダリングとなると結果的に幅に合わせてフレキシブルにレンダリングを行うと言ったような工夫が必要になります。

またサーバ側でデバイスを判定する処理を行う必要があるため、キャッシュが使えずWebアプリケーションの負荷が高くなりやすいのがデメリットです。しかしデバイス判定をApache/nginxレベルで行うようにすれば改善できる場合もあります。

プロキシ型ASP

プロキシ型の場合、デバイスとWebサイトの間に立ててデバイスの代わりにWebサイトコンテンツを取得し、サーバサイドのスクリプトでHTML構造を組み替えて出力する仕組みになります。一般的にスマートフォンでデスクトップ用サイトにいくと、プロキシサーバへリダイレクトされます。

利点としてはデスクトップ向けに配信される大きなHTML構造をスマートフォンやタブレット向けに最適化して出力するため、転送量が少なくて済むということがあります。画像などもプロキシを通すことで最適化した上で返すこともできます。

欠点としてはプロキシを通したアクセスということはネットワークが2段階になるため、速度が遅くなるということがあります。また、一般的にサーバのURLがデスクトップとモバイルで分かれたものになります。

大きな問題点としては決済や認証を伴ったサービスでは使いづらいということがあります。Cookieを使ったりID/パスワードを送ってしまうとセキュリティ上のリスクが大きいために会員制サイトやEコマースサイトでの利用は難しいと言えます。

リダイレクト

プロキシ型と同じようにデスクトップ以外のデバイスでアクセスするとスマートフォン用サイトにリダイレクトします。ASP型とほぼ同じですが独自で構えているケースが多いです(またはカスタムドメインが使えるASPサービス)。

/m/ といった感じにパスを分けるもの、m.example.com といった具合にサブドメインを分けるものがあります。一般的に m.(エムドット)と呼ばれる手法になります。この手法の場合、デスクトップでモバイル専用サイトにアクセスしてもリダイレクトせずモバイル用コンテンツが表示されるのでユーザビリティが低くなります(リダイレクトするところもあります)。

利点としてはキャッシュが有効に使いやすく、専用のテンプレートを使うためにモバイル向け、デスクトップ向けの変更が柔軟にできるというのがあります。片方だけリニューアルしたいといった時も分かれている方が簡単です。

デメリットしてはURLが分かれてしまうためにSEO的に不利になったり、ソーシャルメディアで共有する際のURLも分かれてしまってバイラルが伸びづらい傾向にあります。また、デスクトップとモバイル両方に関わるテンプレート修正はコストが2倍になったり、片方の修正を忘れるなど徐々に差異が生まれるケースがあります。

基本的に別サイトという扱いになるため、修正コストは2倍になると考えて良いでしょう。また、今後タブレットへの対応やAndroidのように画面幅が多彩に存在する場合、それらをテンプレートで分けていくのは修正コストの増大につながるでしょう。


いずれの場合においてもメリット、デメリットが存在するのは仕方がありません。問題は自社、またはクライアントに対してどれが最適であるかを考えることです。キャンペーンのような一度きりの作成であればレスポンシブで作るのが最も制作コストが低いように見えます。修正が重なっていく場合、あまり適さないケースが多いようです。

さらに既にフューチャーフォン対応などでテンプレートを分ける仕組みを用意している場合はそこにスマートフォン用テンプレートを追加する方が早く、追加コストも低く済むと思います。

では新規作成する場合はいかがでしょう。最近ではスマートフォンファーストと言うキーワードに注目が集まっています。デスクトップ向けのサイトをスマートフォン向けに展開するのではなく、先にスマートフォンサイトを考えた上でデスクトップサイトを考えるという流れです。実際、画面要素としてはスマートフォンにある程度で十分というケースは多く、従来のデスクトップ向けのWebサイトでは情報が多過ぎてかえって混乱を招いてしまう場合もあります。

そうした新規、リニューアル、追加開発なのか、さらにスマートフォンサイトの位置づけがどうあるべきなのかなどによって最適な技術を選択するのが大事ではないでしょうか。

今回、フラミンゴを提供するアイスリーデザイン社の芝社長にスマートフォンWebサイトがどう進化していくのかをインタビューしています。こちらも合わせて参考にしてください!

Resposive1

記事をリクエストする

関連記事

コメント