そもそもアニメーションとは何かを語源から考察する2026.4.30

アニメーションとは?

ふと、疑問に思った。アニメーションって、何なんだろうと。
一応当方はモーショングラファーを名乗っている。実写もやっているが、一番得意なのは今でもモーショングラフィックスだ。
モーショングラフィックスはアニメーション技法の一つとして捉えている。
であれば、アニメーションとは何なのか、自分なりの仮説を持っておかなくてはと考えました。
これはその考察メモです。あくまで個人的な整理の延長にあるものであり、学術的な検証や体系的な定義を目的としたものではありません。
偉そうに言葉を並べた生意気な文章ですが、その点についてはあらかじめ断っておきます。


語源から見るアニメーション

animate の語源構造

「アニメート(animate)」という語は、ラテン語の「animare」(命を吹き込む、魂を与える)に由来し、その根源には「anima」(魂、生命)という語が存在する。この語源構造から、「animate」は本来、生命のないものに命や活力を与える行為を意味する。

魂と運動:中世思想との接続

この概念は、中世ヨーロッパのスコラ哲学やキリスト教神学において「魂(anima)」の存在が生命の根源とされていた思想とも通底する。すなわち、「命」とは「動き」を伴う存在であり、動的であることそのものが「生きている」と見なされる。その思想的遺産を受け継ぎ、英語の「animate」は「動かす」「活気づける」という意味を持つに至った。


アニメーションはどのように「生命」を生むか

animation:技術ではなく概念である

この語から派生した「アニメーション(animation)」は、静止した画像や物体に「動き」という生命の徴を与える技術・芸術を指す。映像の中でキャラクターや被写体が動くことによって、それらはまるで実在する生命体のように知覚され、鑑賞者はそれらに擬似的な生命を見出す。

知覚における「生命の錯覚」

これは知覚心理学における「アニミズム的知覚」(Piaget, 1929)や、物体が意図的に動いているように錯覚する「知覚的アニマシー(perceptual animacy)」の現象に類似する。
さらに、ギブソンの「アフォーダンス理論」(Gibson, 1979)においても、動きは対象の「生きている」性質を示唆する重要な手がかりである。アニメーションはこの動きの喚起を人工的に生成し、観る者の心に「生命の気配」を想起させる。


アニメーションの定義(再構成)

以上を踏まえると、「アニメーション」という言葉自体は、単なる技術名ではなく、生命の本質的な在り方を象徴する語でもある。

語源的定義
魂を与える行為(animare)
思想的定義
動きを生命の本質とみなす世界観
知覚的定義
動きから生命を知覚する認知機構
技術的定義
動きを人工的に生成する表現手法

技術としてのアニメーション

伝統的手法

伝統的なアニメーション手法には、粘土を変形させたり、パペットのポーズを変えながら撮影していくストップモーションアニメーション,2次元の絵を連続的に描き変えながら撮影していくアニメーションなどがある。2次の絵によるアニメーションは、画材によってさまざまな様式がある。最も知られているセルアニメーションもその1つであるが、紙に鉛筆で描くものから、ガラスに油絵具で描くもの、砂絵によるものなどもある。デジタル手法で挙げるなら、それこそ3DCGIやモーショングラフィックスデザインといった手法もそうだ。


結語:アニメーションとは何か

アニメーションとは、静止物に対して単に動きを与える技術ではない。それは、「動き」を媒介として「生命」を立ち上げる行為であり、人間の知覚と世界観に深く根ざした表現形式である。
すなわちアニメーションとは、「動きによって魂を仮構する技術」である。


作り手の「魂」とは何か

魂と構造

総じて、作り手に「魂」、おそらく言い換えるのであれば熱意が無いといけない。
しかしここで言う「魂」とは、単なる感情の強さではない。それは、動きの中に一貫した意図や重み、時間的連続性として現れる構造である。
アニメーションにおいては、すべての運動が設計されている。加速や減速、間(ま)、タイミング、反応——それらが無秩序に配置されている場合、対象は「動いている」ことはあっても、「生きている」とは知覚されない。

  • 意図のない運動はノイズになる
  • 一貫性のない運動は生命として統合されない
  • 時間的連続性のない運動は知覚的に断絶する

