Lesson 15 スマートフォンサイト実例紹介 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 15			スマートフォンサイト 実例紹介
	制作・文			松田翔伍（株式会社ワン・トゥー・テン・デザイン）

近年、スマートフォンへの対応が急速にせまられてきている。ここでは、PC、iPhone、iPadなどの各デバイスに対応しているスマートフォンサイトの実例を紹介する。

NikeはPC、iPhone、iPadの各デバイスに、それぞれ個別のレイアウトで対応している【1】【2】【3】。特にiPadでは、mobile safariでもposition:fixedが使用できるようになるライブラリ「iscroll.js」を使われるケースが多く、UIが非常に美しい（2011年5月現在、ナイキジャパンでは未展開）


【1】iPad



【2】iPhone



【3】PC

ZoffもPC、iPhone、iPadの各デバイスに対応している。デバイスごとにCSSを切り替えてうまくコンテンツを整理している【4】【5】【6】。


【4】iPad



【5】iPhone



【6】PC

GoogleのGmailはWebアプリとしてかなり精度が高い。HTML5やCSS3をフル活用して作られたサイトといえる【7】【8】【9】 。


【7】iPad



【8】iPhone



【9】PC

タブレットには対応していないが、スマートフォンには、検索ウィンドウ内の文字のフォーカスを外部から操作できる優秀な機能が付いている【10】。これにより、小さな検索ウィンドウ内での文字入力がかなり楽に行える。


【10】iPhone



【11】PC

世界的に有名な動画サイトYouTube。レイアウトはもちろん、Flashが表示されないiPhone、iPadには<video>を使用して最適化されている【12】【13】。


【12】iPad



【13】iPhone



【14】PC