4009 Designer's Book

378

本

株式会社FORKのデザイナーたちが普段考えてる事や、デザインへの取り組みなど、多種多様なテーマで発信しております！

運営しているクリエイター

#モーショングラフィックス

AEの小技！ワクワクするアニメーションをつくろう

みなさん、こんにちは！株式会社FORKの、webデザイナーのNorishioです。ギリギリ４月になっちゃいましたが、動画チームの記事を描いていこうと思います(´ー｀) 今回はライト回です。先日インスタで公開した動画を用いて解説していきます。 ▼今回使うアニメーションは以下の4点です。０１　レーザービーム　～行け！パスのトリミング！！～ではサクッといきましょう！素材はイラレでサクッと作っておきます。 AEでコンポジションを作成し、イラレデータを読み込みし配置し

AEでちょうちょが飛ぶイラストアニメ

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。聞いてください･･･！気がついたら知らない間に７月も末だったんです！ビックリですよね･･･。いや、もうホラーかと思いました(゜-゜)やらなきゃいけないことほぼ終わっていなくて･･･((T_T)ｶﾅｼｲｷﾓﾁｦﾊﾞﾈﾆｶﾞﾝﾊﾞﾘﾀｲﾄｵﾓｲﾏｽ･･･。さて今回の記事では、先日上げたInstagram動画の作り方をざっくりまとめたいと思います。０１　パーツわけ今回もパーツわけを見

AfterEffects1年生が脱初心者のためにやったこと

みなさん、こんにちは。もう5月も終わりですね。さて、私が初めてAfter Effectsに触れたのは一昨年の夏、社内研修でのことでした。その後、社内の動画チームに所属してちまちまと学びを積み上げること約1年半。全くの初心者の状態から、ある程度思い描いたアニメーションを実現できるレベルまでスキルアップしてこれたかなと思います。そこで今回は、これまでどうやって学習してきたのか、インプットの方法や初学者に特におすすめのチュートリアルなどをまとめてみたいと思います。これ

AEでリング状に回転するテキストアニメーションをつくる

みなさん、こんにちは🐾 今回は、社内の動画部のレクチャー会（Norishioさん記事参照）で取り上げたリング状に回転するテキストアニメーションの作り方をまとめたいと思います。見た目より簡単なのでぜひ挑戦してみてください！テキストレイヤーのアニメーターについてこのアニメーションでは、文字をアニメーションさせる機能「アニメーター」を使用します。 AEにもともと入っているテキストアニメーションのプリセットもこの機能を組み合わせて作られているようです。テキストレイヤーの中

AEで文字をふわふわ浮かせる

みなさん、新年あけましておめでとうございます。株式会社FORKの、webデザイナーのNorishioです。みなさん、お正月はいかがお過ごしでしたでしょうか？わたしはお正月はゆっくり過ごせました(*´ω｀*) blenderの勉強は合間にときどきやっていますｗ(´ー｀) オリジナルでいろいろ作れるようになりたいな･･･道のりは長い･･･。さて、愚痴はさておき… 今回はコチラの雪を降らせたり文字をふわふわさせる、アニメーションをAfter Effects（AE）でつく

AEでアイソメトリック表現をつくる

こんにちは、みなさん年末年始はいかがお過ごしでしたか？私はみかんを30個食べました。さて今回の記事では、先日公開されたFORKコーポレートサイトのKV動画から、冒頭で使用したアイソメトリックな画面の作り方をまとめたいと思います。 3Dレイヤーを用い、カメラをアイソメの角度に配置することで作成できます。今回はアニメーションの作り方というより、アイソメトリックな画の作り方になるので、上の動画の角柱を例に挙げてご紹介したいと思います。では、さっそく作り方です☟ 1.

AEでグリッチノイズアニメーション！

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。最近は本当にさむいですね。何を言おうとしてたか、瞬間言葉を忘れるレベルでさむいです。（まだボケてないですｗ）今回はコチラのグリッチノイズを使ったアニメーションをAfter Effects（AE）でつくって行きたいと思います。０１　素材準備アニメーション作成前にメモやかるいイメージボード、絵コンテなどを作ってみてもよいかと思います。動きが決まれば、つぎは絵を準備します。絵は動かした

AEで朝食アニメーションの作り方

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。いかがお過ごしでしょうか。たまにあたらしいことをはじめたい欲にかられることはないでしょうか？ｗわたしは最近、blender入門動画をみながらそのまんまですが…つくってみましたｗしずかに勉強しとけよなんですが、言いたくなってしまうかなしい？体質なのでさらしますねｗそれと、3D Bibiさんの動画がすごくわかりやすかったので紹介しておきます～！(∩´∀｀)∩ ﾌｩｰ!! いきぬきにチ

AEで水中ぷかぷかアニメーション

みなさん、こんにちは！株式会社FORKの、webデザイナーのnorishioです。ことしの夏はほんと猛暑ですね…。最近はエアコンにたよりきりで電気代がこわいですｗ我慢していたのがうそのよう…。こわい現実から目をそむけ、今回もfork動画部の記事を書いていきます。 FORKの公式アカウント ▶FORKのインスタはこちら ▶FORKのマガジンはこちらフォロー・スキ・いいね大歓迎です(*´з`)ノ …記事を書いているnorishioってどんなやつ？

【AE】 CC Page Turnでページめくりのアニメーションをつくる

みなさん、こんにちは。 #Fork動画部5本目の記事は、After Effects標準エフェクトの「CC Page Turn」を使ったページめくりのアニメーションをご紹介します。完成形がこちら！ 7/10の参院選に合わせて、日めくりカレンダーのように紙をパラパラとめくる動画にしてみました。以下、つくり方です。 1. 素材を用意今回はイラレで用意しました。ページごとにレイヤーを分けておきます。角度や配置はAE上で調整するので紙面に載せたい内容を作成すればOKで

「レンズ補正」でつくるワープのトランジション

こんにちは、今月からFork動画部の活動の一環としてnoteを書くことになりました。私自身、脱初心者を目指してまだまだ勉強中ですが、同じく勉強中の誰かの制作のヒントになればという思いで発信していきます…！今回は、視界が歪んでワープするようなトランジションを紹介します。使用するのはAE標準エフェクトの「レンズ補正」です。次のシーンにぐっと引き込まれるようなインパクトのあるトランジションですが、案外簡単につくれてしまいます。レンズ補正とは？レンズ補正は、その名の通

カラフルなシェイプアニメで遊ぶ

最近よく見かける「カラートランジション」で遊んでみました。 AfterEffectsを使いますが、SVGなどへの応用を見据え、基本的にはシェイプアニメーションで「シンプルだけどチープに見せない」動きのパターンを作成しました。 1. 事例ベンチマークまず、参考事例を見ていきましょう。 ①ダイハツ「Light you up」ロゴ一つ目はダイハツ「Light you up」のロゴアニメーション。サークルが弾けてロゴが飛び出てくる動きがとてもポップで印象的です。 ②ドコモ「a

モーションデザインでよく使う！トランジション覚え書き

動画やWebのアニメーションでよく使われるカット転換（トランジション）についてピックアップしました。「ここはふわっと切り替わります・・・」「あの一瞬パッと明るくなるやつ何だっけ・・・」そんな会話が少しスマートになりますよ。 1. ワイプ直線でさっと拭き取るようにカットAからカットBへ切り替わる。円形（カメラの絞り型）のワイプを用いたものを「アイリス」と呼ぶ。 2. フェードイン・フェードアウトフェードインはカットが徐々に現れる。フェードアウトは徐々に消失する。

After Effects覚え書き#5 Lottieでアニメーションアイコンを作ってみた！

動画制作の独学を始めてから、作ったアニメーションをどのようなワークフローでWEBサイトに取り込むことができるのかな？という実装面を色々調べていた時に、Lottieにたどり着きました！そんな時ちょうど、社内でも使い始めたデザイナーさんもちらほら出てきましたので、みんなの情報交換の役割も兼ねて、私も実際にLottieを使ってアニメーション作成→jsonファイル書き出し→実装までの流れを想定して、予習＆検証＆覚え書きをこちらにまとめておこうと思います！ Lottieって何？ど