
Figma UI3 基礎 + 実務定着 超スピード完走コース
jyoung
Figma UI3バージョンで、基礎から実務まで体系的かつ、簡単でスピーディーに完走(修了)できるように構成されています。
入門
Figma, ui
[ウェブサイト制作 Step By Step] 3段階講義で、ミュージャイン(https://musign.net)メインページをそのまま製作してみる過程です。サイトに盛り込まれている派手なインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^
受講生 170名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
Sh H
ブートストラップなどのツールを使用せずに レスポンシブウェブをやりたかったのですが、 講義はとても落ち着いてきちんとしたので、3日後に聞いたことがあります。 レスポンシブウェブを作成するための作業を直接見ながら とても簡単に理解できました 1講義の分量時間も適切です。 全体として、もっともっと難しい説明はありませんでした。 今後の学習に多くの役に立つと思います:) ありがとうございます。
5.0
uj06214
先生があまりにも詳細で詳細に教えてくれて理解が上手く、とてもお得な授業でした。資料も全部くださってとても親切です! 特にコーディング初心者でレイアウトを作ることが難しかったですが、とても簡単でスッキリよく教えてくれてみて勉強するのですぐに実力が増える気持ちですありがとうございます~~
5.0
ssssssso11
基礎からじっくりと教えてくれる講義なので、難しくなく受講できました。オンライン講義ですが現場で聞くように細かくわかってくれる充実した講義のようです!頑強だからサイトをひとつひとつ作りましたね。ありがとうございます。
さまざまなデバイスに最適化されたレスポンシブWebパブリッシング(Media query)
SVGを使ったアニメーション
仮想セレクタ(before、after)を使用したイメージアニメーション
Transformプロパティを使用したインタラクティブテキストアニメーション
スクロールイベントアニメーションjQuery(scrolla.js)の活用とアプリケーション
スクロール位置によって背景色が変わる効果(jQuery)
マウスオーバー時に下線が付くGNBアニメーション(jQuery)
GNBハンバーガーメニューオープンアニメ
Step By Step!
今すぐ始めましょう。
Webページ制作に必要なjQueryの基礎から活用まで学ぶことができ、
ライブラリとプラグインを活用して、短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。
実際に必要なインタラクティブな要素で構成されるWebページの講義を通して
業務スキルと実務コアノウハウを一度に得ることができます。
実務は!スピード戦であり、スケーラビリティです。
作業時間内にすばやく、クオリティのプロジェクトを完了する方のみが実力あるデザイナー、パブリッシャーとして認められ、扱われます。
ミューザインサイトを一緒に作ってみながら、派手なウェブサイトも素早く制作していけるノウハウを身につけてみてください!
1. htmlとcssによる超簡易レイアウト作成法
2. transfromを活用したテキストアニメーション
3. マスク効果を利用したアニメーション
4. SVG制作の適用とアニメーション
5. スクロール時に進行するアニメーション
- PCモード解像度1720px〜1401pxレスポンシブウェブ製作
- タブレット解像度1400px〜1025px反応型ウェブ製作
- タブレット解像度1024px〜68px反応型ウェブ製作
- モバイル解像度767〜321pxレスポンシブウェブ制作
- モバイル320pxまでのレスポンシブウェブ制作
* menuOpen bar製作
*開発者ツールの活用法
講義が終わったら
得るもの:D
Webページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSの基礎はありますが、 Layout Designにまったく感が出ない方も大丈夫です。基礎から丁寧にお知らせする本講義に誠実に従えば、いつのまにかレイアウト制作のしっかりした基本機が固まっていることを感じられるでしょう!
業務生産性を向上させるには、ライブラリとプラグインを使用して短時間でインタラクティブなWebサイトを実装できる必要があります。本講義では、ウェブページのレイアウト制作からレスポンシブページの製作まで確実に勉強することができ、実務で必要とするスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞いて着実に実習してみると、いつのまにか業務能力がUP! UP!
仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の1つは、高品質のポートフォリオです。講義を聞いて実習してみると、自分だけのポートフォリオが積み上げられます。本講義だけでなく、その後続くウェブサイト制作実習講義を聞きながら着実にウェブページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。
よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。
- オープンチャットルーム:よく知られたウェブディ
- コード:jyoung
本当!ウェブサイト制作
他の講義を見る
html, css, html/css, website, ウェブサイト, コーディング
学習対象は
誰でしょう?
HTML / CSSの基礎はありますが、Webページの作成が恐れている人
グラフィックデザイナーがフロント&開発者に転向したい方。
Webデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい人
Webデザイナー、パブリッシャーとして就職のために様々なレイアウトを設計実装したい方
実務スケーラビリティを考慮して素早く素敵でカラフルなサイトを制作したい方
9,845
受講生
434
受講レビュー
242
回答
4.8
講座評価
13
講座
こんにちは。
私は20年以上にわたり、ウェブ・アプリサービスの企画、デザイン、開発の実務を経験しており、
現在はUIUXウェブ企画・デザイン・フロントエンドのブートキャンプ講師として活動しています。
実務経験を基に、これまで500人以上の受講生がデザインおよびIT分野へ就職できるようサポートしてきました。現在もAI時代に合わせた新しいポートフォリオ制作方法と実務スキルの教育に注力しています。
単にツールの使い方を学ぶのではなく、企画からデザイン、開発、配布まで、実務と同じプロセスを経験しながら、現場ですぐに活用できる能力を身につけられるようサポートします。
急速に変化する採用市場で必要とされるAI活用能力、問題解決能力、協調性を中心に学習します。
面接官が関心を持つようなプロジェクトとポートフォリオを作成することに集中します。
これからは企画し、デザインし、実装し、デプロイまでできる
フルスタッククリエイター(Fullstack Creator)の能力が必要です。
デザインツールの基本活用能力 + Claude、Codex、Figmaを活用して実際のサービスを制作し、
AIと共に成果物を作る方法を経験していただきます。
- 何から始めればよいか分からず途方に暮れている方、
- ポートフォリオの競争力を高めたい方、
- AIを活用してより速く成長したい方であれば、私が皆さんの心強いガイドに
なります。
皆さんの成果物が完成する瞬間まで、共に歩んでまいります。
実務経歴
2017~現在 | Digital Product Director & UX Consultant
2015~2017 | Executive Director, EliEsel Inc.
2003~2015 | Executive Director, Amusingware Inc.
2003 | Head of Design, Seowoo C&D
講義経歴
就職ポートフォリオ制作およびプロジェクトメンタリング
企業出講および実務能力強化教育
大学・企業・教育機関向けの実務講義
デザイン・開発ポートフォリオコンサルティングおよびグループメンタリング
実務プロジェクトベースのチームコーチングおよびポートフォリオ指導
企業在職者および就職準備生を対象とした実務教育
AIベースのUIUX・フロントエンド実務教育およびコンサルティング
- 現) UIUX企画・デザイン・フロントエンド ブートキャンプ専任講師(Ezen DXアカデミー - 江南店)
- デザイン・開発ポートフォリオ専門講義およびチームグループ講義
* 運営中のYouTube(コーディングするデザイナー)
オープンチャットルームの運営
よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ」オープンチャットに参加していただければ、
講義に関する質問やポートフォリオに関するフィードバックを差し上げます。
- オープンチャット名:チャルナンウェブディ
- コード:jyoung
全体
32件 ∙ (5時間 10分)
講座資料(こうぎしりょう):
全体
20件
4.8
20件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
先生があまりにも詳細で詳細に教えてくれて理解が上手く、とてもお得な授業でした。資料も全部くださってとても親切です! 特にコーディング初心者でレイアウトを作ることが難しかったですが、とても簡単でスッキリよく教えてくれてみて勉強するのですぐに実力が増える気持ちですありがとうございます~~
uj06214さんの受講評価で、私はもっと頑張ります。 講座を簡単に受け入れてくれたように、私がもっと嬉しいです。 いつも良い講座でお会いしましょう。 ありがとう
受講レビュー 1
∙
平均評価 5.0
5
コアとトレンドの実用性の両方を確実に捉えました。 ヒョンガンどこでも簡単には見られない講義です。実務で役に立つようです。良い講義ありがとうございます :) これからもずっとj.youngさんの授業だけ受講する予定です。
vivienさん、ありがとうございます^^ vivienさんの受講に力があります。さらに良いコースを研究する アップロードさせていただきます。 ありがとうございます^^
受講レビュー 1
∙
平均評価 5.0
5
じっくりと説明をとても上手くしてくれて大きな助けになりました^^ コーディングがとても難しかったのに少しずつ学んでいく楽しみが講義見ながらできていますよ!!複雑なレスポンシブレイアウトを簡単に整理し、織り方をたくさん学びましょう〜〜これからも良い講義をお願いします!
jjarajan1213さん、ありがとうございます。 コーディングが最初は難しく感じられても何度も繰り返しウェブサイト(2つ以上のページ)4-5くらい作ってみると サイトの制作方法について自信ができると思います。 一生懸命勉強してほしい目標を必ず達成してください^^ 良い講義でお会いしましょう。 ありがとうございます^^ J.youngドリーム
受講レビュー 1
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
5
ブートストラップなどのツールを使用せずに レスポンシブウェブをやりたかったのですが、 講義はとても落ち着いてきちんとしたので、3日後に聞いたことがあります。 レスポンシブウェブを作成するための作業を直接見ながら とても簡単に理解できました 1講義の分量時間も適切です。 全体として、もっともっと難しい説明はありませんでした。 今後の学習に多くの役に立つと思います:) ありがとうございます。
Sh Hさんの力は受講評ありがとうございます^^ 今後より良い講義でお会いしましょう。 今日も良い一日になります^^ J.youngドリーム
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!