既存PCサイトのスマホ対応

先日リニューアルしたナチュラルマート様のショップサイト「マクロビマート」をスマートフォンに対応させました。これでページ毎に画面を拡大せずに済みます。

カラーミーショップの「カート」がつい先日スマホに対応したので、これを機にマクロビマートでも対応しました。
カラーミーショップの中にスマホ専用テンプレートは以前からあったんですが、テンプレートが二重管理になるのでこちらは使っていません。カラーミーショップの機能として使っているのは「スマホ向けカート」のみ。それ以外は、PCサイトのCSSを上書きしてスマホ用サイトにしています。

カラーミーショップ内での分岐処理

HTML（テンプレート）をほぼ変更せず、「iPhone、iPod、Android」の場合だけ、スマホ用のCSSを上書きします。厳密にはjQueryでHTMLを書き換えていますが、PCサイトを汚すこともないのでチェック工数もスマホ側だけで済みます。
またカラーミーショップの新しいカートシステムを採用すると、PC用とスマホ用に自動で分岐してくれるようになります。スマホ側のカートはカスタマイズできませんが、十分きれいにレイアウトしてくれます。

PCサイトが既にある場合、新たにHTMLから設計するのは大変です。カラーミーショップのスマホ用テンプレートはその重複作業を強いることになるので、PC用テンプレートの側にも「スマホ用上書きCSS」が書けるようになればと思いました（→お願いカラーミー）。

PC用のサイトをそのままスマホに対応

PCサイトのスマホ対応について、少しまとめておきます。

マークアップ

普段のマークアップでも、セレクタだけで全ての場所を特定できるようにしておくことは必要な気がしました。
スマホサイトでは見せなくても良いという情報をCSSで簡単に消せるようになります。スタイル上は不要でも、一定のパーツ毎にIDを付けるぐらいはしてもよさそうです。

カラム・
画像サイズ

基本１カラムにすることになります。例えば、PCサイトではメインとサイドメニューの２カラムあった場合、それぞれが同じ幅になるイメージ。
特に画像の扱いは注意。WordPressの画像挿入ではサイズ毎にクラスが指定されるのでこういう時にとても便利。

文字サイズ

ブラウザ側でデフォルトサイズを規定されるのでCSSでオフにしておきます。
（-webkit-text-size-adjust: none）

画面の向き

JavaScriptで向きを判断して、bodyのクラスを切り替え。それぞれにスタイルを用意します。Android携帯は端末によっても縦横比が違うので、幅の指定に「%」がよく使われるようです。ただ構成が複雑な場合、完全に揃えるのは難しそう。

チェック環境

iPhoneでのチェックは4Sのみ。Androidはエミュレータをインストールして、いくつかのバージョンでチェックします。細かい動作をきちんと確認するにはこれが一番現実的、と今は判断しています。

iPadなどタブレットは今後も解像度が上がり、PCサイトのままで十分閲覧できると思いますが、スマホ対応については今後も必要になりそうです。
理想はPCとスマホを同レベルで設計することですが、既存サイトがきちんとマークアップされていれば、CSSの上書きで十分きれいにレイアウトできると思います。「うちのサイトをiPhoneでも見やすくしたい」という時は是非ご相談ください。