ON HTML5 FIELD 第5回（前編）

2011年12月7日 10時30分

連載

ON HTML5 FIELD

【第5回】（前編）Webデザイナーの現場とHTML5
2011年12月07日
TEXT：村岡正和

HTML5にはWebデザインをサポートする強力な機能がいくつも備わっている。CSS3やMediaQuery、WebFontsなどによって従来よりも洗練されたWebデザインを簡潔に実装できるようになった。今後、Webデザイナーはこういった新しいポイントをしっかり押さえておく必要がある。

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

■Webデザイナーがおさえておきたい技術ポイント
前回はHTML5制作のための勉強方法をざっくりと紹介した。HTML5に関連する制作技術はたくさんあるが、特に関心のある技術については積極的に実践していくことをおすすめする。HTML5が多岐に渡るからこそ、興味がある部分の実践力を養って制作者としての強みにしたいところだ。

今回はWebデザイナーが抑えておきたいHTML5のポイントを解説していこう。HTML5にはWebデザインにおいて強力な機能がいくつも備わっている。それにともなって、従来のWeb制作からWebデザイナーがおさえておくべきポイントも変わってくると筆者は考えている。技術と考え方にポイントを絞って考えてみよう。

まずは技術のポイントから。HTML5制作においてWebデザインする上で最も強力な機能といえば、CSS3が挙げられるだろう。CSS3はCSS2.1に改良を加えた最新版のCSSだ。厳密にいえばCSS3はHTML5とは分離した別の技術であるが、HTML5と組み合わせて語られることが多い。ここでは広い意味でのHTML5ということで、CSS3をHTML5技術のひとつとして紹介することにする。

ボタンの角丸、半透明のオーバーレイ、ドロップシャドウ、背景のグラデーション。いままでのWeb制作では、これらを実現するために専用の画像リソースを作って対応してきた。しかしCSS3では、簡単な記述によって画像リソースなしでこれらを実現できる。border-radius、opacity、box-shadow、linear-gradientなどがそれだ。例えば装飾のあるボタンを作りたい場合、これらを駆使して画像リソースを用意することなくボタンをコーディングできる。

ボタンの装飾をpng画像で要素の背景に埋め込み、要素内のテキストをtext-indentで遠くに飛ばすというようなトリックを使わずにデザインを調整できるのは制作時間の軽減につながるとともに、HTMLやCSSのコードも明解になって製作時のストレスも減るだろう。

さらにCSS3では、transitionやanimationを使うことでコンテンツの動きを定義することができる。単純なアニメーションバナーやボタンクリック後の動きなどが、手軽に作成できるのだ。実際にtransitionでどこまで動きを実現できるかはCSS3 Transitions Collection 30(http://kudakurage.com/ipad-html5/transitions/collection.html)(※要Safari) などを参考にするとよいだろう。

CSS3と合わせておさえておきたいのが、MediaQueryだ。MediaQueryとはCSS2からあったMedia Typeを拡張した仕様で、CSSを様々な条件で切り替えることができるものだ。例えばこちらのデモサイト(http://webdesignerwall.com/demo/adaptive-design/final.html)にアクセスして、Webブラウザのウィンドウ幅を縮小してみていただきたい。MediaQueryによってWebサイトがPC、タブレット、スマートフォンのウィンドウ幅に最適化されたデザインで表示される。前回紹介したレスポンシブWebデザインで重要な機能を、MediaQueryの簡潔な定義で実現することができる。

最後に、筆者がWebデザインにおいて最も革新的だと考えている機能を紹介しよう。それはWebFontsだ。WebFontsは、Web上に用意されたフォントをWebページで使用できるもの。新聞、雑誌といった紙媒体の美しい文字体裁を、Webコンテンツでも表現することができる。Webデザインにおいてのタイポグラフィ表現を、飛躍的に向上させるものだ。

WebFontsで利用できるフォントはGoogle web fonts(http://www.google.com/webfonts)などで公開されているが、全て英字だ。日本語フォントは比べてまだ少ない。しかし今年に入ってフォントプラス(http://webfont.fontplus.jp/)が公開された他、大手フォントメーカーのモリサワも「TypeSquare」というサービスを2011年度中に公開予定としている。来年には多くの日本語フォントが利用できると期待したいところだ。

［筆者プロフィール］
村岡正和（むらおかまざかず）●神戸で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/

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

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

OFFLINE & STORAGE編　12月20日（火）19:00-21:00
【内容】Webアプリケーションにおけるデータ蓄積
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3239