inflearn logo
知識共有
inflearn logo

UIUXデザイナー就職のためのウェブポートフォリオ制作:パーソナルブランディング戦略

"2026年度 UIUXデザイナー | コーディングするデザイナー エージェンシー合格ポートフォリオ公開" 面接官の目を引くUIUXウェブポートフォリオを制作する実践講義です。 単なるポートフォリオ制作ではなく、インタラクションを活用した差別化された成果物で、 UIUXデザイナーとしての就職競争力を高められるよう設計されたカリキュラムです。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
Web Application
Web Application
Web Design
Web Design
Portfolio
Portfolio
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Web Application
Web Application
Web Design
Web Design
Portfolio
Portfolio

学習した受講者のレビュー

5.0

5.0

냠냠

27% 受講後に作成

まず! こんな方におすすめさせていただきます。 ✨何が問題なのかわからないが、本人のポートフォリオが銅だと感じる ✨デザイン感覚のない方 ✨ 動く要素を入れたい方 ✨ただ全く知らない方 国費教育中に本当に変な授業を受けた人です。 コードがなぜ戻ってくるのか分からないし、プラグインをアーケ使用するのかもしれないのにポポールを作ろうと.. そうして作ったポートフォリオは本当に今また振り返ってみるとあまりにも醜いです。とんでもない.. ✨しかし... 本当にジヨンサム講義に会ったのはとても感謝していました。 動的な要素を入れたいのですが、一人でどのように使用するのか。 ひとつひとつずつ知っても使用をしっかりできないので光が見えない。 特に✨スクロールトリガー✨に興味がある方なら本当におすすめ!お願いします。 みことばが少し速いと感じる時もありましたが、むしろサダムいっぱいで遅いよりも前よかったです。 (大韓民国人なら好き) ジヨンサム川の持ち上げのおかげで、要塞は勉強を再び最初から始めるという考えで聞いています。 他のクローンコーディング講義も聞こうとしています。最初はああ..私は従うことができますか?という気がしましたが… このように助けてくれてジヨンサムが教えてくれたノウハウの元に私だけの色を入れてポートフォリオ完成しました。 実務で使うたくさんの要素を学ぶことができて嬉しかったです。そして、講義もずっと追加してくださって…新しいトレンドに合った講義を作ってくださるのが、ただ教育のための陳腐な講義ではなくてもっと面白く聞いたようです。どこかでこんなにセンスあり、きれいなデザイン感覚で学べないようですね!とにかく本当におすすめです! ジヨンサムはとても感謝しています。おかげで一つ一つ再び学んでいます!おかげで道が見えます…。

5.0

조병민

100% 受講後に作成

Webパブリッシャーとして就職を準備しながら、いつも悩んでいたのがまさに「どうすれば他の人との差別化できるポートフォリオを作れるか?」でした。最近のトレンドであるインタラクション効果をぜひ入れたかったのですが、独学ではどうしてもコツがつかめず... YouTubeを探してみても、何かが一つずつ抜けている感じで、かなり迷っていました。そんな時にJ.young先生のこの講座を聞くことになり、本当に人生最高の講座だと言いたいです! ScrollTriggerを活用したアニメーションをただ真似させるだけでなく、実際のポートフォリオでどのように応用すればいいのか「コツ」をつかめるように助けてくださいました。例題も本当にトレンディで、講座に沿って作りながらも「わぁ、これ私のポートフォリオにすぐに使おう!」という考えが自然と湧いてきました。 特に講師の方が初心者の目線に合わせて一つ一つ説明してくださるので、私のようなコード初心者(?)も負担なく最後まで完講することができました。途中で詰まった時はコミュニティで質問すると、回答も親切にしてくださってとても感謝しています。おかげで、自分だけのポートフォリオに素敵なインタラクションを一つ一つ適用しながら、「あ、私にもこういうことができるんだ!」という自信まで得ました。 今では、全く面白みがなかった私のポートフォリオが、生き生きとして見る人の視線をぐっと引きつけることができるウェブサイトに変わりました。こういう講座、本当に自分だけ知っていたいほど最高です! 講師の方、良い講座本当にありがとうございます。次の講座も楽しみにしています😊💖

5.0

넴모

66% 受講後に作成

とても良い川のありがとう。 私はWebパブリッシャーを準備していました。履歴書を入れるためにポートフォリオを作ったのですが、私はCSSの知識でアニメーション効果を与えてもサイトがちょっとした。 ところが他人が作ったポートフォリオはなんと華やかなようで、あんな飛び出るアニメーションを一体どうやって作ったのか。 gsapを知った後、講義を探すJ.young先生を知りましたが、本当の私の人生の幸運のようです! いくつかの例では、gsap ScrollTriggerの使い方を習得し、ちょっとした私のポートフォリオに生きているようです! 結論として、ポートフォリオにgsapを活用して視覚的に深刻ではないポートフォリオを作成することができ、その結果、多くの場所でインタビューが入ってきました。 現在は入社確定になった状態で一人で勉強しています:D もう一度良い講義に感謝します〜〜!他の講義も楽しみにしていますよ!

