「Webクリエイターのスキルアップ、交流の場をもっと！」と、いう声を東海地区のWebクリエイターの方から多くいただき開催することとなった「Creator's Meeting In NAGOYA」。
記念すべき第1回は、フリーランスで活躍中のWebデザイナー、ディレクターの小山勝正さんをお迎えして「HTML5と CSS3によるウェブ表現の変化」というテーマでお話いただきました。

XHTML + CSS2.1からの変化は、ただコーディング環境が変わるというだけではなく、デザイナーやディレクターの方向けに、今後どのような技術が使えるようになり、表現の幅がどう広がるのかを具体的にご紹介頂きました。

【講師プロフィール】
東海地方のウェブ制作会社での業務を経て、現在フリーランスとしてWeb Creators誌などに寄稿し、デザイナー兼ライターとして活躍中！愛車はロードスター

■ブログ：mBlog
■ポートフォリオサイト：Chameleon Graphics

■XHTMLからHTML5に変更されると、どのような変化が起こるのか？

1.文章の構造化が進む
今まではヘッダーとなる部分は<div id="header">、フッターとなる部分は<div id="footer">といった記述の仕方が一般的でしたが、ここで割り振るidというのは制作者側の任意の文字列で、いわゆる規格というものではありませんでした。
HTML5ではこれらに<header>や<footer>といった専用の要素が新たに追加されます。レイアウトにこれらのタグを利用することで、「<header>と</header> で囲まれた箇所はヘッダー部分である」とブラウザ側が認識するようになり、ページ内の文章構造をより明示的に表すことができます。
ヘッダーやフッター以外にも、文章などのセクションを定義する「section要素<section>」や、ナビゲーションエリアを定義する「nav要素<nav>」、ブログやニュースサイト向けの「article」要素などがあります。これにより何が良くなるのかというと、検索エンジンへの明示的な通知がまず1つ、そしてRSSリーダーやモバイル環境でのサマリー表示への応用など、情報の汎用性が高まるという点の2つです。

2.マルチメディアコンテンツを直接配置できる
マルチメディア系コンテンツは、従来の画像を貼る<img>タグのように、<video> や<audio>といったタグによって動画や音声をページに埋め込むことができるようになります。
今まではこうしたコンテンツをサイトに貼りたい場合、例えば動画ファイルの場合は主にFlashプレイヤーで再生するFLVを使う機会が多かったと思います。同様に音楽ファイルもmp3をswfに埋め込んだりします。これは現状Flashの普及率が高く、また制作する側から見てもプラットフォームとして使いやすかったためなのですが、これを実装するにはFlashでオーサリングする必要がありました。
HTML5のvideoタグを使えば、動画を汎用的なフォーマットのまま配置することができます。
またYoutubeではすでにHTML5対応も始まっています。

3.記述ルールの厳格さが緩和される
XHTMLでは、｢属性値をクオートで囲む｣、「空タグにもスラッシュを付ける」など、記述ルールはわりと厳格と言える内容でした。
こうしたルールは制作の現場では当たり前になってはいますが、実際にはプロが制作したサイト以外のほとんどはXHTMLではなくHTMLで書かれています。
制作の現場でも、例えばXHTML宣言文を書いた途端にレイアウトが崩れたという経験がある人もいるかと思います。
そうした必要以上に厳格な仕様を、もう少しゆるめにしようというのがHTML5の目標の1つです。
目立ってシンプルになっているのがDoctypeです。今までStaticとかTranditionalとかありましたが、単純にhtmlとだけ書けば良くなります。
イコールの後にダブルクォーテーションが必要なくなる点も大きく変更となる点です。

その他にも「ブラウザにサイトの情報を保存できるようになる」「ブラウザ側で図形描画を行えるようになる<canvas>タグ」「新規要素と廃止要素」などについてお話頂きました。

■CSS3でできること

