8月30日、先週の日曜日にWeb Design KOJIKA17のこじー（@kojika17）と一緒に「Back to Basics」というイベントを行いましたのでそのレポートをざっくりとお送りします。また、せっかくなので主催側の思惑や、この100人規模のイベントを開くにあたって工夫した点やイベント後のデータなども伝えてみたいと思います（文中敬称略）。

CSSイベント「Back to Basics」 | Peatix

この記事がCSSや今後のこのイベントに興味のある人、また自分もイベントをやってみたいと思うような人の役に立てば幸いです。

イベントの主旨

私とこじーはhtml5jでマークアップ部という活動をしているのですが、今回はそのスピンオフイベントとして開催しています。

実際のイベントでも最初にこじーが、なぜこのイベントをやろうと思ったかの話をしました。

意欲的なWeb制作者の新しい技術の話に対する関心は比較的高く、CSSの話題で言えばプリプロセッサー、CSS設計、いわゆるCSS3の新しいプロパティーなどに注目している人は多いでしょう。

ですがこのイベントではそういったキャッチーなトピックではなく、むしろ知ってて当然と誰もが思うようなことにフォーカスを当てて、より深い理解を得ようということに主眼を置いています。中級者の人でもある程度わかっているから仕様をちゃんと読んだことはない、正確な構文パターンまでは知らないという人は少なくないはずです。イベント全体として、仕様書と向き合うということをメッセージとしています。

参加者の職種はWebデザイナー、マークアップエンジニア、フロントエンドエンジニアを想定しており、実際にそのようになっています。内容のレベルとしては前述のとおり中級者を中心としていますが、それなりに勉強している人であれば初心者でもついてこれることを意識しています。

やってみたこと

発起人のこじーとイベントについてディスカッションしたとき、いくつかの試みを行うことを考えました。

有料、事前支払い

勉強会イベントを主催する人たちの間では、無料イベントは募集の3〜4割が来ない（そしてほとんどがドタキャン）と言われています。これは構造上しかたないところもあって、規模が大きくなると要はただのパーティーのように、出入り自由、行っても行かなくても自由みたいなイベントに感覚が近くなってくのかもしれません。なんか相手もいちいち応対面倒なのではって思っちゃうこともありますしね。実際には、別にこちらの手間はたいしてかからないので都合が悪くなったらキャンセル手続きをしてもらえると、イベント主催者は助かることのほうが多いです。

Back to Basicsでは有料、しかも事前決済サービス（Peatix）を使うことで、参加者それぞれに明確な参加意識を持ってもらえないかと考えました。結果、参加者は募集人数の9割と高い参加率をキープできました。都合が悪くなるということは誰だってありますし、これ以上は仕方ないかなと。雨が降っていようとも行かなかったら損する！と思ってもらえるようなイベントメイキングを心がけたいです。

LTの工夫

大きめなイベントのLTってわりと余興的な位置づけのことが多いです。懇親会の一角で行われたりすることもあったりして、そうでなくても長丁場のイベント終盤では参加者がうまく集中力を維持できないことも少なくありません。そのためLTのタイミングをイベント中盤に配置しました。これは確かこじーの提案だったような。

30分のセッションと5分のセッションでは聞く際の心構えも違うので混乱しやすいのではという懸念もありましたけど、概ねうまくいっている気がします。

ただ、今回はLTを一般募集したのですが、その応募者がそうそうたるメンバーすぎて…そりゃみんな聞くよねみたいなラッキーな部分も大きかったですw

イベントをやった側の私がいうのもなんですが、今回は本当にお得だったと思います。

アンケートの工夫

アンケートでセッションの評価をチェック方式でしてもらいました。また、このアンケートへの記入を重視しているということを参加者にアピールしました。セッションの間にアンケート記入のタイミングを置き、その提出をイベント最後のプレゼント抽選会の参加権としました。これは当然今後のイベントでのセッション立てのための参考情報になります。全参加者の85%程度の提出を得られています。

LTについては人気投票を設けました。7本のLTのうち、特に面白かった、もっと聞いてみたいというものにチェックを入れてもらい、人気の高かったものは次回以降で30分セッションとして再オファーを出させてもらう、というふうにアナウンスしています。まあそもそも掘り下げにくいものや、イベントの主旨と合っていない（LTはバラエティー重視にしました）ものもあるので、これは参考情報として使う感じです。

内容の工夫

スピーカー全員のスライドを他の全員でチェック、レビューし、クオリティーを担保することに努めたり、Slackでディスカッション、GitHubで共有してブラッシュアップと、スピーカー全員が一つのイベントのチームとしてお互いのスライドを練り上げました。スピーカーはもともと仲のいいメンバー中心だったのですが、これも結構大きかったのではないかなと思っています。

