モバイルウェブパブリッシング・ポートフォリオ with Figma

「モバイルウェブUIデザインおよびパブリッシング制作の必須理論とノハ​​ウ
体系的な実践制作」

Step 1. 피그마(Figma)로 모바일 웹 UI 디자인 제작
Step 2. 모바일 웹 HTML 와이어프레임 모든 페이지 상세한 제작
Step 3. CSS 변수(Var) 활용한 다양한 레이아웃의 다수 페이지 퍼블리싱 제작
Step 4. 완성된 퍼블리싱 결과물을 더 완벽하게 하는 퍼블리싱 마무리 작업

CodingWorksがこれまで数多くのオフラインスクールの学生たちに教えてきた、モバイルウェブパブリッシング制作のノウハウが詰まっています。完走後には、一段と向上したパブリッシングの実力を身につけていただけると確信しています！

🚩 講義アップデート(2024.09.25)

• スクロールパディング、スクロール後のデザイン変更(jQuery)、ダミー画像の活用
• モバイルブラウザ検知JavaScript（アロー関数、User Agent）

🚩 講義アップデート(2023.07.06)

• 追加作業で空のショッピングカートを表示する & ショッピングカートのチェックボックス全選択/解除

▲ HTML+CSS モバイルモックアップ（Mockup）制作後、iframeを活用

▲ HTML+CSS モバイルモックアップ(Mockup)制作(3種類のモバイルモックアップ完成版を提供)

💡 この講義が持つ他の魅力ポイントは？

1. フィグマ（Figma）の実践制作を通じて、モバイルウェブUIの制作能力を身につけることができます。
2. パブリッシングの実力を大幅に向上させるHTMLワイヤーフレームの詳細な作成法を学びます。
3. CodingWorksの経験者のようにパブリッシングする、クリーンコーディング（Clean Coding）の定石を学びます。
4. 多様な実習と例題、分かりやすい説明、深みのある概念を詳しく解説します。
5. モバイルウェブパブリッシングのために受講生が知っておくべきすべてのことを説明します。

▲ 프리로딩 페이지 / 로그인 페이지 / 회원가입 페이지

 

🚩 プリローディングページ

1. Figma（フィグマ）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. モバイルウェブのトップページで、ユーザーにそのモバイルウェブのアイデンティティを提示
3. JavaScriptのsetTimeoutで指定されたページへ自動移動
4. インラインJavaScriptを活用してdiv全体にhtmlファイルをリンクする

🚩 ログインページ

1. Figma（フィグマ）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. 様々なフォーム要素をFigmaでデザインし、デザインの結果と同じようにパブリッシング作業
3. HTMLフォーム（Form）要素の特徴と属性に関する詳細な学習
4. 味気ないフォーム要素をCustom CheckboxまたはCustom RadioにデザインするCSS相互作用の学習
5. 下部のGNBを別ファイルとして作成し、jQueryでLoadしてInclude作業（コンポーネント化）
6. SVGイメージの使用方法
7. フォントアイコン（Bootstrap Icons）の使い方と活用方法

🚩 新規会員登録ページ

1. Figma（フィグマ）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. ログインページと同様に、様々なフォーム要素をFigmaでデザイン
3. HTMLフォーム（Form）要素の特徴と属性に関する詳細な学習
4. 味気ないフォーム要素をきれいにデザインするCSSプロパティの適用
5. フォーム要素の疑似クラス活用（:focus ::placeholder）
6. 上部のHeaderを別ファイルで作成し、jQueryでLoadする作業

▲ マイページ / メインページスライダー / メインページタブメニュー & フッター

🚩 マイページ

1. フィグマ（Figma）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. 既存のカードUIを様々な形で再利用する方法
3. バッジ（Badge）デザインと新しいカードUIデザインおよびパブリッシング
4. Flexレイアウトの使い方と活用
5. 仮想クラス :before :afterでフォントアイコンのUnicodeを活用

🚩 メインページ