1.画像に頼らない装飾ができる
まずテキストにシャドウを付ける機能。これはSafariなどのWebkit環境で早くからサポートされていたので、おそらく現状世の中で最も多く使われているCSS3の機能だと思います。
次にボーダーへの画像適用。ボーダー部にバックグラウンド指定ができるようになります。
そしてRGBA指定。今までは＃から始まる16進法で色指定してきましたが、CSS3ではRGBそれぞれに256段階かける3で色を割り振って指定する事ができます。
それに加えて最後のAは、アルファのAです。透明度を指定できます。例えばコントラストの強い背景の上に、うっすらと暗い背景を使ったテキストエリアを制作する際に便利です。
次にボックス要素への各種応用ですが、これらの新機能によりボックスエリアをCSSのみで装飾する事ができるようになります。グラデーションを表現するだけで幅数ピクセルの画像を用意する手間が省けます。
これらの新機能によりCMS利用時のデザイン性が向上します。

2.簡単なアニメーションを制作できる
クライアントからの要望で、よく「動きが欲しい」というオーダーがありますが、その際にJavascriptやFlash以外の選択肢となります。
ただし現状はWebkitやMozilla環境でしか動作しないため、IEユーザーのための代替案を別に用意する必要があり、生産性が高くありません。いずれモダンブラウザが主流になった時には、こうした手段が逆に主流になると思います。

■サイト閲覧環境の現状

ブラウザシェアは、2008年当時はIE6の圧勝と言える内容で、当時発表されたばかりの7も含めると、70％以上の人がIEを使っていました。
それが2010年に入ると大きく変わります。IEがシェアトップである現状は以前と変わりありませんが、Firefoxがかなり多くのユーザーを獲得しており、ブラウザの銘柄も多くなります。またIE6のユーザーが7よりも多いという点も気になります。IEユーザーのバージョンアップがなかなか進んでいないという現状は、つまりIE6のサポートを制作者側は今後も続けなければならないという事でもあります。

その多様化するブラウザの種類を、HTML5とCSS3に対応してるかどうかで分けてみると、また異なった現状が見えてきます。
HTML5 + CSS3に対応しているブラウザのユーザーは全体の3割弱です。あまり多くはありません。
しかし、先日仕様が公開されたIE9が正式に発表されると、この数値は大きく上がるはずです。IE9ではHTML5とCSS3のサポートが決定しています。
このことからも、今サイト制作者がHTML5とCSS3に備える必要があるという理由が分かって頂けるかと思います。

■まとめ

技術面は別として、HTML5 + CSS3でできる事に関する知識はディレクターにも重要であると思います。以下は作業効率アップに役立つ情報として覚えておくと良いと思います。

1.文章マークアップが強化され、SEO、情報の汎用性が高まる
2.動画や音声、動きなどリッチコンテンツを直接配置できる
3.画像に頼らない装飾ができることでCMS利用時のデザイン性の向上
4.よく使うCSS定義をライブラリ化することで生産性を向上できる

■おわりに

講演の後に、講師の小山氏と弊社Webディレクターと2名でパネルディスカッションを行っていただき、その後、参加者と講演者による懇親会も大盛況のうちにイベントは終演しました。

「Webクリエイターのスキルアップ、交流の場をもっと！」と、いう声を東海地区のWebクリエイターの方から多くいただき開催することとなった「Creator's Meeting In NAGOYA」。
記念すべき第1回は、フリーランスで活躍中のWebデザイナー、ディレクターの小山勝正さんをお迎えして「HTML5と CSS3によるウェブ表現の変化」というテーマでお話いただきました。

XHTML + CSS2.1からの変化は、ただコーディング環境が変わるというだけではなく、デザイナーやディレクターの方向けに、今後どのような技術が使えるようになり、表現の幅がどう広がるのかを具体的にご紹介頂きました。

【講師プロフィール】
東海地方のウェブ制作会社での業務を経て、現在フリーランスとしてWeb Creators誌などに寄稿し、デザイナー兼ライターとして活躍中！愛車はロードスター

■ブログ：mBlog
■ポートフォリオサイト：Chameleon Graphics

■XHTMLからHTML5に変更されると、どのような変化が起こるのか？

