Figma UI3 基礎 + 実務定着 超スピード完走コース
jyoung
Figma UI3バージョンで、基礎から実務まで体系的かつ、簡単でスピーディーに完走（修了）できるように構成されています。
入門
Figma, ui
📢 現在講師が運営している
UIUX ウェブ企画・デザイン・フロントエンド ブートキャンプ 修了生たちの
チームプロジェクトおよびパーソナルブランディング基盤のエージェンシー合格ポートフォリオ事例を公開します。
UIUXデザイナー就職のためのウェブポートフォリオを制作する実践講義です。
UIUXデザイナー！！ 単に UIUX 企画書 一つで 就職が可能でしょうか？
現実はそうではありません。
非専攻、未経験の就活生にとって実務現場の基準は思ったよりずっと高く、
単純な UIUX企画書とプロトタイプだけでは面接の機会さえ得ることが難しいのが現実です。
面接官がポートフォリオを見る時間はわずか 3秒から7秒 の間！！
この短い瞬間に目を引くことができなければ、チャンスは与えられません。
UIUXデザイナーとして合格するためには、UIデザイン、UXプロセスの理解、そしてインタラクティブウェブの実装能力まで一緒に見せることができなければなりません。
それではなぜ？ UIUXデザイナーにコーディング実装能力が必要なのでしょうか？
実務では新人に対して、完成された能力よりも「成長の可能性」を見て採用します。そしてその可能性はポートフォリオで決定されます。
そこでこの講義では、
単なるポートフォリオ制作を超えて、UIUXデザイナーであり、ウェブを実装できるデザイナーとして、実際の合格事例に基づいたポートフォリオ戦略とインタラクション実装方法を共に学習し、差別化された成果物を完成させて就職競争力を高められるよう設計しました。
また、この設計の方向性に基づき、継続的なアップデートを行っています！
📢 HRD修了生の生の声
📢 ブートキャンプ修了生の合格トーク
📢 大手エージェンシー合格パーソナルブランディング・ポートフォリオ事例
(1).gif?w=960)
📢 このような方におすすめです
GSAPのscroll Triggerを
使用して華やかなサイトを
制作したい方
エージェンシーに合格
可能なポートフォリオを
作りたい方
2023年の最新トレンドに
合わせた華やかなインタラクションを
実装したい方
GSAP Scroll Trigger
Animationの基礎から
応用まで学びたい方
学習内容 📚
🫡 이 강의는요!
- 2026年のエージェンシー合格ポートフォリオの事例を通じて、面接官を惹きつけるポートフォリオ制作方法を学習します。
- 単なる企画を超えて、就職にすぐ活用できるポートフォリオの構造と基準を理解し、
差別化された成果物を完成させることができます。 - また、海外のアワード受賞サイトや大手エージェンシーで実際に活用されている
GSAP ScrollTriggerをベースに、インタラクティブな実装まで習得します。
- Header領域のScroll Direction Eventを学ぶことができます。
- ナビゲーションバーがスクロール方向を検知し、下にスクロールすると消え、上にスクロールすると現れるイベントを作成します。
- SVGを活用したAnimation制作
- Splitting.jsを活用したMouseHover効果Animation制作
- Translate 3d属性を活用したText Animation制作
- SimplyScrollを活用して、背景に流れるバナーを制作できます。
- GSAPの ScrollTriggerを活用した、華やかなインタラクティブウェブを実装できます。
- Responsive Web(max-width: 1650px) 制作できます。
- Responsive Web(max-width: 1300px) 制作できます。
- Responsive Web(max-width: 800px) 制作できます。
- Responsive Web(max-width: 500px)制作できます。
- 1次_アップデート動画です。
- scrollTriggerに反応して現れる画像とテキストのアニメーションです。
- 2次_アップデート動画です。
- X軸にスクロールするギャラリーを制作してみました。
- 2次_アップデート動画 レスポンシブウェブ
- X軸にスクロールするギャラリー領域のレスポンシブウェブです。
- 3次アップデート動画です。
- Y軸にスクロールするギャラリーを制作してみます。
- 4次アップデート動画です。
- マウスポインターに追従する画像を制作してみます。
- 5次アップデート動画です。
- Y軸でセクションが固定され、サブセクションがスクロールされるインタラクションです。
- 6次_アップデート動画です。
- X軸に左右に揺れながらスクロールするギャラリーを制作してみます。
- 7次アップデートの動画です。
- スクロールすると挨拶するキャラクターを制作してみます。
- マウスに合わせて塗りつぶされるテキストアニメーションを制作してみます。
- Clip_pathで波打つテキストアニメーションを制作してみます。
- 8次_1.アップデート動画です。
- スクロールした時に横方向に無限ループするアニメーションの制作方法です
- Z軸に傾いて浮いている画像が、スクロール時に元の位置に戻って広がるように制作したアニメーションです。
- 8次_2.アップデート動画です。
- スクロール時にテキストに色が満たされていくアニメーションです。
- 9次_1.アップデート動画です。
- スクロール時にキラキラと進行するGSAP ScrollTrigger Animationです
- 9次_2.アップデート動画です。
- Position: Stickyを活用したZ軸にねじれるAnimation
予想Q&A
Q. この講義を受講すると、どのようなことが学べますか？
UI/UXプロセスを理解することができ、それに合わせた自身のポートフォリオを企画・制作できるようになります。また、現在実務に携わっている方であれば、よりトレンディでインタラクティブなレスポンシブウェブを実装できるようになります。
Q. 追加でアップデートされる内容にはどのようなものがありますか？
1. 実務で知っておくべきUI/UXプロセスと、これに基づいたポートフォリオの企画および設計方法
2. UI/UXデザイナー、ウェブパブリッシャー、フロントエンドエンジニアとして就職するためのポートフォリオ制作に適用できるリファレンス
3. トレンディでインタラクティブなウェブ制作に必要な応用例がアップデートされます。
4. より円滑な学習のために、J.youngが運営する「チャルナンウェブディ」オープンチャットに参加していただければ、
Figma、UI.UX、コーディング、ポートフォリオ制作に関する役立つヒントや無料ウェビナーのリンクなどを共有いたします。
オープンチャット名：잘난웹디（チャルナンウェブディ）
コード：jyoung
先生の講義は最高です！実務で適用されるさまざまなインタラクションをわかりやすく説明してください！さまざまなプラグインまで使用方法を教えてくれて、個人ポートフォリオの制作に本当に大いに役立ちます！
先生、もしかして現在YouTubeにある先生の講義と、InflearnにアップロードされているこのGSAP講義の違いは何でしょうか？
Webパブリッシャーとして就職を準備しながら、いつも悩んでいたのがまさに「どうすれば他の人との差別化できるポートフォリオを作れるか？」でした。最近のトレンドであるインタラクション効果をぜひ入れたかったのですが、独学ではどうしてもコツがつかめず... YouTubeを探してみても、何かが一つずつ抜けている感じで、かなり迷っていました。そんな時にJ.young先生のこの講座を聞くことになり、本当に人生最高の講座だと言いたいです！ ScrollTriggerを活用したアニメーションをただ真似させるだけでなく、実際のポートフォリオでどのように応用すればいいのか「コツ」をつかめるように助けてくださいました。例題も本当にトレンディで、講座に沿って作りながらも「わぁ、これ私のポートフォリオにすぐに使おう！」という考えが自然と湧いてきました。 特に講師の方が初心者の目線に合わせて一つ一つ説明してくださるので、私のようなコード初心者(?)も負担なく最後まで完講することができました。途中で詰まった時はコミュニティで質問すると、回答も親切にしてくださってとても感謝しています。おかげで、自分だけのポートフォリオに素敵なインタラクションを一つ一つ適用しながら、「あ、私にもこういうことができるんだ！」という自信まで得ました。 今では、全く面白みがなかった私のポートフォリオが、生き生きとして見る人の視線をぐっと引きつけることができるウェブサイトに変わりました。こういう講座、本当に自分だけ知っていたいほど最高です！ 講師の方、良い講座本当にありがとうございます。次の講座も楽しみにしています😊💖
J.young先生の講義をいくつか聞いた受講生です。 gsapスクロールトリガーはインタラクションが好きなデザイナーには学べない ライブラリの一つだと思います。しかし、デザイナーにとってはJavaScriptが 多少難易度がありますが、先生ができるだけ簡単に説明していただきました。 インフラでgsap講義をしている人は数分いますが、私はこの講義が一番好きです 聞いた理由は、デザイナーになじみがあるということです。 特にトレンディなシアンに基づいて学んでみると、学習の欲求がさらに盛り上がりましたㅎㅎ 👉コーディングに興味があるデザイナーの方には無条件にお勧めします。 👉ポートフォリオを今回新たに作ってくださる方にはぜひ一度聞いてみると役に立つと思います。 👉単純な関心があって聞く方には実務に応用が無条件になると思います。 良い講義を作ってくれてありがとう。💕 何よりも質問したら、できるだけ早く関心をお寄せいただきありがとうございます。
とてもお得です、本当に最高です。追加で提供される横スクロール適用によりポートフォリオも完成しました！
![[バックエンド/例外処理シナリオ/集計最適化]バックエンドポートフォリオと実務履歴強化戦略。オールインワンPART1講義サムネイル](https://cdn.inflearn.com/public/courses/335091/cover/1a19a4de-ec2e-4e26-a84e-28691e777020/335091.jpg?w=420)