注目される「WebGL」--プロが示すHTML5でのフロントエンド演出の勘所

福田悦朋
2015-01-26 16:59:00
  • このエントリーをはてなブックマークに追加

 2014年10月28日、W3C(World Wide Web Consortium)による正式勧告がなされた「HTML5」――。ウェブの次世代標準技術として、さらなる普及が予想されている。

 そんな中、HTML5のスキル認定制度「HTML5プロフェッショナル認定制度」を展開する特定非営利活動法人エルピーアイジャパン(LPI-Japan)は2014年12月、HTML5の教育啓蒙活動の一環として「HTML5感。~HTML5で何ができる? もっと知りたいHTML5のあれこれ~」と題されたセミナーを実施した。ここでは、その基調講演の内容をもとにHTML5がウェブコンテンツ制作の世界をどう変容させるかについて見ていく。

一体で動く

 セミナーで基調講演のスピーカーを務めたのは、IT企業で鎌倉に本社を構える面白法人カヤックで、フロントエンドエンジニアやウェブアニメーターとして活躍する中農稔氏だ。

中農稔氏
面白法人カヤック 技術部 中農稔氏

 同氏は、カヤックの受託事業部でHTML5やFlashを駆使したウェブ広告キャンペーンサイトの実装を手がけるほか、3Dゲームの開発プラットフォーム「Unity」やウェブ上の3D標準仕様「WebGL」、サーバサイドJavaScript環境「Node.js」などを用いたサイネージやライブコンテンツの開発にも携わっている。講演では、HTML5を用いたウェブ広告やウェブフロントエンド演出の手法が事例を交えながら具体的に紹介された。

 中農氏によれば、カヤックでは2011年からHTML5を専門に扱う制作部隊が創設され、中農氏もそのチームの案件に関わってきたという。カヤックでの従来のウェブコンテンツ制作は、マークアップはデザイナーが所属する意匠部が担当し、JavaScriptによる開発は、エンジニアが所属する技術部が行うといった棲み分けがあった。

 しかし、HTML5の専門部署、HTMLファイ部には、そうした棲み分けはなく、デザイン領域とプログラミング領域の双方からアプローチして制作に当たっているという。この部門では、ウェブキャンペーンサイトやコーポレートサイトなどの案件を多く手がけているが、サイト演出の方針は「高級ペライチ」と「面白コーポレート」の大きく2つに分かれるという。

 「高級ペライチ」とは、単一ページ構成ながら、細部にわたってしっかりとした作り込みを行い、来訪者に強いインパクトを与える表現を施すことを意味する。この方針の下、カヤックがHTML5ベースで実装したページとしては、三井住友カードと「ヱヴァンゲリヲン」のコラボレーションカード「エヴァスタイルVISAカード」のキャンペーンサイトが挙げられる。このサイトでは、ページスクロールに合わせて、さまざまなグラフィックスが展開される緻密な作り込み行われている。

 一方の「面白コーポレート」では、法人ごとの個性を引き出しながら、長く親しまれるコンテンツ作りを目指している。ちなみに、中農氏は今回、この方針に沿って作られたサイトの例として、デザイン会社Qのコーポレートサイトを紹介した。

 このサイトでも、エヴァスタイルのサイトと同様に、スクロールによって表示内容が切り替わる表現が用いられているが、デザイン会社であるQのイメージを象徴する「赤ペン」がフィーチャリングされ、来訪者が赤ペンを操作し、線や図形を描くと会社のメッセージが表示されたり、図形がくり抜かれて、その中にイメージ動画が表示されたりといった細かな演出が施されている。

  • 新着記事
  • 特集
  • ブログ