1.文章の構造化が進む
今まではヘッダーとなる部分は<div id="header">、フッターとなる部分は<div id="footer">といった記述の仕方が一般的でしたが、ここで割り振るidというのは制作者側の任意の文字列で、いわゆる規格というものではありませんでした。
HTML5ではこれらに<header>や<footer>といった専用の要素が新たに追加されます。レイアウトにこれらのタグを利用することで、「<header>と</header> で囲まれた箇所はヘッダー部分である」とブラウザ側が認識するようになり、ページ内の文章構造をより明示的に表すことができます。
ヘッダーやフッター以外にも、文章などのセクションを定義する「section要素<section>」や、ナビゲーションエリアを定義する「nav要素<nav>」、ブログやニュースサイト向けの「article」要素などがあります。これにより何が良くなるのかというと、検索エンジンへの明示的な通知がまず1つ、そしてRSSリーダーやモバイル環境でのサマリー表示への応用など、情報の汎用性が高まるという点の2つです。

2.マルチメディアコンテンツを直接配置できる
マルチメディア系コンテンツは、従来の画像を貼る<img>タグのように、<video> や<audio>といったタグによって動画や音声をページに埋め込むことができるようになります。
今まではこうしたコンテンツをサイトに貼りたい場合、例えば動画ファイルの場合は主にFlashプレイヤーで再生するFLVを使う機会が多かったと思います。同様に音楽ファイルもmp3をswfに埋め込んだりします。これは現状Flashの普及率が高く、また制作する側から見てもプラットフォームとして使いやすかったためなのですが、これを実装するにはFlashでオーサリングする必要がありました。
HTML5のvideoタグを使えば、動画を汎用的なフォーマットのまま配置することができます。
またYoutubeではすでにHTML5対応も始まっています。

3.記述ルールの厳格さが緩和される
XHTMLでは、｢属性値をクオートで囲む｣、「空タグにもスラッシュを付ける」など、記述ルールはわりと厳格と言える内容でした。
こうしたルールは制作の現場では当たり前になってはいますが、実際にはプロが制作したサイト以外のほとんどはXHTMLではなくHTMLで書かれています。
制作の現場でも、例えばXHTML宣言文を書いた途端にレイアウトが崩れたという経験がある人もいるかと思います。
そうした必要以上に厳格な仕様を、もう少しゆるめにしようというのがHTML5の目標の1つです。
目立ってシンプルになっているのがDoctypeです。今までStaticとかTranditionalとかありましたが、単純にhtmlとだけ書けば良くなります。
イコールの後にダブルクォーテーションが必要なくなる点も大きく変更となる点です。

その他にも「ブラウザにサイトの情報を保存できるようになる」「ブラウザ側で図形描画を行えるようになる<canvas>タグ」「新規要素と廃止要素」などについてお話頂きました。

■CSS3でできること

1.画像に頼らない装飾ができる
まずテキストにシャドウを付ける機能。これはSafariなどのWebkit環境で早くからサポートされていたので、おそらく現状世の中で最も多く使われているCSS3の機能だと思います。
次にボーダーへの画像適用。ボーダー部にバックグラウンド指定ができるようになります。
そしてRGBA指定。今までは＃から始まる16進法で色指定してきましたが、CSS3ではRGBそれぞれに256段階かける3で色を割り振って指定する事ができます。
それに加えて最後のAは、アルファのAです。透明度を指定できます。例えばコントラストの強い背景の上に、うっすらと暗い背景を使ったテキストエリアを制作する際に便利です。
次にボックス要素への各種応用ですが、これらの新機能によりボックスエリアをCSSのみで装飾する事ができるようになります。グラデーションを表現するだけで幅数ピクセルの画像を用意する手間が省けます。
これらの新機能によりCMS利用時のデザイン性が向上します。

2.簡単なアニメーションを制作できる
クライアントからの要望で、よく「動きが欲しい」というオーダーがありますが、その際にJavascriptやFlash以外の選択肢となります。
ただし現状はWebkitやMozilla環境でしか動作しないため、IEユーザーのための代替案を別に用意する必要があり、生産性が高くありません。いずれモダンブラウザが主流になった時には、こうした手段が逆に主流になると思います。

