
Figma UI3 基礎 + 実務定着 超スピード完走コース
jyoung
無料
入門 / Figma, ui
4.7
(190)
Figma UI3バージョンで、基礎から実務まで体系的かつ、簡単でスピーディーに完走(修了)できるように構成されています。
入門
Figma, ui
実践!ウェブサイト制作!Step By StepのApplication Courseで、HTML/CSS/jQueryとプラグインを使用して、Y Studio(http://www.ystudio.co.kr/)のメインページをそのまま制作してみるコースです。(講義の完成ファイルを添付!)
受講生 199名
難易度 初級
受講期間 無制限


学習した受講者のレビュー
5.0
지영
高品質講義ありがとうございます
5.0
SooJung Jo
最近のトレンドホームページをたくさんアップロードしてください〜
5.0
박수민
フォローしやすく講義してくれて難しくなくジャミッと講義完了できました!ありがとうございます😊
HTML5/CSS3を活用したレイアウトデザイン
ウェブフォントアイコンの適用方法(Linearicons)
ウェブフォントを適用する方法(Google Fonts)
多様なマウスオーバー効果
デベロッパーツールの活用法
jQuery:ハンバーガーメニューをクリックした時に表示されるgnb jQuery
jQuery:スクロール時に上部に固定されるヘッダー jQuery
jQuery:トップへ戻るボタンを押したときにスムーズに上部へ移動するjQuery
plug-in : スクロール時に実行されるアニメーション (scrolla.jquery 適用方法)
plug-in:アニメーション付きの画像スライド(slickプラグイン)
レスポンシブウェブページ制作(PCモード、タブレットモード、モバイルモード)
レスポンシブ:media query(メディアクエリ)の使い方
レスポンシブ:viewport
HTMLとCSSさえ知っていれば
ウェブページ制作OK!
UI.UXデザイナー、あるいはフロントエンドエンジニアとしての就職を希望されている方なら、最近のトレンドに合わせたウェブページを具現化したポートフォリオが、最低でも5〜6個は必須です。
本講義は、現在商用化されているウェブサイトの中から、2020年のトレンドに合い、審美的な要素に優れ、ポートフォリオ制作に適したウェブサイトを選択して、そのまま制作してみる講義です。
.
講義はHTMLとCSSに関する基礎知識をお持ちの方を対象に、実際のウェブページをそのまま実装しながら進められます。
難しいjavaScriptやjQueryを知らなくても、HTMLとCSSをベースにライブラリやプラグインを活用して、短時間でかっこよく華やかなウェブページを制作できるようお手伝いします。
Step By Step!
今すぐ始めましょう。
>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(768px)
>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(414px)
>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(320px)
講義が終わった後に
得られるもの :D
ウェブページ制作のためには、HTMLとCSSをベースとした、正確なレイアウト作成が最も重要です。HTMLと CSSは知っているけれど Layout Designについて全く見当がつかないという方も、基礎から丁寧に教える本講義に真面目に取り組んでいただければ、いつの間にかレイアウト制作のしっかりとした基礎が身についていることを実感できるはずです!
業務生産性を高めるためには、ライブラリやプラグインを利用して、短時間でインタラクティブなウェブサイトを構築できなければなりません。本講義では、ウェブページのレイアウト制作からレスポンシブページの制作まで確実に学ぶことができ、実務で必要とされるスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞きながらコツコツと実習を重ねれば、いつの間にか業務スキルがUP! UP!しているはずです。
業務能力をアピールし、新たなチャンスを掴むための効果的な準備物の一つが、まさに高品質なポートフォリオです。講義を聞きながら実習を進めるうちに、自分だけのポートフォリオが積み上がっていくでしょう。本講義だけでなく、その後に続くウェブサイト制作実習の講義を通じて着実にウェブページを具現化していけば、就職において最大の武器となるポートフォリオを完成させることができるはずです。
よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ(イケてるウェブデザイナー)」オープンチャットに参加すると、
Figma、UI/UX、コーディング、ポートフォリオ制作に関する役立つヒントや無料ウェビナーのリンクなどを共有いたします。
- オープンチャット名:잘난웹디
- コード:jyoung
1. レイアウト構成 html/css
- ウェブフォントアイコンの適用方法 linearicon
- ウェブフォントの適用方法 googlefonts
- 多様なマウスオーバー効果
- デベロッパーツールの活用法
2. 簡単な jQuery の使用
- ハンバーガーメニューをクリックした時に表示される gnb jQuery
- スクロール時に上部に固定される header jQuery
- 上部移動ボタンを押した時にスムーズに上部へ移動する jQuery
3. 様々なjQueryプラグインを適用して、より簡単かつ効果的にウェブページを作成する
- スクロール時に実行されるアニメーション - scrolla.jqueryプラグインの適用方法/オプションの使用方法
- アニメーション付き画像スライド - slickプラグインの適用方法/オプションの使用方法
4. レスポンシブウェブページを構成する
- media query(メディアクエリ)の使用方法
- viewport(ビューポート)
Q1. 就職に役立ちますか?
A1. 長文のテキストよりも、一枚の画像の方がより強烈な印象を与えます。講義を受けながらウェブページを制作しておけば、採用担当者の目に留まる華やかなポートフォリオを作成できるため、就職に大きな助けとなるはずです。
この講義の後、デザインの雰囲気やスタイルが異なる
10個のウェブサイト制作講義が順次オープンされます。
ポートフォリオを準備している受講生の皆さんは、これを参考にして高品質なウェブページ制作を一緒に行っていきましょう。
html, css, html/css, website, ウェブサイト, コーディング, coding, jquery, ジェイクエリ, レイアウト, インタラクティブウェブ, interactive web, web design, ウェブデザイン, ポートフォリオ, パブリッシング
学習対象は
誰でしょう?
Webデザイナー、コーダーとして就職するために、多様なレイアウトを設計・実装したい方
Webデザイナー、コーダーとして就職するために、早くポートフォリオを制作したい方
グラフィックデザイナーからフロントエンドエンジニアに転向したい方。
HTML/CSSの基礎はあるものの、ウェブページ制作に不安を感じている方
前提知識、
必要でしょうか?
HTML/CSS
キャリア認証
10,441
受講生
458
受講レビュー
244
回答
4.8
講座評価
15
講座
こんにちは。
私は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時間 24分)
講座資料(こうぎしりょう):
13. フーターレイアウトデザイン_01
12:09
全体
16件
4.9
16件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
フォローしやすく講義してくれて難しくなくジャミッと講義完了できました!ありがとうございます😊
スミン様受講評ありがとうございます。さらに良い講義でお会いしましょう。 J.youngドリーム
受講レビュー 4
∙
平均評価 4.8
5
一人で本を見ながら実習しようと、きちんとできなかったのですが、J.ヤング様のワイスタジオ反応型ウェブ講座を聞いてみると体系が取れているようです。じっくりマークアップに従うと簡単に感じられてもう自信ができます^^ ありがとうございます。
kateさん 受講評 ありがとうございます。 私の講義を聞いて自信があったなんて私がもっと感謝したことでしょう.. 常に最新のトレンドに合わせて実務活用応用が高い講義で準備します。 ポポール製作にも大いに役立つ講座でお会いしましょう ありがとう 今日も良い一日になります^^
受講レビュー 1
∙
平均評価 5.0
5
最近のトレンドホームページをたくさんアップロードしてください〜
修正!熱工してくれて受講坪を残してくれて本当にありがとうございます。受講評に力を入れて、より良い講座に挨拶させていただきます。 現在トレンドに合ったインタラクティブウェブ撮影中にいますね…近いうちに素敵で派手で理解しやすいように制作して上げるようにします。着実な愛と関心をお寄せいただきありがとうございます^^
受講レビュー 4
∙
平均評価 5.0
5
良い講義ありがとうございます。
Choi Jasonさん 受講評 ありがとうございます 今後もっとお得な講義準備させていただきます~~^^ 今日も良い一日になります ^^~~
受講レビュー 2
∙
平均評価 5.0
5
高品質講義ありがとうございます
ジヨンさん、本当に疲れました〜 早い時間内に講義を終えました… ありがとうございます... 現在、次のステップコース講義の準備中です。 継続的な関心をお寄せいたします。 ありがとうございます^^
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥4,575
25%
¥6,105