新 iPad が発売されましたね。でも個人的には iPad 向けの Web サイトは普通の PC サイトと同じで良いんじゃないかなーと思っているのと、ユーザ数の点では スマートフォンの方が圧倒的に多くなるはずなので、専用ページを作るならスマホ用でしょう。

で、そんなスマホ用ページを作るのに便利なテンプレートを見付けました。

【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。 (フェンリル | デベロッパーズブログ)

スマートフォンと一言で言っても、残念なことに iPhone でも2種類、Android だとかなりの種類の画面サイズが存在するため、もはや決め打ちでサイズを設定することは不可能だろう、と言うことでこういったテンプレートをライセンスフリーで配布してくれているのは本当にありがたいですね。

あと高解像度画像についても軽く説明してくれています。新 iPad もそうですが、高解像度の画面が増えていくことは確実なのでこういった知識も不可欠ですね。高い画質を維持しながらどれだけ容量を抑えるかと言ったノウハウも今まで以上に要求されそうです。ベクター画像で何とか出来るものは積極的に SVG を使った方が良いのかも。

これまでフィーチャーフォン向けのサイトの仕事は避けに避けていたので個人的な需要がほとんど無かったのですが、そろそろスマートフォンとの振り分けは要るよねーと言うことで、PHP や .htaccess を使って各デバイス用にページやディレクトリを振り分ける方法を調べてみました。

どれを使っても良いと思いますが、特に制限が無いのであれば .htaccess を使う方が PHP の動作という1クッションを省略できるので良いと思います。.htaccess が制限されていたり、より細かい UserAgent で振り分けたい場合は PHP が良いでしょう。

スマートフォン、ガラケー、PCのアクセス振り分け | 3Bee.jp

UserAgentを用いたmobile/pc/smartphoneの判定 | 村式流 イッパシエンジニアへの道

最近は MediaQuery を使った1ソース・マルチデバイスに対応したコーディングが話題になっていますが、PC 向けの HTML をそのままスマートフォン向けに利用するのは、コンテンツ量から考えるとあまり現実的ではないように思います。WordPress などの CMS を用いて動的にコンテンツ量を変えることが出来れば MediaQuery が役に立つでしょうが、そうでない場合は今回のように PC 用、フィーチャーフォン用、スマートフォン用にページを振り分けて、それぞれのデバイス用に普通に作った方が良いと思っています。

MediaQuery は同じ PC 用のサイトでもフル HD と XGA、SXGA 向けに表示を変えたりすると言った用途の方が今は向いているんじゃないかなあ。

年も明けたので、KRYPTOの業務案内サイトをリニューアルしました。

ただ単純にリニューアルしても仕方ないので、CSS3 の Media Query を利用したレスポンシブ Web デザインに挑戦したのですが、これがなかなか大変だったので少しメモを残しておきます。
続きを読む

HTML5 と CSS3 でコーディングをする際の初期テンプレート案を紹介してくれているサイトを見付けました。勉強しないと、と思いつつまだちゃんと手を出せていないので、こちらも大いに参考にさせてもらいたいと思います。
続きを読む

スマートフォン向けサイトの作り方を勉強しないとな～と思いつつ、なかなか手を出さずにいたのですが、同業者との会話で、既にほとんどの会社はWebサイトを持っているので、今後はプラスアルファとしてスマホ向けサイト作成の仕事が増えてくる（受注に繋げやすい）という話があって、こりゃいよいよやるしか無いか、ということでいきなり本を買うのではなく、有り難いことにスマホ向けサイトの作り方や注意点などを紹介してくれているサイトを探してみました。
続きを読む