■サイト閲覧環境の現状

ブラウザシェアは、2008年当時はIE6の圧勝と言える内容で、当時発表されたばかりの7も含めると、70％以上の人がIEを使っていました。
それが2010年に入ると大きく変わります。IEがシェアトップである現状は以前と変わりありませんが、Firefoxがかなり多くのユーザーを獲得しており、ブラウザの銘柄も多くなります。またIE6のユーザーが7よりも多いという点も気になります。IEユーザーのバージョンアップがなかなか進んでいないという現状は、つまりIE6のサポートを制作者側は今後も続けなければならないという事でもあります。

その多様化するブラウザの種類を、HTML5とCSS3に対応してるかどうかで分けてみると、また異なった現状が見えてきます。
HTML5 + CSS3に対応しているブラウザのユーザーは全体の3割弱です。あまり多くはありません。
しかし、先日仕様が公開されたIE9が正式に発表されると、この数値は大きく上がるはずです。IE9ではHTML5とCSS3のサポートが決定しています。
このことからも、今サイト制作者がHTML5とCSS3に備える必要があるという理由が分かって頂けるかと思います。

■まとめ

技術面は別として、HTML5 + CSS3でできる事に関する知識はディレクターにも重要であると思います。以下は作業効率アップに役立つ情報として覚えておくと良いと思います。

1.文章マークアップが強化され、SEO、情報の汎用性が高まる
2.動画や音声、動きなどリッチコンテンツを直接配置できる
3.画像に頼らない装飾ができることでCMS利用時のデザイン性の向上
4.よく使うCSS定義をライブラリ化することで生産性を向上できる

■おわりに

講演の後に、講師の小山氏と弊社Webディレクターと2名でパネルディスカッションを行っていただき、その後、参加者と講演者による懇親会も大盛況のうちにイベントは終演しました。

「Webクリエイターのスキルアップ、交流の場をもっと！」と、いう声を東海地区のWebクリエイターの方から多くいただき開催することとなった「Creator's Meeting In NAGOYA」。
記念すべき第1回は、フリーランスで活躍中のWebデザイナー、ディレクターの小山勝正さんをお迎えして「HTML5と CSS3によるウェブ表現の変化」というテーマでお話いただきました。

XHTML + CSS2.1からの変化は、ただコーディング環境が変わるというだけではなく、デザイナーやディレクターの方向けに、今後どのような技術が使えるようになり、表現の幅がどう広がるのかを具体的にご紹介頂きました。

【講師プロフィール】
東海地方のウェブ制作会社での業務を経て、現在フリーランスとしてWeb Creators誌などに寄稿し、デザイナー兼ライターとして活躍中！愛車はロードスター

■ブログ：mBlog
■ポートフォリオサイト：Chameleon Graphics

■XHTMLからHTML5に変更されると、どのような変化が起こるのか？

1.文章の構造化が進む
今まではヘッダーとなる部分は<div id="header">、フッターとなる部分は<div id="footer">といった記述の仕方が一般的でしたが、ここで割り振るidというのは制作者側の任意の文字列で、いわゆる規格というものではありませんでした。
HTML5ではこれらに<header>や<footer>といった専用の要素が新たに追加されます。レイアウトにこれらのタグを利用することで、「<header>と</header> で囲まれた箇所はヘッダー部分である」とブラウザ側が認識するようになり、ページ内の文章構造をより明示的に表すことができます。
ヘッダーやフッター以外にも、文章などのセクションを定義する「section要素<section>」や、ナビゲーションエリアを定義する「nav要素<nav>」、ブログやニュースサイト向けの「article」要素などがあります。これにより何が良くなるのかというと、検索エンジンへの明示的な通知がまず1つ、そしてRSSリーダーやモバイル環境でのサマリー表示への応用など、情報の汎用性が高まるという点の2つです。