1. Figma（フィグマ）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. 複雑なHTML構造を管理し、整理された階層構造を作る方法（クリーンコーディング）
3. Slick Slider（スリックスライダー）の使い方と、Custom CSSで綺麗にカスタマイズする方法
4. メインスライダーだけでなく、カードUI形式の複雑なスライダー制作
5. 小さなモバイル、大きなモバイル、タブレットまですべてに対応するResponsive Sliderの制作
6. モバイルウェブのコンテンツ拡張性のためのインタラクティブなCSSタブメニュー制作
7. CSSプロパティであるObject-fitの実践的な使用方法
8. 必須のjQueryインタラクションメソッド（クラス制御、要素選択、イベントハンドラーなど）
9. 必須のインラインJavaScript活用方法
10. CSS擬似クラスを使用したcounter-resetによるリストのナンバリングデザイン

▲ 詳細ページ（スライダー、商品関連アコーディオン、購入ボタンのインタラクション）

🚩 製品詳細ページ

1. フィグマ（Figma）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. 複雑なHTML構造を管理し、整理された階層構造を作る方法（クリーンコーディング）
3. Slick Slider（スリックスライダー）の使い方と、Slick SliderをCustom CSSでおしゃれにカスタマイズする方法
4. jQueryで下段の商品関連アコーディオンナビゲーションをパブリッシング
5. 購入ボタンを押した際に、ショッピングカートと今すぐ購入に分岐するjQueryモーダル(Modal)
6. フォントアイコンお気に入り(wish)ボタンのデザイン相互作用(toggleClass)
7. 新しいHeaderを別ファイルとして作成し、jQueryでLoadする作業

▲ カテゴリーページ / ショッピングカートページ / 検索ページ

🚩 カテゴリーページ

1. フィグマ（Figma）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. ジェイクエリ（jQuery）カテゴリーアコーディオン制作
3. 選択した要素に応じたCSSスタイルの変更
4. 仮想クラス :before :afterでフォントアイコンのUnicodeを活用

🚩 ショッピングカートページ

1. フィグマ(Figma) UIデザインおよびHTMLワイヤーフレーム構造の制作
2. ショッピングカートカードのUIデザインおよびパブリッシング
3. 既存のフォーム要素をCustom CSSで制作（個数選択select）
4. jQueryを活用したカート内アイテムの削除および全削除
5. 様々なCSS3属性(accent-color, zoom)

🚩 検索ページ

1. フィグマ（Figma）UIデザインおよびHTMLワイヤーフレーム構造の制作
2. 検索フォーム要素へのフォントアイコン挿入と :focus ::placeholder の使用方法
3. CSS擬似クラスを使用したcounter-resetの使用方法
4. ジェイクエリーを活用した検索結果の削除および全削除
5. CSS仮想クラスを使用したcounter-resetでリストのナンバリングをデザインする

▲ Slick SliderのCSS変更ノウハウおよびGNBナビゲーションのチェック

🚩 SlickスライダーのCSS変更ノウハウ

1. デベロッパーツールを通じて、どの部分を修正すべきか正確な位置とセレクタの学習
2. マルチスリックスライダー使用時の衝突を防止するCSSセレクタ宣言のノウハウ学習
3. Custom CSS Slider(ドットナビゲーション、前後ナビゲーションなど)

🚩 GNBナビゲーションのチェック

1. クリックされたファイルが開き、そのファイルの場所をGNBナビゲーションで別のデザインとしてチェック（Coupangアプリと同じ方式）
2. Headerの戻るボタンをインラインJavaScriptで自動化作業

▲ パブリッシング作業の仕上げ

🚩 パブリッシング作業の仕上げ(すべてのパブリッシング完了後の修正・補完・追加作業)

1. 製品詳細(goods-detail.html)オーバーレイの問題
2. 全幅サイズの調整(375px → 100%)
3. GNB(gnb.html) 通知アイコンが固定されない問題
4. フロントスライダーの高さのイシュー & コンテンツ下部のマージン設定
5. Slick(スリック)スライダーのCDNを使用する
6. インラインJavaScriptでHTMLファイルをリンクする
7. インラインJavaScriptで進む・戻るをリンクする
8. GNBファイルへのリンク ＆ 全作業ページの漏れなき提示
9. GNBに連結されたファイルでGNBが活性化されたナビゲーションをチェック
10. 変数(Var)を活用した大きなサイズのモバイルとタブレットに合わせたレイアウト
11. HTML+CSSでナイスなモバイルモックアップ(Mockup)を作成し、iframeで活用する

