1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

メディアアートのディレクション記録

1
Last updated at Posted at 2026-04-29

インスタレーション作品「baited」制作記録

コンセプト、実装、チーム制作をどう接続したか

この記事は、インスタレーション作品 baited の制作過程を、ディレクターの視点から記録したものです。
完成作品のポートフォリオではなく、企画・制作体制・実装・展示までの判断を残すための制作ドキュメントとして書いています。

作品の完成ビジュアルや展示中の体験動画は、ポートフォリオサイトにまとめています。
この記事では、そこでは拾いきれない制作過程や判断の記録を中心に扱います。

image.png


作品概要

baited は、光に集まる虫の走光性をモチーフに、現代の情報環境における「注意」の誘導を扱ったインスタレーション作品です。

来場者が懐中電灯型のデバイスを手に取り、画面に光を向ける。すると、画面上の「虫」という文字で構成された群れが、その光へ引き寄せられるように凝集していきます。光が当たることで何かが見える一方で、注意は特定の対象へ誘導され、消費されていく。本作では、その構造を体験として立ち上げることを目指しました。

項目 内容
作品名 baited
展示 Palette 2026春展示「灯す展」
会場 三鷹市桜井浜江記念市民ギャラリー
会期 2026年4月1日〜5日
制作期間 2025年12月〜2026年4月
形式 インタラクティブ・インスタレーション
自分の担当 ディレクション、企画設計、クリエイティブコーディング、グラフィックデザイン、制作進行
使用技術 p5.js、Node.js、WebSocket、WiinRemote、GitHub、Claude

もともと作品案を提出した段階では、「灯の重力」 という仮タイトルを付けていました。これは最終的な作品タイトルではなく、参加者募集時にコンセプトを伝えるための名称です。

展示全体は 「灯す展」 という名称で開催され、その中の一作品として、最終的に baited というタイトルで制作しました。

サークルについて

今回の展示を主催した総合芸術研究会「Palette」は、自分たちの代で立ち上げたクリエイターサークルです。
HP:https://hoseipalette.studio.site/

映像、音楽、イラスト、デザイン、プログラミングなど、異なる分野で創作する学生が集まり、ジャンルを横断した作品制作を行うことを目的に活動してきました。現在は3代目の幹部が運営を引き継いでおり、今回の春展示ではOBも参加できる形で声をかけてもらいました。

自分たちが幹部だった頃には、学祭で初めて大規模な空間展示を制作しました。そのときの経験が、今回の baited における空間設計やインタラクション、制作管理の考え方にも少なからずつながっています。

当時の展示については、共同で監督を務めたメンバーが制作記録を公開しています。


展示キャプション

光が現れるとき、同時に影が生じる。その差異が輪郭を与え、光は価値として立ち上がる。どこがより強く際立っているかという差異が生まれると、そこへ向かう力としての「注意」が立ち現れる。注意はそれ自体がひとつの資源となり、計算可能なものとして流通し、消費される。アテンションエコノミーとは、この差異によって生まれた注意が、資源として扱われる構造である。

展示室に置かれた光源は、その構造を剥き出しにする。手に取られた電灯が一点を照らすとき、画面上の文字として構成された「虫」の群れは一斉にざわめき、羽音を立てて凝集しようとする。それは、理解ではなく走光性という単なる反応である。虫が光に向かう現象は、人々がコンテンツに注意を向ける現象と重なる。何が語られるかではなく、どれだけ引きつけるかが優先される構造は、私たちの注意のそれに相似する。

その光が強まるとき、もうひとつの像が浮かび上がる。部屋のなかで身振りを繰り返すピエロ。誇張された動作はどこか滑稽でありながら、同時に執拗でもある。その目的は誰かに見られ、ただ注意を引くという一点へ向かっている。過激さはここで内容ではなく機能となり、より強く、より速く注意を捉えるための形態へと変質する。光が灯されたときにのみ現れ、消えれば痕跡なく失われるその像は、私たちが日々触れるコンテンツの振る舞いと重なり合う。