受講後に得られること

  • 面接官の目を引くインタラクティブなUIUXウェブポートフォリオを、自らの手で完成させることができます。

  • エージェンシー合格ポートフォリオの基準を理解し、自身の制作物に適用することができます。

  • UI/UXデザイナーの合格ポートフォリオ事例を通じて、採用基準と方向性を明確に定めることができます。

  • 就職にすぐ活用できるUIUXウェブポートフォリオを完成させることができます。

  • 実務で活用されるインタラクションの実装方式とパターンを理解し、適用することができます。

  • GSAP ScrollTriggerを活用して、差別化されたインタラクションを実装できます。



📢 現在講師が運営している
UIUX ウェブ企画・デザイン・フロントエンド ブートキャンプ 修了生たちの
チームプロジェクトおよびパーソナルブランディング基盤のエージェンシー合格ポートフォリオ事例を公開します。

UIUXデザイナー就職のためのウェブポートフォリオを制作する実践講義です。
UIUXデザイナー!! 単に UIUX 企画書 一つで 就職が可能でしょうか?
現実はそうではありません。

非専攻、未経験の就活生にとって実務現場の基準は思ったよりずっと高く、
単純な UIUX企画書とプロトタイプだけでは面接の機会さえ得ることが難しいのが現実です。

面接官がポートフォリオを見る時間はわずか 3秒から7秒 の間!!
この短い瞬間に目を引くことができなければ、チャンスは与えられません。

UIUXデザイナーとして合格するためには、UIデザイン、UXプロセスの理解、そしてインタラクティブウェブの実装能力まで一緒に見せることができなければなりません。

それではなぜ? UIUXデザイナーにコーディング実装能力が必要なのでしょうか?
実務では新人に対して、完成された能力よりも「成長の可能性」を見て採用します。そしてその可能性はポートフォリオで決定されます。

そこでこの講義では、
単なるポートフォリオ制作を超えて、UIUXデザイナーであり、ウェブを実装できるデザイナーとして、実際の合格事例に基づいたポートフォリオ戦略インタラクション実装方法を共に学習し、差別化された成果物を完成させて就職競争力を高められるよう設計しました。
また、この設計の方向性に基づき、継続的なアップデートを行っています!

📢 HRD修了生の生の声










📢 ブートキャンプ修了生の合格トーク






📢 大手エージェンシー合格パーソナルブランディング・ポートフォリオ事例

 

 

 

 

 

 

 

 

 

 



 

 

 

 

 

📢 このような方におすすめです

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • UIUXデザイナーとしての就職を準備しており、差別化されたポートフォリオを作りたい方

  • 面接官の目を引くインタラクティブなUIUXウェブポートフォリオを、自らの手で完成させることができます。

  • デザインは良いが、インタラクションの実装が不十分で完成度に物足りなさを感じている方

  • UIUXデザイナーの就職を準備しながら、競争力のあるポートフォリオが作れずにもどかしさを感じている方

  • UIUX就職ポートフォリオは作成したものの、差別化が足りず面接で落ち続けている方

前提知識、
必要でしょうか?

  • HTML/CSS基礎

こんにちは
jyoungです。

4,948

受講生

254

受講レビュー

237

回答

4.9

講座評価

12

講座

"UIUXウェブ企画・デザイン・フロントエンド ブートキャンプ講師のJ. Youngです。

私は過去20年間ウェブおよびアプリ開発会社を運営し、現場の厳しさを身をもって経験してきました。その経験をもとに、現在は大学や専門教育機関でUI/UXデザインからフロントエンド開発まで、後進の専門家を育成することに邁進しており、現在までに500人以上を実務の現場へ送り出しています。

私の講義哲学は明確です。

  1. 基礎から実務まで滞りのない繋がり

  2. 現場が求める核となる技術の凝縮

  3. 就職成功を呼び込む実務型ポートフォリオの完成

何から始めればいいか分からず途方に暮れている方、転職を夢見ているが時間が足りない社会人の方、そしてコーディングが自分とは無縁の話に感じる初心者の方まで。私が歩んできた20年の道を、皆さんの近道にしてみせます。堂々と実務者として立つその日まで、皆さんの心強い教育係(サス)となり、最善を尽くしてサポートします。

J.youngがお手伝いします!!
また!!学習中に気になることがあれば、コメントを残していただければ
お役に立てるよう最善を尽くして回答いたします。

実務経歴

- 2017~現在) UIUX & ウェブ Director
- 2015年~2017年 (株)エリェセル 総括理事
- 2003年~2015年 (株)アミュージングウェア 総括理事
- 2003年: ソウC&D デザイン室長


- 現)
- UIUXウェブ企画/デザイン/フロントエンド ブートキャンプ講師(Ezen DXアカデミー - 江南店)
- デザイン・開発ポートフォリオ専門講義およびチームグループ講義

 
* 運営中のYouTube(コーディングするデザイナー)

よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ」オープンチャットに参加していただければ、
講義の質問やポートフォリオに関するフィードバックを差し上げます。

- オープンチャット名:チャルナンウェブディ
- コード:jyoung

 

もっと見る

カリキュラム

全体