もともとはこじーと二人で企画した今回のイベントですが、スピーカー陣の皆さんにはセッション内容だけでなくイベントの進行までかなり提案してもらったので、実質的にはスピーカー兼スタッフといった感じになっていました。

ちなみにLTの方は内容についてはそこまで厳正にチェックを行わなかったのですが、ベテランの人ばかりだったのでその辺はあまり心配していなかったです。

寿司

スポンサーにもついてもらっていたので、お寿司を頼みました。勉強会の懇親会でお寿司食べられるの最高っていう自身の経験に基づいてのものですね！ｗ

実際懇親会はやはりスピーカーや似た業務に従事する人たちと交流できる大事な場ですから、その時間を楽しく過ごせることにとても気を使いました。人が密集しすぎてちょっと暑かったりしましたし、少し寿司が足りなかった感じもあるので、次回は量を考えないといけないですね…。まあ、イベントのボリュームを考えるとそこまで不満になるようなほどではないはず。多分。

ちなみにみんな大好き銀のさらで注文しました。リーズナブルな価格で出前をお願い出来て便利！★

スライド一覧

5つのメインセッションと7つのスライド一覧を掲載します。

セッション1:基本の前の基礎知識（@ub_pnr）

基本の前の基礎知識 – Back to Basics CSS 2015-08-30

まとりさん（@ub_pnr）のセッション。このイベントの他のセッションでは随所に仕様書の話題が出てくるので、そもそも仕様書がどういうものかわからないという人のために仕様書の話になりました。後半はCSSで使える単位やデータ型について。

基礎知識とはいえ、普通にやっているだけでは意識しない話題も多く、アンケートでもっと詳しく知りたいというチェックの一番多かったセッションでした。

セッション2:UAスタイルシートとリセットCSS（@kojika17）

UAスタイルシートと リセットCSS

仕様について知った次はブラウザーについて。ブラウザーのデフォルトスタイルシートと、リセット系CSSの話を主催者のこじー自ら解説しました。

デフォルトスタイルシートには通常書くことはないプロパティーも含まれているため、初めて知ったということも多くあったようです。全セッションの中でも特に説明がわかりやすく、言葉も聞き取りやすかったということでした。

セッション3:ご存じですか？colorプロパティ（@GeckoTang）

ご存じですか？colorプロパティ

ここからは一つのセッションでCSSプロパティーいずれか一つを中心に扱ったものになります。誰でも書いたことがあるような普通のプロパティーを題材とすることにしていましたが、その一発目がげこたん（@Geckotang）のcolorプロパティー。

colorプロパティーの指定を参照するプロパティーの解説とともに、currentColor値の解説が中心となった内容です。コードの通常の記述例、スライド内容を踏まえた記述例、実行結果と示す形のスライド、説明のわかりやすさが共にアンケートで高評価でした。

ちなみにスライド内容はげこたんの勤めるピクセルグリッドの定期購読コンテンツ、CodeGridのCSS再入門 – colorプロパティという記事でも読めます。

LT一覧

名前を聞けば多くの人が「ああ、あの人だ！」という印象を持つような鉄壁の布陣って感じです。一人5分で7本ものセッションを、それもかなり内容の濃いものばかりだったので脳が追いつくのも大変だったと思います…。ざらっとリンクで紹介。

1. CSSで固定比率レイアウト @yoshiko_pg
2. Evaluating your stylesheets @t32k
3. お前は table-cell に position: relative できなかった人の数を覚えているのか @debiru
4. PostCSS 5.0: for Custom CSS Preprocessing // Speaker Deck @morishitter_
5. One thing you might not know about CodePen @hiloki
6. ＠charset @myakura
7. パフォーマンスを発揮するためのCSS // Speaker Deck @448jp

LTはCSSに関係した話しならある程度何でもオッケーという感じになっているのでわりと上級者向けの話もあるかと思います。

セッション4:background-(image|size) の深みへようこそ（@kubosho_）

background-(image|size) の深みへようこそ

LTをはさみ、再びメインセッションのくぼしょーさん（@kubosho_）のセッションでは、background-imageとbackground-sizeの2つのプロパティーの挙動について、実際のデモをはさみながら解説していきます。

背景画像のアニメーションに関するブラウザーごとの挙動、backgroundプロパティーのショートハンド指定におけるbackground-sizeの扱いの違いという2つの話題を軸に、だんだんと細かい話になっていくというもので、ちょっと難しかったという感想も多かったです。

イベントの所感としてくぼしょーさん自身もCSS イベント「Back to Basics」に行ってきたという記事を書いています。

セッション5:position:fixed;チョットデキル（@o_ti）

position: fixed;チョットデキル

最後のセッションはおちさん（@o_ti）。全セッションの中でもさらに限定的なposition:fixed;についての話。内容としてはposition:fixed;の仕様、ブラウザーの実装、バグ、実際によくあるパターンで起きる問題という風にわかりやすい展開です。