すなわち、鑑賞者が「生命」を見出す条件とは、運動の背後にある構造が読み取れることである。

熱意の再定義

この観点から見れば、「熱意」とは単なる精神論ではない。それは、細部に至るまで運動を設計し続ける持続的な注意と選択の集積である。
言い換えれば、熱意とは「動きの解像度」である。
どこまで細かく運動を観察し、分解し、再構成するか。その密度が、そのまま「生命の気配」として立ち現れる。

結論の補強

したがって、アニメーションにおける「魂」とは、作り手の内面そのものではなく、運動として外化された設計の総体である。
それは感情ではなく論理的構造であり、精神ではなく実装である。その構造が精密であればあるほど、鑑賞者はそこに「魂」を感じ取るのではないだろうか。
そう信じて、これからもアニメーションを<デザイン>していく「モーショングラファー」を目指していこうと、思う。

Webサイトをリニューアルしました2026.4.22

knoktr.artをリニューアルしました。
WORKS・LOGS・ABOUTの3軸で構成しています。WORKSに映像作品、LOGSに日々の記録や言葉、ABOUTにプロフィールと活動歴をまとめています。

LOGSの投稿は<NEWS>と<MyWords>の2種に分かれています。<NEWS>は告知や情報など対外的な発信、<MyWords>は制作記録・思考・日々の記録・写真など個人的な発信です。

現在のデザインは暫定実装です。完成を待つより先に出すことを選んだので、レイアウトは仮のままになっています。

不具合等があればCONTACTまでお願いします。

なんでLenisを使うときにbodyを殺して、謎のラッパー構造を作るのか?2026.4.18

Lenis を好んで使用する理由

当方がLenisを好んで使用する理由は、スクロールを単なるブラウザ挙動ではなく、制御可能な状態として扱える点にある。仮想スクロール値を基準に transform ベースで描画が統一されることで、座標系と時間軸を一貫して管理できる。この時点で、すでに「ただのスクロール」ではなくなっている。

カメラを固定し、世界を動かす——そう捉えた瞬間、スクロールはUIではなく演出へと変質する。パララックスや各種アニメーションも、同一の進行度に束ねられ、ズレなく同期する。

……と、このあたりを書き始めるとそのまま結論に到達してしまうので、詳細は後述することとする。

基本構造(HTML)

<body><div id="lenis-root">
<main>

<section id="hoge">
	<div class="parallax-bg"></div>
	<p>hogehoge</p>
</section>

<section class="others"><p>hogehoge01</p></section><!-- other -->
<section class="others"><p>hogehoge02</p></section><!-- other -->
<section class="others"><p>hogehoge03</p></section><!-- other -->

</main>
</div></body>

基本スタイル(CSS)

@import url('./master.css');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }	

html, body { height: 100%; }
body       { overflow: hidden; }

#lenis-root         { height: 100%; }
#lenis-root         { position: fixed; inset: 0; overflow: hidden; }
#lenis-root > main  { will-change: transform;}

#hoge { position: relative; min-height: 100vh; overflow: hidden; }

.parallax-bg {
  position: absolute; inset: -20%;
  background-size: cover; background-position: center;
  transform: translateY(0); will-change: transform;
}

