パブリッシャーの就職やパブリッシャーの実務で最も競争力のあるモバイルウェブ制作能力を向上させることができます。パブリッシャーとしてモバイルウェブを制作するためのほぼすべての制作方法とノウハウを磨くことができます。特に最近パブリッシャーと開発者に求められているデザイン能力は、Figmaの学習で多くの部分をカバーできるように、FigmaでモバイルウェブUIデザイン作業を行うプロセスも詳細に説明しました。モバイルウェブパブリッシングの授業で最も強みであるHTMLワイヤーフレームの詳細な作成方法を、すべてのページごとに詳細に説明します。この講義を通じて、HTMLワイヤーフレーム制作能力が大幅に向上します。モバイルウェブパブリッシングは、CSS変数(Var)を活用してモバイルとタブレットに合わせたレイアウトを完璧に合わせる学習を通じて、実務作業とほぼ同等の作業能力を身につけることができます。中上級のCSS実戦能力をFlexレイアウトを中心に十分に身につけることができます。
中上級 CSS 実戦コーディングを Flex レイアウトを中心に
モバイル Web ページの構成/フォルダ構造/絶対アドレス vs 相対アドレス
モバイル ウェブ HTML ワイヤーフレームの詳細な作成方法
モバイル Web パブリッシング制作に必要な理論とノウハウ、実制作
Figmaを使用してモバイルWebUIデザインを作成する
モバイル Web UI デザインおよび公開に関する注意事項
HTML+CSS モバイル モックアップの作成後、iframe の活用
CSS 変数 (Var) を使用してモバイルとタブレットに適したレイアウトを作成する
汎用性の高いインライン・ジャバスクリプトの活用
Slick Slider の使い方と CSS の変更方法
実務上、この程度で十分なjQuery相互作用の学習後、実践に適用
::before ::after などのさまざまな仮想クラスの実用的な活用
プロのように公開するクリーンコーディングの教科書
コーディングワークスがこれまで数多くのオフライン学園生徒に授業したモバイルWebパブリッシング制作ノウハウが盛り込まれています。頑張った後、さらに向上したパブリッシングの実力を持つことになると確信しています！
コーディングワークスの<モバイルWebパブリッシングポートフォリオ with Figma>を通じて、パブリッシャー就職とパブリッシャー実務で最も競争力のあるモバイルWeb制作能力を向上させることができます。そして、パブリッシャーとして、モバイルウェブを制作するためのほぼすべての制作方法とノウハウを誓うことができます。
▲HTML+CSSモバイルモックアップ（Mockup）製作（3つのモバイルモックアップ完成本提供）
📝 Figma デザインファイル、ソースファイル、パブリッシング完成版
📝ビデオ講義で使用されているPPT講義資料の提供
<モバイルWebパブリッシングポートフォリオ with Figma>講義を受講しながらピグマUIデザイン能力、HTMLワイヤフレーム作成能力、パブリッシングのためのFlex使用能力など様々なことで実力が成長すると思います。これらの部分も非常に重要ですが、この中で最も重要な部分が「キャリアのようにパブリッシングするクリーンコーディング（Clean Coding）の定石」を学ぶことになります。講義では、すべてのパブリッシングをこの原則の下に作成しました。
<キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石>という部分は必要なところに必要な注釈を入れること、HTML出演順に合わせてCSSセレクタも順番にコーディングすること、共通のCSSセレクタの場合後でメンテナンスのためにCommon CSSというところにまとめること。このようなコーディングの原則と習慣を学ぶことができれば、実務で本当に多くの助けになります。具体的には、就職時に人事担当者またはそれに準ずる人が志願者のパブリッシング結果を見て、ソースコード(Source Code)を見ることになります。このような場合、少しだけソースコードを見ても、申請者のパブリッシングベータについて判断できます。
💡 この講義が違う魅力ポイントは？
🚩 プリロードページ
🚩ログインページ
🚩会員登録ページ
▲マイページ/メインページスライダー/メインページタブメニュー＆フッター
🚩マイページページ
🚩メインページ
▲詳細ページ（スライダー、商品関連アコーディオン、購入ボタン相互作用）
🚩製品詳細ページ
▲カテゴリページ/ショッピングカートページ/検索ページ
🚩カテゴリページ
🚩カートのページ
🚩検索ページ
▲スリックスライダーCSS変更ノウハウとGNBナビゲーションチェック
🚩スリックスライダーCSS変更ノウハウ
🚩 GNBナビゲーションチェック
▲パブリッシング作業の仕上げをする
🚩パブリッシング作業を完了する（すべてのパブリッシングが完了した後に修正補完追加作業）
💡ダウンロードファイルの使い方とフォルダの内容
①デザイン作業開始時にダウンロードしてください。
②パブリッシング作業開始時にダウンロードしてください。
③パブリッシング学習中に受講生コードと比較した場合ダウンロードしてください。
④モバイルモックアップを作る場合はダウンロードしてください。
💡パブリッシングジョブテキストエディタ<ビジュアルスタジオコード>
その講義<モバイルWebパブリッシングポートフォリオwith Figma>は、ビジュアルスタジオコード（Visual Studio Code）で作成された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべてのレッスンビデオは、ビジュアルスタジオコードベースで説明されています。
以下のコーディングワークスのYouTubeの映像を通じて基本的な使い方をまず学び、<セクション3.モバイルWeb詳細パブリッシング(HTML+CSS+JS)>学習してください。
下記の予想質問以外の質問は、該当講義のコミュニティ質問掲示板にしていただければ最善を尽くしてご回答いたします。
Q.選手知識、準備事項が必要ですか？
特別な選手知識や準備はありません。 HTML+CSS 基本的な使用経験であれば、十分に追いつくことができ、期待するほどの実力向上と成果を得ることができます。ただし、CSS中級理論をよく使用するため、以下の学習内容はある程度知っておく必要があります。
Q.グラフィックプログラムの使用経験がないのにピグマ(Figma)デザインできますか？
紹介映像でも言及しましたが、ピグマは努力に比べてパフォーマンスがすごく良いです。パワーポイントをある程度扱えば十分にピグマデザインの授業に従うことができます。ただ、もう少し授業をうまく消化するために、モバイルモバイルUIデザインピグマ（Figma）基礎講座の映像をご覧になって紹介したYouTubeを通じて先行学習をしてください。
Q.差別化される重要なコンテンツは何ですか？
デザイン専門家としてではなく、事前知識が全くない人がピグマをうまく活用できるレベルのデザイン講義なので、<セクション1.モバイルWeb UIデザイン制作 with Figma>始める人が受け入れる無難なレベルです。
しかし、 <セクション2.モバイルWebパブリッシングのためのHTMLワイヤフレーム構造>と<セクション3.モバイルWeb詳細パブリッシング（HTML + CSS + JS）として授業します。そして、モバイルWebパブリッシングという不慣れで難しい作業を段階的にレベルクラスの成果を引き出すことができるように制作された授業が重要だと思います。
Q. デザイン非専攻者も聞ける講義ですか？
十分可能です。セクション1の<[必読]モバイルWeb UIデザインピグマ(Figma)基礎講座>映像にもありますが、パワーポイントをよく扱う程度ならピグマ学習して活用するのにまったく支障がありません。私もピグマの使用を短期間でその講義のために学習しましたが、良いデザイン結果を得ることができました。
Q.デザイナーのPigmaはうまくいきますが、セクション1のPigmaデザインを学ぶ必要がありますか？
紹介映像にも言及しましたが、私がピグマを長くしてくれたり上手な人ではありません。だからピグマ作業に自分がいる方なら、<セクション1.モバイルWeb UIデザイン制作 with Figma>は通り過ぎて<セクション2.モバイルWebパブリッシングのためのHTMLワイヤフレーム構造>にすぐに行って学習すれば良いです。
Q.モバイルWebパブリッシングの制作過程をなぜ学ばなければならず、具体的な期待効果は何ですか？
モバイルWebは個人的なポートフォリオワークピースであり、最も重要性が高いです。したがって、モバイルWebワークピースがあれば、雇用競争力があります。雇用ポートフォリオとしての役割だけでなく、ほとんどの企業がモバイルWebプロジェクトを進めており、進めていきたいと考えています。こういった会社の立場でうまく作られたモバイルWebポートフォリオがあれば、就職の転職のとても良いリファレンスになると思います。
モバイルWebは個人的なポートフォリオワークピースであり、最も重要性が高いです。したがって、モバイルWebワークピースがあれば、雇用競争力があります。雇用ポートフォリオとしての役割だけでなく、ほとんどの企業がモバイルWebプロジェクトを進めており、進めていきたいと考えています。こういった会社の立場でうまく作られたモバイルWebポートフォリオがあれば、就職の転職のとても良いリファレンスになると思います。
具体的な期待効果は実は人によって異なります。しかし、コーディングワークスが確かにお話しできる部分は「 HTMLワイヤフレーム構造を作る能力が大幅に向上」されます。さまざまなHTMLワイヤフレーム構造を作成しながら、複雑なHTML階層をどのように体系的に整理するかを十分に訓練します。また、一貫性のあるクラス名をどのようにネーミングして共有するかを一緒に作成しながら詳細に授業します。
<セクション 2. モバイル Web パブリッシングのための HTML ワイヤフレーム構造> でさまざまな HTML ワイヤーフレーム構造を作成し、<セクション 3. モバイル Web 詳細パブリッシング (HTML+CSS+JS)>で本番モバイルWebパブリッシングを適用する段階まで訓練するので、今後かなりのWeb UIレイアウトを作成することに自信があります。
Q.授業内容をどのレベルまで扱いますか？
モバイルWebの性質上、ファイルの数とフォルダが多数あります。だからちょっとスピード感のあるように多くの内容が進みます。あるレベルまでというのが人の基準によって異なりますが、パブリッシャー個人ポートフォリオとして十分なレベルで作業する授業内容です。それだけでなく、実務でモバイルWeb作業するレベルで見ても十分な程度の授業内容です。
Q.全体の講義時間はどうなりますか？
全体映像講義時間は約24時間で、深い学習のための十分な講義時間で用意されています。全体的にパブリッシングのための準備作業とパブリッシング作業が全体の80％近い割合で18時間程度です。
ピグマUIデザイン - 5時間40分/ HTMLワイヤフレーム構造 - 4時間30分 / パブリッシング - 14時間15分
Q.受講に関する注意事項（必要な環境、その他の留意事項など）はありますか？
授業内容が多く、スピード感があります。とはいえ、十分な説明なしで通り過ぎずに詳細に説明します。よく従うと思います。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション2の[必読]努力に対するパブリッシングの実力が増えない理由映像に詳しく記載されていますので参考にしてください。
＜モバイルウェブパブリッシングポートフォリオ with Figma＞講義を行ったコーディングワークスは、現在まで300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義しています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、ほとんどの学生がコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。
▲国費支援パブリッシング過程 私に4ヶ月半程度学んだ学生ですが、就職したとカトクが来ました。
▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)
先生こんにちは:)
先生 Inflearn 講義を聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊
相違ではなく、
先生にアドバイス得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります！
でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。
キャリア職のパブリッシャーを求める会社でしたが、新人の私に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもとてもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきましたそうです。
これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！
実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！
学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます
切に欲しかったし、
先生が言ったように信じていたら、本当に良い結果が出ました。
本当にありがとうございました！
コロナに注意してください。
また良い講義で会いたいです:)
ありがとうご挨拶お願いします
これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。
実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊
その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。
これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！
学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。
質問にコードなしでグローだけの問題を説明すると、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。
▲該当の講義コミュニティのよくある秩序ビューをまず確認してください〜
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks
コーディングワークスは現在までに300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。
学習対象は
誰でしょう？
モバイル ウェブ UI デザインおよび公開ポートフォリオが必要な方
実務でモバイルウェブパブリッシング作業のための実践経験が必要な方
前提知識、
必要でしょうか？
HTML+CSS の基本的な使用体験
12,580
受講生
739
受講レビュー
2,110
回答
4.9
講座評価
23
講座
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
全体
86件 ∙ (26時間 5分)
講座資料（こうぎしりょう）:
全体
22件
4.9
22件の受講レビュー
受講レビュー 4
∙
平均評価 5.0
受講レビュー 4
∙
平均評価 5.0
受講レビュー 9
∙
平均評価 4.9
受講レビュー 8
∙
平均評価 3.9
受講レビュー 1
∙
平均評価 5.0
￥12,383
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![스프링 프레임워크는 내 손에 [스프2탄]강의 썸네일](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)