2.マルチメディアコンテンツを直接配置できる
マルチメディア系コンテンツは、従来の画像を貼る<img>タグのように、<video> や<audio>といったタグによって動画や音声をページに埋め込むことができるようになります。
今まではこうしたコンテンツをサイトに貼りたい場合、例えば動画ファイルの場合は主にFlashプレイヤーで再生するFLVを使う機会が多かったと思います。同様に音楽ファイルもmp3をswfに埋め込んだりします。これは現状Flashの普及率が高く、また制作する側から見てもプラットフォームとして使いやすかったためなのですが、これを実装するにはFlashでオーサリングする必要がありました。
HTML5のvideoタグを使えば、動画を汎用的なフォーマットのまま配置することができます。
またYoutubeではすでにHTML5対応も始まっています。

3.記述ルールの厳格さが緩和される
XHTMLでは、｢属性値をクオートで囲む｣、「空タグにもスラッシュを付ける」など、記述ルールはわりと厳格と言える内容でした。
こうしたルールは制作の現場では当たり前になってはいますが、実際にはプロが制作したサイト以外のほとんどはXHTMLではなくHTMLで書かれています。
制作の現場でも、例えばXHTML宣言文を書いた途端にレイアウトが崩れたという経験がある人もいるかと思います。
そうした必要以上に厳格な仕様を、もう少しゆるめにしようというのがHTML5の目標の1つです。
目立ってシンプルになっているのがDoctypeです。今までStaticとかTranditionalとかありましたが、単純にhtmlとだけ書けば良くなります。
イコールの後にダブルクォーテーションが必要なくなる点も大きく変更となる点です。

その他にも「ブラウザにサイトの情報を保存できるようになる」「ブラウザ側で図形描画を行えるようになる<canvas>タグ」「新規要素と廃止要素」などについてお話頂きました。

■CSS3でできること

1.画像に頼らない装飾ができる
まずテキストにシャドウを付ける機能。これはSafariなどのWebkit環境で早くからサポートされていたので、おそらく現状世の中で最も多く使われているCSS3の機能だと思います。
次にボーダーへの画像適用。ボーダー部にバックグラウンド指定ができるようになります。
そしてRGBA指定。今までは＃から始まる16進法で色指定してきましたが、CSS3ではRGBそれぞれに256段階かける3で色を割り振って指定する事ができます。
それに加えて最後のAは、アルファのAです。透明度を指定できます。例えばコントラストの強い背景の上に、うっすらと暗い背景を使ったテキストエリアを制作する際に便利です。
次にボックス要素への各種応用ですが、これらの新機能によりボックスエリアをCSSのみで装飾する事ができるようになります。グラデーションを表現するだけで幅数ピクセルの画像を用意する手間が省けます。
これらの新機能によりCMS利用時のデザイン性が向上します。

2.簡単なアニメーションを制作できる
クライアントからの要望で、よく「動きが欲しい」というオーダーがありますが、その際にJavascriptやFlash以外の選択肢となります。
ただし現状はWebkitやMozilla環境でしか動作しないため、IEユーザーのための代替案を別に用意する必要があり、生産性が高くありません。いずれモダンブラウザが主流になった時には、こうした手段が逆に主流になると思います。

■サイト閲覧環境の現状

ブラウザシェアは、2008年当時はIE6の圧勝と言える内容で、当時発表されたばかりの7も含めると、70％以上の人がIEを使っていました。
それが2010年に入ると大きく変わります。IEがシェアトップである現状は以前と変わりありませんが、Firefoxがかなり多くのユーザーを獲得しており、ブラウザの銘柄も多くなります。またIE6のユーザーが7よりも多いという点も気になります。IEユーザーのバージョンアップがなかなか進んでいないという現状は、つまりIE6のサポートを制作者側は今後も続けなければならないという事でもあります。

