本当！ウェブサイト制作！ Step by Step！ （対バン産業_InteractiveWeb）
jyoung
[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。
초급
HTML/CSS, Responsive Web, jQuery
実戦！ ウェブサイト制作！ Step by Step!
[ウェブサイト制作 Step By Step] 3段階講義で、ミュージャイン（https://musign.net）メインページをそのまま製作してみる過程です。サイトに盛り込まれている派手なインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^
（4.8）受講レビュー 20件
受講生 171名
HTML/CSS
jQuery
Interactive Web
Responsive Web
学習した受講者のレビュー
こんなことが学べます
さまざまなデバイスに最適化されたレスポンシブ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デザイナー、パブリッシャーとして就職のために様々なレイアウトを設計実装したい方
実務スケーラビリティを考慮して素早く素敵でカラフルなサイトを制作したい方
8,238
受講生
326
受講レビュー
224
回答
4.8
講座評価
14
講座
안녕하세요? J.young 임자영입니다.
20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인, 웹퍼블리셔, 프론트엔드개발 강의를 하고 있습니다.
디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/코딩하는 디자이너) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.
그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.
-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....
J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.
* 오픈채팅방운영
보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.
오픈채팅방명 : 잘난웹디
코드 : jyoung
실무경력
- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장
- 현) UIUX & 웹포트폴리오 강의 진행 중(실무 진출 90프로 이상)
감사합니다^^
운영중인유튜브
잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ
共同知識共有者
カリキュラム
全体
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,724
jyoungの他の講座
知識共有者の他の講座を見てみましょう！
.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)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイド강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
