スマートフォン版サイトを作る3つの方法

a0002_011891_m

スマートフォンへの対応は、今となっては当たり前になったわけだけど。
モバイルファーストという言葉も登場するくらいには重要なスマホ対応。
ざっくりで3つの方法があるからそれを解説。

1.PC版とスマートフォン版でURLを分ける

一番シンプルな方法。
まず、PCとSPで2種類のURLを用意し、

$(function(){
  var ua = window.navigator.userAgent.toLowerCase();
  if((ua.indexOf("windows") != -1 && ua.indexOf("phone") != -1)
  || ua.indexOf("iphone") != -1
  || ua.indexOf("ipod") != -1
  || (ua.indexOf("android") != -1 && ua.indexOf("mobile") != -1)
  || (ua.indexOf("firefox") != -1 && ua.indexOf("mobile") != -1)
  || ua.indexOf("blackberry") != -1){
    location.href = './smartphone/';
  }
});

こんな感じのもの用意して、PC版に貼れば、PC版のURLをスマホで見た時に自動でURLが切り替わるようになる。
aaa.co.jp/bbb.htmlをSPで見たらaaa.co.jp/smartphone/bbb.htmlに自動で変わる。
スマホには、今書いたjsの逆のことをすればいいだけ。省略するけど。

メリット

既存サイトをそのままにして対応できる

別ページを用意するから、既存ページのレイアウトなどは一切変えなくていい。
後で紹介する2つの方法だと、どうしてもソースコードが変わってしまうため、時間もかかるし技術も必要だし、今まで起きてなかった不具合が発生する可能性もある。

実装が簡単

javascriptに貼るだけだからそこまで専用知識なく対応することができる。
実際デザイナーの自分がやれてるわけだし。
実装が簡単であるということはどういうことかというと、メンテナンスだったり修正もしやすいってこともある。

デメリット

PC版をスマートフォンで見た時に最初のアクセス数が2回になる

自動で切り替わるわけだけど、一度PCのサイトにアクセスしてからすぐにSPにアクセスすることになるので、
ユーザーが最初サイトに入る時だけアクセス数が2回になる。
アクセス解析をしっかりしたいということならこのデメリットは大きい。

2.レスポンシブ

最近よく聞くレスポンシブにする。
レスポンシブというのは、PC版とSP版で、内容は同じだけどレイアウトを変えるようなもの。
まあ、厳密にはデバイスの横幅によってレイアウトを変えるんだけど。
グリッドレイアウトとかがわかりやすい。
http://www.nxworld.net/inspiration/japan-grid-layout-web-design-showcase.html
あと、以前紹介したBootstrapのグリッド関係を使えばレスポンシブにすることができる。

メリット

PCとスマホ両方を1つのURLで管理できる

1つで管理できるため、画像やテキスト1つ変えたらPCとスマホどっちで見た時でも変わってるってことができる。
小規模の変更には3つの中で一番対応しやすい。

SEOで有利(とされている)

レスポンシブでは単純にURLが1つになるため、SEO的には有利とされているし、Googleも推奨しているみたい。
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
ってかこれが本当なら一番大きいメリットってこれじゃね。

SNSでのシェアで有利

同一のURLになるから、PCで友達にシェアしたものを友達がスマホで見た時に楽に閲覧することができる。
まあ、他の方法でも違和感自体はそんなないからおまけ程度だと思うけど。

デメリット

重くなりやすい

PCの情報量をスマホでも読み込むわけだから、他の手法より重くなる。
通信制限のかかったスマホだと見れなくなる時もある。
ユーザー的にはこれが一番のデメリット。

中規模〜大規模修正には時間と労力が他よりかかる

レスポンシブはソースコードが独特であり、それを作るのにどうしても時間がかかってしまう。
時間がかかるということは、費用もそれなりにかかる(最終的には会社によるけど)。
メンテナンスも、配置を変えたりしようとすると他の手法以上に時間と費用がかかる。
要するにメンテナンスコストが高いってことだね。

不具合が起きやすい

これはコーディングする会社にもよるけど、とにかく不具合は起きやすい。
謎の隙間が生まれたり、テキストが少しはみ出てたりとか。
新しいスマホが出るたびに修正する可能性も生まれやすい。
これもメンテナンスコストか。

3.サーバー側で分ける

1で紹介した手法をサーバーで行う。
サーバーで行うことで、1と違い、URLを統一することができたり、2回アクセス数がカウントされることもなくなる。
やりやすい方法としてはmobifyとか。

メリット

URLを統一できる

2で説明したから省略。ってか2のメリット3つがこれだわ。

運用コストが少ない

運用していくに当たって、不具合が起きたり大規模修正をしない限りは一番メンテナンスが楽。
その分費用も安くなる・・・はず。

デメリット

ミスすると先祖返りが発生する

サーバー側の会社とサイト作成側の2つの会社で管理し続けるため、最悪先祖返り(更新前の状態に戻ってしまう)ことも発生する。
これはしっかりとどの会社が何をするのか明確にすることで回避することもできる。

サービスを利用するなら専用知識が必要

mobifyを利用するならそれの知識なども必要となり、少し学習コストがかかる。
3つの方法のうち、唯一サーバーに関わる方法っていうのが大きい。
少なくとも素人が適当に変えて反映できるものではなくなる。

3つの方法をあげたけど、個人的には3番目が一番いいとは思う。
最終的には、費用だったり、運用方法みたいなところからも考えてベストなのはどれかを選択していけばいいと思った月曜日の朝でした。
サイト朝更新すんのやめてー!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。