アイソメトリックのイラストを使った動きのあるサイトを作る手順を教えてください。
例えば下記のサイトのようなものを作る場合に必要な知識と制作のざっくりした手順を教えてください。
https://www.borraginol.com/town/
※当方、html cssしかわからない初心者なのですが、これからいろいろと勉強していきたいと思っています。
svg?canvas?など、聞いたことはあるのですが、詳しくはわかりませんが、こういった技術を使うのでしょうか?
手順としては、イラレやフォトショで、画像を制作してから、動きをつけるのでしょうか?
初心者が制作する場合の手順と必要なスキルを教えてください。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
このサイトに限って言えば、PIXIJSを使用していますね。
PIXIJS → https://www.pixijs.com/
また、webpackも使用しています。
webpack → https://webpack.js.org/
そして、画像を作成してから動きを付けています。
今言ったことはすべて、ブラウザで「F12」キーを押して
開発者ツールを開くとわかることです。
ボラギノールタウンは人形の動き以外は、
HTMLとCSSと画像ファイルだけで制作できると思います。
モーションGIFを使えば人形も再現できるかも。
SVGは画像ファイルです。中身は主に方向と座標のデータで構成されています。
PNGも画像ファイルです。中身は点の集まりです。JPGとの違いはベタ塗に強いこと。
JPGも画像ファイルです。PNGとの違いは現実世界の描写に強いこと。
htmlとcssと画像だけではなくて、
同レベルのサイトを作るなら、まずはnode.jsを学び、
canvasを使用するならhttps://createjs.com/
WebGLを使用するならhttps://www.pixijs.com/
だと思います。
詳しく教えていただき、ありがとうございました。
動きをつけるにもいろいろな手法があり、戸惑っていました。
開発者ツールも確認してみます。
node,jsは、聞いたことぐらいしかないので調べてみます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- その他(プログラミング・Web制作) python コードについて(初学者です) 3 2023/07/20 14:44
- IT・エンジニアリング 開発対象となるアプリケーションの帳票を,一目見さえすれば,必要なテーブル構成は一瞬で思い浮かぶスキル 2 2023/07/23 03:55
- Oracle 開発対象となるアプリケーションの帳票を,一目見さえすれば,必要なテーブル構成は一瞬で思い浮かぶスキル 1 2023/07/15 11:27
- Gmail mailソフト[sylpheed」にgmailアドレスを設定する方法 1 2022/07/24 19:54
- 据え置き型ゲーム機 キン肉マンゲームで「順逆自在の術」は、すごく表現が難しかった? プログラミング 1 2023/03/23 16:53
- その他(IT・Webサービス) 動画が多い(容量が多い)Webサイト作成 1 2023/04/08 17:42
- その他(料理・グルメ) 大至急です! 酵母菌、その他発酵材料を使わない古代?からあるパンの作り方知ってる方ご教授願います! 1 2022/04/12 22:21
- 数学 順序集合における「反射律」の役割について 9 2022/05/09 23:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
どこにもフォーカスを当てたくない
-
C# ReadOnlyのTextBoxで
-
F503iにSVって表示されてるんで...
-
ユーザーフォームのSetFocusが...
-
エクセルVBA テキストボックス...
-
コマンドボタンのEnterイベント...
-
業務に差し支えのないテンキー...
-
他の人には声だして挨拶してる...
-
小学校で遊ぶてんかのルールに...
-
VB.NET ボタン押下で一つ前の...
-
テキストボックス入力後、警告...
-
Windowsアプリケーションのフォ...
-
アクセス フォーカスの移動...
-
矢印(左右)キーでイベントを...
-
GridViewでハイライトを使用し...
-
フォーカスを移動させない方法
-
池袋サンシャイン通りでキャッ...
-
タブコントロールのフォーカス...
-
facebookの「いいね!」ボタン...
-
FLASHのホムペ作成について(初...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
どこにもフォーカスを当てたくない
-
エクセルVBA テキストボックス...
-
他の人には声だして挨拶してる...
-
ユーザーフォームのSetFocusが...
-
炊飯器のセットの音と出来上が...
-
C# ReadOnlyのTextBoxで
-
業務に差し支えのないテンキー...
-
GridViewでハイライトを使用し...
-
コマンドボタンのEnterイベント...
-
矢印(左右)キーでイベントを...
-
油性マジックの消し方
-
OPPO A54 5Gを使っています。 ...
-
Accessの更新後処理で特定の条...
-
VBAでのユーザーフォーム上...
-
池袋サンシャイン通りでキャッ...
-
VBAのExitイベントについて
-
MFCでコンボボックスを選択不可...
-
中古本の店名ハンコの消し方
-
マイクラのマルチサーバーが起...
-
スプレットシートでフォーカス...
おすすめ情報