4009 Designer's Book

378

本

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

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

#アニメーション

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

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

AEでメリーゴーランドを回そう！

みなさん、こんにちは！株式会社FORKの、webデザイナーのNorishioです。気がついたらもうバレンタインも終わり、もうすぐ3月･･･。最近時間に取り残されている気がする、Norishioです(´ー｀) さて、今回は動画チームの記事を書いていきます～！（ウォークサイクルの記事は面倒で後回しに‥。すみません(T_T)）内容はある程度AEの基本操作ができる方対象。先日インスタで公開した動画を用いて解説していきます。ついでにどう作っているかも載せておきます。とい

マウスを使ってイラレとAEでアニメは熱い？第2回

みなさん、こんにちは！株式会社FORKの、webデザイナーのNorishioです。今回はオリジナルキャラのキーフレームアニメーション作るよ！の第２回です。イラレで素材の準備2（応用編。ループ背景など）ということで、アニメーションの前の準備回になります。全3回で終了する記事です。 ▼1回目はコチラ ◆背景作成今回はループ背景要素として木やちょうちょなどを作ります。ちなみに背景っていうと後ろにある風景と捉えがちですが・・それだと私がつまらないので、前景・中景・

Figmaでマイクロインタラクションを作成する

こんにちは！nabeです。今回はFigmaで「マイクロインタラクション」を作成するにあたって、例を用意し簡単な手順についてご紹介できればと思います。そもそもマイクロインタラクションって何？DanSaffer氏の書籍「マイクロインタラクション－UI/UXデザインの神が宿る細部」より、以下が記されているようです。ちょっと難しいですが、ユーザーとのコミニケーションの一つで、ユーザーが行った動作をわかりやすく伝えることことができます。例としては、ハートのいいねボタンを押

マウスを使ってイラレとAEでアニメ第1回

みなさん、こんにちは！株式会社FORKの、webデザイナーのNorishioです。今回はマウスを使ってイラレとAEでアニメーションをつくりたいと思いますwあ、はい。なかなか記事がまとめられなかったため、急遽ストックを掘り起こしました(*´з`)当時はマウサーだった歴史が感じられますｗちょっと悩んだのですが、動画部の記事ではなく単独の記事にしています。（動画部的にはおそらくもうこういう内容見ても勉強にならないなとｗ） Adobeのソフトでオリジナルキャラのキーフレー

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

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

AEとBlenderでKV動画つくってみた。

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。最近気が合う友達のたいせつさを身にしみて感じるようになりましたｗ大人になるってこういうことなんだなと思います(゜-゜) さて今回の記事では、先日公開されたFORKコーポレートサイトのKV動画の画面の作り方をざっくりまとめたいと思います。まえにCinema4D Liteの記事書いていたのになんでBlender？ってなった方には言い訳をしておきますｗなどの理由から今回は断念しました…。

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

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

Cinema4DLite2023さわってみた。

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。今月は月末ギリギリの投稿ですｗみなさんはいかがお過ごしでしょうか。わたしは最近新しいことを始めたいと意気込んだものの、自分らしくゆっくり進めていかないと続けられないなとスローペースでこちょこちょしています。みんないろいろ頑張れていてうらやまねたましい、1寸にも満たない小さき人間です。･･･春ってそういう季節ですよねｗ After EffectsやPremiereなど案件やアウトプットで

デザイナーズブックリスト -Norishioが選ぶ3冊-

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。最近は暖かくなってきましたね。ちょっと買いすぎてしまったお洋服をこれから着る機会があると思うと嬉しかったりしますｗそれとまたすごくプライベートな話ですが･･･久しぶりに全然遊べていなかった友人と電話で盛り上がり、遊ぶ約束を一気にとりつけましたｗ（´∀｀*）ｳﾌﾌわたしの話はさておき、３つの観点からおすすめの本を紹介していこうと思います。こちら社内企画で「フォークのデザイナーたちそ

AEでペイントバズーカーを打つ！

みなさん、こんにちは。株式会社FORKの、webデザイナーのNorishioです。 …いつもわりとニッチな記事を書いているNorishioですｗ最近blenderをさわれていないです…(´ー｀)かわりにaftereffectsの方よくさわってます。さわらない間にどんどん忘れていく…！w習慣って大事ですね。さて、今回はコチラのバズーカーを打って、ペンキが壁にぶつかるアニメーションをAfter Effects（AE）でつくっていきたいと思います。･･･うーんちょっ

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

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

Figma plugins.3[LottieFiles]のご紹介

こんにちは、株式会社フォーク WEBデザイナー在住の4009_danです。 Figma pluginのご紹介です！ Lottieとは？Lottieアニメーションをご存じでしょうか？ Lottie（ロッティー）は民泊サービスなどを展開している会社・Airbnbが作ったアニメーションライブラリです。高い解像度を保ったまま、サイズの拡大・縮小ができ、GIFやMP4よりもファイルが軽いため使いやすさが特徴です。使い方はLottieアニメーションを検索し、「Insert as

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

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