ジェネラティヴアートワークショップ

arttea ワークショップ実施レポート

2026年4月26日(日)/渋谷キャスト 13階 ベースコモン

ワークショップ参加者全員での集合写真

1. 本日の講師

本日の講師は 大西拓磨先生
同じ渋谷キャスト2階に入居する 孫正義育英財団 に採択されたアーティストです。

大西先生のワークショップでは、プログラミング言語「p5.js」を用いて、
数行のコードから絵が立ち上がっていく面白さを体験できます。
計算式と乱数がつくり出す予想外の模様や色彩は、絵を描くのが苦手な方でも思わず夢中になってしまう、
ジェネラティヴアートならではの魅力です。

大西拓磨先生の写真

大西 拓磨

  • 1999年 神奈川県横浜市生まれ
  • 2018年 東京藝術大学美術学部建築科中退
  • 2020年 NHK Eテレ『素顔のギフテッド』出演/孫正義育英財団に採択
  • 2021年 TBS『林先生の初耳学』出演
  • 2024年 プロダクト『おさかなキーボード』発売

2. 当日の流れ

ジェネラティヴアートワークショップ 4月26日 イベントポスター

イベントポスター

日曜日の渋谷キャスト 13階 ベースコモンには、コードに触れるのは初めてという方、久しぶりという方、p5.jsという名前に惹かれていらっしゃった方、そして大西先生のファンの方──それぞれの関心を胸に、さまざまな参加者が集いました。

① お茶でリラックス、感性をひらく

artteaのワークショップは、お茶とともにはじまります。
会場に到着した参加者は、まず一杯のティーラテでひと息。

はじめましての方同士でも、お茶を片手にすると自然と会話が生まれます。お子さんもリラックスして、会場には始まる前から和やかな空気が流れていました。

お茶を片手にリラックスする参加者の様子

お茶でリラックスしながら、ゆるやかにスタート

お抹茶を楽しむ参加者の様子

初めてのPCのアート制作ににこやかな表情です

② 大西拓磨先生によるジェネラティヴアート講義

お茶でひと息ついたところで、大西拓磨先生による講義がスタート。
ジェネラティヴアートはコードに余白を委ねるアート」──先生の言葉と一緒に、p5.jsという道具を使って「コンピューターと一緒に絵を描く」という考え方が紹介されました。

画面に表示されたたった4行のコードを前に、最初の一歩を踏み出します。

講義のなかで先生からは、言語の語源やその背景にあるエピソードについても詳しく教えていただきました。ここで、その内容を少しだけ振り返ってみます。

先生がp5.jsを解説している様子

p5.jsで何ができるのかを丁寧に解説

コラム:p5.js ってなに?

p5.js(ピー・ファイブ・ジェイエス)は、Processing(プロセッシング)というクリエイティブ・コーディング環境から生まれた言語です。

Processing は、アートやデザインを学ぶ人でもプログラミングで視覚表現を作りやすいように開発された言語・環境。
その考え方を JavaScript で書き、Web ブラウザ上でも動かせるようにしたものが p5.js です。

Processing の “P” + HTML5 の “5” + JavaScript の “js”

──名前の由来は、ざっくり言うとこんな流れ。
「絵を描くようにコードを書く」という Processing の精神を、ブラウザだけで気軽に体験できるようにした──それが p5.js の魅力です。

③ コードで「描く」「動く」を体験する

講義は、p5.jsのまっさらな初期コードからスタート。
背景に色をつける円を描いて色をつけるその円に動きをつける──ステップごとに、画面の中の絵が「描く」から「動く」「変化する」へと変わっていきます。

「コードってなに?」「プログラミングって難しそう…」
最初は少し身構えていた参加者の方も、画面の中の数字をひとつ書きかえると円の色や大きさがその場で変わる──そのたった一度の変化を目にした瞬間に、大人の参加者もお子さんも、画面に身を乗り出すようにのめり込んでいきました。

キーワードは 「background」「random」「draw()」
random()を使えば走るたびに違う色が出て、background()の透明度を調整すれば軌跡が残り、draw()の中で変数を少しずつ動かせばアニメーションが生まれる──たった数行のコードが、画面の中に小さな世界を生み出していきました。

背景に色をつける手順を学ぶ様子

まずは背景に色をつけてみる

円に色をつける手順を学ぶ様子

円を描いて、色をつけてみる

アートに動きをつける様子

そして、その絵に「動き」をつけてみる

講義に集中する参加者の様子

画面の変化に、思わず声が上がる場面も

④ 自分だけの作品を制作

