---
created: 2025-10-25T00:00:00.000Z
visibility: public
permanent: true
tags:
  - speaking-engagements
aliases:
  - Vue Fes Japan 2025「Vue.jsでつくる実験映像」
modified: 2026-01-08T14:51:05.457Z
content_id: -3ePClUoerYFR1m8cM277
---

# Vue Fes Japan 2025『Vue.jsでつくる実験映像』

[Vue Fes Japan 2025 - 橋本 麦](https://vuefes.jp/2025/speaker/baku89)

> 映像作家として、Vue.jsを使って自作のモーショングラフィックス制作ツールやUIライブラリを開発しながら、コマ撮りやミュージック・ビデオづくりを行ってきました。本セッションでは、非エンジニア視点でのVueの活用法、創作フローにおけるGUI開発の役割、そして表現とツール開発が交差する実践例を紹介します。

## 関連項目

- [[好きなWeb API]]
- [[クリエイターのためのGNU的なるものを作りたい]]
- [[モーショングラフィックス界相関図]]

- **Vue.js, Nuxtで作ったWeb**
  - [[kindolphin|Kindolphin]]
  - [[work/pxca|PXCA]]
  - [[uri-gagarn-for|uri gagarn - For]]
  - [[few-owl|uri gagarn - Few / Owl]]
  - [[featured-projects|Featured Projects Webサイト]]
  - [[baku89-2025|このサイト]]
    - の構成のために今作っている[[Local-First Software|ローカル・ファースト]]なCMS: [[morion|Morion]]
- **登場した[[baku89#icon]]の映像**
  - [[work/ata|Olga Bell – ATA]]
  - [[eye|group_inou - EYE]]
  - [[fly|imai - Fly ft. 79, 中村佳穂]]
  - [[work/milling-stop-motion|Milling Stop-Motion Animation]]
  - (In-progress Project 秘密！)
  - [[kamukamo|MONO NO AWARE - かむかもしかもにどもかも! (imai remix)]]

## 話したことの中で登場したもの

プレゼンテーション前後の雑談で話した。

- [[ロトスコの無意識性]]
  - [[久野 遥子]], [映画『化け猫あんずちゃん』](https://www.youtube.com/watch?v=2e3Lai-mRKs)
  - [[ShiShi Yamazaki|シシヤマザキ]], [YA-NE-SEN a Go Go](https://www.youtube.com/watch?v=tN_62MmQBqQ)
  - ロトスコープの専門家（博論で書いた）→ [[岩崎宏俊]]
- [「遅さ」もたらす道具の手触り]
  - [テレ朝POST » 写真は「真」を写すのか？デジタル世代の写真家・小林健太が挑む写真表現の可能性](https://post.tv-asahi.co.jp/post-132445/)
    - > 小さいときにマッキントッシュに入っていたキッドピクスでお絵かき遊びをしていたなと思い出したんです。
      > 線を引っ張ると音が出るのが楽しくて、動物とか人物を描くというより、ただ線を引いたり、スタンプツールを使って遊んでいたなあと。一緒に住んでいた仲間にフォトショップの使い方を教わりながら、小さいときの感覚を重ね合わせて今の表現が生まれていきました。
    - > デジタルにも質感があると僕は考えていて。パソコンの処理速度は、どうしても自分の指のスピードより遅くなるので、モニタ上では実際の指の動きを追いかけた軌跡ができますよね。指の動きに対して、軌跡がゆっくりと変化していく。
      > すると視覚的な重みや質感が感じられて、まるで重たい液体をかき混ぜているような感覚になるんです。
      > ラグができて、軌跡を見ながら次の動きを決めていると、数秒前の自分と対話しているような気分になるんです。それも不思議な感覚で、楽しいですよ。
  - 焼き物の窯変
- [[lightweight-markup-language|軽量マークアップ言語]]に見て取れる言語バイアス
  - Markdownは分かち書きを前提としている。ラテン語至上主義。`<strong>`をネストできない（する必要もない）
  - [[cosense|Cosense]]のブラケット記法は、`[]`（square bracket）の約物としての本来の使い方とコンフリクトをする。
    - e.g., Wikipediaからペーストした際、citationの`[1]` みたいな表記を拾うから無数に数字ページが出来上がる。

## スライド

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.002.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.003.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.004.jpeg){.wide}

- [[paw2025|SHIBUYA PARCO ART WEEK 2025｜ 境界をほどき、感性をひらく。渋谷で出会う多彩な表現と新たな視点]]
  > 本年度の「SHIBUYA PARCO ART WEEK」では、映像作家の橋本 麦とビジュアルを制作。「雲」や光の回折をモチーフとしたビジュアルは、渋谷PARCO館内各所にも登場する。
  > 「星雲から真珠母雲、電子雲にいたるまで、自然界に多様なスケールで現れる「雲」や光の回折をモチーフに、奥行きと流れ、そしてわずかな粘度を感じさせるグラフィックに仕上げました。」
  > _橋本 麦_

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.006.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.007.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.008.jpeg){.wide}

- [[work/futureofair|NikeLab - FUTURE OF AIR]]
- [[kindolphin|Kindolphin]]

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.010.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.011.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.012.jpeg){.wide}

- [渋谷サクラステージのデジタルサイネージシステムを作ってました - rettuce.blog](https://rettuce.blog/2024/01/11/shibuyasakurastage/) by [[rettuce|田中 陽]]
- [Vue Fes Japan 2025 - Yuichi Yogo](https://vuefes.jp/2025/speaker/yuichkun)

### 実験映像って？

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.013.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.014.jpeg){.wide}

これは実験映画や映像の、特に技法面に着目した定義。映画史や批評、あるいは現代美術の文脈で、実験性というものをコンセプチュアルに捉えた作品もあるし、わりとそういうものの方が多いです。ぼくはあまり刺さりませんが……。

- [[Corner Griffith]], [_Auto_](https://vimeo.com/170888135)
- [[Dirk Koy]], [“Five Years Older - The City”](https://vimeo.com/35558304)
- [[David Daniels]], [_Journey Through A Melting Brain_](https://www.youtube.com/watch?v=R1evrK2gsaI)
- [[伊藤高志|伊藤 高志]], [“SPACY”](<https://en.wikipedia.org/wiki/Spacy_(film)>)

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.016.jpeg){.wide}

- [Tony Hill, “Upside Down”](https://www.youtube.com/watch?v=zIiEtKoMuEY)

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.022.jpeg){.wide}

### Vue.jsとPWAでコマ撮りアプリ開発

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.023.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.025.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.027.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.028.jpeg){.wide}

- [LAIKA Studios, “KUBO / クボ 二本の弦の秘密”](https://www.youtube.com/watch?v=uASwl52r7AY)

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.030.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.038.jpeg){.wide}

- [[koma|Koma]]
  ![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.039.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.041.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.043.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.045.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.046.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.047.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.049.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.054.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.058.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.059.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.063.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.065.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.067.jpeg){.wide}

### Tweeq：制作ツールのためのUIライブラリ

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.069.jpeg){.wide}

- [[tweeq|Tweeq: Parameter-Tuning GUI Widgets by/for Creative Professionals]]

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.070.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.071.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.073.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.076.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.077.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.078.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.080.jpeg){.wide}

- [[クリエイターのためのGNU的なるものを作りたい]]
-

### Unicodeで文字アニメをつくるアプリ

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.081.jpeg){.wide}

<vimeo class="wide" id="1014906749" />

- [[kamukamo|MONO NO AWARE - かむかもしかもにどもかも! (imai remix)]]

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.085.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.086.jpeg){.wide}

- [【ハク。Cover企画】MONO NO AWARE "かむかもしかもにどもかも！"](https://www.youtube.com/watch?v=J76S5q_ETfo)

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.087.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.088.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.090.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.091.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.092.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.093.jpeg){.wide}

- [[unim|Unim]]

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.096.jpeg){.wide}

- [[徳井直生|徳井 直生]]

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.097.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.105.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.107.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.109.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.110.jpeg){.wide}

