もうスマホサイトで泣きたくない！制作前に理解してもらいたいこと

久しぶりの更新。書きたいことはあってタイトルだけ突っ込んで更新してなかったー。スマホサイトでハマったことをメモ。

ハマったというか、制作サイドとクライアントがお互い『ここはどうなるんだろう？』という意識の擦り合わせておきたいこと。

1. ブラウザの上下固定をする場合は要検討してから実装

「スマホサイトをアプリライクなサイトにしたい」

これはよくディレクターの人は打ち合わせでよくこの話になると思う。 クライアントからの要望でよくあるのが固定配置。 でも固定配置って実はやっかい。CSSではちょっと前のOSだと対応していない。

最近のAndroid4.0やiOSの5からはCSSで対応できるけど、他の端末で見たときはどうするのか。その場合、JSを使って対応。 代表的なのが、「iscroll4」が有名。 このJSを使えば、固定配置を使うことができる。最新のものであればフッターへの固定配置もかなりスムーズみたい。 ただ使用する場合、いくつかのことを先に決めておいたほうがいい。

• 横にしたときはどうなるのか。
• 検証する端末でスムーズに動くか。（Androidで不安定という話もあります）
• 他のJSに影響が出ないか。

実際に上下固定配置をしているサイト

実際に上下固定配置をしていてリッチなサイトを見れるのは、モバゲーさん。凄いアプリライクなサイト構成になっていた。 でもここではモバゲーさんは端末毎にJSを振り分けをしていた。 そのため少し古い端末で見ると上下は固定されていなかったりといった感じの振り分けをしていた。
（端末毎っていうところがさすが！）

理想としてはモバゲーさんのように新しい端末ではCSSで対応して、前のOSの場合は固定配置をやめるというのが一番スマート。

2. タブレットで見え方を決めておく

iPadなどのタブレットで見た際はユーザーエージェントでPCサイトに振り分けっていうのが通常だと思います。もちろんiPad対応ならFlashはなしで。

ここでも確認するタブレットをクライアントに出しておいたほうがいいですね。 Androidタブレットの場合、ユーザーエージェントで振り分ける際に注意が必要です。
スマートフォン（iphone、androidなど）とタブレット（ipad,androidタブレット）を判別する方法

3. スマホサイトのURLは別でいいですか？

ここの先に伝えておかないと急に「あれ？urlってPCと違うんですか？同じにできないですか？」になることがあります。

http://www.hogehoge.com/　・・・　PCと同一ドメイン
http://www.hogehoge.com/sp/　・・・　「sp」のディレクトリ内に入れる
http://sp.hogehoge.com/　・・・　サブドメイン
※spはスマートフォンの略

後はソーシャルボタンを設置する際にURLが別々になってしまうとカウントも別なので注意。ソーシャルボタンに入れるURLはPCと一緒がいいかな。

4. オーバーレイはあまりしたくない。

ここにも罠がある。オーバーレイ自体はすぐできると思うけど、その後ろにある要素が選択できてしまうことがある。
詳しい情報と対処はここがわかりやすかったです。
Android端末におけるオーバーレイ表示時の困った現象の報告と、その対処法について
とりあえず、背景の半透明はしない。

5. Androidの対応OSはせめて2.3からにさせてください！

Androidの2.3より前にはかなりハマりました。2.3のシェアは未だ50％を超えているようです。
Android OSのバージョン別シェア、過半数が「Android 2.3」
Androidは2.3より前に対応するのはかなり大変。そもそもポジションが効かなかったり、JSの挙動もまったく動かないときがあったからもうやりたくない…。

6. 確認するブラウザは初期ブラウザのみ

スマホにもChromeがあったり、そこまでは対応したくないのが正直なところ。
でもこれをはっきりといっておかないと「facebookアプリで見ると変なんですけど・・・」などとなることも。（実際ありました）
facebookアプリではタブに対応していないので、別窓で表示するコンテンツだと前の画面に戻れないなどの問題が発生。

amazonではアプリから移動するようテキストで促している

まだ他にも気をつけたい点はあるけど、一番大事なのはクライアントとのゴールの共有だなー。今回はこのへんで。ノシ