このページの本文へ

PROGRAMMING Flash的アプローチで学ぶHTML5クリエイティブ入門 ― 第1回

そろそろHTML5始めてみませんか?

2012年11月02日 11時00分更新

塚本一真/1Ripple

  • この記事をはてなブックマークに追加
本文印刷

 HTML5(※)が何かと話題です。「Flash vs HTML5」のような対立構図で取り上げた記事や議論もよく見かけましたが、新しい技術に飛びつけばいいのではなく、ターゲットユーザーのブラウザー環境や最適な表現技術、パフォーマンスや互換性を考慮して使い分けるべきでしょう。

 とはいえ、最近ではiOSやソーシャルメディアの普及などで、JavaScriptやCSS3使ったHTMLベースでの開発に対する要望も増えています。従来のWebサイトでは主にPCでの閲覧を中心に考えていましたが、現在ではスマートフォンやタブレットなどさまざまな端末での閲覧を想定した、より柔軟な対応がクリエイターに求められています。

 スマートフォンやタブレットだけではありません。Retinaディスプレイを搭載したMacBook Proが発売されたり、ネット接続を前提としたスマートTVが注目されたり、デバイスも日々進化を遂げています。Webが今までの「Webページ」という概念を越し、あらゆるデバイスのあらゆる場面で使われているのです。

 そういったさまざまなデバイスを想定したクリエイティブでは、HTML5/JavaScript/CSS3といったWebスタンダードの技術が有利です。今後のブラウザーの進化とともに、表現力もさらに磨かれるでしょう。

かつてはフルFlashで構築されることが多かったブランドサイトも、HTML5ベースで構築されることが増えている
かつてはフルFlashで構築されることが多かったブランドサイトも、HTML5ベースで構築されることが増えている。画面はPRADAのWebサイト

※ここではマークアップ言語としてのHTML5ではなく、JavaScriptやCSS3使った表現や関連APIを含めた広義のHTML5を指します

FlashのアプローチでHTML5を勉強しよう

 とはいえ、リッチな表現力やインタラクティブ性に重きを置くコンテンツの制作では、現状ではまだまだFlashに一日の長があります。特に描画速度の点では大きな違いがあり、HTML5よりFlashのほうが3倍から10倍以上も高速だったという結果も出ているようです(ブラウザーによって結果は異なりますが)。また、互換性を考えると、ブラウザー間の差異をFlash Playerが埋めてくれるFlashが有利です。互換性が高ければ開発期間も短くて済みます。

HTML5はFlashの3倍重かった! 描画パフォーマンスの比較(2012年02月20日、ClockMaker.jp) http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較(2012年02月20日、ClockMaker.jp) http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/

 もちろん、この辺りの状況も刻々と変化していますが、現状では双方のメリットを生かして、PCサイトはFlashで、iOSやAndroidなどのモバイルOS向けにはHTMLベースで、といった切り分けもひとつの手です。

 今までFlashサイトを作っていた人たちはもちろん、Flashは触ったことがないけど、これからHTML5やCSS3を勉強する人も、Flash的な考え方や技術を知っていてもよいはずです。Grant Skinner氏によって開発された統合ライブラリーのCreateJSが登場したり、Flash Professional CS6では「Toolkit for CreateJS」によってHTML5変換できたり、Flash側にも新しい動きがあります。

CreateJSはFlashのような考え方でHTML5コンテンツを制作できるJavaScriptライブラリー
CreateJSはFlashのような考え方でHTML5コンテンツを制作できるJavaScriptライブラリー

 私もFlashサイトに心を動かされてから、長年、Flashコンテンツを作ってきました。特にアニメーションツールとしてのFlashは優れていますので、HTML5やCSS3、JavaScriptを勉強していくにあたり、Flashからのアプローチも交えて紹介します。

 FlashとHTML5をクロスオーバーしながら、一緒に勉強していきましょう!


著者:塚本一真(つかもと・かずまさ)

著者写真

デザイナー/フロントエンドエンジニア。1ripple代表 。1979年生まれ、兵庫県神戸市出身。Webデザイン会社にて勤務後、 2010年6月に独立。さまざまなプロモーションサイトやWebサイトを制作。好きな食べ物は酒がすすみそうな、つまみ系。嫌いな食べ物はなし。最近は肉より魚になってきたこの頃です。Web制作やアプリ開発などジャンル問わず 、フリーランスや学生さん、気軽にご連絡ください!

主な受賞歴:WEBBY AWARDS、W3 AWARDS、FWA SITE OF THE DAY、THE INTERNATIONAL DAVEY AWARDS、SPIKES ASIA

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く