こんばんわ。だーさんです。
かなり久しぶりの更新になります。更新サボって申し訳ありません(笑)
ずいぶん前のことになりますが、仕事でスマホサイトを制作しました。
使用したフレームワークは定番の「jquerymobile」です。
スマホサイトを作るうえで、iOS,Androidの各端末のブラウザがHTML5、CSS3の
最新技術に対応しているため、基本的にはそれらを使用してコーディングしていくのがセオリーとなっています。
また、スマートフォンの回線はモバイル回線のため、PCサイトと違い回線の速度などが遅いです。
その状態でPCと同じように画像をたくさん使用すると読み込みにとても時間がかかってしまいます。
その為、ボタンなどCSS3で作成できる箇所はできるだけ画像を使用せずにCSS3で作成し、読み込み速度を少しでも早くするのが基本です。
また、各スマホ端末ごとに画面サイズが違います。それに加えて画面の向きが縦画面、横画面とそれぞれあるので、PCサイトと同じ作り方をしていては、端末ごとに見え方が全然違ってしまいます。
最悪の場合はレイアウトがごちゃごちゃに崩れてしまいます。
それを防ぐために幅や高さなどはpx指定ではなく原則%で指定するのが望ましいです。
jquerymobileの話に戻りますが、jquerymobile は非常に便利なフレームワークです。HTMLの基本知識があれば、ほぼ誰でも簡単にそれっぽいサイトが作れます。
テーマカラーも4色ほど用意されていたり、開閉式のメニューなんかも簡単に実装できます。
ただ、非常に簡単に作成できる反面、どうしても似たりよったりなデザインになりがちなので注意が必要だと思いました。
テーマローラーというオリジナルのテーマを作成できるサービスがあるので、そちらを使用するなどしてカスタマイズするのがいいと思います。
また、スライドショーなどの外部ライブラリはjquerymobileやajaxと干渉して原則は使用できません。
javascriptの知識があれば実装できるらしいですが、自分はまだスクリプト書けないので・・・・。勉強しよう・・・。
仕事で作成したサイトは、スライドショーをなんとか導入することができたのですが非常に苦戦しました。
注意点は色々ありますが、スマホサイト作成も慣れてしまえばそれほど難しくはないのかな？という感想です。
jquerymobile以外のフレームワークも今度試してみようかなと思います。