[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"post-dist46-event-report":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":15,"thumbnail":26,"ogpImage":30},"dist46-event-report","2024-11-15T01:14:16.207Z","2025-07-29T07:59:16.095Z","2024-12-20T03:48:26.425Z","DIST.46 「クロスメディア表現の演出とデザイン」イベントレポート","\u003Cp>2024年11月19日（火）にDIST.46 「クロスメディア表現の演出とデザイン」を開催しました。　会場は、2024年5月7日に新庁舎となった中野区役所 1F ナカノバです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F07ed06070f76404b833dcfd006fa6c5a\u002FIMG_8949.jpg\" alt=\"新庁舎となった中野区役所\" width=\"2048\" height=\"1536\">\u003Cfigcaption>新庁舎となった中野区役所\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>この記事では、勉強会当日の様子をレポートします。新しい空間で繰り広げられる\u003Cstrong>最新のクロスメディア表現\u003C\u002Fstrong>をご覧ください。\u003C\u002Fp>\u003Ch2 id=\"h9d27ac6e59\">今注目のクロスメディアとは？\u003C\u002Fh2>\u003Cp>\u003Cstrong>クロスメディア\u003C\u002Fstrong>とは、Web、映像、3D、インスタレーションといった複数のメディアを組み合わせ、それぞれの領域を超えた新たな表現方法を指します。\u003C\u002Fp>\u003Cp style=\"text-align: start\">DIST.46では、デジタルメディアの演出やデザインに関する制作事例や舞台裏をテーマに、以下2名のゲストをお招きしました。\u003C\u002Fp>\u003Cul>\u003Cli>「ぶちかまし系XRプロジェクトを成功させるために試行錯誤したこと10選」\u003Cbr>バスキュール 特級XRエンジニア 桟 義雄\u003C\u002Fli>\u003Cli>「同期する都市のキャンバス：フロントエンド技術による大規模メディアインスタレーションの舞台裏」\u003Cbr>Rhizomatiks、IE3 Visual Artist \u002F Programer 田中 陽\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h77603d63c2\">ぶちかまし系XRプロジェクトを成功させるために試行錯誤したこと10選\u003C\u002Fh2>\u003Cp>1つ目のセッションでは、XR・AR・VRを活用し、仮想と現実が交錯する新たな表現を追求するバスキュール 特級XRエンジニア 桟 義雄さんが登壇しました。\u003C\u002Fp>\u003Cp>このセッションで特に印象的だったのは「3日でいけたら行ける」という一言です。シンプルながらも、XRプロジェクトの開発現場における挑戦の精神が凝縮されています。\u003C\u002Fp>\u003Cp>セッションのポイントは以下の2点でした。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>高速プロトタイピングでゴールイメージを掴む\u003C\u002Fstrong>\u003Cbr>→ 最初の3日で、おもしろい部分を形にする。\u003C\u002Fli>\u003Cli>\u003Cstrong>クオリティを上げるための試行錯誤\u003C\u002Fstrong>\u003Cbr>→ 関係者に「おもしろい」と感じてもらったら、完成に至るまで試行錯誤を繰り返す。\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"h996d326ceb\">高速プロトタイピングでゴールイメージを掴む\u003C\u002Fh3>\u003Cp>「3日で本質的なところまでとにかく早く、どこまで行けるかが大切」と語る桟さんですが、どうして早く作ることが大切なのでしょうか？\u003C\u002Fp>\u003Cp>その理由がわかる具体例が、「MUUUSE：MUSIC MUSEUM」という⾝体ごと⾳楽に没⼊する新感覚⾳楽体験ミュージアムの企画展示です。建物内に置かれた巨大なラジカセが目を引きます。\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.tokyonode.jp\u002Fsp\u002Fmuuuse\u002Fevents.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F60b8774294ed4ba29741fe70cc013709\u002Fimage.png\" alt=\"MUUUSE 巨大ラジカセの画像\" width=\"960\" height=\"540\">\u003C\u002Fa>\u003Cfigcaption>イベント | MUUUSE : MUSIC MUSEUM ～音に触れる、光を聞く。身体が反射する。～：引用 https:\u002F\u002Fwww.tokyonode.jp\u002Fsp\u002Fmuuuse\u002Fevents.html\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>企画初期には「巨大ラジカセ」と聞いても、誰も具体的な想像ができません。そこで桟さんたちは、以下のプロセスを経て関係者とのビジョンを共有しました。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>ARKitを活用して可視化\u003C\u002Fstrong>\u003Cbr>ミーティング中にARKitを用いて巨大ラジカセのモデルを投影し、その場で視覚的なイメージを確認。\u003C\u002Fli>\u003Cli>\u003Cstrong>MRで検証\u003C\u002Fstrong>\u003Cbr>建物内での大きさや配置場所をMRで試し、よりリアルなイメージを掴む。\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F70e680c3192540c781a8032068d05b7c\u002Fimage%2065.png\" alt=\"MRで検証している様子\" width=\"1141\" height=\"642\">\u003Cfigcaption>MRで検証している様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>このプロセスを通じて、「まずは見せる」というアプローチが、関係者の不安を取り除き、次のステップに進む原動力となりました。加えて新しいアイデアも生まれ、プロジェクトの質も高まります。\u003C\u002Fp>\u003Cp>高速プロトタイピングの大切さは、単にスピードだけでなく、関わる人々の理解を深め、プロジェクトの方向性を確立する点にあると学びました。\u003C\u002Fp>\u003Ch3 id=\"h18ce314165\">クオリティを上げるための試行錯誤\u003C\u002Fh3>\u003Cp>「Syn: 身体感覚の新たな地平 by Rhizomatiks × ELEVENPLAY」連動ARコンテンツの紹介では、制作中に直面した課題や完成までの数々の試行錯誤が語られました。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.tokyonode.jp\u002Farticles\u002F202310-5\u002Findex.html\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fwww.tokyonode.jp%2Farticles%2F202310-5%2Findex.html&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>具体的な試行錯誤として挙げられたのが、スマートフォンを活用した道案内のアイデアです。利用者がスマートフォンに映し出されるコマ送りの人を見ながら建物内を移動するという斬新な企画でした。\u003C\u002Fp>\u003Cp>TOKYO NODE開館記念企画の一環として始まったこの企画は、まだ建物が完成していない段階からのスタートだったそうです。そのため、制作チームは建設予定の3Dモデルを活用し、VR空間を通じてイメージを確認しながら進行。最終的には、歩きスマホによる衝突の危険性が懸念され、このアイデアは採用を見送られました。\u003C\u002Fp>\u003Cp>他にも、ガラスの箱に人を投影し、実際の照明と組み合わせた実験や、近隣の大きなビルに人を投影してみる試みが紹介されました。夜間の広場にオブジェクトを配置すると環境に自然と溶け込むなど、新たな発見も得られたとのことです。\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.tokyonode.jp\u002Farticles\u002F202310-5\u002Findex.html\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F05df36f20e8c4d5c8a8ff9c9e1c85b49\u002Fimage.png\" alt=\"「Syn : 身体感覚の新たな地平 by Rhizomatiks × ELEVENPLAY」連動ARコンテンツ\" width=\"1920\" height=\"1080\">\u003C\u002Fa>\u003Cfigcaption>「Syn : 身体感覚の新たな地平 by Rhizomatiks × ELEVENPLAY」連動ARコンテンツ\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>完成したコンテンツではAR技術を活用し、ビル内にあたかも人がいるかのようなリアルな表現を実現しました。そのためには、建物とARを正確に重ね合わせる技術が不可欠でしたが、昼夜の環境条件の違いにより、微妙なズレが発生する課題に直面。時間帯ごとに原点を微調整するという工夫で、この問題に対応したそうです。\u003C\u002Fp>\u003Cp>このような微細な調整を繰り返すことで、より自然な表現を追求されているのだと感じました。試行錯誤を重ねながらも、新しいアイデアに挑戦し続ける制作チームの姿勢が、クオリティの高いコンテンツを支えているのだと感じました。\u003C\u002Fp>\u003Ch3 id=\"hf019bca306\">厳しい条件に挑む、成功を掴んだ撮影プロセス\u003C\u002Fh3>\u003Cp style=\"text-align: start\">今回ご紹介いただいたプロジェクトの多くは、未知の領域に挑むものであり、数多くの課題を乗り越えるために、さまざまな試行錯誤が行われました。さらに質疑応答では、AI技術を活用した撮影プロセスの裏話なども明かされ、検証手法や可能性の広がりを感じる内容でした。\u003C\u002Fp>\u003Cp>桟さんのセッションからは、制作に対する楽しさを感じている様子が伝わり、情熱と探求心がプロジェクトを成功に導くのだと実感できるお話でした。\u003C\u002Fp>\u003Ch2 id=\"h0f6ceabb75\">同期する都市のキャンバス：フロントエンド技術による大規模メディアインスタレーションの舞台裏\u003C\u002Fh2>\u003Cp style=\"text-align: start\">2つ目のセッションでは、Rhizomatiks、IE3 Visual Artist \u002F Programer 田中 陽さんが登壇し、渋谷サクラステージ施設内に設置されたデジタルサイネージシステムの設計・開発についてお話しいただきました。このシステムは、変幻自在のデジタルアートを出力する大規模なメディアインスタレーションです。\u003C\u002Fp>\u003Cp style=\"text-align: start\">実際のサイネージの様子は、以下のYouTubeからご覧いただけます。\u003C\u002Fp>\u003Cdiv>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?_cc_load_policy=true&click_to_play=1&playerjs=1&url=https%3A%2F%2Fyoutu.be%2FDJfNFAYwEaU%3Fsi%3DP1OwJX1NO31HMObN&key=c271a3ec77ff4aa44d5948170dd74161\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"autoplay *; accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch3 id=\"h7dff86999c\">デジタルサイネージは都市開発にも活用\u003C\u002Fh3>\u003Cp>このプロジェクトは、デジタルアートの美しさだけにとどまらず、都市開発や地域との連携にも焦点を当てています。たとえば、地域住民や来訪者を巻き込んだワークショップを通じて、アートを街の一部として活用する仕組みが取り入れられています。\u003C\u002Fp>\u003Cp>このように、技術と芸術を融合させるだけでなく、社会的な価値も生み出すアプローチが非常に印象的でした。\u003C\u002Fp>\u003Ch3 id=\"h48c2a0dd2b\">新しい技術スタックでメンテナンスの効率化\u003C\u002Fh3>\u003Cp>田中さんが手掛けたデジタルサイネージシステムでは、従来の技術スタックではなく、\u003Cstrong>Nuxt\u002FVue.jsを活用したWeb技術\u003C\u002Fstrong> が採用されています。この移行により、OSアップデートやマルチデバイス対応による問題を軽減し、メンテナンス効率が大幅に向上しました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5e0052cea09a49caa2319a1c57d453d6\u002Fimage.png\" alt=\"デジタルサイネージのレイヤーシステムの画像\" width=\"1414\" height=\"756\">\u003Cfigcaption>デジタルサイネージのレイヤーシステム\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>驚くべきことに、このプロジェクトはビジュアルからシステム構築まで、すべて田中さんが1人で手掛けています。今回のセッションでは、特に BASE LAYER におけるビジュアル制作を行うためのシステム作りについて、詳細にお話しいただきました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F0d94bb149525409793dc42b4a3180f15\u002Fimage.png\" alt=\"パラメーターの変更を操作している様子\" width=\"1419\" height=\"810\">\u003Cfigcaption>パラメーターの変更を操作している様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Vue.jsを活用し、色や距離、ブレンドモードといったパラメーターを簡単に変更できる仕組みを構築。これにより、柔軟で迅速な更新が可能になっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F0b74db67fd554ff3989274707e5fa837\u002Fimage.png\" alt=\"サイネージを管理するダッシュボードを解説する様子\" width=\"1385\" height=\"923\">\u003Cfigcaption>サイネージを管理するダッシュボードを解説する様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>さらに各サイネージのサイズやスケジュールを設定できる画面を作成し、それらをダッシュボードに統合。管理者が全体を把握しやすい設計がされています。\u003C\u002Fp>\u003Cp>詳しい内容は以下の記事でご覧いただけます。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Frettuce.blog\u002F2024\u002F01\u002F11\u002Fshibuyasakurastage\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Frettuce.blog%2F2024%2F01%2F11%2Fshibuyasakurastage%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch3 id=\"hd69c637664\">技術的な進化と未来の展望\u003C\u002Fh3>\u003Cp>田中さんは今回のプロジェクトを通じて、今後の展望についても語られました。システムをAWS上で管理するクラウドプランの構想や、ハードウェア制作への挑戦にも意欲を見せており、技術とクリエイティブの新たな可能性が期待されます。\u003C\u002Fp>\u003Cp>今回のシステムは汎用性を重視して設計されており、渋谷サクラステージ以外の都市空間でも応用可能です。\u003C\u002Fp>\u003Cp>現在は、自分が絵を書いて遊べる場所や仕組み作り中だとおっしゃっており、今後、デジタルサイネージという枠を超え、街全体をキャンバスにするようなプロジェクトが増えていくかもしれません。\u003C\u002Fp>\u003Chr>\u003Cp style=\"text-align: start\">以上、DIST.46 「クロスメディア表現の演出とデザイン」の当日レポートでした。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F4c5bb1f80f3a49e69e8c67b23d24ecaa\u002Fimage.png\" alt=\"\" width=\"1385\" height=\"779\">\u003Cfigcaption>新庁舎で行う勉強会の様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。動画では資料だけでは伝わらない、スピーカーからの解説や実演シーンも見られます。オフラインの勉強会に抵抗を感じている方も、まずは動画から雰囲気を掴んでみてください。\u003Cbr>\u003Cbr>DIST公式サイト：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fdist.tokyo%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>DIST公式YouTubeチャンネル：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCNsgmodjXtYKAi1HxLK94kQ\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fwww.youtube.com%2F%40DISTJP&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp style=\"text-align: start\">\u003C\u002Fp>",[11,12,13,14],"コミュニティ","フロントエンド","デザイン","イベントレポート",[16],{"id":17,"createdAt":18,"updatedAt":19,"publishedAt":18,"revisedAt":19,"name":20,"job":21,"avatar":22,"profile":25},"ba-f_cmju","2024-02-21T00:20:24.175Z","2026-04-13T09:36:16.713Z","阿部 萌夏","フロントエンドエンジニア",{"url":23,"height":24,"width":24},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe076105dcbbe460eaabb5bbc3f693621\u002Fabe.moeka.jpg",512,"北海道出身、2001年生まれ。専門学校を卒業後、フロントエンドエンジニアとして2023年世路庵に入社。2025年退職。",{"url":27,"height":28,"width":29},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F86415b5891d74d1baa1bf72888ded1c3\u002Fcross-media-expression-creates-the-future.png",720,1280,{"fieldId":31,"type":32,"image":34},"ogpImage",[33],"タイプ2（タイトル＋画像）",{"url":35,"height":36,"width":37},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe9639fc90d934970b245de4326df751f\u002Fcross-media-expression-creates-the-future1.png",630,1200,1776401665191]