「素人でもわかるウェブ活用(歯科医院向け)」セミナーに登壇した話

ウェブのセミナーに登壇

まとめ

まだまだウェブをうまく使えてないところは沢山あるんだね。
ネット界隈にいるとどうしても、それが普通に思いそうなことも全然違うことが多い。

特に中小企業とかの規模だと。
そういう人たちの何か役に立てればいいな、という活動は続けていく価値があるのではと感じました。

初句

緊張で汗まみれになったMakotoです。
9月14日木曜日、歯科医院向けの「素人でもわかるウェブ活用」のセミナーに登壇してきました。

すっかり記事にし忘れていたけどアップします。

人見知りで、苔のように生きていきたい俺が、セミナーに登壇とかね。

セミナーに登壇した経緯

俺、たまたまですがクライアントさんに歯科医院が結構あるんですね。
別に歯科医院専門て分けではなくいろいろなところとお取引させていただきているのですが、割合的に多め。

そんな中で、10年来のお付き合いで採用や経営のコンサルタントをされている株式会社グランジュテの丹野祐子さんに、一緒にやってみないかとありがたいお誘いを受けたのがきっかけです。

それ以外にも、現在の自分にいろいろと思うとこ(これは別に書こうと思う)がありまして、挑戦してきました。

セミナーのようなものに登壇するのは10年位前にSEO関連のカンファレンスに登壇して以来。
その時も自分で望んだというより、成り行きでした。

最近は自分で勉強会を主催してみたりもして、少し人前でしゃべることもあるけど・・・。

学生時代には生徒会やってみたり、○○実行委員みたいのしたりとか人前で話す機会もあったけど。
もともとコミュニケーション能力が低い、プラス人見知りなので人前に出なくなってました。

どんなことはなしたの?

ホームページやブログ、SNSなんかをうまく活用して集患しましょうって話。
歯科医院向けといってるけど、多くの企業で共通していえるような内容だったのではないかと思います。

最新のウェブの動向、SEOとかコンテンツの作り方、UI/UXの大事さとか。
そのあたりをざっとまとめて持ち時間、1時間10分で。

アクセス解析の重要性を訴えてる

準備の方がつらいよね

今回登壇するにあたって、結構な時間を原稿やスライド作成、練習に使いました。
原稿作りは復習や新しい発見があります。
ウェブの最新事情、SEOのこと、マーケティングのこと、コンテンツやUI/UXのこと、調べなおすこともしばしば。
でも、原稿はまぁ、いいのです。

スライド。
正直ガッツリパワポで何か作ったことがないので、せっかくなので作ってみよう、と思ったのが運の尽き。
つらいつらい。

練習は、以前記事にしたインキュベーション施設のビジネスコーチに卒業直前に一回、施設のセミナールームで見てもらいました。
そのときは相手はコーチ1人だったのですが、会場が広い。
それだけで緊張。

その後は友人や妻に練習に付き合ってもらうこと3回。
見てもらうたびにダメ出しをされ・・・。
泣く泣くスライドや原稿を作り直す。
ほぼ頭から作り直したこともあったなぁ。

もう、時にはケンカもしながら作り直す。

そんな感じでつらかったよ。

おかげでパワポはだいぶ使えるようになりましたけど。
内容も結構いいものができたと自負しちゃいます。

普通に自分で作ったらもっとシンプルにしちゃうんだけど・・・。

友人と妻に

「お前はジョブスとかカリスマ性があるわけでもない。話慣れてるわけでもない。そもそも聴く側も何もわからない状態。だったらスライドをもっと見て楽しくして興味を引かないと。自分ならもっと楽しいのがいい」

そんな感じのこと言われました。
この友人はネットとかITとか疎い。
妻も別にウェブとかの人でもない。
今回聞きにくる層に俺より近い。
なら信じてみよう。一理あるし。

結果としてはこれが大成功。

話を聞きに来てくれた人たちは

意外と困ってる人が多いなというのが率直な感想。
セミナーのお誘いを受けた時も「ホームページとかブログをどうしたらいいかわからない人が多いのでお願い」という感じで聞いていたのですが、その通りでした。

専門のウェブ担当者がいるわけではないところも多いですし、致し方ないのかな。

セミナー後は質疑応答や個人的に相談を受けました。