その多様化するブラウザの種類を、HTML5とCSS3に対応してるかどうかで分けてみると、また異なった現状が見えてきます。
HTML5 + CSS3に対応しているブラウザのユーザーは全体の3割弱です。あまり多くはありません。
しかし、先日仕様が公開されたIE9が正式に発表されると、この数値は大きく上がるはずです。IE9ではHTML5とCSS3のサポートが決定しています。
このことからも、今サイト制作者がHTML5とCSS3に備える必要があるという理由が分かって頂けるかと思います。

■まとめ

技術面は別として、HTML5 + CSS3でできる事に関する知識はディレクターにも重要であると思います。以下は作業効率アップに役立つ情報として覚えておくと良いと思います。

1.文章マークアップが強化され、SEO、情報の汎用性が高まる
2.動画や音声、動きなどリッチコンテンツを直接配置できる
3.画像に頼らない装飾ができることでCMS利用時のデザイン性の向上
4.よく使うCSS定義をライブラリ化することで生産性を向上できる

■おわりに

講演の後に、講師の小山氏と弊社Webディレクターと2名でパネルディスカッションを行っていただき、その後、参加者と講演者による懇親会も大盛況のうちにイベントは終演しました。

「Webクリエイターのスキルアップ、交流の場をもっと！」と、いう声を東海地区のWebクリエイターの方から多くいただき開催することとなった「Creator's Meeting In NAGOYA」。
記念すべき第1回は、フリーランスで活躍中のWebデザイナー、ディレクターの小山勝正さんをお迎えして「HTML5と CSS3によるウェブ表現の変化」というテーマでお話いただきました。

XHTML + CSS2.1からの変化は、ただコーディング環境が変わるというだけではなく、デザイナーやディレクターの方向けに、今後どのような技術が使えるようになり、表現の幅がどう広がるのかを具体的にご紹介頂きました。

【講師プロフィール】
東海地方のウェブ制作会社での業務を経て、現在フリーランスとしてWeb Creators誌などに寄稿し、デザイナー兼ライターとして活躍中！愛車はロードスター

■ブログ：mBlog
■ポートフォリオサイト：Chameleon Graphics

■XHTMLからHTML5に変更されると、どのような変化が起こるのか？

1.文章の構造化が進む
今まではヘッダーとなる部分は<div id="header">、フッターとなる部分は<div id="footer">といった記述の仕方が一般的でしたが、ここで割り振るidというのは制作者側の任意の文字列で、いわゆる規格というものではありませんでした。
HTML5ではこれらに<header>や<footer>といった専用の要素が新たに追加されます。レイアウトにこれらのタグを利用することで、「<header>と</header> で囲まれた箇所はヘッダー部分である」とブラウザ側が認識するようになり、ページ内の文章構造をより明示的に表すことができます。
ヘッダーやフッター以外にも、文章などのセクションを定義する「section要素<section>」や、ナビゲーションエリアを定義する「nav要素<nav>」、ブログやニュースサイト向けの「article」要素などがあります。これにより何が良くなるのかというと、検索エンジンへの明示的な通知がまず1つ、そしてRSSリーダーやモバイル環境でのサマリー表示への応用など、情報の汎用性が高まるという点の2つです。

2.マルチメディアコンテンツを直接配置できる
マルチメディア系コンテンツは、従来の画像を貼る<img>タグのように、<video> や<audio>といったタグによって動画や音声をページに埋め込むことができるようになります。
今まではこうしたコンテンツをサイトに貼りたい場合、例えば動画ファイルの場合は主にFlashプレイヤーで再生するFLVを使う機会が多かったと思います。同様に音楽ファイルもmp3をswfに埋め込んだりします。これは現状Flashの普及率が高く、また制作する側から見てもプラットフォームとして使いやすかったためなのですが、これを実装するにはFlashでオーサリングする必要がありました。
HTML5のvideoタグを使えば、動画を汎用的なフォーマットのまま配置することができます。
またYoutubeではすでにHTML5対応も始まっています。

