デジハリ大阪校でSassについて話してきました！

私はちょうど10年前、
デジハリでWebデザインを学んだことがきっかけで現在に至るのですが、
そんなご縁もあって、デジハリ大阪校にてセミナー講師をさせていただく機会をいただきました。

私のこれまでと現在について

これまでに社内で新人研修を行ったり、チームメイトにノウハウを共有したり、
という経験はあったのですが、
こういった形で自分が前に立ってお金を頂戴してお話するというのは初めてでした。

題材は、何でも良いということだったので、
自分の得意なCSS設計の話をしようと思い、Sassを使って色んなボタンの実装をしながら、
現場で使える実装テクニックを散りばめてご紹介することにしました。

Facebookイベントで告知され、おもにデジハリ在校生・卒業生に参加を募る2時間のセミナーです。
アサカツヨルカツ ボタン実装からはじめるSass入門

こちらがセミナーで作ったサンプルの完成形です。
codepen.io

• Bootstrap等のCSSフレームワークは使わずフルスクラッチです
• アイコンはfontAwesomeを使用
• 最下段のanimateボタンは、Animate.cssを使用
• javascriptはクリックの無効化とanimation用クラスの付与/削除のみに使用
  • とりあえずjQueryでインスタントに
• Webフォント「Noto Sans Japanese」を適用しています
• レスポンシブ対応済み

当日はCodepenで環境を用意して、参加者のみなさんにも触っていただきながら進めました。

あと、こちらは当日見せられなかったのですが、
上記サンプルをWebpack + gulp の開発環境で作ってSass分割したソースも載せておきます。

github.com

反省点

• 思ったより集客に苦戦した
  • CSSに触れている方にはSassのことは興味深い内容だと思いこんでいた
    • Sassと聞いただけで難しそうと敬遠してしまう生徒さんもいたようです、、
  • 主に参加してくださる方々の習熟度やニーズのリサーチ欠如
• Sassを知らないという方の考慮をしていなかった
  • ググってくださいと割愛しようと思っていた、Sassの基本機能の説明で時間超過
• 内容の詰め込みすぎ
  • 時間配分を完全に見誤っていて用意した内容をすべてお話できなかった
  • 説明しながらライブコーディングする時間の見積もりが甘かった
• 講義内容を現場に寄せすぎた
  • ガチの現場仕様にしてしまったため、初めてSass知った人にはちんぷんかんぷん…

良かったこと

• ぐだぐだな部分も多々あったと思うのですが、
  参加してくださったみなさんが笑顔で帰ってくださった！ (本当に救われました！)
• 会社員時代は長らくアウトプットをしてこなかったので、良いリハビリの機会になった
• サンプルや資料作成に苦悩した時間は辛かったが、自分のダメなところとか多くの発見があった

結果的には、
色んな反省点も含めて、とても貴重な経験をさせてもらえて良かったです。
実際にやってみないと気づけない課題や、得られない感情がありました。

次回また機会をいただければ、今回感じたことや反省点を生かして、
より多くの方に参加していただける場にしていけたらと思います！

デジハリスタッフの皆様、参加してくださった方々、どうもありがとうございました！！
楽しかったです。