canvasやsvgアニメーションのヒーローヘッダーの作り方

Question

このようなサイトはどうやって作られるのでしょうか。
どんなツールで作られてるのかご教授頂ければ幸いです。

まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。

Answer 1

いろいろな方法があると思いますけど、
私だったら、まずイラレでデザインを作ります。
ファイル→書き出し→スクリーン用に書き出しsvg化して、ライブラリーを使用してアニメーションさせます。
アニメーション後、写真と切り替えます。

ライブラリー

Vivus.js
ライン描画のアニメーションに特化した軽量な JavaScript ライブラリー。

Snap.js
Adobe 社が開発した SVG アニメーションの JavaScript ライブラリー。

Lazy Line Painter
Vivus.js 同様、ライン描画に特化した JavaScript ライブラリー。

公式ページに SVG ファイルをドロップダウンしてアニメーションを加え、コードを出力することができます。
SVG アニメーション初心者でも扱いやすいソフトです。

この程度であればVivus Instantで再現できると思いますよ。
誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れます。
https://maxwellito.github.io/vivus-instant/