WEBデザイン提案を、AEでやってみた
こんにちは。
デザイナーのTです。
ナディアでは主にXDやPhotoshopを使用し、サイトのデザインをしています。 （最近は事情によりご無沙汰ですが。）
サイトを作っている時、
「ここにこんな動きつけたい！」
「このアニメーションの動き、どう説明しよう。」
「イメージしている動きの参考がみつからない」
と、悩んでいた時がありました。
そんな時、、
「おや？待てよ？
静止画で説明するのも、参考見つけるのも難しいなら
動画で作っちゃえば早いじゃん！」と気づきました。
「見本がなければ、自分で作ればいいじゃない！！！」
ということで、今回はWEBデザイン提案をAfter Effectsを使ってやってみた！という紹介をしようと思います！
※AEの使い方を紹介するものではございません。
01 AEって何？
Adobeのソフト、「After Effects」 ご存じの方もいらっしゃるかと思いますが、「動画編集ソフト」です。
You Tubeの動画でよくみる、「モーショングラフィックス」から、SF映画などでみる「VFX」など、色々できちゃう「最強、動画編集ソフト」です。
ちなみにですが、私がAEを使えるようになったのは専門学生時代。
動画の授業があり、その時にAEを使うことにハマり、趣味でリリックビデオや友人のお誕生日動画を作ったりなど楽しんでいます！
早速、次から私がやったWEBデザイン提案をご紹介します。
02 どんな提案をしたのか
私が案件で実際にやってみた事をご紹介します
・パララックス表現
私が案件で作成したのはスクロールしていくと、ひと筆書きで上から下に線が描かれていくというものです。
自分でイメージするためにも作ってよかったと思ったのですが、一番はお客様のご要望ということもあり、実際にお客様にもお見せでき、イメージをわかっていただけて意見も聞くことができたので、スムーズに進められたかと思います。
この時にやってよかったなと一番思いました。
・ローディングアニメーション
サイトのイメージに合ったモチーフや素材を使用したローディング画面を作ることになり作成しました。
シンプルで一般的なアニメーションのものでも色や形、大きさも自由に変更ができるのでとても良かったです。 複雑なローディングアニメーションの場合は、AEでやったほうがいいのですが、 シンプルな動きのものはXDのプロトタイプモードを使用して画面をつなげて作成のほうが早くできました。
上記が提案したことのある例ですが、調べてみると After EffectsでUIアニメーションを作成している方もいらっしゃいました。
こちらのSHUNYAさんという方の記事では使い方も記載していらっしゃるので、興味のある方はみてみてください！
03 メリット・デメリット
01でも記載しましたが、個人的なメリット・デメリットをまとめます。
・メリット
・自分で好みに作れるのでよりイメージに近い動きを提案ができ、社内にもお客様にも見せることができる。
・参考サイトを探す手間が省ける。
・（超個人的）作るのが楽しい。
・デメリット
・慣れていないと時間がかかる。
・簡単なものは参考サイトやXDのプロトタイプモードで作成したほうが早い場合がある。
AEで作るのはとっても楽しいのですが、のめり込みすぎると時間が経つのが早いです。 提案するものによって、どのやり方で作るor見せるほうが早いのかを判断する必要があるのかなと思いました。
あくまで、提案や見本でお見せするものなので、ある程度のゴールを決めて作業するようにしています。
04 まとめ
案件で取り入れてよかったなと思ったことをとっても簡単にまとめました。
After Effectsなどの動画編集ソフトを使うっていうと、（難しそう・・・）などハードルが高いイメージになってしまうと思うのですが、 想像より全然簡単です！
After Effectsが開ける方は、是非やってみてください！
おまけ
私がよく見るYou Tubeチャンネルやサイトを紹介します。
・TORAERA DOUGA
他にも調べてみると海外の方の動画も出てきて、とっても勉強になります！ 見るだけでも楽しいので、是非見てみてください！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？