Overview

▼ご注意ください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

Skills

Reviews