俺は個人でやっているのでフットワーク軽めだけど、会社に頼むとそうもいかないこともあるし。
ウェブ関連の会社で働いていたこともあるのでわかりますが、けっして取引先をほっておくつもりはなくても、対応が後手になることは事情によってはあるし。

クライアント側も、自分の本業が忙しくてなかなかウェブのことまではということも多いですからね。

困ってる人多い、本当に。

セミナーを終えて

冒頭にも書いた通り、あ、なんか暑くないのに汗がすごいよ。そんな感じでした。

セミナーの最初から汗が

登壇中は緊張しているので、あまりじっと客席側を見続けることはできませんでした。
それでも、スマホでスライドの写真を撮っている方や、一生懸命メモされている方をみてちょっとうれしくなりました。

主催の丹野祐子さんはさすがというか、話し慣れてるし、すごいなと。
女性1人で経営や採用のコンサルやって、ばんばん人集めてるだけはある。

ビジネスコーチなどは講演するときは、観客の様子で話すこと変えたりしていく、と言っていましたがさすがにそこまでは・・・。

最近よく言ってるんですが、アウトプットは本当に大事だなと感じました。
自分が何か外に出すことによって、新しい空気の流れみたいなものが自分の周りにできる。
そして、それがまた新しいことを運んでくる、そんな感じを受けています。

この一回でも俺の話がうまくなるとか、コミュニケーション能力が上がるとかがあるわけでもなく。
今記事を書いてる段階であれから2か月近くたちますが、相変わらずうまくやれなくて反省してばかり。

それでも今後も機会があればどんどん話そうと思います。
既に何件かお話しいただいているので、またどこかで俺が話しているのを見かけたらよろしくお願いします、といって本日は〆させていただきます。

第6回ゆるゆるIT勉強会

第6回ゆるゆるIT勉強会撮影

まとめ

勉強会を主催してくのはなかなかに大変ですが、試行錯誤して続けていこうと思いますよ。
継続は力なり。
うまく学習の場であり交流の場みたいなものが作れたらいいなと思います。

日時と場所

開催日:2017年11月9日木曜日
場所:JR中央線 立川駅 Cs TACHIKAWA様

来てくれた人

参加人数3名(俺は抜かす)
最近少ない。

3名だったんですが、連絡の行き違いで1名部屋が分からず参加できず。
本当に申し訳なかったです。
Connpassの募集ページにあるコメント機能、通知来ないからわかりにくいんですよ、言い訳するなら…。
とりあえず、要望は出しといた。

さて、他の参加者2名様。
組み込み系の設計開発をされてる方、デザイナーさんと相変わらず少人数でもバラエティに富んでます。
プラスポイントでもあるし、マイナスポイントにもなりうるかなと。

目標としている誰でも気軽に来れる、って考えるとプラス。
でもターゲットが散らばってが故に分かりにくくて、参加する気になれないという面もあると思うので、それはマイナスに働くかなと。
この辺りはもっと回数重ねて見極めてくしかないかな。

個人的にはやはり敷居の低さは大事にしたいけど、いろんな人の話も聞いてみたいから多くの人に会ってみたいと。

今回は皆さん初めて。
勉強会も初めての方が3分の2。

こんなことをした

毎月開催しようと思っているのですがやはりなかなか。
1か月半ぶりに6回目の勉強会を開催しました。

いつも通り自習です。
※来月は少し頑張ってみようと思います。

参加してくれた人はそれぞれに学習されていました、

普段組み込みをやっているという方は、業務とは違う自分の勉強ってことで、Pythonで機械学習。
デザイナーの方は頑張ってHTMLとCSSでコーディングをされていたそうです。

それぞれ学習しながらたまに雑談というスタイルで2時間。

やはり自習中心の勉強会なので、あまり記事にすることがないという。。。

俺は朝から仕事で出かけていて、クライアントとミーティング→八王子8Beat様でしばらく自分の作業→圓で昼飯。特製煮干しラーメン→仕事の用のカバン探し→勉強会の会場でもある立川Cs様で自分の作業→そのまま勉強会開催、という流れ。

勉強会でしていたのは直接仕事ではないことで、ちょっとWordPressで調べものがあったのでそれをしていました。