- [ꙮ - Wikipedia](https://ja.wikipedia.org/wiki/%EA%99%AE)（多眼のO）

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.111.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.112.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.114.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.116.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.118.jpeg){.wide}

- [梶垣 諒, “漢字のアニマ” (2020)](https://scrapbox.io/kanji-anima-tion/)

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.120.jpeg){.wide}

- [[佐藤 義尚|佐藤 義尚]], [“PAPERS” (1991)](https://www.youtube.com/watch?v=56EG957YinM)
- [[melonade]], [“d.j. ァネイロ / 一龠 feat.flower”](https://www.youtube.com/watch?v=iWzUxFQQAKY)

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.122.jpeg){.wide}

- [BLU, “MUTO a wall-painted animation” (2008)](https://www.youtube.com/watch?v=uuGaqLT-gO4)
- [Jake Fried, “The Deep End” (2013)](https://www.youtube.com/watch?v=LZUoOT5LiAg)
- [Zihou Ng, “A session of glyphs” (2024)](https://zenn.dev/stwind/articles/dbf039a38fea06)
- [[岩崎_宏俊|岩崎宏俊]], [“Daoughter of Butades” (2024)](https://hirotoshiiwasaki.com/daughter-of-butades)
- [William Kentridge, “Mine” (1991)](https://www.youtube.com/watch?v=mXBxB6-YdG8)

### Computer-Aided Design、OSSへのクソデカ感情

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.124.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.126.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.129.jpeg){.wide}

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.131.jpeg){.wide}

- [[ハッカー文化]]

![](https://wp.baku89.com/wp-content/uploads/2025/10/2025_45_vuefes.132.jpeg){.wide}

- [[VueFesJapanでなにはなそうか]]