フォーチュリングサロン&スクールBenekoのウェブサイトリニューアルに際し、トップページファーストビューのモーショングラフィックスを制作しました。
Fortuling®︎のロゴに込められた意味をしっかり残しつつ、ダイナミックな動きをつけることでアイキャッチなファーストビューになるようにデザインしました。
モーションデザイン詳細
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV_PC.gif)
Fortuling®︎のロゴタイプに9個の球体が入り込み、Fortuling®︎の要素を取り込んだ球体に変化し、その9個の球体がランダムに動きながら算命学の陰陽占図の3×3のマスを作ります。
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV1.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV2.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV3.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV4.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV5.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV6.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV7.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV8.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV9.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV10.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV11.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV12.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV13.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV15.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV16.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV_PC2.gif)
そのマスにFortuling®︎のロゴが滑り込み、スライドパズルのようにマスからマスへと移動します。そして最後に算命学の「核」や「灯台星」となる左上のマスにロゴがバウンスしながら着地します。
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-1.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-2.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-3.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-4.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-5.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-6.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-7.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-8.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-9.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-10.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-11.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-12.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-13.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-14.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-15.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-16.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-17.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-18.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-19.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-20.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-21.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-22.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-23.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/LOGO_S_2-24.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Fortuling_FV_PC3.gif)
最後に、ロゴをスライドさせキャッチフレーズをポップアップさせて完成です。
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-1.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-2.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-3.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-4.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-5.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-6.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-7.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-8.jpg)
![](https://anecca.com/wp-content/uploads/2023/12/Title_web_1-9.jpg)
2つの学問を融合させたフォーチュリング®︎によって導き出された個性や強みは、誰一人として同じではない、あなたにとって唯一無二のものというコンセプトを表現しました。
![](https://anecca.com/wp-content/uploads/2023/12/Mobile_FV_Web.gif)