WordPressの案件は年々増えてるような気がするし、既にサイトをもってるお客さんで以前の業者さんに詳しい説明なくWordPressで作られていたなんて方も。

それはそれでいいのだけど・・・。
フロント、エンドユーザーの目線で作られてないとか以前に、え?WordPressの使い方知らないでサイト構築してんのかなっていう引き継ぎ案件もあったりしてびっくりすることもあります。

正直なところ、WordPress、ちゃんと知らないで使うのはよしたほうがいいのではないかなとかね。
ステージングもなくて、検証しないでアップデートとかするのかな?とかね。

話がずれました。

ところで、最近利用しているCsさんは保育所・託児所がついたコワーキングスペースです。
勉強会で使う会議室でホワイトボードにWiFiのパスワードを書こうかとしていたら、小学2年生の女の子が寄ってきました。
「書いてあげよーか?」
と聞かれたので、もちろんお願いしちゃいました。
助かるね!

WiFiのパスワード書いてくれた

さすがにパスワードなので見せれませんが、俺の字と全然かわらない感じで・・・。
ふぅ。

今回の新しい取り組み

初の平日開催で初の夜開催。

また話がずれますが、Csさんそば前回懇親会したカフェがつぶれてた。
残念。
使い勝手良かったのに。

気づきという名の反省点

参加状況からみて、平日の夜にはハンズオン系とかきちんと目的、ターゲット絞ったほうがいいのかなと。

と思いながら、参加者の方に聞いたところ、仕事帰りによって自分のやりたいことやるほうが時間を効率的に使えるし、結婚されてたりすると言い訳?もしやすいという意見も。

そういう意見もあるんだなと。
確かに立場が違えばいろいろですよね。

もう少し模索していこう。

あとは、やはり勉強会の名称も検討しようかなと。

ということで、次回

2017年12月16日土曜日に、少し規模を大きく、渋谷で番外編的に勉強会をします。
詳細はこちら

トークしてくれる人もただ自習する人も歓迎なので、よろしくお願いいたします

CSS4以降を見据えてSass(Scss)やCssnext(PostCSS)を使おう

CSSのイメージ

まとめ

移り変わりの早いウェブ業界。
その中でも今は大きく変化する時期に来ているのかなと、思う。

10数年前、本格的にウェブ制作をしだしたこと、今では当たり前のCSSを使うことができない、使えるようになろうとしなかった人たちが淘汰されていくのを見てきた。

jQueryが流行だしたころもCSSの時ほどではないけど、似たようなことがあった。

今、なんとなくそれと同じような感覚を感じています。

今後どうなるか分からない、であれば新しい技術を身に着けつつ、枯れた技術は正しくしっかりと使いこなすことが大事。

Sass(Scss)にしろCssnext(PostCSS)にしろ、新しいからどうのだけじゃなく、便利で効率よく仕事できるので、使った方が良いですよ。

最初に注意

CSS4なんてもものはないかもしれませんが、分かりやすくするために、今後出てくる新しいCSSをCSS4としています。

ScssやCssnextの話をします

たまにはエンジニアっぽい話もしたいなと思いました。
思ったけども、基本的に何でも屋で仕事してますが、デザイナー兼フロントエンドがもともとの仕事。

なのでCSS関連を今回は。

ここ数年は指定されない限りはCSSはSass(Scss)で書いています。
CSSプリプロセッサは他にもありますが、Scss使ってます。

しかしながら、最近はCssnext(PostCSS)もありかなと思って使っています。

どちらにしても、CSSプリプロセッサを使うにはそれなりの理由があります。

CSSプリプロセッサ、なんやかんやをそれぞれの構文で書いて、CSSに変換して使う感じと思ってください。

そもそもScssを使いだした理由は単純に便利だから。
使いだした当時はLessとどっちにするか悩みましたが、最終的には勘でSass一択に。

SassにしろLessにしろ、cssnextにしろ、最初がとっつきにくそうに感じるかもですが、実際はコンパイル方法さえわかってしまえば、いままでCSS書いていた人なら問題はないくらい簡単なはずです。

そもそも、素のCSS書いても動くわけで。

何が便利

何が便利なのか。

便利機能は山ほどあるのですが、その中でも。

  • インポート
  • ネスト
  • 変数
  • オートプレフィクス
  • カスタムセレクタやforなどのまとめてなんかするやつ

