2024 ピグマUI3基礎+実務タンタン超スピード 頑強コース
jyoung
2024年度に新しくアップグレードされたピグマUI3バージョンで、基礎から実務まで体系的であり、簡単かつ迅速に頑張ることができるように構成されました。
Beginner
ui, Figma
実戦！ ウェブサイト制作！ Step by Step!
[ウェブサイト制作 Step By Step] 3段階講義で、ミュージャイン（https://musign.net）メインページをそのまま製作してみる過程です。サイトに盛り込まれている派手なインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^
（4.8）受講レビュー 20件
受講生 172名
難易度 初級
受講期間 無制限
HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Responsive Web
Responsive Web
学習した受講者のレビュー
学習した受講者のレビュー
4.8
5.0
Sh H
100% 受講後に作成
ブートストラップなどのツールを使用せずに レスポンシブウェブをやりたかったのですが、 講義はとても落ち着いてきちんとしたので、3日後に聞いたことがあります。 レスポンシブウェブを作成するための作業を直接見ながら とても簡単に理解できました 1講義の分量時間も適切です。 全体として、もっともっと難しい説明はありませんでした。 今後の学習に多くの役に立つと思います:) ありがとうございます。
5.0
uj06214
100% 受講後に作成
先生があまりにも詳細で詳細に教えてくれて理解が上手く、とてもお得な授業でした。資料も全部くださってとても親切です！ 特にコーディング初心者でレイアウトを作ることが難しかったですが、とても簡単でスッキリよく教えてくれてみて勉強するのですぐに実力が増える気持ちですありがとうございます~~
5.0
ssssssso11
100% 受講後に作成
基礎からじっくりと教えてくれる講義なので、難しくなく受講できました。オンライン講義ですが現場で聞くように細かくわかってくれる充実した講義のようです！頑強だからサイトをひとつひとつ作りましたね。ありがとうございます。
受講後に得られること
さまざまなデバイスに最適化されたレスポンシブWebパブリッシング（Media query）
SVGを使ったアニメーション
仮想セレクタ（before、after）を使用したイメージアニメーション
Transformプロパティを使用したインタラクティブテキストアニメーション
スクロールイベントアニメーションjQuery（scrolla.js）の活用とアプリケーション
スクロール位置によって背景色が変わる効果(jQuery)
マウスオーバー時に下線が付くGNBアニメーション(jQuery)
GNBハンバーガーメニューオープンアニメ
HTMLとCSSだけを知っていても
Webページ＆Interative Web制作OK！
- このレッスンは、HTMLとCSSに関する基本的な知識を持つ人々を対象に、実際のWebページをそのまま実装し、進行されます。
Step By Step!
今すぐ始めましょう。
Webページ制作に必要なjQueryの基礎から活用まで学ぶことができ、
ライブラリとプラグインを活用して、短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。
実際に必要なインタラクティブな要素で構成されるWebページの講義を通して
業務スキルと実務コアノウハウを一度に得ることができます。
実務は！スピード戦であり、スケーラビリティです。
作業時間内にすばやく、クオリティのプロジェクトを完了する方のみが実力あるデザイナー、パブリッシャーとして認められ、扱われます。
ミューザインサイトを一緒に作ってみながら、派手なウェブサイトも素早く制作していけるノウハウを身につけてみてください！
1. htmlとcssによる超簡易レイアウト作成法
2. transfromを活用したテキストアニメーション
3. マスク効果を利用したアニメーション
4. SVG制作の適用とアニメーション
5. スクロール時に進行するアニメーション
.gif)
*反応型ウェブページ制作
- PCモード解像度1720px〜1401pxレスポンシブウェブ製作
- タブレット解像度1400px〜1025px反応型ウェブ製作
- タブレット解像度1024px〜68px反応型ウェブ製作
.gif)
*反応型ウェブページ制作
- モバイル解像度767〜321pxレスポンシブウェブ制作
- モバイル320pxまでのレスポンシブウェブ制作
.gif)
* menuOpen bar製作
.gif)
*開発者ツールの活用法
.gif)
講義が終わったら
得るもの：D
1. しっかりしたレイアウト製作実力
Webページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSの基礎はありますが、 Layout Designにまったく感が出ない方も大丈夫です。基礎から丁寧にお知らせする本講義に誠実に従えば、いつのまにかレイアウト制作のしっかりした基本機が固まっていることを感じられるでしょう！
2. 業務生産性UP！
業務生産性を向上させるには、ライブラリとプラグインを使用して短時間でインタラクティブなWebサイトを実装できる必要があります。本講義では、ウェブページのレイアウト制作からレスポンシブページの製作まで確実に勉強することができ、実務で必要とするスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞いて着実に実習してみると、いつのまにか業務能力がUP！ UP！
3. 高品質ポートフォリオ
仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の1つは、高品質のポートフォリオです。講義を聞いて実習してみると、自分だけのポートフォリオが積み上げられます。本講義だけでなく、その後続くウェブサイト制作実習講義を聞きながら着実にウェブページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。
4.オープンチャットルーム運営
よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。
- オープンチャットルーム：よく知られたウェブディ
- コード：jyoung
本当！ウェブサイト制作
他の講義を見る
Basic Course (ハンファキャミカル_反応型ウェブ)
PCモードレイアウト、レスポンシブページ制作完璧理解！
PCモードレイアウト、レスポンシブページ制作完璧理解！
Application Course 1（ワイスタジオ_レスポンシブウェブ）
視線をひきつけるウェブページ制作カリキュラム！
視線をひきつけるウェブページ制作カリキュラム！
Application Course 2（対バン産業_インタラクティブWeb）
ゴージャスな難易度インタラクティブウェブも私の手で直接！
ゴージャスな難易度インタラクティブウェブも私の手で直接！
html, css, html/css, website, ウェブサイト, コーディング
こんな方に
おすすめです
学習対象は
誰でしょう？
HTML / CSSの基礎はありますが、Webページの作成が恐れている人
グラフィックデザイナーがフロント＆開発者に転向したい方。
Webデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい人
Webデザイナー、パブリッシャーとして就職のために様々なレイアウトを設計実装したい方
実務スケーラビリティを考慮して素早く素敵でカラフルなサイトを制作したい方
9,040
受講生
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
共同知識共有者
カリキュラム
全体
32件 ∙ (5時間 10分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
20件
4.8
20件の受講レビュー
ma12ghsh0234受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成ブートストラップなどのツールを使用せずに レスポンシブウェブをやりたかったのですが、 講義はとても落ち着いてきちんとしたので、3日後に聞いたことがあります。 レスポンシブウェブを作成するための作業を直接見ながら とても簡単に理解できました 1講義の分量時間も適切です。 全体として、もっともっと難しい説明はありませんでした。 今後の学習に多くの役に立つと思います:) ありがとうございます。
- jyoung知識共有者
Sh Hさんの力は受講評ありがとうございます^^ 今後より良い講義でお会いしましょう。 今日も良い一日になります^^ J.youngドリーム
- uj062148301
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成先生があまりにも詳細で詳細に教えてくれて理解が上手く、とてもお得な授業でした。資料も全部くださってとても親切です！ 特にコーディング初心者でレイアウトを作ることが難しかったですが、とても簡単でスッキリよく教えてくれてみて勉強するのですぐに実力が増える気持ちですありがとうございます~~
- jyoung知識共有者
uj06214さんの受講評価で、私はもっと頑張ります。 講座を簡単に受け入れてくれたように、私がもっと嬉しいです。 いつも良い講座でお会いしましょう。 ありがとう
- ssssssso111739
受講レビュー 1
∙
平均評価 5.0
- lung62687754
受講レビュー 1
∙
平均評価 5.0
5
88% 受講後に作成コアとトレンドの実用性の両方を確実に捉えました。 ヒョンガンどこでも簡単には見られない講義です。実務で役に立つようです。良い講義ありがとうございます :) これからもずっとj.youngさんの授業だけ受講する予定です。
- jyoung知識共有者
vivienさん、ありがとうございます^^ vivienさんの受講に力があります。さらに良いコースを研究する アップロードさせていただきます。 ありがとうございます^^
- jjarajan12132845
受講レビュー 1
∙
平均評価 5.0
5
16% 受講後に作成じっくりと説明をとても上手くしてくれて大きな助けになりました^^ コーディングがとても難しかったのに少しずつ学んでいく楽しみが講義見ながらできていますよ!!複雑なレスポンシブレイアウトを簡単に整理し、織り方をたくさん学びましょう〜〜これからも良い講義をお願いします！
- jyoung知識共有者
jjarajan1213さん、ありがとうございます。 コーディングが最初は難しく感じられても何度も繰り返しウェブサイト（2つ以上のページ）4-5くらい作ってみると サイトの制作方法について自信ができると思います。 一生懸命勉強してほしい目標を必ず達成してください^^ 良い講義でお会いしましょう。 ありがとうございます^^ J.youngドリーム
￥5,928
jyoungの他の講座
知識共有者の他の講座を見てみましょう！
.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![[2026年出題基準] Webデザイン開発技能士実技試験完璧ガイドCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[幻想的な足足]デザインからコーディングまでCourse Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