ひととおりの基礎に触れたら、いよいよ自分の作品づくりへ。
変数や色、動かし方を自分の感覚で組み合わせて、世界にひとつだけのジェネラティヴアートを生み出していきます。

参加者は、コードの意味や構造をひとつずつ確かめながら、丁寧に手を動かしていきます。「ここを変えるとどうなるんだろう」「この数字は何を決めているんだろう」──理屈と感覚を行き来しながら、画面の変化をじっくりと味わうような時間が流れていました。

その隣で、唯一お子さんとして参加していた小学生は、数字を変えることそのものを遊びのように楽しんでいました。失敗を恐れずに何度もコードを書きかえては、画面の変化を笑顔で見つめる──そのまっすぐな好奇心が会場にやわらかな風を運び、大人の参加者の表情もふっとほどけていく。世代の違う参加者が同じ画面に夢中になる光景は、見ているこちらまで嬉しくなるものでした。

分からないところは大西先生がテーブルをまわって一人ひとりにアドバイス。
子どもたちは直感で数字を変え、大人は理屈と感覚を行き来しながら──それぞれのやり方で、画面の中に自分だけの世界を立ち上げていきました。

絵が得意か苦手か、コードに慣れているかどうかに関係なく、数式を遊び道具として手にすれば、自分だけのオリジナル作品を生み出せる。その入り口に、世代を超えてみなさんがのびのびと立っていたように思います。

参加者がそれぞれ作品制作に取り組んでいる様子

それぞれの画面に、それぞれの
「動くアート」が生まれていきます

画面に集中して制作に取り組む参加者の様子

経験者の方は、ゲーム感覚でより発展的な表現にも挑戦

楽しそうに作品を制作する参加者の様子

楽しむ気持ちが、そのまま画面の中の作品に

3. 作品ギャラリー

制作の時間が終わると、画面の中にはひとりひとり違う「動くアート」が生まれていました。
同じ基本コードからスタートしても、変数や色、動きの組み合わせ方しだいで全く違う表情の作品ができあがるのが、ジェネラティヴアートの面白さです。

ここでは、4月26日のワークショップで生まれた作品を一部ご紹介します。
ぜひ再生ボタンを押して、画面の中で動き続ける世界を覗いてみてください。

▶︎ クリックして再生(音声なし/繰り返し再生)

作品 01

作品 02

作品 03

作品 04

作品 05

作品 06

作品 07

作品 08

作品 09

動画作品とあわせて、静止画として書き出された作品もご紹介します。

ハート型のジェネラティヴアート作品

温かみのあるハートのジェネラティヴアート作品

黄色を基調とした作品制作の様子

黄色を基調とした、明るい色合いの作品も

4. デジタルアートの広がり

世代を超えてアート制作に取り組む参加者たち

世代を超えてアート制作に取り組んだ

講義の終盤には、大西先生から デジタルアートの発展的な世界 についてもお話がありました。世界中のクリエイターによる「コード × アート」の事例を交えながら、ジェネラティヴアートの奥行きに触れる時間です。
「コードはここまで自由なんだ」「もっと試してみたい」──世代を超えて発想を刺激される瞬間となりました。

あわせて、発想の参考になるアイデア集や、世界中のクリエイターの作品がまとまっているサイト もいくつかご紹介いただきました。

大西先生からは、p5.jsで描く2Dの絵にとどまらない「音楽と連動するジェネラティヴアート」や「3Dの世界に広がる表現」もご紹介いただきました。
音に合わせて図形が踊るように形を変えていく作品や、立体的に広がる幾何学模様など、コードを軸にすればアートの表現は 絵から音、平面から立体 へと自由に広がっていきます。

「自分のアイデア次第で、こんな作品も作れるんだ」──参加者の皆さんからは、ジェネラティヴアートの奥行きの深さに目を輝かせる声が次々と上がっていました。

音楽と連動するジェネラティヴアートの例

音と連動して動くアート

3Dに広がるジェネラティヴアートの例

3Dに広がる立体的な表現

音楽×3Dのジェネラティヴアート作品例

音楽 × 3Dの幾何学模様

大西先生から参加者へのメッセージ

大西先生から、これからのアートとAIについてのお話

5. まとめ

artteaでは、お茶を片手にアートとテクノロジーに気軽に触れられるワークショップも発信していきます。
世代や経験を問わず、誰もが「自分にも表現できる」と感じられる場をこれからも育てていきたいと思います。

現在開催中のワークショップはこちらからご覧いただけます。お気軽に覗いてみてくださいね。

ワークショップ参加者全員での集合写真