こんなタイトルだけど、中身としては「こうあるべき」というより「私はこれがいいと思う」みたいな感じ。
（以下、特に区別しない限りは「PC」にフルWindowsタブレット・ファブレットも含むものとする。要するにPCで動くブラウザが動けばPC）
1.URL構造
まず、URL構造をどうするかだけど、主に考えられるのは
- サブドメイン（https://sp.mcrn.jp/等）
- サブフォルダ（https://mcrn.jp/sp/等）
- そのまま（PC・スマホで同じURL）
の3つ（※1）。
個人的にはc＞b＞a。このサイトでもcの「そのまま」を採用
サブドメインだとサーバによってはSSLが別証明書になっちゃうし（さくらSNIだとマルチドメイン不可）、セキュリティ的にも同じ（same origin）と見なされなかったりする。
調べてみても、サブドメインは「運営組織・ポリシーが大きく違う」「テーマ・イメージが別物」など、とにかく「意味的（semantic）に分けたい」時に使う感じ。
「スマホ向け・PC向け・ケータイ（フィーチャフォン、ガラケー）向け」というのは多くの場合「形式的（syntactic）」な分類だから、その場合はサブドメインの利点は少ないかも。
2.表示（デザイン・レイアウト）
次は見た目をどうするか。ぱっと思いつくのは
- スマホ専用のHTMLを構築する
- 共通のHTMLを使うけど、CSSは別物（pc.css、mobile.css等）
- 共通のHTML・CSSを使う（レスポンシブデザイン。以下レスポンシブと略す）
あたり。
これはどういうサイトを作るかにもよるから難しいけど、私の場合はc。
理由としては「更新するテンプレートが少なくて済む」「振り分けの手間がかからない」「Google様が推奨するから」。
aやbだとページやCSSを何らかの方法（UAや使える機能）で振り分けないといけないから手間だし、よくあるのが「PCとして使ってるつもりの大型タブレットで不適切な振り分けをされて、スマホ用サイトに飛ばされ、間延びしたサイトを見せられる」という最悪の事態。
その点レスポンシブであれば大型のタブレットはPCと同じ見た目になるし、小型のタブレットや縦持ちだとスマホと同じ見た目になるからそんなことはない。
ただし、逆に「幅を縮めたPCブラウザがスマホ向け表示になってしまう」「大型タブレットでもスマホ向け表示で見たい」といった要求には応えられなくなってしまうので、その点は注意かな。
3.機能レベル
これはスマホ固有の機能を何処まで入れるかで
- jQuery Mobile等のフレームワークを使ったり、モバイル向けに調整してPCとは全く別にする
- タッチ対応程度の軽量な対応を追加し、不要な機能を削る
- 何もしない（PCと同じ）
といったところ。
私は今のところまだここまで進んでいないから、現状はc。
感覚としては、PC向けサイトの機能がそれほど重量でなく、テキストや画像などがメインならbかcぐらいでいいと思う。
逆に「Webアプリ」的なサイトであればaかな。端末固有の機能を使ったり、ネイティブアプリ上のWebビューから呼び出したりするなど、特殊なことをする場合はPCと共通ってわけには行かないと思うし。
4.誘導方法・脱出方法
ここまで長々と書いてきたけど、一番言いたかったのがこれ。
ちなみに、「誘導」「脱出」という言葉から分かるように、これはレスポンシブを使わない時にどうするかということ。
（レスポンシブを使った場合、そもそも同一URL・同一HTML・同一CSSで画面サイズ判定してるだけなので、誘導も脱出もない）
とりあえず思いつくものとしては、誘導が
- 自動的に誘導する
- 誘導メッセージ（固定）を表示
- ファーストビュー（※2）上部にでかでかと表示
- ファーストビュー内にあるけど目立たない
- ファーストビュー内にない（末尾など）
- 誘導メッセージ（ポップアップ）表示
- 記事に覆い被さる
- 画面上部に出る
- 画面下部に出る
脱出が
- ブラウザの設定（UA）を変えると自動で戻る
- ブラウザの設定を変えた上で、手動でURLを書き換える
- 解除ボタン・リンクをクリックする
- ブラウザのサイト設定（Cookie等）を手動で削除する
- どうやってもPC向けを見られない（IPアドレス、機能スニッフィングなどで強引に誘導）
ぐらいかな。
実際に出会った最悪だと感じるパターン（ガラケー）は...a→Eとか、b-1→C（元ページに戻らずトップに強制移動）とか。
スマホだとEはあまりないかもだけど、モバイル全般だとガラケー向けの「キャリアIPアドレスレンジで強制振り分け」が凶悪。まあ、これはどちらかというと「PCでモバイル向けサイトにアクセスされて、画像や音楽を持って行かれると困る」というケースが多かった気がする。
逆にこれならいいなと思うパターンは...この中だとないかな。
自動でやるならレスポンシブか、完全モバイル向けサイト（別ドメインで、PCとコンテンツ自体が分離）。次点でサブドメイン＋モバイル用デザイン・機能調整。
そうでないならページの末尾にでも「PC向け」「モバイル向け」のリンクを置いて、クリックしたら「そのコンテンツ（記事）」の間で切り替えできるようにすべき。間違ってもトップページに強制送還なんて言語道断。
実は、立て続けに「スマホ向けページ誘導ポップアップで記事を読むのを邪魔された」「試しに画面上にある巨大なスマホ向け誘導ボタンをクリックしてみたら、元の記事に戻れず（トップに強制移動）、しかも解除したはずなのにまたスマホ向けページに飛ばされた」という経験をしてイライラしたので、何か書きたかったけど、怒りに任せて書いても意味がないから、数日寝かせてから書いたんだけど、一番最後の「誘導・脱出」のところを書いてる時にイライラが復活してきてつい乱文に。
やっぱり、余計なものを足さず、何事も過不足（かぶそく）がないようにするって難しいね。
こうやって締めの文章を書いてる時も、ATOKが余計なことをしてきたし。さすがにうっかり「いばらぎけん」とか言うと県民の怒りを買いそうだからその辺は注意して欲しいけど。
コメント