💡 ダウンロードファイルの使用方法およびフォルダの内容

① デザイン作業を開始する際にダウンロードしてください。
② パブリッシング作業を開始する際にダウンロードしてください。
③ パブリッシングの学習中に受講生のコードと比較する場合にダウンロードしてください。
④ モバイルモックアップを作成する場合にダウンロードしてください。

💡 パブリッシング作業テキストエディタ <Visual Studio Code>

該当講座<モバイルウェブパブリッシングポートフォリオ with Figma>はビジュアルスタジオコード(Visual Studio Code)で制作された講座です。ビジュアルスタジオコードは使用制限のないフリープログラムです。すべての講義動画はビジュアルスタジオコードを基準に説明しています。
以下のコーディングワークスYouTube動画を通じて基本的な使い方を先に習得してから、<セクション 3. モバイルウェブ詳細パブリッシング(HTML+CSS+JS)>を学習してください。

Visual Studio Code（ビジュアルスタジオコード）をダウンロードする

Q. 予備知識や準備事項は必要ですか？

特別な事前知識や準備事項はありません。HTML+CSSの基本的な使用経験があれば十分に付いていくことができ、期待通りの実力向上と成果を得ることができます。ただし、CSSの中級理論を頻繁に使用するため、以下の学習内容はある程度理解しておく必要があります。

😀 コーディングワークス YouTube プレイリスト - モバイルウェブパブリッシングを上達させるためのCSS中級理論

Q. グラフィックソフトの使用経験がありませんが、フィグマ（Figma）でデザインできますか？

紹介動画でも言及しましたが、Figmaは努力に対するパフォーマンスが非常に高いです。パワーポイントをある程度扱えるのであれば、十分にFigmaデザインの授業についていくことができます。ただ、よりスムーズに授業を理解していただくために、<[必読] モバイルWeb UIデザイン Figma基礎講座> の動画を視聴し、紹介されているYouTubeを通じて予習しておくことをお勧めします。

Q. 差別化される核心的なコンテンツは何ですか？

デザインの専門家としてではなく、予備知識が全くない人がフィグマ（Figma）を十分に活用できるレベルのデザイン講義なので、<セクション1. モバイルウェブUIデザイン制作 with Figma>のフィグマデザイン作業の授業は、専門家のための授業というよりは、フィグマを初めて始める人が受け入れやすいレベルです。
しかし、<セクション2. モバイルウェブパブリッシングのためのHTMLワイヤーフレーム構造>と<セクション3. モバイルウェブ詳細パブリッシング(HTML+CSS+JS)>の授業は、長年パブリッシング講義を行ってきた講師として、パブリッシングの実力を高める最も確実で体系的な方法で授業を行います。そして、モバイルウェブパブリッシングという不慣れで難しい作業を、段階的にハイレベルな成果物へと導き出せるように制作された授業が核心だと考えています。

Q. デザイン非専門家でも受講できる講義ですか？

十分に可能です。セクション1の<[必読] モバイルウェブUIデザイン Figma基礎講座>の動画にもありますが、PowerPointを使いこなせる程度であれば、Figmaを学習し活用するのに全く支障はありません。私もFigmaの使用を短期間でこの講義のために学習しましたが、質の高いデザインの結果を得ることができました。

Q. デザイナーなのでフィグマは得意なのですが、セクション1のフィグマデザインを学習する必要がありますか？

紹介動画でも言及しましたが、私はフィグマ（Figma）を長く使っていたり、得意だったりするわけではありません。ですので、Figmaの作業に自信がある方であれば、<セクション 1. モ바일 웹 UI 디자인 제작 with Figma>は飛ばして、<セクション 2. 모바일 웹 퍼블리싱을 위한 HTML 와이어프레임 구조>へ直接進んで学習してください。

Q. モバイルウェブパブリッシングの制作過程をなぜ学ぶ必要があり、具体的な期待効果は何ですか？