3.記述ルールの厳格さが緩和される
XHTMLでは、｢属性値をクオートで囲む｣、「空タグにもスラッシュを付ける」など、記述ルールはわりと厳格と言える内容でした。
こうしたルールは制作の現場では当たり前になってはいますが、実際にはプロが制作したサイト以外のほとんどはXHTMLではなくHTMLで書かれています。
制作の現場でも、例えばXHTML宣言文を書いた途端にレイアウトが崩れたという経験がある人もいるかと思います。
そうした必要以上に厳格な仕様を、もう少しゆるめにしようというのがHTML5の目標の1つです。
目立ってシンプルになっているのがDoctypeです。今までStaticとかTranditionalとかありましたが、単純にhtmlとだけ書けば良くなります。
イコールの後にダブルクォーテーションが必要なくなる点も大きく変更となる点です。

その他にも「ブラウザにサイトの情報を保存できるようになる」「ブラウザ側で図形描画を行えるようになる<canvas>タグ」「新規要素と廃止要素」などについてお話頂きました。

■CSS3でできること

1.画像に頼らない装飾ができる
まずテキストにシャドウを付ける機能。これはSafariなどのWebkit環境で早くからサポートされていたので、おそらく現状世の中で最も多く使われているCSS3の機能だと思います。
次にボーダーへの画像適用。ボーダー部にバックグラウンド指定ができるようになります。
そしてRGBA指定。今までは＃から始まる16進法で色指定してきましたが、CSS3ではRGBそれぞれに256段階かける3で色を割り振って指定する事ができます。
それに加えて最後のAは、アルファのAです。透明度を指定できます。例えばコントラストの強い背景の上に、うっすらと暗い背景を使ったテキストエリアを制作する際に便利です。
次にボックス要素への各種応用ですが、これらの新機能によりボックスエリアをCSSのみで装飾する事ができるようになります。グラデーションを表現するだけで幅数ピクセルの画像を用意する手間が省けます。
これらの新機能によりCMS利用時のデザイン性が向上します。

2.簡単なアニメーションを制作できる
クライアントからの要望で、よく「動きが欲しい」というオーダーがありますが、その際にJavascriptやFlash以外の選択肢となります。
ただし現状はWebkitやMozilla環境でしか動作しないため、IEユーザーのための代替案を別に用意する必要があり、生産性が高くありません。いずれモダンブラウザが主流になった時には、こうした手段が逆に主流になると思います。

■サイト閲覧環境の現状

ブラウザシェアは、2008年当時はIE6の圧勝と言える内容で、当時発表されたばかりの7も含めると、70％以上の人がIEを使っていました。
それが2010年に入ると大きく変わります。IEがシェアトップである現状は以前と変わりありませんが、Firefoxがかなり多くのユーザーを獲得しており、ブラウザの銘柄も多くなります。またIE6のユーザーが7よりも多いという点も気になります。IEユーザーのバージョンアップがなかなか進んでいないという現状は、つまりIE6のサポートを制作者側は今後も続けなければならないという事でもあります。

その多様化するブラウザの種類を、HTML5とCSS3に対応してるかどうかで分けてみると、また異なった現状が見えてきます。
HTML5 + CSS3に対応しているブラウザのユーザーは全体の3割弱です。あまり多くはありません。
しかし、先日仕様が公開されたIE9が正式に発表されると、この数値は大きく上がるはずです。IE9ではHTML5とCSS3のサポートが決定しています。
このことからも、今サイト制作者がHTML5とCSS3に備える必要があるという理由が分かって頂けるかと思います。

■まとめ

技術面は別として、HTML5 + CSS3でできる事に関する知識はディレクターにも重要であると思います。以下は作業効率アップに役立つ情報として覚えておくと良いと思います。

1.文章マークアップが強化され、SEO、情報の汎用性が高まる
2.動画や音声、動きなどリッチコンテンツを直接配置できる
3.画像に頼らない装飾ができることでCMS利用時のデザイン性の向上
4.よく使うCSS定義をライブラリ化することで生産性を向上できる

■おわりに

講演の後に、講師の小山氏と弊社Webディレクターと2名でパネルディスカッションを行っていただき、その後、参加者と講演者による懇親会も大盛況のうちにイベントは終演しました。