2024 ピグマUI3基礎+実務タンタン超スピード 頑強コース
jyoung
2024年度に新しくアップグレードされたピグマUI3バージョンで、基礎から実務まで体系的であり、簡単かつ迅速に頑張ることができるように構成されました。
입문
ui, Figma
本当！ウェブサイト制作！ Step by Step！ （対バン産業_InteractiveWeb）
[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。
（5.0）受講レビュー 13件
受講生 236名
難易度 初級
受講期間 無制限
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
jQuery
jQuery
Clone Coding
Clone Coding
Interactive Web
Interactive Web
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
jQuery
jQuery
Clone Coding
Clone Coding
Interactive Web
Interactive Web
学習した受講者のレビュー
学習した受講者のレビュー
5.0
5.0
LHooOoo
100% 受講後に作成
フロントエンドの開発を一人で学んでいるうちの1つですが、無料の講義はまともな講義がいくつかなかったので、すぐに見て終わって有料講義を見つけましたが、大方産業開発サイトがただ素敵に見えるという理由で始めましたが、詳しく教えてください。わかってくれて楽しく学びました:)おもしろい講義であり、頑張れば中学校の学生の方も十分に頑張っていただけると思います！
5.0
김혜경
97% 受講後に作成
J.ヤング講師の講義はすべて受講して頑張りました^^ 今回の大方産業ウェブサイトは派手なインタラクティブウェブをそのまま実装できるので 他の講座よりも楽しくよくフォローしました。 何よりここで学んだ様々なジェイクエリーアニメーションで 私のポートフォリオサイトをレベルアップしなければならないという意志が活発に燃えますね！ 次に、モバイルアプリ制作中心の講義も開設してください。 たくさん役に立つと思います。 コロナ19でオンラインで厳しく独学する数多くの人に J.ヤングの良い川の多くをお願いします。 ありがとうございます。
5.0
baam baam
97% 受講後に作成
お得な講義でした。ありがとうございます！
受講後に得られること
マウスオーバー時に2depthが見えるGNB jQuery
スクロール時にデザインが変更される FixHeader jQuery
テキストアニメーションjQuery（Splitting.js）の活用とアプリケーション
スクロールイベントアニメーションjQuery（scrolla.js）の活用とアプリケーション
アニメーション化された画像スライドjQuery（slick.js）の活用とアプリケーション
HTMLとCSSだけを知っていても
Webページ＆Interative Web制作OK！
本講義はウェブサイト制作Step By Step！ 3段階で大方産業（https://www.db-dvp.co.kr/）メインページをそのまま製作してみる過程です。サイトに盛り込まれた華やかなインタラクティブウェブをそのまま製作実装してみる講座です。
Step By Step!
今すぐ始めましょう。
講義は、HTMLとCSSに関する基本的な知識を持つ方々を対象に、実際のWebページをそのまま実装して進行されます。難しいJavaScriptとjQueryを知らなくても、 HTMLとCSSに基づいてライブラリとプラグインを活用して、短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。実務で必須のインタラクティブ要素で構成されたWebページ講義を聞くと、実務拡張性、スキルアップ保証、ポートフォリオ完成の3つを一度に得ることができます。
1.Header領域を作る（GNB、Fixed header）
- マウスオーバー時に2depthが表示されるGNB jQuery
- GNBメニューバーにマウスホバーシースムーズにスライドするサブメニューバー製作
- 仮想セレクタ（before、after）を利用した多様なマウスオーバー効果
- スクロール時にデザインが変更され、上部に修正される header jQuery
2.Visual領域の製作(Image Slider)
- Splitting .jsを使用して作成したテキストアニメーション
- Slick .jsを使用してスライド画像を作成する
- スライド「prev」、「next」ボタン製作
- スライドインジケーターの製作
- ゲージバーアニメーション
- 画像分割アニメーション
3.Contents_imformation領域(Banner Slider)
- Scrolla.jsで2つずつ見えるスライドアニメーション
- CSSでdotボタンを作る
- スクロールボタンをクリックすると、スムーズに目的の位置に移動するjQuery
- 仮想セレクタを（before、after）利用した多様なマウスオーバー効果（下線効果、ボーダー効果、イメージスケール効果）
4.Contents_videoゾーン＆Contents_newsゾーン
- スクロールアニメーションjQuery（scrolla.js）
- YouTubeビデオのインポート
- グラデーションカラー適用
- Motionアニメーションの適用
講義が終わったら
得るもの：D
1. しっかりしたレイアウト製作実力
Webページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSの基礎はありますが、 Layout Designについて全く感が来ない方も、基礎から丁寧にお知らせする本講義に誠実に従えば、いつのまにかレイアウト制作のしっかりした基本基盤が固まっていることを感じられるでしょう！
2. 業務生産性UP！
業務生産性を向上させるには、ライブラリとプラグインを使用して、短時間でインタラクティブなウェブサイトを実装できる必要があります。本講義では、ウェブページのレイアウト制作からレスポンシブページの製作まで確実に勉強することができ、実務で必要とするスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞いて着実に実習してみると、いつのまにか業務能力がUP！ UP！
3. 高品質ポートフォリオ
仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の1つは、高品質のポートフォリオです。講義を聞いて実習してみると、自分だけのポートフォリオが積み上げられます。本講義だけでなく、以後のウェブサイト制作実習講義を聞きながら着実にWebページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。
4. オープンチャット방運営
よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。
オープンチャットルーム：よく知られたウェブディ
コード：jyoung
html, css, html/css, website, ウェブサイト, コーディング
こんな方に
おすすめです
学習対象は
誰でしょう？
1.HTML/CSS基礎はあるがウェブページ制作が恐ろしい方。
2.ウェブデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい方
3.Webで必要なJQueryソースを身につけたい方
4.JavaScript基礎なしに実務で必要なインタラクティブWebを手軽に実装したい方
5.現在グラフィックデザイナーでフロントエンド開発者やパブリッシャーに転向したい方
6.ウェブデザイナーとして、業務スキルを向上させたい方
7.拡張性を考慮したインタラクティブWebを迅速に実装したい方
前提知識、
必要でしょうか？
HTML /CSS
9,039
受講生
366
受講レビュー
227
回答
4.8
講座評価
14
講座
"디자인.개발 포트폴리오 멘토 J.Young입니다."
저는 지난 20년간 웹 디자인 및 앱 개발 회사를 운영하며 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하고 있습니다.
저의 강의 철학은 명확합니다.
기초부터 실무까지 막힘없는 연결
현업이 원하는 핵심 기술의 압축
취업 성공을 부르는 실무형 포트폴리오 완성
어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.
J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.
실무경력
- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장
- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -서초점)
- 디자인.개발 포트폴리오 전문 강의 및 그룹 및 개인 지도
* 운영중인 유튜브 (코딩하는 디자이너)
보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.
- 오픈채팅방명 : 잘난웹디
- 코드 : jyoung
共同知識共有者
カリキュラム
全体
29件 ∙ (4時間 50分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
13件
5.0
13件の受講レビュー
ihu07182702受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成フロントエンドの開発を一人で学んでいるうちの1つですが、無料の講義はまともな講義がいくつかなかったので、すぐに見て終わって有料講義を見つけましたが、大方産業開発サイトがただ素敵に見えるという理由で始めましたが、詳しく教えてください。わかってくれて楽しく学びました:)おもしろい講義であり、頑張れば中学校の学生の方も十分に頑張っていただけると思います！
- jyoung知識共有者
イム・ヒョンウ~~ 私は拍手を送ります^^ 両親がとても心強いと思います。 大方産業なら…大人も難しいかもしれません。 とても楽しく頑張ったなんて本当に本当にすごいです~~ 一言でちゃん!!!です。 ありがとうございます~~~ 勉強する気になったらいつでも…。 応援また応援します^^ 今日も楽しい午後になって…週末も楽しく過ごしてください^^ J.youngドリーム^^
- winterlove
受講レビュー 4
∙
平均評価 4.8
5
97% 受講後に作成J.ヤング講師の講義はすべて受講して頑張りました^^ 今回の大方産業ウェブサイトは派手なインタラクティブウェブをそのまま実装できるので 他の講座よりも楽しくよくフォローしました。 何よりここで学んだ様々なジェイクエリーアニメーションで 私のポートフォリオサイトをレベルアップしなければならないという意志が活発に燃えますね！ 次に、モバイルアプリ制作中心の講義も開設してください。 たくさん役に立つと思います。 コロナ19でオンラインで厳しく独学する数多くの人に J.ヤングの良い川の多くをお願いします。 ありがとうございます。
- hurbaam1568
受講レビュー 4
∙
平均評価 5.0
- jinfx4205171
受講レビュー 1
∙
平均評価 5.0
￥5,936
jyoungの他の講座
知識共有者の他の講座を見てみましょう！
.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![[2026年出題基準] Webデザイン開発技能士実技試験完璧ガイド강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
