p5.js』が発売されてもう2週間ほど。書籍の発売を記念したワークショップを開催しました。今回はワークショップの模様とその設計、振り返りについてお話します。会場となったのは、二子玉川の蔦屋家電。Design』の発売時にも、同じ会場でワークショップを開催したのでした。あれからもう2年...?時間が経つのがはやすぎる。ありがたいことに好評をいただきまして、ほぼ満席という状態で開催することができました。当日使用した資料がこちら。本書のテーマをいくつかピックアップして、スケッチの作りかたや表現の広げかたについて解説。実際に手を動かしながら体験してもらおう...といった内容です。ワークショップの設計ここからは、どのようなプロセスで本ワークショップを設計したかについてお話します。対象者を定めるまずは、どのような人をターゲットにするのかを明確にする必要があります。今回のワークショップは書籍の購入が必須となっていたため、この時点で「少なくともジェネラティブデザインに興味のある人」というところまでは自動的に絞られています。その内訳は...凄腕のプログラマーかもしれませんし、プログラミング未経験者かもしれません。本書自体は「プログラミング未経験者のデザイナーにこそ触ってほしい」というスタンスなので、今回は「ジェネラティブデザインに興味はあるが、プログラミング経験のほぼない人」までを対象者像としました。目的を定める対象者像を絞ったら、次は目的を定めます。今回のワークショップは「発売記念」かつ「書籍の購入が前提」なので、大きく分けると次の2つになりそうです。書籍が発売されたことを周知して、興味のある人に情報を届ける。書籍を購入してくれたかたに対して、その書籍の活用方法を伝える。前者の周知については、こうやってブログ記事を書くことで広大なインターネットの海に流しつつ、拾ってもらう可能性を広げることで貢献できそうです。後者の「書籍の活用方法を伝える」ことが、本ワークショップ内で達成すべき大目的になります。目的をブレークダウンして目標に落とし込む先の大目的をさらにブレークダウンしたものが、資料内に書かれているワークショップの目標です。「自分にもできそう!」と感じてもらう。本書を活用した表現の広げかたを体験してもらう。達成手段を考える対象者像と達成目標が定まったら、あとはその人たちが時間内に目標を達成できるようなコンテンツを用意できればよいはず。ここまでの流れを整理すると、ジェネラティブデザインに興味はあるが、プログラミング経験のない人に対して、2時間という限られた時間の中で、ジェネラティブデザインのおもしろさと、表現の広げかたを体験してもらう。難しいぞ...?スケッチのテンプレートを用意する数時間の中で、プログラミングの基礎知識から習得するのはほぼ不可能です。各テーマにはテンプレートを用意して、そこからはじめられるようにしました。コードとコメントの入ったテンプレート注目すべき箇所には「★」マークを入れました。余計なコーディングを省くことでプログラミングの知識はある程度端折れますし、テーマの本質に集中できます。コードにはコメントを添えられるので、各人でペースがばらばらになりがちな理解の助けになります。作例を豊富に用意して、とにかく触ってもらうジェネラティブデザインでよく陥りがちなのが、「何を作ればよいかさっぱりわからない」状態。はじめは勘所もわからず経験もないので、「テーマは○○です。さぁ作りましょうか!」といきなり言われても、無限の宇宙に放り出されたまま虚無になってしまいます。今回は、異なる視点を持った作例を複数用意することでこの問題に対処しました。「とにかくパラーメーターを変えるだけでもいいからやってみてください」ということを繰り返し伝え、実演していきました。手を動かして結果が得られたという成功体験さえあれば、そこから少しずつ道は拓けてくるはず。時間配分を考えるコンテンツそのものはもちろん大切ですが、その時間配分も同様です。リズムを意識しました。時間配分でもうひとつ考慮しなければならないのが、予想外のトラブル。焦ってせっかくの準備が台無しになってしまっては悲しいですよね。ならないためにも、事前にどのセクションにどれだけ時間がかかるのかはしっかり計算・調整を重ねました。想定外の進行に備えて、スキップできるセクションや余った時間に差し込める追加セクションを用意しておくと安心です。今後のために:反省点そんなこんなで、結果としては大きな問題もなく、無事にワークショップを終えることができました。参加くださった皆さま、ありがとうございました!...と、ここまで偉そうにつらつらと書いてきましたが、振り返ってみればもちろん反省点もたくさんありました。未来の自分や、似た境遇の人の参考になればと思いながら記しておきます。作例に感動が足りなかったテーマの理解の邪魔にならないようシンプルな作例を心がけましたが、それが逆に仇になったと感じています。スケッチが動いた感動をより大きなものにするためにも、もう少し見栄えのよい・綺麗な作例を用意すればよかったかなと思っています。テーマ1で各自に作ってもらった色パレットを別のスケッチに移植するだけで、すごく美しい絵が自分の色に染まった...!とか。オンラインエディターの罠に落ちた今回、環境構築の手間を省くためにオンラインエディターを利用してもらいました。それ自体はとてもよかったのですが、代わりに「ブラウザー互換性」の罠に落ちてしまいました。今回利用したオンラインエディターは一部の環境でキー入力を受けつけない不具合が発生するようで、一部の受講者がつまずくトラブルが発生してしまいました。Chromeを入れてもらって事なきを得ましたが、あらかじめ動作環境は統一してもらうべきでした。それと、あまり考えたくはありませんが...「当日そのオンラインサービスが落ちている」という最悪の事態も想定しておかねばなりません。テキストエディターで何とか進められるように準備しておきましたが、必要にならなくてよかった...。オンラインサービスは手軽に利用できますが、採用したときの可用性について頭に入れておくべきでしょう。説明の長すぎる場面があった序盤、色の設定や基本図形の描画において、手を動かしてコードを書いてもらうまでを説明しながら「ちょっと長すぎたな...」と感じていました。全体的に時間の余裕はあったので、序盤は1ステップずつ確実に進めて、書いたコードの意味と結果を一緒に確かめていくほうが親切だったかな、と反省しています。p5.js』の発売記念ワークショップの開催とその設計、振り返りについてのお話でした。iOSなどのフロントエンドを主軸に、UIデザインから開発全般まで手がける。趣味が高じて、ドット絵やジェネラティブアートが仕事になりつつある。