モバイルウェブは、個人ポートフォリオの制作物として最も重要度が高いです。そのため、モバイルウェブの制作物があれば、就職競争力が高まります。就職ポートフォリオとしての役割だけでなく、ほとんどの企業でモバイルウェブプロジェクトを進行中、あるいは進行しようとしています。このような企業の立場からすると、よく作り込まれたモバイルウェブポートフォリオがあれば、就職や転職において非常に強力なリファレンスになると考えられます。

モバイルウェブは個人ポートフォリオの制作物として最も重要度が高いです。そのため、モバイルウェブの制作物があれば就職競争力が高まります。就職ポートフォリオとしての役割だけでなく、ほとんどの企業でモバイルウェブプロジェクトを進行中、あるいは進行しようとしています。このような企業の立場からすると、よく作り込まれたモバイルウェブポートフォリオがあれば、就職や転職において非常に強力なリファレンスになると思います。

具体的な期待効果は、実際には人によって異なります。しかし、Coding Worksが確信を持って言えることは、「HTMLワイヤーフレーム構造を作る能力が大幅に向上」するということです。多様なHTMLワイヤーフレーム構造を作りながら、複雑なHTML階層構造をどのように体系的に整理すべきか、十分なトレーニングを行います。また、一貫性のあるクラス名をどのようにネーミングし、共有すべきか、一緒に作りながら詳細にレッスンします。

<セクション 2. モバイルウェブパブリッシングのためのHTMLワイヤーフレーム構造>で、多様なHTMLワイヤーフレーム構造を作り、<セクション 3. モバイルウェブ詳細パブリッシング(HTML+CSS+JS)>で実践的なモバイルウェブパブリッシングを適用する段階まで訓練するため、今後、大抵のウェブUIレイアウトを作成することに自信が持てるようになります。

Q. 授業内容はどのレベルまで扱いますか？

モバイルウェブの特性上、ファイル数とフォルダ数が多いです。そのため、かなりのスピード感で多くの内容が進行します。どのレベルまでかというのは個人の基準によって異なりますが、パブリッシャーの個人ポートフォリオとして十分なレベルで制作する授業内容です。それだけでなく、実務でモバイルウェブを制作するレベルと考えていただいても十分なほどの授業内容です。

Q. 全体の講義時間はどのくらいですか？

全動画講義の時間は約24時間で、深い学習のために十分な講義時間を用意しています。全体として、パブリッシングのための準備作業とパブリッシング作業が全体の80%近くを占め、18時間ほどになります。
Figma UIデザイン - 5時間40分 / HTMLワイヤーフレーム構造 - 4時間30分 / パブリッシング - 14時間15分

Q. 受講に関する注意事項（必要な環境、その他の留意事項など）はありますか？

授業内容が多く、スピード感を持って進行します。かといって十分な説明なしに進むのではなく、詳細に説明します。しっかりついてきていただけると信じています。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション2の[必読] 努力の割にパブリッシングの実力が伸びない理由の動画に詳しく説明されていますので、参考にしてください。

講師紹介 ✒️

<モバイルウェブパブリッシングポートフォリオ with Figma> 講義を制作した コーディングワークスは、現在まで300名以上の国費パブリッシング課程の学生に、パブリッシングの理論、活用、個人ポートフォリオホームページ制作を教えています。特にパブリッシャー就職のためのすべての準備過程をAからZまで完璧にガイドし、ほとんどの学生が課程終了後すぐに就職できるよう、長年パブリッシング講義だけを専門に行ってきた講師です。また、Inflearnでパブリッシング関連の講義を行いながら、Inflearnの受講生の皆様からも非常に役に立ったという評価をいただいています。

❤ コーディングワークスの受講生から届いたパブリッシャー合格の知らせ

▲ 国費支援パブリッシング課程で私から4ヶ月半ほど学んだ学生から、就職が決まったとカトク（LINE）が届きました。

▲ コーディングワークスの個人ポートフォリオ制作オフライン講座の受講生から、面接・就職結果のLINE（カトク）が届きました。(2023.4.24)

❤ コーディングワークスの受講生がパブリッシャーとして就職後に送ってくださったメール

 

先生、こんにちは :)

