アイソメトリックのイラストを使った動きのあるサイトを作る手順を教えてください。

アイソメトリックのイラストを使った動きのあるサイトを作る手順を教えてください。
例えば下記のサイトのようなものを作る場合に必要な知識と制作のざっくりした手順を教えてください。
https://www.borraginol.com/town/

※当方、html cssしかわからない初心者なのですが、これからいろいろと勉強していきたいと思っています。
svg?canvas?など、聞いたことはあるのですが、詳しくはわかりませんが、こういった技術を使うのでしょうか？

手順としては、イラレやフォトショで、画像を制作してから、動きをつけるのでしょうか？
初心者が制作する場合の手順と必要なスキルを教えてください。
よろしくお願いします。

No.1 ベストアンサー 回答者： Gen_bamboo 回答日時： 2019/10/13 21:56

このサイトに限って言えば、PIXIJSを使用していますね。

PIXIJS → https://www.pixijs.com/
また、webpackも使用しています。
webpack → https://webpack.js.org/
そして、画像を作成してから動きを付けています。

今言ったことはすべて、ブラウザで「F12」キーを押して
開発者ツールを開くとわかることです。

ボラギノールタウンは人形の動き以外は、
HTMLとCSSと画像ファイルだけで制作できると思います。
モーションGIFを使えば人形も再現できるかも。

SVGは画像ファイルです。中身は主に方向と座標のデータで構成されています。
PNGも画像ファイルです。中身は点の集まりです。JPGとの違いはベタ塗に強いこと。
JPGも画像ファイルです。PNGとの違いは現実世界の描写に強いこと。

ｈｔｍｌとｃｓｓと画像だけではなくて、
同レベルのサイトを作るなら、まずはnode.jsを学び、
canvasを使用するならhttps://createjs.com/
WebGLを使用するならhttps://www.pixijs.com/
だと思います。

この回答へのお礼

詳しく教えていただき、ありがとうございました。
動きをつけるにもいろいろな手法があり、戸惑っていました。
開発者ツールも確認してみます。

node,jsは、聞いたことぐらいしかないので調べてみます。

ありがとうございました。

お礼日時：2019/10/14 14:36