
蔵下 雅之

すでにお気づきの方もいらっしゃるかと思いますが、先週末にホームページのスマートフォン対応を行いました。
スケジュールを前倒して。
予想以上にスマートフォンでのアクセスが多かった
まさにこれが最大の理由です。
ご覧のとおり、PCでの閲覧が約75%を占めるものの、スマートフォン&タブレットでの閲覧が約25%と無視できない。
スマートフォンでアクセスしてくださっていたみなさま、ご不便おかけしました。。
実装ルール
今回は下記のようなルールで実装しました。
(実際のスマートフォンサイト案件でもこちらのルールで実装することが多いです)
推奨環境
OS | バージョン | ブラウザ |
---|---|---|
iOS | 6.0以上 | safari |
Android | 4.0以上 | 標準ブラウザ・Chrome |
タブレットはPC版とスマートフォン版のどちらを見せる?
弊社では通常の案件でもタブレットはPC版を表示させるということで対応させていただいているため、弊社ホームページもタブレットはPC版を表示しております。
スタイルシートは%指定で組んでいく
スマートフォンは端末ごとに解像度が異なるため、pxを使った固定幅の指定ではなく、%を使った可変幅で組んでおります。
アニメーションはなるべくCSS3を使う
Android2.3を推奨環境としていたときはjQueryのanimateなどを使っていたのですが、Android4.0以降の端末(XperiaZなど)ですとカクつくことがあるので、最近はCSS3で動かすようにしています。
今回で言うと、menuの開閉部分です。
CSS3を楽にコントロールするためにTransit.jsを使っています。
スマートフォンでの回遊率が上がるといいな
まだまだアクセス数は少な目ですが、今回の対応でアクセスされるページが増えるとうれしいです。
実装とは関係ないですが、投稿時間もアクセス数に関係していそうですね。
様子を見つつ、いろんな時間に投稿してみようと思います。