2026.10.14

いま、AIでWebサイトを実装するということ。
マネックス証券イントロサイトにおけるアニメーション実装の裏側

メンバー

執筆

岡部 健二

岡部 健二

TD

はじめに

AIをつかってWebサイトを実装することについて、自分なりに言葉にしてみたい。
AIによる気分の浮き沈みというのは、きっと多くの制作者が日々感じているはず。
自分も例に漏れず、悶々としていることは多い。
ただ、今回キャラクターアニメーションシステムをほぼAIで実装したことを経て、少し前向きに捉えられるようになった。
一言でいうと、「楽しかった」のである。

楽しいというと「クライアントワークで何をお気楽な」と思われるかもしれない。
ただ、それはウキウキ・ワクワクとは少し違って、集中して突き進んでいたらいつの間にか面倒や苦しみを越えていて、振り返ってみるとその没頭してた時間は「楽しかったのかもしれない」というようなニュアンス。
没頭できるかどうか、が最終的にこだわり切れるか、に大きく作用し、その没頭と楽しさは切ってもきれない関係にある。
そういった感覚と無縁だと思っていたAIでなぜそんなふうに思えたのか、それが今回のテーマ。

どんなものをつくったか?

WebGL製の2Dキャラクターリギングツール。
今回のサイト/キャラクター向けにさまざまな独自機能をもたせている。

*リギング
= イラストに合わせて骨組みを設定することで、自然なモーションをつくりやすくする仕組み

どう進めたか?

デザインが進んでいる段階から、このイラストが「いかに生き生きと動くか」が勝負だと思い、まずは手法の検討をはじめた。(以下は須多のワーク)

1. AI生成動画(Kling AI)

少し試したところで、ほんのわずかでも不自然さがあるとキャラクターのらしさが損なわれてしまうと気づいた。完全にコントロールできる手法の検討に舵を切った。

*検証段階のもので、実際のキャラクターとは関係ありません。

2. 3D / トゥーンシェーディング

3Dでイラストのもつ味わいを完璧に再現するのは現時点では難しいと断念。

3. Live2D

動きの方向性としてはじめて「動いても嫌じゃない」という感触が得られた。
やはり元のイラストをそのまま活かしつつ動かす方針に。

ツールをなぜ自作?

アニメーション専用の素材としてではなく、止まり絵として成立しているイラストをもとに動かす必要があったため、既存ライブラリを利用するよりゼロからつくったほうがよいと判断するに至った。

通常リギングは、手を横に広げた「Tポーズ」をもとに行うのが一般的だが、以下のようなすでにポーズのついたイラストにモーションを設定する。
また、クロスした足などは通常のリギング素材としては使いづらく、横を向いているのがデフォルトで正面がないという特徴も特殊な条件であった。

左:いわゆる「Tポーズ」/右:元のイラスト

AIに主導権を渡さない

AIとの付き合い方で考えていること。

まず、自分が思い描く最終アウトプットが、AIから一発で出てくることは絶対にない。
“絶対”と言い切れるのには2つ理由がある。

1. 自分が思い描いたものを100%伝えることはできないから

2. 本当の理想はつくりながら発掘され変わっていくものだから

AIに頼めば、なんとなくすごいものは出てくる。時にそれは自分の理想よりも良いものかもしれない。でもやっぱりそれはどこかのだれかの寄せ集めでしかないという意味で、“絶対に”自分が思い描いたものであることはない。(良し悪しの話ではなく)

だから主導権を渡しちゃいけない、と心に決めている。
全体の工程を分解し、ここはAI/ここは人間、と切り分けることからはじめる。
大きなつくりかたはAI以前と変わっておらず、要所要所がAIによりショートカットされた形。
多くがAIに移譲することになっても、全体は人間の側が把握・コントロールできるようにしたい。

ざっくり大きく渡すと、出力の細かい部分が多少気になっても「まあいいか」となってしまう。その積み重ねで最終的に手応えのないものが出来上がる。
何より、他人に何も説明できないことが怖い。AI以前から、リアルの場で使い物になる人間になりたいと思っていた自分はなおさら。

よく言われる「ループをつくれ」とは真逆の考え方ではあるし、これが正解とは思っていない。
考えなしに今までの慣れたやり方を踏襲してるだけ、とならないようにも気をつけたい。
それでもAIがもつ平均化の重力に負けないためには、自分で考える、自分で決める、これは譲ってはいけないと考えている。
(弱気になる時もありつつ…)

大まかに言えば、以下の役割分担をした。

キャラクターシステム = フルAI

全体のインタラクション = 主に人間

2Dリギングの仕組みは人間がいちから実装するより、圧倒的にAIが有利な分野。
一方で、時間軸+ユーザーのスクロール、タップ、ドラッグ、スキップの条件分岐など。これらすべてを考慮した違和感のない触り心地を実現するには、現時点では人間のほうが早く・精度も高い。

ツールの実装

ツールはフルAIと言えど、事前に細かく設計し、以下のような図などを交え、言葉を尽くして丁寧すぎるくらいに指示をした。
結果的に8割くらいは意図したものがあがってきて、そこからは実際に使いながら細かく調整を重ねた。
ちゃんと伝えたらちゃんと応えてくれるAIは、気持ちがいい。

AIへの指示につかった図

これまでであれば、ツールをつくって力尽きて、ツールを実際に使うパートは他のメンバーに依頼していたところが、今回は自分一人でやり切れた。
AIに何を任せられて、何を任せられないか、の見極めをしたかったというのもある。

パーツごとに切り分けた素材

わかったこととしては、イラストをツールに適した形で分解しつつ部分的に描き足していくphotoshop作業が一番任せられなかった = 人力でやるしかなかった。
明確にゴールが言語化・数値化できない以上は、今のところは難しいということだろう。

「つくってる感」について

「AIによってつくる喜びが失われる」説。
自分もこれにくらってきた自覚があるが、本プロジェクトでは意外にも「つくってる感」が得られた。
それは自分でいちからコードを書いて出来上がっていく喜びとは当然異なる。
それでも少しだけ救われたのは事実。

思いつく → 設計する → 実装する

このプロセスにおいて、細部がAIに置き換わっても、全体としてやってることは同じ。「つくる」は変わっていないのだと気づいた。
これは、自分がもともと職人プログラマー的気質が薄かったという面もあるかもしれないが、つくる過程で必要だった創意工夫の余地は十分に残されている、と希望が感じられたのである。

おわりに

実装期間中は「誰がこれをできるんだろう?」という疑問がずっと頭に浮かんでいた。
「誰でもできる」(99%)と「自分しかできない」(1%)を行ったり来たり。
AIを使えば近いことは多くの人ができる。でも、めちゃくちゃ面倒くさいし、専門知識や経験が発揮される瞬間は何度もあった。なにより「こんな感じのものを、こういう風につくろう」は自分の中からでてきたものに違いない。

「webサイトなんて、AIでポン出しできる/誰でもつくれる」
そういう意見が出るのも無理ないし、そう思う人の意識を変えることはできない。
だからって自分までそう考える必要はないのではないか。
人によって結果が変わる以上、自分がやらなくていいや、とは今のところ思えない。
先週見た映画のことや、歩いている時の足裏の感覚、そういったものが巡り巡って血の通ったアウトプットにつながると信じたい。
多少の強がりも含みつつ、今はそう考えている。

つくることではなく、課題の解決が目的です。ぜひお悩みからお聞かせください。

お問い合わせ

新着記事やお知らせ、イベント情報を、
メールでお届けしています。

ニュースレター