おまたせしました。ホームページがスマートフォンに対応しました

すでにお気づきの方もいらっしゃるかと思いますが、先週末にホームページのスマートフォン対応を行いました。
スケジュールを前倒して。

予想以上にスマートフォンでのアクセスが多かった

まさにこれが最大の理由です。

ご覧のとおり、PCでの閲覧が約75%を占めるものの、スマートフォン&タブレットでの閲覧が約25%と無視できない。
スマートフォンでアクセスしてくださっていたみなさま、ご不便おかけしました。。

実装ルール

今回は下記のようなルールで実装しました。
(実際のスマートフォンサイト案件でもこちらのルールで実装することが多いです)

推奨環境

タブレットはPC版とスマートフォン版のどちらを見せる？

弊社では通常の案件でもタブレットはPC版を表示させるということで対応させていただいているため、弊社ホームページもタブレットはPC版を表示しております。

スタイルシートは%指定で組んでいく

スマートフォンは端末ごとに解像度が異なるため、pxを使った固定幅の指定ではなく、%を使った可変幅で組んでおります。

アニメーションはなるべくCSS3を使う

Android2.3を推奨環境としていたときはjQueryのanimateなどを使っていたのですが、Android4.0以降の端末(XperiaZなど)ですとカクつくことがあるので、最近はCSS3で動かすようにしています。
今回で言うと、menuの開閉部分です。
CSS3を楽にコントロールするためにTransit.jsを使っています。

スマートフォンでの回遊率が上がるといいな

まだまだアクセス数は少な目ですが、今回の対応でアクセスされるページが増えるとうれしいです。
実装とは関係ないですが、投稿時間もアクセス数に関係していそうですね。
様子を見つつ、いろんな時間に投稿してみようと思います。