76件 ∙ (9時間 24分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

41件

5.0

41件の受講レビュー

  • aleyna님의 프로필 이미지
    aleyna

    受講レビュー 16

    平均評価 4.9

    5

    52% 受講後に作成

    とてもお得です、本当に最高です。追加で提供される横スクロール適用によりポートフォリオも完成しました!

    • jyoung
      知識共有者

      行ってみましょう〜ポートフォリオを完成しました〜〜お疲れ様でした^^ おかしいウェブディカトックオープンチャットルームに入ると、ポートフォリオ1対1のフィードバックを提供します~~ 楽しい祝日の休暇になります〜 J.youngドリーム

  • yebullove0106님의 프로필 이미지
    yebullove0106

    受講レビュー 1

    平均評価 5.0

    5

    14% 受講後に作成

    先生、もしかして現在YouTubeにある先生の講義と、InflearnにアップロードされているこのGSAP講義の違いは何でしょうか?

    • jyoung
      知識共有者

      こんにちは。カン・イェビン様。 YouTube講義と重複する部分が30%ありますが、 実際に全体のポートフォリオを完成させられる内容は、本講義にのみあります。 本講義は、真似するだけでもポートフォリオを完成させることができます。 ありがとうございます^^ J Young Dream

  • merrybmc님의 프로필 이미지
    merrybmc

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    Webパブリッシャーとして就職を準備しながら、いつも悩んでいたのがまさに「どうすれば他の人との差別化できるポートフォリオを作れるか?」でした。最近のトレンドであるインタラクション効果をぜひ入れたかったのですが、独学ではどうしてもコツがつかめず... YouTubeを探してみても、何かが一つずつ抜けている感じで、かなり迷っていました。そんな時にJ.young先生のこの講座を聞くことになり、本当に人生最高の講座だと言いたいです! ScrollTriggerを活用したアニメーションをただ真似させるだけでなく、実際のポートフォリオでどのように応用すればいいのか「コツ」をつかめるように助けてくださいました。例題も本当にトレンディで、講座に沿って作りながらも「わぁ、これ私のポートフォリオにすぐに使おう!」という考えが自然と湧いてきました。 特に講師の方が初心者の目線に合わせて一つ一つ説明してくださるので、私のようなコード初心者(?)も負担なく最後まで完講することができました。途中で詰まった時はコミュニティで質問すると、回答も親切にしてくださってとても感謝しています。おかげで、自分だけのポートフォリオに素敵なインタラクションを一つ一つ適用しながら、「あ、私にもこういうことができるんだ!」という自信まで得ました。 今では、全く面白みがなかった私のポートフォリオが、生き生きとして見る人の視線をぐっと引きつけることができるウェブサイトに変わりました。こういう講座、本当に自分だけ知っていたいほど最高です! 講師の方、良い講座本当にありがとうございます。次の講座も楽しみにしています😊💖

    • yobab07121584님의 프로필 이미지
      yobab07121584

      受講レビュー 4

      平均評価 5.0

      5

      6% 受講後に作成

      J.young先生の講義をいくつか聞いた受講生です。 gsapスクロールトリガーはインタラクションが好きなデザイナーには学べない ライブラリの一つだと思います。しかし、デザイナーにとってはJavaScriptが 多少難易度がありますが、先生ができるだけ簡単に説明していただきました。 インフラでgsap講義をしている人は数分いますが、私はこの講義が一番好きです 聞いた理由は、デザイナーになじみがあるということです。 特にトレンディなシアンに基づいて学んでみると、学習の欲求がさらに盛り上がりましたㅎㅎ 👉コーディングに興味があるデザイナーの方には無条件にお勧めします。 👉ポートフォリオを今回新たに作ってくださる方にはぜひ一度聞いてみると役に立つと思います。 👉単純な関心があって聞く方には実務に応用が無条件になると思います。 良い講義を作ってくれてありがとう。💕 何よりも質問したら、できるだけ早く関心をお寄せいただきありがとうございます。

      • jyoung
        知識共有者

        おじさん〜本気の受講坪以上ありがとうございます。 私もデザイナー出身だから…まずはデザイン的に気に入らなければ講義もしたい欲が出るのは仕方ない現象のようです~~ デザインがきれいなら…作ってみたい欲求とやる気が馬鹿になりますよ.. 心からの受講評ありがとうございました^^ 楽しい週末を送ってください^^ J.youngドリーム

    • hyunsoo12341867님의 프로필 이미지
      hyunsoo12341867

      受講レビュー 1

      平均評価 5.0

      5

      61% 受講後に作成

      先生の講義は最高です!実務で適用されるさまざまなインタラクションをわかりやすく説明してください!さまざまなプラグインまで使用方法を教えてくれて、個人ポートフォリオの制作に本当に大いに役立ちます!

      • jyoung
        知識共有者

        ヒョンス〜〜高い受講評ありがとう〜〜〜 ポートフォリオを制作していますが、私の講義が大きな助けになることを楽しみにしています^^。 目的の目標を是非達成してください。 J.youngドリーム

    jyoungの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!

    新規会員登録で25%OFF

    ¥6,255

    25%

    ¥8,345