先生のInflearnの講義を受けていた学生の金O正です。
今年の夏、個人ポートフォリオについてアドバイスをいただこうとメールを差し上げた学生です。
覚えていらっしゃいますでしょうか？（笑）

ほかでもありませんが、
先生にアドバイスをいただいたポートフォリオで、パブリッシャーとして就職に成功したという報告を伝えたくてメールを送りました！

しかも！！
求人サイト（サラムイン）に載せていたポートフォリオを見て会社側から先に連絡があり、Zoomで面接を受けて合格しました！
会社側では希望年収を考慮してくれましたし、デザインや開発業務を行わない、本当にパブリッシャー！としての業務だけに専念できる会社に入ることになりました。

経験者パブリッシャーを募集している会社でしたが、新人である私に連絡が来たので、なぜ私に連絡をくださったのかと尋ねたところ、
他の人たちのポートフォリオもたくさん見たけれど、私のポートフォリオにあった「機能定義書」が目に留まって連絡したとのことでした。

これらすべてが先生の講義のおかげだと思っています。
先生の講義を聞いていなければ、私もやはり平凡なポートフォリオになっていたはずですが、先生が教えてくださったコツのおかげで就職に成功することができました！

直接お会いしたことはありませんが、
ポートフォリオを作成している間、先生の講義を見ながらとても頼りにして、信じて一生懸命作りました！

塾で長い時間授業を聞きながら積み上げた実力よりも、先生の講義を聞いてポートフォリオを作った3ヶ月間のほうが、実力が格段に上がったと実感しています。

切実に願い、
先生がおっしゃった通りに信じて取り組んだところ、本当に良い結果が出ました。

本当にありがとうございました！

コロナにお気をつけて
また良い講義でお会いしたいです :)

---

先生、こんにちは〜。Inflearn受講生のOOOです〜。メールアドレスは他の受講生への回答を見て知りました（笑）

感謝の気持ちをお伝えしたくて。ｗｗ

これまで先生の講義を受講し、2週間ほど履歴書を出しながら苦労もしましたが…
ある会社から面接合格をいただき、出勤することになりました。本当にありがとうございます…（涙）

実は私が32歳ということもあり、不安が多かったです。履歴書をたくさん送ったのですが、なかなか連絡も来ず…
ですが、この会社の採用担当者の方は、自分はスクール出身者はあまり好きではないとおっしゃっていました（笑）
私が入社することになった会社は小さいですが、開発者もいてウェブデザイナーもいます。
3ヶ月間教育を受けてから実務に投入されるという形式でした。
距離も少しあり、年収も低い方ではありますが…一生懸命学んで年収を上げていこうと思います〜（笑）

これまで本当にありがとうございました。質問にも丁寧に答えてくださり、こうしてオンラインで講義を受けて就職が決まったので、とても不思議な気持ちです。

これからも先生の講義を聞きながら、さらに実力を高めて勉強し続けます。ファイト〜！

🙋🏻‍♂️ 質問する前に必ず！読んでください〜！！

学習を進める中で気になることがあれば質問してください。質問の際は、うまくいかない内容とコード、そしてブラウザの結果画面のキャプチャを添付してください。コードについては、HTML、CSS、JSのコードをすべて載せていただければ、正確な回答を差し上げることができます。

質問文にコードがなく文章だけで問題を説明されると、非常に簡単な内容でない限り、正確な回答を差し上げることが難しくなります。そうなると、私が「HTML、CSS、JSのコードとブラウザのキャプチャをアップロードしてください〜」と再度返信せざるを得なくなり、結局解決策を得るまでに手間と時間が余計にかかってしまいます。

▲ 該当講義コミュニティの「よくある質問」をまず確認してください〜

⚡ 効果的な学習のために、ぜひ！コーディングワークス・パブリッシングのYouTubeを参考にしてください。

コーディングワークス・パブリッシングのYouTubeチャンネルで、理論動画講義を並行して視聴することをお勧めします。もちろん、すべての理論動画がYouTubeチャンネルにあるわけではありませんが、重要な理論動画はほぼすべて揃っています。動画の数が多いので、動画を探す際は以下の例のように検索することをお勧めします。

コーディングワークス パブリッシング YouTubeチャンネル： https://www.youtube.com/codingworks