スマートフォン専用サイトをつくる

WEBサイトのリニューアルに伴って折角なので、スマートフォン専用サイトを作ってスマホに対応してみることにした。

スマートフォンサイトは、そもそも必要あるんだろうかと思っていたわけですが、今まで仕事でもプライベートでもモバイル対応は避けてきたもののスマホ専用サイトなら作ってみても良いかなと思ったので、着手してみることにしました。

なぜ必要性に疑問を抱いていたかと言うと、単にスマートフォンを持ってないからという簡単な理由なんですが、最近はiPod Touchでブラウジングをしたりするようになって、対応しているサイトとしていないサイトだと、やはり見やすさが違うと実感したからです。

更に近日発売されるAdobe CS5.5で、JQuery MobileにDWが対応してスマホサイト制作がしやすくなったりするとの情報なんかもあったりするので、今後はスマホサイト制作も重要になる可能性も高いし、少し勉強しないとなぁとか思ったりしたのもあります。

因みに、このブログは既にスマートフォンに対応してたりするわけですが、WPの場合はプラグインで簡単に出来るのでWPtouchでスマホ対応と、Keitai styleでガラケーに対応をしています。面倒なので初期設定のままですが。

というわけで試しに自分のサイトで作ってみようと思ったわけですが、そもそもスマホサイトの仕組み自体が中途半端な知識しかなかったので、色々と調べるところから始めました。そして調べた結果、超個人的解釈をするとこんな感じ。

1. PCサイトのCSSにスマホ用のCSSをつくって対応する。
2. PCサイトのデザインを踏まえてスマホ用のデザインを作る。
3. スマホ用サイトをフローで生成してくれるサイトで作る。


1のスマホ用CSSで対応の場合は、やはり元サイトの作りにもよると思うので今回はパス。3は簡単に作れそうで良かったんですが勉強にならないのでこれも今回はパス。ということで、PCサイトを踏まえて作ったほうが色々構造も理解できるだろうってことで2を採用。

しかし、色々なスマホサイトを見てて気づいたことは、作り手によって作り方がまだバラバラということですね。多分これらの基準はまだ模索中な部分が多いのでCS6がでるころには固まるんでしょうか。もしくはHTML5が正式勧告してからなのか。

まぁ、多分そこまでスマホサイトを重視はしてないからというのもあるかもしれません。何故ならスマートフォンはPCサイト表示のままでもガラケーのように困るわけではないですからね。ですが、ユーザビリティを考えたら必須なのは間違いないと思います。

結局何を書こうか分からなくなってきたので総括してみるとこんな感じ。

1. スマホサイトはHTML5で作るのがベストだけど作ってないサイトもある。
2. JQuery Mobileを使うと制作が楽だけど使わなくても別に良い。
3. Android全てに対応するなど不可能に近い。
4. Blackberryの対応は確認するすべがない。
5. iPadはPC表示のままの方が見やすい。
6. PCでスマホサイトが見れてしまうのは意味がない。


とりあえず制作をしていて一番面倒だったのがリダイレクトのところで、PHPや.htaccessなどでも出来るようですが、今回はJavaScriptで対応してみました。というのもこれも色々なスマホサイトを見てて思ったのですが、PCでスマホサイトが見れてしまうサイトは結構あるんですが、レイアウトが崩れまくってるようなのは流石に嫌だなぁと思ったので。

そんなこんなで手抜きのスマホサイトが一応完成しました。PCサイトのイメージのままやっつけで対応した感じです。HTML5で制作しましたが、JQuery Mobileなどは特に使ってないのであまり勉強にはなってないかも。まぁやらないよりマシってことで。

JQuery MobileはCS5.5の体験版が出たら触ってみようかなとか思っていたりしていますが、とりあえず中身のないうちのサイトのスマホサイトなのでこんなもんでいいでしょう。URLはcrossblaster.comをスマホで見れば勝手にスマホサイトにリダイレクトされると思います。んじゃ今回はそんなところで。

スマートフォンサイトをデザインする7つのポイント
優れたiPhoneサイトデザイン集 – iPhoneデザインボックス
iPhoneサイトデザイン集のiPhoneデザインアーカイブ
スマートフォンサイト集めました。