「HTML5 フロントトレンド最前線」に行ってきました

「HTML5 フロントトレンド最前線」に行ってきました
HTML・CSS

2015年3月5日、HTML5funが開催する「HTML5 フロントトレンド最前線」セミナーに行ってきました! 東京都麹町で行われたこのイベント、なんと参加費無料の景品付き。フロントトレンド最前線ということで、最前列で聞いてきましたー!ので、レポート書きます(^^

主催団体HTML5funとは?

公式サイトでは、このように説明されています。

HTML5を使った制作・開発の楽しさを伝える・明日から使える技術と知識を身につけてもらうというテーマで、気軽に参加できる勉強会を開催する団体

昨年5月、東京でのイベントを皮切りに、北は北海道から南は岡山まで全国各地でHTML5のセミナーを開催してきました。全国展開するスピード半端ないです。

WEBデザイナー向け実践的テクニックが満載のセミナー内容

02 今回が東京で2回目のイベント開催でした……実は私、前回も一番前を陣取って聞いてました(w)。 率直に言って、前と雰囲気変わったって感じでしたね。

前回のイベント時、HTML5はまさにWEBトレンドの最先端。年内の勧告を目の前に控え「HTML5でWEBが大きく変わる!」とみんながわくわくしてました。
そんな中で行われたイベントでは、WEBサービスやエンタープライズ、ゲームなどいろんなジャンルの最前線をひた走る人たちが、HTML5の様々な可能性を披露されました。「こんなことできるんだ!」って感動した反面、へっぽコーダーだった私には専門性が高すぎ、理解しきれなかった部分も…(^^;

時は過ぎ、HTML5は2014年10月28日に正式勧告。もうHTML5は旬というより「使うのがフツー」になっています。今回のイベントはそんな変化に合わせたように、WEBサービスを制作するデザイナー・フロントエンジニアが実戦に生かせる技術を学べる内容となっていました。

パララックス・Webフォント…登壇内容を振り返ってみます

03 せっかく聞いてきたので、それぞれのセッションをざっくりまとめたいと思います。 (こちらでスライドが公開されています!→開催レポート

セッション1:ワンランク上のワンカラムレイアウトデザインを作ろう

CPIエバンジェリスト、阿部正幸さんのセッションでした。CPIスタッフブログの中の人です。
すっかりメジャーになったBootstrupと、「最近のWEBデザインといえばコレ」って感じのワンカラムレイアウト。合わせて使えば瞬時に「それっぽさ」が出ますが、没個性なデザインになりがちですよね。 そこにBootstrupのTipsなどで「心地よい動き」を追加して、かっこよくて表情豊かページにしようぜ!って話でした。 animation.cssの導入方法なんかも教えてもらいました。早く使いたい…!

セッション2:日本語Webフォントの最新事情

2人目は、Webフォント・エバンジェリスト 関口浩之さん。 Webフォントもだいぶスタンダードになりましたが、ビジネスに取り入れるにはこんなあるある問題が。

お高いんでしょう? 表示遅くない?

みたいな。 それらの問題に対する最新事情をお話されてました。 私も欧文ならGoogle Fontsを試したことがありますが、日本語フォントはいろいろ考えることが多くて避けてました(^^;が、やってみようかな…。 関口さんによると、Webフォントは「新しい絵の具みたいなもの」だそうです。これすごく印象的な言葉でした。Web上の表現者ならば、新しい画材は率先して使わねばなりませんよね。

ちなみに、こんなサイトを紹介されていました。Twitterのつぶやきにフォントとアニメーションを加えるというもの。すごい。
・MotionTypography

セッション3:SVG MANIAX

3人目は、株式会社まぼろしのデザイナー 松田直樹さん。 SVGは、今の時代IE8を除けばだいたいの環境で使えます。これも使いこなしたいツールの一つですよね。 松田さんによると、SVGの最大の利点は「ベクターだから拡大してもキレイだぜ」じゃないそうです。 つーか、そんなこと言ってるのは初心者だそうです。まじか。ドヤ顔して言ってたわ。

ではSVGの最大の利点とは何か。それは、「画像の中身をアクセシブルにできる」こと。 SVGはXMLだから、画像であり文書である。文書であるということは、テキストノードを含めることができる。マシンリーダブルな要素で、アクセシビリティを確保できる! img要素だとaltで指定するだけでしたが、SVGなら画像の中に存在する一つ一つの要素にまでタイトルと説明を加えることができるそうです。
そのやり方をわかりやすくレクチャーするセクションでした。あと、SVGへのはんぱない愛伝わってきました。

セッション4:ちょっと面白い(かもしれない)CSS3

トリは、マイクロソフトMVP中島俊治先生のセッションでした。 放送大学の先生である他、かなりの頻度でHTML5・CSS3講座を開いている人です。実は私もHTML5の学び初めにお世話になりました。

セミナーのお題は「最新ドレンド」。題材を決めるために先生がGoogleトレンドで検索ボリュームを調べると、もう「HTML5」「CSS3」はピークを過ぎてたそうです。 かわって右肩上がりなのが、「single page web application」――というわけで、HTML5/CSS3/Javascriptを使ってパララックスなシングルページを作る基本のやり方をレクチャーして頂きました。
今回は基本ということで、プラグインやテンプレートを使わないやり方です。仕事でイチからソースを書くことは少なそうですが、何を使ったとしても、どうやってそれが動いてるのか仕組みを知っておくこと、大事ですよね。

セミナーの中で、面白いシングルページを紹介されました。

・Nikon 1AW1
・PEUGEOT hybrid4
・2011.beercamp.com(←これはひどい 笑 最後のコマをクリックすると…音量注意!)

まとめ

2時間という時間の中でしたが、かなり具体的にHTML5でサイトを作る際の手法を教えてもらえました。セミナーのスライドをじっくり読んで復習すれば、一気に武器が増えるはず。今後、積極的にそれらを生かせるようなサイトを作っていきます!

ところで無料のセミナーなのに、協賛企業からの景品がたくさんありました。 最近出たばかりの書籍やら、softbankのお父さんストラップ(大)やら(KDDIの人が主催してるのに 笑)。私はジャンケンに勝てなくて、お父さんノートしかもらえませんでしたが。 04 これはこれでいい記念。

  • このエントリーをはてなブックマークに追加