スマートフォンサイトの作り方

スマートフォン2011年8月26日

スマートフォンはここ1～2年で爆発的に普及し、それに伴いスマートフォン専用サイトの案件も非常に増えてきています。
当然、Webデザイナーにはスマートフォンサイトのデザインテクニックが要求されるようになり、コーダーもHTML5、CSS3を駆使したコーディング能力が必須になってきています。
なんだか技術が先行して追いつかないよー！という悲鳴が聞こえてきそうですが、やってみるとそこまで難しいものではありません。基本的なサイトであれば、今までの知識プラスアルファでなんとかなります。
とりあえず。スマートフォンサイトを制作するにあたっての、基本的な事項をまとめてみました。

HTML+CSSで制作する

スマートフォンのWebブラウザはフルブラウザのため、PC向けのサイト制作とは共通点が多く、実際の作業もかなり似通っています。そのため、PCサイトである程度コーディングを経験していれば、さほど敷居が高いものではありません。
但し、最も大きな違いであるのが、HTML+CSSで制作する点です。

PCではまだまだ実用段階には程遠いですが、iPhoneやAndroidに搭載されているブラウザは、かなりHTML5やCSS3への対応が進んでおり、新しい技術を積極的に活用したサイト制作がポイントになります。

JavaScriptの積極的な活用

作り方はPCサイトと似ているものの、タッチ操作が基本となるiPhone/Androidでは、操作面で大きく異なります。
2本指を使ったジェスチャーや画面の拡大/縮小、滑らかなスクロールなど、スマートフォンならではの操作性を実現するのに活躍するのが、JavaScriptです。
最近ではPCサイトでもJavaScriptを使う機会は増えていますが、iPhone/AndroidのブラウザもJavaScriptは問題なくサポートされています。JavaScriptを積極的に活用することで、操作性のよいWebサイトを制作できます。

各スマートフォンの特徴・仕様を把握する

iPhoneには、iPhone 3G/3GS、4というバージョンの変化があるほか、iPod touchという兄弟端末も広く使われています。
特にiPhone4は解像度がそれ以前のものとは異なるため、制作する前にどのプラットフォームを対象とするのか、といった吟味が必要になってきます。

Androidは各メーカーから数多く発売されており、それぞれの機種で搭載されているブラウザのバージョンが異なります。
iPhone同様、Androidもどの機種・プラットフォームにおいて動作確認・検証を行うか選定しなくてはなりません。

スマートフォンサイトを制作するにあたって、覚えることはそれなりにはありますが、コツさえ掴めば意外とサクッと制作できます。基本的には今までと作り方はそう変わりません。ただ、「見る端末が変わる」「プラットフォームがたくさんあって少し大変」といった点で少々戸惑う程度です。