スマートフォン最適化


ちょっと前になりますが、自己サイトのスマートフォン最適化を行いました。
参考にしたのは、たにぐちまこと氏(H2O Space)による「実践!iPhone&Androidサイト制作ガイド」です。サイト制作の基礎知識から10回に分けて丁寧に解説してあるので、ポイントを整理しながら進めることができました。

サイトの目的(ゴール)は、webデザイン、コピーライティングの仕事を依頼していただくことにあるので、電話とメールのボタンをページの上下にそれぞれ配置。グローバルメニューは、javascriptでmenuボタンをタップすると開くようにしました。コーディングはCSS3です。IEのことを考えなくてもいいというのは、これほど楽なのかと。

今後の課題としては、ひとつは解像度に合わせて画像を使い分けること。今回はアイコンや画像をiPhone4のRetina Displayに合わせて用意しましたので、解像度の低いiPhone 3GSでは美しく表示されていません。対処法はいろいろ探した結果、こちらのやり方が最も分かりやすそうなので、時間があるときに試してみたいと思います。といってもiPhone 3GSがないので確認のしようがないのですが。

もうひとつは、CSSだけで書き分けるようにすること。今回はHTML5を勉強するつもりで(実際にはほとんど使っていません……)PC版とは別にHTMLを記述しましたが、特にWordPressなどで作成している場合はHTMLを分けてしまうと二度手間になり、CMS化した意味がありません。ただ、既存のPC版サイトをスマートフォンに最適化するのは結構な手間がかかる気がします。
プラグインをあてにするとトラブルがあった時に対処できないので、スマートフォン対応のWordPress用オリジナルテーマを作成したいと思っています。