注意は意識的に向けるだけでなく、外部から喚起され、消費されていく。より強い刺激へと更新され続けるなかで、注意は次へと移り、消尽する。虫がまるで餌に釣られるかのように光に引き寄せられたり、注意が誇張された装いや身振りに引き付けられたりするように、意味や目的よりも、いかにして反応を引き出すかが優先される。

baited は、その現象とそれを生み出す構造を静かに露見させる。


コンセプトから体験へ

制作の出発点にあったのは、アテンションエコノミーへの関心でした。

現代のコンテンツ環境では、何が語られているかよりも、どれだけ人の注意を引けるかが優先される場面があります。強い色、過激な言葉、誇張された身振り、過剰な演出。それらは内容そのものというより、注意を引き出すための機能として振る舞います。

この構造を、単なる説明ではなく、身体的に体験できる作品にしたいと考えました。

そこで接続したのが、昆虫が光に引き寄せられる 走光性 です。

虫は光に向かっているように見える。しかし、それは意味を理解して選んでいるというより、環境に対する反応として起きている。人間がコンテンツに注意を奪われる現象もまた、自分で選んでいるようでありながら、実際には外部から設計された刺激に反応しているのではないか。

この相似を、作品全体の核にしました。

設計上の軸

  • :希望や救済ではなく、注意を誘導するトリガー
  • :意味を理解する主体ではなく、刺激に反応する存在
  • ピエロ:注意を引くために誇張されたコンテンツの象徴
  • 鑑賞者:作品を眺めるだけでなく、注意の発生に関与する存在

ここで重視したのは、コンセプトと実装が同じ構造を持つことです。

「注意が誘導される」というテーマを、文章で説明するだけではなく、
システムそのものが「光に反応して群れが動く」という構造で成立していること。

この同型性を、ディレクション上の優先条件にしていました。


作品構造

作品は、大きく分けて2つの画面と1つの入力デバイスで構成されています。

制作時に作成した構成図

作品全体の把握と共有のために、制作途中で 機器構成図システム構成図 も作成しました。

機器構成図

image.png

機器構成図では、展示空間に置かれる物理的な機材のつながりを整理しています。ディスプレイ、PC、入力デバイス、電源まわりなど、現場で設営するときに必要な単位で確認できるようにしました。

システム構成図

システム構成図では、入力デバイスから受けた情報が、どのようにサーバーを経由し、メイン画面・サブ画面・音へ反映されるのかを整理しています。ハードウェアの接続ではなく、ソフトウェア上のデータの流れを共有するための図です。

メイン画面

メイン画面では、「虫」という文字で構成された群れがスウォームシミュレーションによって動きます。来場者が光を当てると、群れが光源に向かって凝集するように設計しました。

文字としては読めるが、群れとして見ると虫のようにも見える。その中間的な状態を狙い、書体には明朝体を採用しました。ゴシック体よりも線に有機的な揺らぎがあり、画面上で密度を持ったときに、記号と生物のあいだのような見え方になると判断しました。

image.png

虫の動きは、単純に光源へ直線的に移動するのではなく、不規則な移動や揺らぎを組み合わせて生成しています。
来場者が光を当てた瞬間に群れが反応しつつも、完全に制御された粒子ではなく、生き物の群れのような不安定さが残るように調整しました。

具体的な実装は、GitHubリポジトリに公開しているコードに残しています。

サブ画面

サブ画面では、光と連動してピエロの映像が現れます。

image.png

当初は、迷惑系コンテンツ、陰謀論、セクシャルなコンテンツなど、具体的な類型を模した映像を複数制作する案がありました。しかし制作を進める中で、スケジュール面と出演者のプライバシー面のリスクが大きいと判断し、方針を変更しました。

