CSS Nite Shift8 フォローアップ（2）『2014年のマークアップの話題を総まとめ』セッション

2014年12月13日（土）ベルサール神田 イベントホールで開催したCSS Nite LP38 「Webデザイン行く年来る年（Shift8）」のフォローアップとして、益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん（ピクセルグリッド）の『2014年のマークアップの話題を総まとめ』セッションのスライドなどをシェアします。

• スライド（PDF、96ページ、16.7MB）

メッセージ

フォローアップメッセージは、セミナー終了直後のものです。

益子 貴寛さん

Web標準、ブラウザー、制作環境、技術、そして、Coding for Marketingの5つの観点から、フロントエンドの「いま」をお伝えしました。

制 作環境については、新しいツールの「導入」から「洗練」へと、トレンドがシフトした印象です。そのぶん、まとまった情報にあたったり、効率的な方法を身に つけやすく、1年前よりも取り組むハードルが低くなりました。年末年始、ちょっと時間のあるときに、ぜひチャレンジしてみてください（当日の「Gulp」 のデモ動画は、小山田さんがYouTubeにもアップしてくれています。スライドのURLを参照）。

Coding for Marketingは、もっともっと掘り下げて扱いたい話題です。ウェブ解析士協会の江尻俊章さん、CSS Nite東京版のスタッフでもあるハマ企画の田中友尋さんと、なにかできないか考えます。続報をお待ちください。

新 年1月16日（金）に、サイバーガーデンbizで「2015年に取り組みたいWeb制作・運営の10トピックス」を開催します。マーケティングの内容が中 心、3時間の集中セミナーです。Webマーケティングに直接関わっている人はもちろん、企画力や提案力を強化したい人におすすめです。よろしければ、ぜひ ご参加ください。
http://cybergarden.biz/lectures/10topics-20150116.html

CSS Nite「Shift」が、トレンドの総決算としてお役に立つだけでなく、同じ時代に生きる者同士、また来年もがんばろう、情熱をもって仕事に取り組もうと思ってもらえるイベントになれたらと、いつも願っています。

小山田さん

Shift8で益子さんとともにマークアップセッションを担当した小山田です。2014年のマークアップセッションはいかがでしたでしょうか？

ブラウザーの進化で、これまで足枷だった旧IEがなくなり、以前にもまして"HTML5"らしい、すてきな表現をする準備が整いつつあります。2015年はこれまで封印していた、新しい技を使ってみるいい年になるでしょう。

加えて、あなたがもしHTMLやCSSを書く仕事をしているのであれば、制作環境にも注目するといいでしょう。
スマートフォンなどのデバイスや、HTML5などの技術の進化により、皆さんがやらなければいけないことは増えています。しかし、SassやGrunt/Gulpをはじめ、便利なツールも増えています。こうしたツールを使えば自動化できることは徹底的に自動化し、時間を節約しながらクオリティを上げることができます。私自身もこうしたツールを活用していますが本当におすすめします。

Shift8 で見たこと、学んだことは、そのままにしてしまうのではなく、実際に手を動かして試してみてください！冬休みという、いい時間があるんですから！

皆さんからいただいたアンケート全てに目を通しました。貴重な意見ありがとうございました。コメントでいくつか質問をいただきましたのでここでお応えします。

質問: ブラウザーがどんな技術に対応しているか調べる方法はありますか？

http://caniuse.com/ というサイトを活用してみてください。検索窓に「svg」などといったキーワードを入れれば対応しているブラウザーのバージョンが一目瞭然です！

質問: Sassやタスクランナーを導入する際、チームでレベルが違う人がいる場合どうしていますか？

こうしたツールは、導入にはある程度知識がいるものの、それさえしてしまえばあとは簡単です。毎回仕事を始める前にきまったコマンドを1,2行入力するだけです。
まだ勉強中というメンバーには、環境を用意して使ってもらうところから始めてみてはどうでしょうか？導入できるリーダーになる人がひとりいれば、すぐにみんなに浸透するはずです。

質問: Sassやタスクランナーを勉強するための本やサイトはありますか？

Sassについては「Web制作者のためのSassの教科書」という本がいいようです。GruntやGulpについては、書籍ではありませんが、CodeGridで使い方を紹介しいますので参考にしてみてください。

https://app.codegrid.net/entry/grunt-introduction
https://app.codegrid.net/entry/gulp-1

動画