謎な部分についてはちゃんと仕様書に書いてあるし翻訳もされているよということ、でもバグも多いしうまく実装されてないことも多いし、本当に必要かどうかを考えてねということ、そしてどうしても使いたい場合の有効な手段という真っ直ぐな流れをキレイに説明したなーという感じでした、アンケートでも面白かったという評価が一番高かったです。

スポンサー

今回は参加費を1000円と安く抑えていますが、懇親会にはお寿司を用意しました。これは多くのスポンサーのおかげで実現しています。感謝！スポンサー会社は以下のとおり（順不同）。

• 株式会社DMM.comラボ
• 株式会社KADOKAWA
• 株式会社エムディエヌコーポレーション
• 株式会社クリーク・アンド・リバー社
• CodeIQ
• 株式会社まぼろし
• 株式会社ピクセルグリッド
• 日本マイクロソフト株式会社

特にDMM.comラボの方には会場の提供のほか、スタッフの方々の様々なサポートを頂きました。その他のスポンサー会社からは協賛金のほか、イベントの最後のプレゼント大会の賞品や、参加者全員プレゼントのノベルティーなどを提供して頂きました。

賞品のプレゼント大会。当選者が欲しいものを選べる

今回のイベントではチラシの配布などはしましたが、スポンサー企業の皆さんからの告知時間などは特別に割いていませんでした。今後はスポンサー企業の要望なども頂きながら検討していきたいと思っています。

Back to Basicsではさらにスポンサーを求めております。興味のある企業の方は@webcre8かmail@webcre8.jpまでご連絡ください！

参加者の反応

参加者の反応についてアンケート、ツイート、その他リアクションを紹介します。

アンケート

アンケートは設問への回答にふさわしいと思われるものに複数チェックするチェック欄と自由記入欄をイベント全体とセッションごとに設定していましたが、前述の通りとてもたくさんの提出を頂きました。今回は紙でのアンケート用紙を配布しましたが、フォーム入力も欲しいという声もありました。

アンケートの回答内容については公開する予定がなかったのでざっくりになりますが、仕様について理解が深まった、もっと自分でも読んでみるようにしたいというような仕様に関すること、話す内容を絞ったことでとても深い話が聞けたというコンセプトに関する評価を多数いただきました。これは今後も貫いていこうと思います。

一方で、休憩時間が短すぎたなど、進行やプログラムについての問題もわかりました。機材のトラブルなどもあり、この辺りについてはしっかり見なおしていきたいと思います。

ツイート

参加者のリアクションについてはTogetterを見てみてください★

CSSイベント「Back to Basics」2015/08 – Togetterまとめ

今回はツイートでかなりのリアクションをもらえていたようで、途中でハッシュタグの#btbcssがTwitterのトレンド入りするということがありましたｗ

その他のリアクション

今回のイベントでは、過去私が行ったイベントの中では比較的イベント後のリアクション、つまりブログによるレポートが少なく感じました…というか先週の時点ではブログを全然見かけなかったです。この記事を公開する直前に探して見つけたものだけリンクします。皆さん時系列順にスライドを紹介してくれていたり、かなりがっつり振り返ってくれていたりで、セッションの雰囲気はそこからも読み取れるかと思います。

• Back to Basics CSSの感想と自分用まとめ（とありがたきスライド） | mtdew2
• CSS イベント「Back to Basics」に参加してました – Re:Start
• Back to Basics – thleap.net
• Back to Basics CSSでLTをしてきたよの巻 – 448.jp blog

しかし今回は他にもちょっと変わったリアクションをもらえました。

セッション1のまとりさんのセッションのスライドを韓国の方が翻訳してくれたり。

기본 이전의 기초지식 – Back to Basics CSS 2015-08-30

イベント全体をクイズ形式にしてまとめてスライドを作成してくれた方がいたり、ということがありました。

Q＆Aで振り返る「Back to Basics」 CSS 2015.08.30

どちらも今までにない形のリアクションで嬉しかったです！今後も何かの形でリアクションが貰えると嬉しいですし、もうしばらく日も経っちゃってますがまだまだ感想ブログ記事など、書いていただけたら嬉しいです。

まとめ

というわけで、主催者側視点からのイベントレポートというか、報告としました。今後もここで書いたようなコンセプトを軸にイベントを行っていく予定です。

最後に今回参加してくださった参加者の皆さん、イベントの企画段階からディスカッションに加わってくれたスピーカー陣の皆さん、LT参加を申し出てくださったLTスピーカーの皆さん、また私とこじーの段取りの至らぬところを高いよしな力でカバーしてくれたスタッフの皆さん、会場を提供してくださったDMMラボの皆さん、スポンサーの皆さんに深く感謝を申し上げます。本当にありがとうございました！

今後もイベントに対する応援や協力、興味のある人のご参加をお待ちしております★

写真：@poyosi、@yuki_m015