|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/web_trace2/
课程评论：没有评论
## WEBデザイン講座《トレースコース》概要 本講座は、Adobe XD を使用したウェブページのトレース（模写）と、トレースしたデザインをもとに HTML・CSS でコーディングする方法を学ぶ実践的なコースです。 **【講座の構成】** 本講座は以下の3部構成で、ウェブデザインのトレーススキルを体系的に習得できるよう設計されています。 1. **トレースの準備編:** * トレース対象となるウェブページの選び方 * トレース練習用の画像の保存方法（Google Chrome 検証ツールを使用） * レスポンシブデザインに対応したスクリーンショットの撮り方 * トレースに役立つ Adobe XD プラグイン「Mimic」のインストールと活用法 * ウェブフォント（Google Fonts）のダウンロードとインストール * アートボード、アセット（カラー、文字スタイル）の設定方法 2. **トレース WEBデザイン編:** * Adobe XD を使用した具体的なトレース作業 * シェイプの作成、マスク、オブジェクトのロック、レイヤー名の変更 * テキストの抽出、入力、配置、スタイルの調整 * 画像の追加、サイズ調整、ガイドの作成 * アートボードの整理、レイヤーの並び替え * 背景、フッター、段落テキスト、ハンバーガーメニューアイコンなどのトレース 3. **トレース コーディング編:** * トレースしたデザインを HTML・CSS でコーディング * ヘッダーデザイン（三角形、顔写真の配置） * Flexbox を使用したカラムレイアウト（サイドメニュー、メインコンテンツ） * Google Fonts の適用、画像上のスタイル調整 * サイドメニューのリストスタイル、アンカー要素の疑似クラス設定 * フッターのナビゲーションメニュー、コピーライトの記述 * メディアクエリを使用したモバイルページの最適化 * jQuery プラグイン「Drawer」を使用したハンバーガーメニューの実装 * Material Icons の設定 **【対象者】** * シリーズ講座の Level.2 までを修了した方、または同等のスキルをお持ちの方 * Adobe XD の基本操作ができる方 * HTML・CSS の基礎（Flexbox の基礎まで）を理解している方（中級者レベルが望ましい） **【特記事項】** * 本講座では、講師ではなくプロのナレーターによるナレーションが採用されています。 * AI がウェブデザイナーの仕事を奪う可能性についての特典レクチャーが追加されています。（2023年10月最新テスト結果（GPT-4V）あり） * Adobe XD のスタータープラン（無料版）提供終了に関するお知らせや、Mimic プラグインの不具合に関するレクチャーも含まれています。 * 講座に関するサポートレクチャーも提供されます。 * Adobe XD のインストール方法が変更されたため、説明動画がアップデートされています。 * 以前のモバイル用トレースレクチャーも特典として引き続き視聴可能です。 * コーディング内容の確認用に、各コンテンツごとのソースコード（差分）も提供されます。
▼ご注意くださいstoreGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。▼新着情報[NEW] 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか？」で9.最新のテスト結果 (GPT-4V) 2023/10/10 を追加しました。※ChatGPTのコーディングレベルがかなりアップしています！【追加】WEBデザイナーの仕事は将来、AIに奪われるのか？【7】【8】※2023年7月上旬版特典動画を追加しました！※シリーズWEBデザイン講座共通の特典動画となります。WEBデザイナーの仕事は将来、AIに奪われるのか？について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください！[new] AdobeXDのスタータープラン(無料版)の提供が終了についてのお知らせを追加しました。AdobeXDのプラグインMimicの不具合についてのテキストレクチャーを追加しました。本講座のサポートについてのレクチャーを追加しました。AdobeXDのインストール方法が変更になったので、説明動画をアップデートしました。WEBページのトレース(模写)【トレース※WEBデザイン編】のPC用のレクチャーを追加しました。WEBページのトレース(模写) PC用【トレース※WEBデザイン編】シェイプの作成とマスク①シェイプの作成とマスク②テキストの入力画像の追加日付の追加段落テキストと背景の追加サイドメニューの追加フッターの追加最終調整と完成※【旧】モバイル用【トレース※WEBデザイン編】は、特典扱いとして引き続きご視聴いただけます。WEBページのトレース(模写)【トレース※コーディング編】でコーディングした内容を確認(チェック)できるように、各コンテンツごとにテキストレクチャー(ソースの差分)を追加しました。サンプルソース ※ヘッダーデザインサンプルソース ※メインコンテンツサンプルソース ※サイドメニューサンプルソース ※フッターサンプルソース ※モバイルページサンプルソース ※ハンバーガーメニューサンプルソース ※最終仕上げ本講座はWEBページのトレース(模写)に特化したWEBデザイン講座です。▼対象 (受講条件)シリーズ講座のLevel.2 までを修了された方。または同等のレベルの方。AdobeXDの基本操作ができる方。HTMLやCSSは中級者レベル(Flexboxの基礎までを修了された方)が望ましいです。▼カリキュラムの内容 ※各セクションで学ぶこと本講座は、トレースをする前に必要な【トレースの準備編】と実際にAdobeXDを使ってWEBデザイントレースをする【トレース WEBデザイン編】とHTMLやCSSなどを使ってコーディングする【トレース コーディング編】の3部構成となっています。【トレースの準備編】「トレースするWEBページを選ぶ」のレクチャーでは、WEBページを選ぶ際に便利なWEBサイトを紹介しています。「画像を保存する」のレクチャーでは、トレース練習用のサンプルWEBページに使用されている、画像を「Google Chrome の検証ツール」を使って保存する(ダウンロードする)方法について学習します。「スクリーンショットを撮る」のレクチャーでは、レスポンシブWEBデザインでも、できる限りブラウザ上で表示されている状態に近いスクリーンショットを撮るコツを学習します。「プラグインのインストール」のレクチャーでは、トレースをする際に便利なプラグインである「Mimic」を導入する方法を学習します。※「Mimic」は、指定したURLから、カラー、フォント、画像を抽出し、一覧化してくれるプラグインです。「フォントのダウンロード」のレクチャーでは、トレース練習用のサンプルWEBページで使用されているWEBフォント「Googleフォント」をダウンロードし、インストールする方法を学習します「アートボード・アセット」のレクチャーでは、アートボードの追加トレース用のWEBページ画像(スクリーンショット)を追加するアートボードサイズの変更アセットカラーの登録アセット文字スタイルの登録 について学習します。【トレース WEBデザイン編】※モバイル用「シェイプの作成とマスク」のレクチャーでは、シェイプで三角形を作成するオブジェクト(レイヤー)をロックするガイドを作成するレイヤー名を変更するシェイプを使用してマスクを作成するについて学習します。「テキストの入力」のレクチャーでは、WEBページからテキストを抽出するテキストのカラー、フォントサイズ、フォント名を確認するテキストを入力するテキストを配置するについて学習します。「画像の追加」のレクチャーでは、画像サイズの取得ガイドの作成画像の追加について学習します。「アートボードの整理」のレクチャーでは、アートボード名の変更レイヤーの並び替えペーストボード について学習します。「背景とフッター」のレクチャーでは、背景色の変更フッターオブジェクトの確認フッターのトレースについて学習します。「仕上げと完成」のレクチャーでは、段落テキストやハンバーガーメニューのアイコンなどをトレースする流れについて学習します。【トレース コーディング編】「ヘッダーデザイン」のレクチャーでは、重なり合う2つの三角形と顔写真のデザインをコーディングする方法を学習します。「メインコンテンツのコーディング」のレクチャーでは、Flexboxを使って、右側のコンテンツ部分と左側のサイドメニュー部分を、2カラムでレイアウトする方法やWEBフォントである「Google Fonts」をfont-familyプロパティで指定する方法画像の上に、スタイルを適応した日付部分を表示させる方法などについて学習します。「サイドメニューのコーディング」のレクチャーでは、順序なしリストにスタイルを設定する方法やアンカー要素のLink擬似クラスとVisited擬似クラスの設定方法、box-sizingプロパティの指定方法などについて学習します。「フッターのコーディング」のレクチャーでは、横並びのナビゲーションメニューを追加する方法やコピーライトの記述方法などについて学習します。「モバイルページのコーディング」のレクチャーでは、メディアクエリの設定方法や要素を非表示にする方法フォントサイズなどをモバイル用に最適化する方法などについて学習します。「ハンバーガーメニューの実装」のレクチャーでは、jQueryのプラグインであるDrawerを使った、ハンバーガーメニューの実装方法やMaterial Icons の設定方法などについて学習します。ナレーション・BGMほかナレーション 竹中 さやかBGM YOU (storeG)イラストほかfreepikpixabayCanva
