目次
アニメーション完成図
導入
最後は
アニメーションなんだが、
Wixは
なるべくつけた方が良い
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
そうなんだ?
表示が結構重い傾向にあるから
アニメーションで
ローディングを誤魔化す算段だ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
でも、アニメーションでも
ページが重くなるよね
……それは確かにな?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
画像を事前に
軽量化していないからかな?
それは我々のせいではなく、
Bのせいだから俺は悪くない
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
男子C
全身立ち絵のアニメーション:グラインドイン
まず、全身立ち絵からやる
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
–
–
立ち絵をクリックして
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
![](https://sazano123.com/wp-content/uploads/2023/10/image-101-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
クリックしたら、
メニューが開くね
四角形が動いているような
マークをクリックして欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
分かった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-2-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
色々な動きが出て来たよ
そこのグラインドインを
クリックして欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
男子C
![](https://sazano123.com/wp-content/uploads/2023/10/image-3-5-1024x538.webp)
バストアップのアニメーション:フェードイン
次にバストアップをクリック
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
押したよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-4-5-1024x538.webp)
次に、また
動いている四角をクリック
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
![](https://sazano123.com/wp-content/uploads/2023/10/image-6-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
これはどれにする?
フェードインで
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
男子C
![](https://sazano123.com/wp-content/uploads/2023/10/image-7-5-1024x538.webp)
台詞、象徴する言葉のアニメーション:フェードイン
次は台詞部分をクリックして
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
クリックした
![](https://sazano123.com/wp-content/uploads/2023/10/image-8-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
動いてる正方形を押す?
正解って言ったら怒るだろ
なんていえばいい?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/3_144-1-300x300.png)
男子C
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
知らない面倒押すよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-11-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
男子D
次はどうする?
フェードインで!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
男子C
![](https://sazano123.com/wp-content/uploads/2023/10/image-10-5-1024x538.webp)
関連記事
-
エディタXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る① 新規登録編&データベース作成 前編 エディタXの登録方法、CMSとは、CMSの追加方法、コレクションの作成、データベースのフィールド追加、データベースに画像を追加する方法 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る② データベース作成 後編 データベースにステータスや年齢等の数字を入れる方法、タグ付けのやり方、リッチテキストの追加し方、アイテムの増やし方、段落の増やし方、データベースのバックアップの取り方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る③ トップページ作成前編 要素追加のやり方、ワイヤーフレームのリピーターの付け方、テンプレートの編集し方、余白の変更し方、プレビューのやり方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る④ トップページ作成後編、データセットの作成し方、コレクションの選択し方、要素とデータのセットし方、テキストの編集し方、フォントの変更し方、プレビューのやり方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑤ トップページの装飾前編 背景画像を付ける 画像を不透明にするやり方 レイヤーの使い方等、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑥ トップページの装飾後編 Unsplashの使い方、アニメーションの付け方等 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑦ 動的ページの作り方&動的ページの大枠を作る前編 ページの追加し方、コンテナの追加し方、レイヤーの使い方 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑧ 動的ページの大枠を作る後編 コンテナの作り方、コンテナの長さや高さの調整し方 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑨ 動的ページの画像とデータを紐づける編 データセットの選択、画像元の接続先の設定、CMSと動的ページを繋げる、レイヤーの使い方、EditorX
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑩ 動的ページの帯作成編 装飾の追加し方、装飾の色の変え方、装飾のサイズ変更し方、フォントのレスポンシブ対応の設定し方、EditorX
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑪ 動的ページのステータス作成編 コンテナの追加し方、コンテナの分割し方、自由に入力できるテキストのやり方、テキストのデータセットを外す方法、EditorX
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑫ 動的ページの性格概要作成編 装飾の追加、装飾の色の変更、装飾の影の付け方、レイヤーの使い方、リッチテキストの紐づけ方、データセットの選択し方、テキストの接続先の設定し方、EditorX
-
エディタXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑬ 動的ページの「次へ」「前へ」ボタン編集編 ボタンのテキスト編集し方、コンテナの色の変更し方、コンテナの色の半透明にするやり方、レイヤーの使い方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑭ ホバーアニメーション編 ホバーアニメーションの付け方、ホバーの付け方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑮ レスポンシブ対応編 レスポンシブ対応の作り方、レスポンシブ対応ボタンの場所、画面サイズによってレイアウトを変更する方法、スマートフォンから見たレイアウトの編集、デスクトップから見たレイアウトの確認 Editor X
-
EditorX、エディタX、WixSTUDIOでやりたいことが出来ない!と困ったら見るところ(アイコンの説明)
-
探索者一覧 サイトを作る!エディターXで作るキャラクター紹介ページや、創作PCまとめサイト、探索者まとめサイト、キャラクターまとめサイトの作り方、Wix系統のホームページ作成ツールEditorXの操作や使い方などのまとめ
–
–