最終的には、具体的なコンテンツ類型を直接模倣するのではなく、注目を引くためだけに誇張されたキャラクターとして、ピエロに集約しました。

これは結果的に、作品の抽象度を上げる判断になったと思います。特定の現象を直接的に批評するのではなく、「注意を引くために振る舞う存在」としてピエロを置くことで、より広い構造に接続できるようになりました。


制作体制とコミュニケーション設計

この制作では、自分がOBかつ社会人であり、平日に大学側のメンバーと対面で集まることが難しいという制約がありました。

そのため、最初からコミュニケーション構造をかなり意識して設計しました。

使い分けは次のように整理しました。

ツール 役割
Notion タスク管理、スケジュール、議事録、資料置き場、機材・備品管理
Discord 日々の連絡、確認、進捗共有、軽い相談
Google Drive 企画書、図面、素材、提出データの管理
GitHub コード管理、READMEによるセットアップ手順共有
Claude 実装方針の相談、コード生成、デバッグ補助

特に意識したのは、流れる情報残す情報を分けることです。

Discordはリアルタイムのやりとりには向いていますが、後から見返すには弱い。逆にNotionは、決定事項やタスクの依存関係を残すのに向いています。そこで、相談や確認はDiscord、確定した情報やタスクはNotionに集約する形を取りました。

image.png

image.png

Notionで管理していたもの

Notionでは、制作に必要な情報を以下のように整理していました。

  • メンバーと担当領域
  • タスクとスケジュール
  • 資料置き場
  • 議事録
  • 機材・備品リスト
  • 予算・購入品
  • 会場図面、機器構成図、システム構成図

image.png

機材・備品リストでは、カテゴリ、個数、手配状況、調達方法、備考を管理しました。
機器構成図と対応させながら、「図にあるものが実際に手配されているか」「誰の持ち物か」「購入が必要か」を確認できるようにしています。

また、機材・備品はNotionフォームから追加できるようにしていました。
必要なものが出てきたときに、ページ構造を編集しなくてもフォームから登録できるようにすることで、あとから一覧に反映しやすい形にしています。

一方で、Notionは全員に細かく更新してもらうというより、自分が管理の中心となり、必要に応じて同期メンバーが更新する運用にしました。
他のメンバーには、Notionを細かく操作してもらうのではなく、必要な情報を確認できる場所として見てもらう想定です。

展示制作では、管理ツールに慣れていないメンバーもいます。そのため、ツールを使うこと自体を目的にするのではなく、必要な情報が一箇所に集まり、確認すれば状況がわかる状態を作ることを優先しました。

この管理ページ自体も、作品制作の一部だったと思います。完成物そのものには直接見えませんが、制作を前に進めるための足場として機能していました。


実装設計

実装コードはGitHubで公開しています。

実装は、p5.jsによるメイン画面、Node.js + WebSocketによる同期サーバー、サブ画面の映像制御で構成しました。

領域 内容
メイン画面 p5.jsによるスウォームシミュレーション
同期処理 Node.js + WebSocket
入力 Wiiリモコンを改造した懐中電灯型デバイス
サブ画面 光のON/OFFと連動した映像表示
虫の羽音を含むアンビエントBGMの再生・停止
管理 GitHub、README

2月末時点で、まずはp5.jsでスウォームシミュレーションのプロトタイプを作成しました。この段階では、赤外線トラッキングやカメラ画像解析など複数の構成案があり、技術選定はまだ確定していませんでした。

その後、Claudeと相談しながらフロントエンドの実装を進めていたところ、メイン画面、WebSocketサーバー、サブ画面の同期まで一気に実装の見通しが立ちました。

ここで、実装を分担するよりも、自分が一貫して持った方が全体の設計思想を揃えやすいと判断しました。結果として、メイン画面・バックエンド・サブ画面をまとめて自分が担当し、GitHubで管理する形に切り替えました。

AIとの協力開発

今回、実装面ではAIの支援がかなり大きく効きました。