このあたりでしょうか。

MixinやExtendも便利ですが、いらないこともあります。

インポート

これは素のCSSのインポートとはちょっと違います。

プリプロセッサはコンパイル・トランスパイルして実際に使用するCSSに変換するため、好きなところでインポートできます。

そうして作業時には複数ファイルだったものを1ファイルにまとめて使用することができます。

これは複数人での作業時にも便利です。
作業中は小分けに整頓されたソースコードでわかりやすく編集しつつ、実際の公開している環境では1つのファイルになっているためリクエストを減らしてサイトの表示高速化をサポートすることができます。

ネスト

単純にソースコードが見やすくなります。
多用しすぎるのはどうかなとう場面も多々ありますが、便利です。

/* -------- 
 * CSS
 * ----- */
.foo {
    margin: 10px;
}
.foo a {
    background-color: #fff;
}
.foo a:hover {
    background-color: #000;
}


/* -------- 
 * Scss
 * ----- */
.foo {
    margin: 10px;
    a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

/* -------- 
 * Cssnext
 * ----- */
.foo {
    margin: 10px;
    & a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

ついでに言うと、ネストさせてると.fooを変更したくなった時、そこだけ変えれば他もまとめて済むので手間が省けます。

変数

プログラミングを少しでもしたことがあれば、CSSにも変数欲しいと思いますよね。
ScssやCssnextは変数使えます。

プログラミングをしたことがなくても、そう難しいことではないです。

余談ですが、変数、って呼び方が敷居を上げてるような気がするんですよね。
型指定とかは抜きにして、数以外も格納できるわけで。
昔後輩になんやら教えてたときに、変数なのに文字も?みたいなこと言われたことあります。みんなありますよね?

話を戻します。

CSSにコンパイル後は変数ではなく固定の値としてコンパイルされるものです。
「なんだよ」って思うかもしれませんが、これはこれで便利です。

定数的な感じでもあります。
そんなわけで、「あれってなんだっけ?」を防ぐのにも使えます。
カラーコードを変数に格納して、必要なところで呼び出すなどは、多用しています。

最近はスタイルガイドなどで制作前の段階でしっかりとしたスタイル設計をすることが多いかと思います。

俺の場合も小さなサイトでもクライアントの案件では、スタイルガイドをまず作ります。

スタイルガイドで決められたカラーコードなどを変数に代入。
そうすると、いちいち「あそこの色のコードなんだっけ?」、「こんな感じでいいや」などという状態が防げます。

複数人で作業したり、のちのち作業したりするときも、間違いがなく、統一されたイメージのサイトが作成でき、クオリティが維持しやすくなります。

もちろんコンパイル前の演算にも使えますし、使い方次第ですね。

/* -------- 
 * CSS
 * ----- */
.foo {
    color: #000;
}
.bar {
    background-color: #000;
    color: #fff;
}

/* -------- 
 * Scss
 * ----- */
//変数を作成
$color-black: #000;
$color-white: #fff;

//変数を呼び出してソースを書く
.foo {
    color: $color-black;
}
.bar {
    background-color: $color-black;
    color: $color-white;
}

/* -------- 
 * Cssnext
 * ----- */
/*変数を作成*/
:root {
    --color-black: #000;
    --color-white: #fff;
}

/*変数を呼び出してソースを書く*/
.foo {
    color: var(--color-black);
}
.bar {
    background-color: var(--color-black);
    color: var(--color-white);
}

Cssnextの記述はなんか慣れないし面倒です、個人的に。

オートプレフィクス

ベンダープレフィクスが勝手につくやつね。
これは単純に、まぁ、楽。
こんなん手作業でやるもんじゃないよ、実際。

カスタムセレクタ

Cssnextの機能です。

/* -------- 
 * Cssnext
 * ----- */
/*カスタムセレクタを定義*/
@custom-selector :--foobar .foo, .bar, .baz;

/*カスタムセレクタを使用*/
:--foobar {
    color: #fff;
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.foo,
.bar,
.baz {
    color: #fff;
}

Scssにカスタムセレクタはないですが、eachと配列を使えば同じような事ができます。
プログラムチックですね。

/* -------- 
 * Scss
 * ----- */
//配列を作成
$foobar: '.foo', '.bar', '.baz';

//配列でループ
@each $val in $foobar {
    #{$val} {
        color: #fff;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
 .foo {
    color: #fff;
}
 .bar {
    color: #fff;
}
 .baz {
    color: #fff;
}

もうちょっと工夫すればCssnextの結果と同じようにクラスをまとめて出力もできると思うけど、面倒なのでこれで。

同じようにくるくると回すにはforもあります。
例えばマージン用のクラスを10px刻みで100まで作るとします

/* -------- 
 * CSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}
/*これを100まで繰り返す*/

こんな風に100まで1回コピペと修正をすればできます。
できますが、面倒だしソースの見通しも悪いですね。

で、Scssなら

/* -------- 
 * Scss
 * ----- */
//ループ
@for $i from 1 through 10 {
    $val : ($i*10);
    .mg#{$val} {
        margin: #{$val}px;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}

/* ~ 中略 ~ */

.mg100 {
    margin: 100px;
}

ちゃちゃっとできます。

ね、ScssもCssnextも便利でしょ?

という訳で便利なことが満載です。
これ以外にも便利で効率的な機能がいろいろあります。

CSSを圧縮したりもできちゃうので楽です。

それぞれで、できることできないこともありますが普通にCSS書くより効率的で、ソースコードの管理もしやすくなります。

ScssからCssnext

ScssからCssnext、どちらもCSSを拡張して便利に効率的に制作することができます。

ですが、立ち位置はちょっと違うかなと思います。

ScssはそもそもCSSの不便なところを拡張して便利にするためのもの
CssnextはCSSに新しく実装されるであろう便利機能を、先行して使えるようにするもの

乱暴ですが、こんな感じに考えるといいのかなと。
※Cssnextの構文は策定中の新しいCSSとかけ離れていることももちろんあるので、注意が必要です

そんなわけで、jQuery(Scss)からBabelでES6(Cssnext)みたいな感じに考えてみたらわかりやすいかもしれません。

今後標準化されていくであろう、新しいCSS。
最初にも書きましたが、どうなるかわからないのでCSS4としておきます。

CSS4以降ではCSSプリプロセッサでしかつかないことが、デフォルトで使えるようになる部分もあります。

jQueryから着想を得てJavaScriptの新しいAPIができたことがあるように、SCSSなどをヒントにCSS4以降に新しく追加されるものもあるでしょう。

CssnextはCSS4以降の機能を先行して実装しているところが多いです。
なので、最近はCssnextを使ってみています。

とはいえ、少し上で書いた通り新しいCSSと全く同じとはならないのも事実。

であれば、実際の制作ではもうしばらくはScssでもいいかなと感じているのも事実です。

この辺は好みでいいんでないか?と思いますが、なんにしても勉強しておくに越したことはありません。

Cssnextを使ってみると、今後CSSはこういう風になっていくのかなと将来が感じられたり、Scssとの違いにより一層興味を引かれたりします。

仕事で使うなら

とうことで、実際に業務に使うことを考えたらScssをまずはやってみることをお勧めします。
使われている率も多いですし、資料もググれば沢山出てきます。
プログラム的部分では、分かる人はすぐに楽できますし、分からない人は今後JavaScriptなどをやるきっかけにもなるかもしれません。

個人的結論は

  • 仕事ならScss
  • 趣味と学習ならCssnext

こうなります

肝心のCSSに変換のコンパイル・トランスパイルの仕方は・・・

nodeでGulpやらwebpackやらなんやらで、とそこまで書いてると長いので・・・調べればいくらでも出てきますしね。

たぶん、この辺でつまずいたり敬遠したりしてる人が多いのではないかなと、とも感じます。
これもそこまで難しくはないんだけどね。

機会があれば初めての人でも簡単に使える、ってところまで書けたらなと言いつつ、今回はこの辺で失礼いたします。

ついでに勉強会の宣伝

勉強会を主催しています。

2017年12月16日土曜日にいつもよりちょっとだけ規模の大きい勉強会をやります。

LT(ライトニングトーク)ともくもく自習の2本柱で行います。
ScssやCssnextも学べるかもです、保証はないですけど・・・。

勉強会はConnpassにて募集しています。
ゆるゆるIT勉強会のConnpass募集ページ

今までの勉強会のことを記事にもしています。
今までのゆるゆるIT勉強会の記事