スーパー猫の日なのでUI/UXのLT登壇したり、発信力を計ったりしてみた
今年も2月22日がやって来ました。本ブログ「cats cats cats」のお祭りの日です。しかも今年は2022/2/22と「2」が6つも現れる「スーパー猫の日」なので、何か特別な企画をと思い、「UI/UXデザイナーLT会 - vol.6」でLT登壇 とFindyの発信力測定を行ってみました。
LT登壇までの道のり
猫の日の2/22近辺でやっているイベント何かないかなと色々と探していたらconnpassで「UI/UXデザイナーLT会 - vol.6」がちょうど2/22にやっているのを見つけて「これだ！」と思い登録しました。
なぜリバーシ？
次に考えるべきは発表するネタですが幸いにも温めていたというか、知らずに夢中になっていたネタがあったのでそれをテーマに発表することにしました。そのネタとは実は「リバーシ」になります。
リバーシ（オセロ）を書き始めたのは今年の元旦からです。実は毎年、新年の書き初めとして何かプログラムを書いているのですが今年はなぜかリバーシにしてしまったのです。
リバーシは地味なネタだと言われそうですし私もそう思いました。さらに私は過去にN88-BASICや(年がばれる！)、VC++(&MFC)やDirectXで実装したことがあり今更感があったのですが、なぜリバーシで書く気になったのかというと理由があります。
その理由を一言でいうと「CSSでゲームが書けるか？」を知りたかったからです。 昨今ブラウザで動作するゲームも増えてきましたがその大半はCanvasやSVGを利用していました。CSSで彼らと渡り合えるUI/UXを実現できるか？^1 その謎を解き明かすためには、作り慣れていて現実のモデルがあり愛好者の多いリバーシはうってつけだったのです。そうと決まれば善は急げで雑煮を食べながらひっそりとGitHubのプライベートリポジトリを立ち上げました。
CSS Maximum Reversiの爆誕
結果として出来上がったものは以下になります。かなり満足のいくUI/UXが実現できることが分かりました。PCもモバイルも対応しているのでぜひ遊んでみてください。
QRコード
リバーシAIをWeb Workerで実装したり、BGMを作ったり、オープニングやエンディングに無駄に凝ったりして思った以上に時間がかかりましたが楽しい時間でもありました。OSSとしても公開していますが技術的にも非常に面白いので別記事にしたいと思います。
Slidevによる資料準備
発表1週間前になったので資料を作り始めるのですが、スライド作成には以前から使ってみたいOSSがありました。それがSlidevです。
Slidevはマークダウンで記述して簡単にスライドが作成できます。テーマも色々あって自作も可能です。何より 「Hackable」を特徴としているだけあってVueの自作コンポーネントを気軽にスライドに埋め込めるという狂いっぷりです🤣。
幸いにも「CSS Maximum Reversi」はVue3で構築してあります。それならばと自己紹介のスライドの右半分に「CSS Maximum Reversi」コンポーネントを埋め込んで遊びながら自己紹介するという狂ったプレゼンにしようと思い至りました🤣。
5分という発表時間の壁
スライドの準備が進みだすと気になるのは発表時間です。LT時間は5分です。個人的には長い発表よりも短い発表の方が遥かに難易度が高いと思っています。なぜならたった5分の中にストーリーを盛り込み、いかに参加者に印象付けられるかを考えなければいけないからです。
ある程度長い発表であれば話したいことをざっと書き出して適当にスライドにするだけで乗り切れることも多いですが、5分の発表時間の場合はそうはいきません。テーマ選定 / ストーリー / スライド構成 / 話し方の全てが高度に洗練されている必要があります。
LTの王道としてはテーマを一つに絞って伝えるというのが推奨で簡単なのですが、今回は話したいことが沢山あったのでこの戦法は取れませんでした。何より最初に思いついた話したいことを単純にスライドにしただけで100枚近くになってしまったのです。
スライドの断捨離
ここからが苦しい時間です。せっかく作ったスライドを取捨選択して行かなければいけません。理想では1スライド1分と言われているので5分で5枚です。 スライドを1/20にする断捨離が必要です！ 当然そこまでの断捨離は難しいのでいくつかの決断をしました。
ちょっとはみ出す勇気
まずは技術詳細をなるべく省いて、エモいタイトルとキーテクノロジーのみ伝えることです。これだけでスライドを1/3にすることができました。あとはスライド構成のマジックに頼るしかありません。
基本的な戦略は一つのスライドになるべく情報を詰め込んで、レイアウトやアニメーションや色付けやアイコン等を駆使して情報を分かりやすく伝える工夫を凝らします。ここでSlidevの「Hackable」な特徴が大いに役立ちました。このSlidevの使い方も面白いのでまた別記事にしたいと思います。
しかし、それでも練習における発表時間は7分30秒を切ることができないまま発表当日を迎えました。まだ短くできるのではないかという葛藤を抱えていましたが、少なくとも内容は満足がいくものができたので勇気を出して進むことにしました。
LT発表当日
久々のLTなので少し緊張しましたが、何とか話し切ることができました。やはり5分では収まりきらずベルがなりましたが、打ち切られることはなく最後まで話せました。
枠としては質疑応答も含めて10分なので、少しそこに食み出した形になります。LTイベントによっては質疑応答が存在せず、容赦なく打ち切られる場合もあるので今回は運が良かったです。
発表資料は以下になります。PDF化したので狂ったデモやアニメーションは全て飛んでいて悲しいですが、CSSにおけるUI/UXの現状をうまく伝えられたのではないかと思っています。
しかし本当の懸念事項は、どんなに時間が足りなくてもスライドから削りきれなかった「鬼滅のセリフ」をどう受け取られたかです。ZOOM越しの発表なので参加者の反応は分からず仕舞いですが、盛大にスベっていた可能性は無いと信じています・・・
hinastoryの発信力
さて、話は変わってhinastoryの発信力(by Findy)です。まずは結果からご覧に入れます。
発信力はLv.9で全体の5%だそうです。なんか微妙な数値が出てきましたが一応算出の仕組みは公開されていました。
とりあえず現時点の実績を受け止めて、少しずつ発信力を高めていければと思います。
少し関心したのはこのインターネッツの最果てにある個人ブログ「cats cats cats」の総はてぶ数も表示してくれたことです。
仕組みはRSS(or Atom)を解析して個別ページのはてブを合算しているのだと思いますが、正直そこまで表示してくれるとは思っていませんでした。そしてこの最果ての記事に59ブクマがついていることも驚きでした。実際に数値で分かるとなかなか感慨深いですね。
まとめ
今回は スーパー猫の日(2022/2/2) に絡めて、普段とは違う企画をと思ってLT登壇と発信力について記事にしてみました。
久々のLT登壇はだいぶ疲れましたが、やはりやって良かったというのが本音です。LTは単に発表に場馴れしたり度胸をつけるだけのものではなく、話すテーマについて深く考えるきっかけになり、本質に迫る近道のように感じました。またスライドを作る技術を学ぶのもなかなか楽しいものでした。
発信力に関しては、ただ作っただけで満足しては駄目できちんと発信していくことが重要だと改めて実感しました。正直、私自身は知的好奇心が満たされれば満足して終わってしまうタイプであり、気を抜くと発信をサボりがちでした。
思えば去年はこの性格のために年間ブログ記事数を一昨年よりも5個も減らす体たらくでした。しかしこうやって少しでも記事を見てくれたり役立っていることが数値で分かると、地道にやっていこうと気持ちを新たに出来ました。
今年もまだコロナ禍でどうなるか分かりませんが、このささやかな情報発信を続けていこうと胸に刻んだ次第にゃん😸。