ただし、AIに丸投げしたというより、こちらがコンセプト、体験設計、画面構成、同期仕様を決め、その実装の選択肢やコード化をAIと一緒に進める形です。

AIによって変わったのは、単にコードを書く速度だけではありません。実装速度が上がったことで、制作体制そのものの判断も変わりました。

分担して進めるべきか。
それとも、一人が全体を持って統一した方がよいか。

通常であれば分担が必要だった範囲を、AIの補助によって自分が一貫して担当できるようになった。これは、今回の制作における大きな変化でした。

セットアップ可能な状態にする

展示制作では、コードが動くだけでは不十分です。

搬入日や展示中に、自分がその場にいない可能性もあります。そのため、GitHubのREADMEにセットアップ手順をまとめ、プログラムに詳しくないメンバーでも立ち上げられる状態を目指しました。

現地調整のためのパラメータGUI

また、実装が分かる人がその場にいなくても調整できるように、各種パラメータをGUI上で変更できるようにしました。

展示作品は、制作中に自宅のモニターで見ていた状態と、実際の展示会場で見た状態で印象が変わることがあります。画面サイズ、鑑賞距離、照明環境、PCの処理性能によって、虫の数や大きさ、光の反応範囲などの見え方が変わるためです。

そこで、実行中にパラメータパネルを開き、虫の数、光の円の半径、虫の最小・最大サイズなどをリアルタイムに調整できるようにしました。変更した値はブラウザに保存され、再起動後も設定が保持されます。

調整項目 目的
虫の数 PC性能や画面密度に合わせて調整する
光の半径 モニターサイズや鑑賞距離に合わせて反応範囲を調整する
虫の最小サイズ 遠目で見たときの視認性を調整する
虫の最大サイズ 群れとしての密度や画面上の存在感を調整する

これにより、実装担当者でなくても、会場で実際の見え方を確認しながら調整できる状態を作りました。コードを書き換えなくても現地の環境に合わせられるようにしたことは、展示作品として安定して運用するうえで重要でした。


インタラクション設計

懐中電灯型デバイス

来場者には「光を当てる」という行為を自然に行ってもらいたいと考えていました。

そのため、単なるゲームコントローラーやキーボードではなく、実際の懐中電灯のように見えるデバイスを使う必要がありました。自分は、作品体験として「来場者が懐中電灯を手に取り、画面に光を向ける」という要件を整理し、入力デバイスに求める条件を定義しました。

その要件に対して、デバイス制作を担当したメンバーが提案してくれたのが、Wiiリモコンを分解・改造し、懐中電灯の筐体に組み込む方法です。

055A7479.jpg

技術的には、WiiリモコンをBluetoothでPCに接続し、WiinRemote を用いてPC上のマウス入力として扱っています。
WiinRemoteは、Wiiリモコンの入力をPC上のマウス操作などに変換できるソフトウェアです。
http://onakasuita.org/wii/

懐中電灯型デバイスのスイッチを押すと、内部に組み込まれたWiiリモコン側のボタン入力が発生し、その押下状態を作品側のON/OFFトリガーとして利用しました。

デバイス制作では、懐中電灯の筐体を加工し、内部にWiiリモコンの基板を収めています。また、懐中電灯側のスイッチ操作がWiiリモコン側の入力として認識されるように、内部配線をはんだ付けして接続してもらいました。これにより、来場者にとっては普通の懐中電灯を操作しているように見えつつ、システム上では安定した入力デバイスとして扱えるようになりました。

image.png

デバイスがONのあいだは、メイン画面上で光源が発生し、「虫」の群れがその位置へ集まります。同時に、その入力状態はWebSocketを通じてサブ画面にも共有され、ピエロ映像の表示・非表示とアンビエントBGMの再生・停止にも反映されます。
デバイスをOFFにすると、光源は消え、虫の群れやサブ画面の状態も停止・離散する構成です。

