コードを書いて様々なプロトタイプを作るのに時間がかかる
これは当たり前のことすぎるので誰でも納得するんじゃないだろうか。 例えばFigmaでワイヤフレームも作らずにコーディングを始めたら大変な事になる。あれ、ここのパディングとマージンは何にしたら、全体のデザインに適度な空間が生まれてバランスよくなるんだろう、調整するために全部のマージンとパディングの箇所を探して数字を入れてブラウザで見られるようにする。それだけで一苦労だが、Figmaには制約（Frameのconstraint機能）があるしオートレイアウトもある、既に決まっている配置を変えずに透間を調整することは簡単に出来る。それと同じことがアニメーションでも起こる。
Animationの実装はエンジニアに丸投げで良いのか
Animationをスケッチしてこういう風にコーディングしてと頼んだだけで、エンジニアはアニメーションをデザイナーが考えた通りに実装出来るだろうか。それは無理だろう。なぜなら、アニメーション技術は何でも出来るわけじゃないので、エンジニアはデザイナーの指示を最も手軽な実装方法で実装して、これ以上は実装が複雑になるので作れませんと言って出来たサンプルを見せにくるだろう。実際のところ、アニメーションのコーディングは複雑なので、具体的なイメージの詳細がないと、どうやってコーディングするのかエンジニアは調べようがない。ネットには山ほどサンプルコードが転がっているが、具体的なイメージがないと、エンジニアは複数の技術をサンプルコードから盗んで実装することなんて出来ない。
どんな経験豊富なエンジニアでも全ての実装方法のアイデアを一人で考え出せるわけじゃない
私は一流ウェブデザイナーですら、自分のクライアントの希望と種似たようなサイトをリサーチしたり、自分のお気に入りのデザインのストックを普段から集めている事を知っている。実際に沢山の優れたウェブデザインを集めたサイトがネットに存在することからも、それは私のような未経験のデザイナーにも分かる事実である。エンジニアも似たようなことをする、例えばGitHubに求めているようなコードはないか、GSAPだったらCodePenに使えるサンプルはないか、自分の過去にライブラリの実装方法を学ぶために真似て書いたコードに使えるものはないか探す。そしてその実装方法を盗んでそれをデザイナーが求めるデザインに適応するにはどんなアイデアを足せばいいか考える。ここで実際にコーディングして思いついたアイデアを試す段階に入る。だからコードをグループで共有して分担して作業をするためのツールだったバージョン管理システムだったものをネットに載せた時に、誰でも見られるようにしたり、コードのコピーを作って改良して公開する機能が組み込まれて、そこでコードを公開することがエンジニアの技術力の証として見られてすらいるのである。
様々な簡易ツールがあるのにAfterEffectsを使うのか
それはAfterEffectsがモーションデザインにおいて他の追随を許さないほどに高機能な業界標準ツールとなっているからである。AfterEffectsは他のFigmaのファイルを読み込める簡易ツール、例えばJitterやPrincipleに比べて学習コストが多機能ゆえにかなりかかる。しかし、JitterやPrincipleは他にもいくつもあって、何年も前から存在する。どれもFigmaのように業界標準とまでいえるソフトまでシェアを取得していない。つまり、どのツールを選択しても、そのツールが今後もシェアを増やして、機能を追加し続けて、自分の使い慣れた環境が存続するか誰にも分からない状態である。ところがAfterEffectsは違う、動画制作業界で唯一無二のツールとして確固たる地位があり、それを使うウェブデザイナーは基礎を学ぶのに20時間ぐらいかかったとしても、それを応用して、ウェブアニメーションの実装技術が変わっても十分に対応可能なアニメーションのモックアップを作り続けることが出来る。それはウェブ固有の技術を標的に作られたツールではなく、ウェブ技術の変化に左右されない
Webアニメーションは一時の流行ではない
現在、多くのウェブアニメーションを使ったサイトが当たり前のように作られるようになった。これをFlash時代の再来だと嘆く必要は全くない。なぜなら、これは技術移行が起こったからに過ぎない。Flashがウェブで使われてた時代からウェブアニメーションの需要は確実にあったが、モバイル回線やモバイル用デバイスのCPUやそれを動かすためには非力過ぎた。そこでAppleはFlashをスマートフォンに非搭載として、Flashは寿命が尽きた。しかし、モバイル回線用とデスクトップアプリ用にサイトを２つ作らなければいけないFlashのような技術は制作者にとっても手間がかかる。当時の技術的限界とは異なり、現在のWebアニメーションはHTML、CSS、JSに加え、CanvasやSVG、WebGLといったW3C標準技術に基づいており、あらゆるデバイスで安定して動作することが前提になっています。こうした標準技術は、特定ベンダーに依存せず、オープンな形で進化を続けています。確かにCanvasやWebGLを用いた高度なアニメーション表現は学習・実装コストが高いため、現時点ではCSSアニメーションやGSAPなどのライブラリが主流です。しかし、WebGLは3D表現やインタラクティブな体験設計において重要な技術であり、今後メタバースや仮想空間への展開が進む中で、Web上での3D表現の標準となることは間違いありません。これは私自身にとっても、学ぶ価値のある技術だと感じています。さらにFlashの時代と違って、モバイルでは動画の配信を止める、画像を複数読み込まないと見せられないアニメーションは止めるという事は、モバイルサイト用に調整をかける、つまりレスポンシブなサイトを一つ作ることで、最初からHTML版とFlash版用意するのとではかかる手間が全然違います。
私はいつも勉強しすぎて失敗する
成果物がないと評価されないのがデザイナーの業界で、障害者雇用すらも落ちる私がAfterEffectsやThree.jsのような習得に時間のかかる技術を覚えるのはリスクが高い。実際に私は過去に4年間プログラミングを勉強したがActionScriptのデベロッパーに慣れなかった経験をしたし。2年間バックエンド技術を学んだのに１つしかポートフォリオに載せられるサイトが出来なくて、エンジニアを諦めてきた。そしてフロントエンジニアリングをもう就職することは関係なく、ただ学んでいた。そんな時にNext.jsやShade/uiといった技術や画像生成AIやWebApplicationのモックアップ生成AIに出会って考えが変わった。エンジニアの苦労も知っているが、高校と中退ではあるがデザインを学んできた私が、優れたエンジニアの作ったライブラリを活用してコーディングの手間を省いたり、AIに苦手な言葉でイメージは伝えられてもヴィジュアルイメージにすることを頼れば、年齢を問わず仕事が可能なデザイナーのほうに可能性があるんじゃないか。エンジニアとして必要な技術は一人で学ぶ事に限界があった。でもデザインなら独学で未経験からフリーランスになれるんじゃないかと考えたのである。
初心者はランディングページだけ作れれば仕事が取れるのに無駄じゃない
そう、実際のところデザインが得意な人にとって、アニメーションの実装やモックアップなんて後回しで良いのである。ところが私はビジュアルのアイデアを出すのが不得意だったので美大を中退した経歴を持つ人である。今更デザイナーを目指すには何か武器が必要である。その武器をアニメーションの持つ人を惹きつける力にしようと私は考えている。だからこんなに遠回りをして、成果が出せずにいる。自分でも1年頑張って無理だったら諦めようと思っているが、まだ諦めきれないので主治医に地道に働けとしかられる始末である。地道に働くことは私に残された最後の将来への希望を断ちきることを意味する。残るのは誰にでも出来る障害者雇用、しかも障害者雇用は競争率が高いので私の経歴では事務職などは難しい、人が嫌がるような仕事を我慢して何も希望もなく毎日を美味しい食事と寝る時間があることだけを楽しみに生きていく事を大切にすればいい。障害者なんだから仕方ない、そう簡単に好きな事や過去に積み上げてきた努力、自分の唯一得意なパソコンでの作業を捨てられない私がいる。データ入力は無理だ、障害特性からミスが遅く、スピードが遅く、直ぐに辞めさせられる事が不安で挑戦出来ない。
補足：
尚、私はプログラミングを学習した経験は6年以上に及ぶが、プログラマーとして仕事をした経験はないので、私がやっていることを他のエンジニアも実行しているのかをChatGPT 4Oに確認した上で記述していることを付け加える。4Oはよく間違えるので、あなたの会社にいるフロントエンド担当のエンジニアに確認するのが一番確実だろう。恐らくエンジニアはこう答えるだろう、AfterEffectsのモックアップがあって細かい動きが分かれば、それに合わせた実装方法を調べて実装出来ますよ。なぜならエンジニアの世界にはこういう言葉がある。機械の再発明は時間の無駄だ。つまり既に誰かが先に作ったものと同じものを自分が作っても意味がないということである。
また、AfterEffects自体を私が学習中なので説得力のあるUIモックアップを示せなくて申し訳ありません。AwwwardsのAcademyにAfter effectsのUIモックアップの作り方のチュートリアルはいくつも載っているので、そちらをご覧になって下さい。https://www.awwwards.com/academy/この記事はAwwwardsのAcademyのトレンドを見て考えたことを書いたものです。