/* 動作テスト用 */
.others { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-size: 32px; color: #333; }


結論

Lenis は「スクロール」を使っていない。
「スクロールっぽい錯覚」をtransformで作っている。
これがすべて。

まず前提:ブラウザ標準のスクロールとは何か


[ viewport(画面) ]
        ↓ スクロール
[ body(ドキュメント) ]

通常の Web ページはこうなっている。つまり…

  • bodyの高さがコンテンツ量になる
  • スクロールすると ブラウザが勝手に body を上下にずらす
  • JS は「結果」をscrollYとして受け取るだけ

しかしLenisは設計上、この前提を壊す。
大変面白い知見を得ることができた。

Lenis は「ぬるっとスクロールさせるライブラリ」ではない

見出しの通り。Lenisは「ぬるっとスクロールさせるライブラリ」ではない。
正確には「スクロールを<演出>として再実装するライブラリ」である。

Lenisが考えている事は

  • 本物のスクロール:使わない
  • 人間には「スクロールしているように見せる」
  • 自分で位置を計算する
  • transform: translateY()で世界を動かす

だから body を殺す

html, body { height: 100%; }
body       { overflow: hidden; }

これは単なるスタイルではなく、システム設計

  • ネイティブスクロールの無効化
  • scrollY の破棄
  • 入力(ホイール/タッチ)のみ取得

これは「スクロールを止めるため」のCSS


Lenis の構造:固定カメラモデル

[ 固定されたカメラ (#lenis-root) ]
        ↓
[ 動く世界 (main) ]

正直なところ、この仕様には最初は頭を悩ませた。そこで筆者は、アニメーションの撮影工程的な捉え方を導入することにした。かつてのセルアニメーションにおける撮影では、背景美術の上にセル画を重ね、多層のレイヤーをカメラで撮影することで画面を構成していた。カメラ自体は基本的に固定されており、移動や奥行きの表現は、セルや背景をスライドさせることで実現される。いわゆるマルチプレーン撮影においては、レイヤーごとに異なる速度で移動させることで視差を生み、擬似的な奥行きを表現していた。

あいにく筆者が生まれた頃には、こうした撮影工程の多くはすでにデジタルへと移行していたようだが、この「カメラは固定され、画面側が動く」という発想自体は現在のデジタルコンポジットにおいても本質的には変わっていない。

Lenisの挙動もこれに近い。すなわち、視点(#lenis-root)は固定されたまま、シーン全体(main)が移動する。スクロールしているのではなく、撮影対象そのものが流れていく——そう解釈した方が実態に近い。見た目上は確かに、「自分がスクロールしている」と感じる。しかし、実際はカメラは固定であり、撮影台そのものが上に動いているイメージで考えた。ゲームエンジンで言うと、カメラを動かしているのではなくステージを逆方向に動かしているイメージになるのだろうか。

実際のDOM構造

<body>
  <div id="lenis-root">
    <main>
      <!-- 全コンテンツ -->
    </main>
  </div>
</body>

CSSの意味を分解する

#lenis-root { position: fixed; inset: 0; overflow: hidden; }

これはつまり…
<画面いっぱい><絶対に動かない><常にviewportと一致>

それに対してカメラが、

#lenis-root > main { will-change: transform; }

ここに Lenis がtransform: translateY(-xxxpx)を当てることにより、実際に動くのはmainだけ。


なぜこの構造じゃないとLenisは成立しないのか

Lenis の処理フロー:

[ol]

  • 入力(ホイール・タッチ)を受け取る
  • 仮想的なscroll positionを計算する
  • イージング適用
  • transformに反映
  • [/ol]

    ここでbodyネイティブスクロールが存在すると:

    • ブラウザも動く
    • Lenis も動く
    • 二重スクロールになる

    …パララックスは壊れる。 getBoundingClientRect()の基準もズレる。

    だからbodyを殺す必要がある。


    パララックスと完全に相性がいい理由

    この構造の本質はここ。

    • 全てがtransform ベース
    • 同一座標系
    • 同一時間軸(進行度)

    つまり:

    Lenis進行度
    仮想スクロール位置
    要素位置
    getBoundingClientRect依存
    パララックス量
    任意の補間

    これらを 完全に同期できる。


    雑なまとめ

    • Lenis はスクロールライブラリではない
    • 仮想スクロールエンジン
    • bodyスクロールは完全排除
    • カメラ固定 / 世界移動モデル
    • transformを統一的に制御する設計

    本稿は、実装および挙動観察に基づく整理であり、公式仕様を網羅的に解説するものではない。したがって、その記述は必ずしも公式の定義と一致するものではない点を、あらかじめ断っておく。記述には一定の仮定と解釈を含むが、スクロールという現象をどのように捉え、いかに設計対象として扱うか——その視点を補助する一助となれば幸いである。

    【今後の活動について】任意団体「トリアイナ・ワークス」設立2026.3.10

    この度、北海道芸術デザイン専門学校を卒業し、2026年3月10日に個人事業主「KnoKtr」として開業いたしました。
    それに伴い、「トリアイナ・ワークス(TORIAINA WORKS)」を設立し、代表を務めさせていただくこととなりました。
    映像・CG・グラフィックデザイン・Webなど、多様な専門性をもつクルーが集い、クリエイティブを提案・制作致します。
    トリアイナ・ワークスでは「預かった時間に、意味を返す。」を理念に、観る人・関わる人の時間を軽んじない思いを込め、プロジェクトを担います。
    現在、トリアイナ・ワークスの新規事業を複数企画しています。近いうちにアナウンスできればと思っています。

    また、前作「何様」に続き、当団体の新作ショートフィルムを監督させていただくことになりました。詳細については、改めてご報告いたします。
    私 KnoKtr は、フリーランスとして映像・デザイン・Webなど各種制作業務にお力添えできれば幸いに存じます。

    引き続き、KnoKtrならびにトリアイナ・ワークスをどうぞよろしくお願いいたします。

    【最優秀賞受賞のご報告】映画「何様」(北海道芸術デザイン専門学校 第58回 卒業制作)2026.1.30

    菅野鼓太郎「映画『何様』 北海道芸術デザイン専門学校 第58回 卒業制作 最優秀賞」

    監督を務めましたショートフィルム「何様」が、北海道芸術デザイン専門学校 第58回 卒業制作にて最優秀賞を受賞いたしました。

    脚本・演出・監督、そして映画を企画すること自体、すべてが私にとって初めての挑戦でした。
    不確かさと危うさを抱えたまま踏み出した一作ではありましたが、先生方のご指導、そして仲間たちの支えによって、これまでの自分の作品の中でも最も高い完成度に到達できたと感じています。
    このような評価をいただけたことを、心より光栄に思います。


    卒業制作展での経験

    卒業制作展では、多くの方に展示スペースへ足を運んでいただき、
    在廊中に直接ご感想を伺う貴重な機会にも恵まれました。

    展示期間中には、「本当に上映するの? サツゲキで?」と驚かれることも多く、
    架空の企画だと思われてしまう場面もありました。

    在廊しながら「本当に開催します。こちらの2次元コードからご確認ください」と何度もお伝えする時間もまた、忘れがたい経験です。

    先生方、恩師の皆様、母校・星槎の関係者の方々、そして先輩方からも温かいお言葉を頂戴し、
    本展は生涯忘れることのない時間となりました。


    今、思うこと。

    本作は決して分かりやすい作品ではなく、反省すべき点も多く残っています。

    それでも、ご覧になった方から「面白かった」「印象に残った」と声をかけていただくたびに、
    次へ進むための大きな励みを受け取っています。


    上映会について

    2026年2月22日に、サツゲキにて特別上映会を行います。
    詳細は、映画「何様」公式サイトをご覧ください。

    今後とも、どうぞよろしくお願いいたします。

    開催日時 2026年2月22日(日)16:00〜18:00
    入場料 無料(当日の予約無し参加も可)
    会場 サツゲキ(シネマサンシャイン)
    北海道札幌市中央区南2条西5丁目6-1
    狸小路5丁目 内 シアター3(3階)
    運営 トリアイナ・ワークス(TORIAINA WORKS. Creative Media Collective)

    謝辞

    改めて、この作品に関わってくださったすべての方、
    そして足を止め、観てくださったすべての方に、心より感謝いたします。

    上映会では、卒業制作展とはまた違ったかたちで、
    本作をお届けできればと思っています。
    詳細は、こちらの映画「何様」公式サイトをご覧ください。
    今後とも、どうぞよろしくお願いいたします!

    【詩】夜の後、深更。2025.9.16

    夜の後、深更。

    私の意識はどこにあるのだろう。
    指を動かしても、それが自分の命令なのか確信できない。
    息が、脈の代わりに微かに震えている。
    その震えが、現実の残りかすみたいに感じられる。

    部屋の中では、時計の音さえも休止している。
    カーテンの隙間から滲む街灯の光が、
    心奥の不安をなぞる。
    光が優しくなるほど、世界は残酷だう。

    私は自分の輪郭を確かめようとする。
    だが指先は、触れるたびに空気のように崩れていく。
    手を伸ばしても、手が消える。
    触れたものが、すべて夢の温度になる。

    呼吸を意識すると、呼吸はできなくなる。
    脈動。ひとつ。ふたつ。——断絶。
    止まったのか、止めたのか、その境界が曖昧になる。
    死と眠りの隔たりが、今宵は曖昧に滲んでいる。

    気を抜くと、文字通り、気が抜けてしまう。
    思考が床にこぼれ落ちる音がする。
    拾い上げようとしても、手のひらをすり抜けて、
    灰色の光の中に散っていく。

    目の奥で、何かが、静かに。
    しかし、静かに、崩れていく。
    心の底で「まだ生きている」という感覚が、
    鈍く、弱く、抵抗している。

    現実は、今ここにあるのか。
    夢の複製を再生しているだけなのか。
    時間がゆるやかに沈降する。
    段々と、ゆっくり沈む。
    秒針が水底で泡沫となる。
    沈黙が、僕の内部の空洞を充たしていく。

    遠くで、誰かが笑った。
    その音は鼓膜を通過し、闇の底で歪曲する。
    世界の方が、遠心的に後退している。

    存在の痕跡を主張するかのように、
    心臓が、一度だけ強く脈打ち、
    そのまま長い沈黙へと溶けていく。
    その沈黙の只中で、
    何かが確かに、呼吸をしていた。

    焼けるような朝が来るまで、
    この無言の影だけが、
    確かに、生きていた。

    【詩】言い訳2025.9.8

    某日、
    改札機は告げる。
    今日までの定期券であると。

    その瞬間、
    更新しなければ、
    行かずに済むのだと、
    錯覚する。

    止まる理由が、
    偶然にも、
    与えられたような気がして。

    救われたふりをして、
    立ち尽くす。

    指先に残るICカードの冷たさが、
    罪悪感の温度と似ている。
    通り抜ける人々の足音が、
    心臓の代わりに響いている。

    空虚で、空論で、
    空すら飛べそうに思えるほどの
    空回るような想念を、
    今日もまた、
    反復してしまう。

    私は、行けないのではなく、
    行かないという選択を、
    言葉の裏に隠しているだけ。

    それでも私は、
    まだ「行かない理由」を探している。

    【詩】おそろしい2025.9.8

    おそろしい

    可視の路をなぞる。
    可視の壁をよける。
    可視の水脈を翔ぶ。
    可視の架橋を渡る。

    ゆえに、
    僕は恐怖を踏む。

    【詩】コンパス2025.9.8

    コンパス

    正円を描けない
    壊れたコンパスのようだ。
    いつも軌跡は
    曲がり、ねじれ、逸れてゆく。

    微かに狂った磁針は
    北を拒み、錆びたまま震えている。
    地平は霞み、
    ただ足跡だけがやけに鮮明だ。

    正しさは知らない。
    間違いだけが
    鋭利に突き立つ。

    曲がり角は曲がらず、
    長い直道はショートカット、
    それでも迷う。

    誰に謝ればいいのかも
    解らぬ今日。

    意味を探すたび
    また、曲がる。
    曲がった。
    そして、ずれた。

    僕というコンパスは
    針を下ろせぬまま
    世界をなぞっている。

    未だ、
    なぞっている。

    映像音響処理技術者資格認定試験に合格致しました。2025.7.19

    一般社団法人日本ポストプロダクション協会(JPPA) 映像音響処理技術者資格認定試験に合格しました。
    本資格は、映像・音響における信号処理、制作工程、機材運用までを横断的に扱う技術体系の理解が求められるものです。

    日々の制作においては、その背後にある処理原理や構造への理解がアウトプットの精度を左右すると考えています。
    本試験の学習過程は、自身の実践を理論的に再整理する機会となりました。

    これからも映像ディレクターを志し、研鑽を重ねています。

    top