来場者からは、ただの懐中電灯に見える。しかし内部では、懐中電灯のスイッチ、Wiiリモコンの入力、PC上のマウス入力、WebSocketによる画面間同期がつながっている。この「見た目の自然さ」と「内部の制御」の差が、体験の入口として重要でした。

ON/OFFに割り切る

当初は、光の強さに段階を持たせることも検討しました。

しかし最終的には、ON/OFFの2状態に割り切りました。

これは、実装コストを下げるためだけではありません。虫の凝集、アンビエントBGMの再生、ピエロ映像の出現という変化だけで、来場者に状態変化を伝えるためです。細かい段階を入れすぎると、むしろ「操作している感」が強くなり、作品が説明的になる可能性がありました。


空間設計

空間は、白い布を用いてディスプレイの存在を直接見せすぎない構成にしました。

壁から床にかけて布を垂らし、有機的な形の穴から画面が覗く。これにより、画面が単なるモニターではなく、空間の一部として立ち上がることを狙いました。

image.png

空間設計上の意図は、大きく3つありました。

  1. 画面の輪郭を弱める
    モニターをそのまま置くのではなく、布の奥に潜ませることで、作品の中に覗き込む感覚を作る。

  2. 光と影の関係を空間全体に広げる
    画面内だけでなく、布・床・壁を含めた空間で「灯す」というテーマを扱う。

  3. 来場者の身体を作品に入れる
    懐中電灯を持って近づく、向きを変える、反応を見る、という一連の身体的な動きを作品体験にする。


ポスターとキャプション

展示では、作品説明用のポスターも制作しました。

当初は展示全体で用意される共通のキャプションのみを想定していましたが、より詳細な情報を得られる媒体としてポスターを作成しました。

055A7492.jpg

ポスターは補助情報ではありますが、今回の作品ではかなり重要な要素でした。

インタラクション作品では、体験として先に伝わるものと、文章を読んで後から接続されるものがあります。光を当てる、虫が集まる、ピエロが現れる。まずはそれが身体的な反応として伝わる。その後で、ポスターやキャプションによってアテンションエコノミーや注意の誘導という主題に接続される。

この順番を意識して、文章と体験の距離を調整しました。


タイムライン

制作の大まかな流れは以下です。

時期 内容
2025年12月〜2026年1月 企画書作成、メンバー募集、スケジュール策定
2026年2月上旬 キックオフ、コンセプト共有、担当領域の確認
2026年2月中旬 コンセプト詳細化、サブディスプレイ案、空間案の検討
2026年2月下旬 p5.jsプロトタイプ作成、技術構成案の検討
2026年3月上旬 役割分担確定、Notionでタスク整理、各パート制作開始
2026年3月中旬 WebSocket構成の実装、GitHub共有、全体システム検証
2026年3月下旬 映像方針変更、ポスター制作、空間・機材準備
2026年3月末 統合テスト、搬入、会場調整
2026年4月1日〜5日 展示公開

展示ログから見えたこと

展示期間中は、懐中電灯型デバイスのON/OFFログを記録していました。
ログには、各セッションの開始時刻、終了時刻、体験時間などが含まれています。

展示期間中の全ログは690件でしたが、4月1日は来場者がいなかったため、この日のログは設営後の動作確認や内部テストによるものとして、来場者体験の集計からは除外しています。
また、4月2日〜5日のログにも、5秒未満のON/OFFログが含まれていました。これらには、ボタン入力の瞬間的な反応や、来場者が一瞬だけ試した記録などが含まれている可能性があるため、今回の集計では除外しています。

そのため、ここでは4月2日〜5日のログのうち、5秒以上継続したON状態を、来場者が作品に対して一定時間操作を行ったセッションとして扱っています。

baited_daily_valid_sessions_visitors_only_v2.png

日別の有効セッション数を見ることで、会期中に作品がどの程度触られていたかを確認できます。
来場者体験の集計対象では、5秒以上継続したセッションが 110件 記録されていました。

