ON HTML5 FIELD 第3回(前編)

連載
ON HTML5 FIELD 【第3回】(前編)Web技術とデバイスの進化
2011年11月24日
TEXT:村岡正和

急激に利用者数を伸ばし、数年後にはWeb接続デバイスの中心になるとも予想されるスマートフォン。同時にWeb制作者にはPCと異なる画面サイズや、操作方法に最適化したWeb制作ノウハウが求められている。昨今耳にするレスポンシブWebデザインもそのひとつだが、注意すべきポイントは他にもあるようだ。

>>> 全記事目次はこちら(HTML5関連求人情報も掲載)


■PC以外のデバイスに普及するWeb技術
前回はWebと家電の可能性を探ってみた。現在そのような製品があるわけではないので少し突飛に思えたかもしれないが、Web制作にはまだまだ未踏の地がたくさんあるということを感じていただければ幸いである。そして同時に、現在のWeb制作はその未踏の地に、少しづつ足を踏み入れていることにも注目していただきたい。

最近までWebサイトはおもにPCで閲覧するものであった。しかしそれは、スマートデバイスの急激な普及によって劇的に変わりつつある。特にスマートフォンの利用者数の増加は著しく、あと数年は増加の一途をたどり、やがてWebの中軸はPCからスマートデバイスに切り替わるのではないかと筆者は考えている。

「これがあればPCはいらない」――携帯電話からiPhoneやAndroidスマートフォンにした人からこんなことを聞く。その度に、これからの情報端末はPCからスマートフォンに変わっていくのかな、と感じるのだ。

今筆者がこの原稿を書いているキーボートとマウスがついた大きな箱は将来、仕事で必要なごく一部の人だけが使い続けるのかもしれない。そうなったとき、Web制作におけるターゲット・デバイスは必然的に現在とは異なっているはずだ。近い将来は「PCでは多少表示が崩れてもいいから、スマートフォンではどこにも負けないくらいリッチにしてほしい」といった制作依頼が常識になっているかもしれない。

スマートデバイス以外にも着目すべきものがある。前回も触れたテレビというデバイスだ。「Web and TV」というテレビとWebの融合という将来の可能性もあるが、現在のテレビの中には既にWebブラウザを搭載しているものがある。Webブラウザ搭載テレビを持っていれば、スマートデバイスやPCを持っていなくても大画面でYouTubeを観たりECサイトでショッピングができるのだ。Webブラウザ搭載テレビの普及もまた、Web利用の変化を加速させるだろう。

これらによってWeb制作で重要となる技術的ポイントは、近い将来大きく変化することが考えられる。一般的にスマートデバイスは小さな画面、テレビは大きな画面だ。そして両方とも機種によって画面のサイズや比率が大きく異なる。そのような多様な環境で見栄えがよいユーザーインターフェースデザインとは? ひとつのWebサイトをデバイスごとに最適化して表示する方法は? デバイスの持つ操作方法に応じたデザインやアプリケーションの機能とは? 今までのWeb制作ではあまり考えなかったことの重要度が、上がってくるかもしれない。

最近では特に、スマートフォン向けWeb制作でレスポンシブWebデザインという手法が注目されている。レスポンシブWebデザインとは多様な画面サイズ・比率に対応するWebデザイン手法のことだ。HTML5には、このレスポンシブWebデザインの適用に便利な機能が多数備わっている。習得すれば、このようなトレンドのWebデザインを実現することが容易になるだろう。

いまこの記事の閲覧を中断して「レスポンシブWebデザイン」を検索するのはちょっとだけ待ってほしい。多様化するデバイスで求められるWeb制作のポイントは他にもあるからだ。

例えば、多くのスマートフォンやテレビには、キーボードもマウスもついていない。スマートフォンはタッチ操作、テレビはリモコン操作が主な操作方法である。これらのデバイスに対応したWebサイトを制作する場合、これは非常に重要なポイントになりそうである。




[筆者プロフィール]
村岡正和(むらおかまざかず)●神戸でITシステム開発、コンサルティングを手掛けている。HTML5-WEST.jpの代表として関西でHTML5関連の話題を盛り上げる活動を行っているほか、さまざまなコミュニティ活動に関わっている。
HTML5-WEST.jp:http://www.html5-west.jp/
Twitter:http://twitter.com/#!/bathtimefish


HTML5の最新情報が学べるセミナー
「For Web Designer and Web Developer HTML5 Work Up Seminar」
主催:株式会社パソナテック 費用:無料 場所:東京都千代田区大手町2-6-4
詳細はこちら http://www.pasonatech.co.jp/ca/html5/


■直近スケジュールとセミナー内容

PERFORMANCE&INTEGRATION編 11月29日(火)19:00-21:00
【内容】Webアプリケーションにおけるパフォーマンス向上
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?no=3236

CONNECTIVITY編 12月06日(火)19:00-21:00
【内容】Webアプリケーションにおけるリアルタイム通信
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3237

MULTIMEDIA編 12月13日(火)19:00-21:00
【内容】音声、動画、メディアの再生と操作
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3238



>>> 全記事目次はこちら(HTML5関連求人情報も掲載)

MdN DIのトップぺージ