baited_daily_total_on_time_visitors_only_v2.png

一方で、セッション数だけでは体験の長さまでは分かりません。
そこで日別の合計ON時間も確認しました。来場者体験の集計対象では、合計で約 118分、懐中電灯型デバイスがONの状態として記録されています。

特に4月4日は、セッション数だけでなく合計ON時間も長く、来場者が比較的長く作品に触れていた日だったことがうかがえます。

baited_session_duration_distribution_visitors_only.png

体験時間の分布を見ると、5〜30秒程度の短い操作が多い一方で、30秒以上継続して操作されたセッションも一定数ありました。
これは、来場者が一瞬だけ反応を確認するだけでなく、光を動かしながらしばらく試す体験も発生していたことを示しています。

こうしたログは、作品を数値で評価するためというより、展示空間の中で作品がどのように触られていたのかを振り返るための補助線として扱いました。


展示して見えたこと

展示中、来場者はまず懐中電灯を手に取り、画面上の虫が反応することを確かめるように光を動かしていました。

多くの場合、最初に伝わるのはアテンションエコノミーという主題ではなく、光を当てると何かが反応するという身体的な面白さです。そこから、虫が集まり、虫の羽音を含むアンビエントBGMが鳴り、ピエロが現れる。そうした変化を経て、後からポスターやキャプションによってコンセプトに接続されていく。

この順番は、インタラクティブ作品においてかなり重要だと感じました。

思想や批評性を先に理解してもらうのではなく、まず身体が反応する入口を作る。そのうえで、体験の後に意味が追いついてくるように設計する。これは、今回の展示で得た大きな学びです。


振り返り

できたこと

今回の制作で特に良かったのは、コンセプト、実装、空間、グラフィック、制作管理を、それぞれ別々の要素としてではなく、ひとつの構造として接続できたことです。

  • アテンションエコノミーと走光性を接続したコンセプト設計
  • 光に反応して群れが動くインタラクション
  • ピエロ映像による注意獲得の象徴化
  • Notion / Discord / GitHubを使った制作管理
  • AIを活用した高速な実装
  • 展示直前の方針変更への対応
  • 展示ログを取得し、体験後に振り返れる状態を作れたこと

とくに、コンセプトと技術を往復しながら設計できたことは、自分にとって大きな経験でした。

積み残し

一方で、来場者が「自分の行為が注意のエスカレーションを引き起こしている」という構造まで感じ取れたかは、十分に検証できていません。

光を当てると虫が集まる、ピエロが現れる、という反応は伝わったとしても、その行為がどのように注意の消費や刺激の増幅と接続されるのかは、体験時間の短さもあり、届ききらなかった部分があると思います。

次に同じテーマで制作するなら、来場者の入力履歴や反応の蓄積を可視化し、作品内でフィードバックとして返す仕組みを検討したいです。

また、チーム制作としては、途中で方針変更が発生した際の役割再設計に課題がありました。作品としては抽象化の方向に振ったことは正しかったと感じていますが、制作体制としては、変更によって生まれる空白や偏りをより早く拾う必要がありました。


おわりに

baited は、光を当てるという単純な行為から、注意がどのように誘導され、消費されていくのかを考える作品でした。

制作を通して感じたのは、メディアアートのディレクションとは、コンセプトを言語化することだけでも、技術を実装することだけでもないということです。

コンセプト、技術、空間、音、グラフィック、チーム、スケジュール。それらを同時に見ながら、作品が成立するための構造を作っていくこと。その判断の連続が、今回の制作における自分の役割だったと思います。

この記事は、完成した作品そのものではなく、その裏側にあった判断や管理の記録として残しておきます。


クレジット

Role Name
Direction / Creative Coding Yuki Sunaga
Planning / Device Design / Performance Riko Fukami
Spatial Design Oba, Yuki Sato
Sound Design Mai Aritsuka

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?