WEBデザイン講座《トレースコース》AdobeXDを使ったトレースとデザインカンプを元にコーディングする方法を学習します

▼ご注意ください

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デザイン編】

    1. シェイプの作成とマスク①

    2. シェイプの作成とマスク②

    3. テキストの入力

    4. 画像の追加

    5. 日付の追加

    6. 段落テキストと背景の追加

    7. サイドメニューの追加

    8. フッターの追加

    9. 最終調整と完成

       ※【旧】モバイル用【トレース※WEBデザイン編】は、特典扱いとして引き続きご視聴いただけます。
       

• WEBページのトレース(模写)【トレース※コーディング編】でコーディングした内容を確認(チェック)できるように、各コンテンツごとにテキストレクチャー(ソースの差分)を追加しました。

  • サンプルソース ※ヘッダーデザイン

  • サンプルソース ※メインコンテンツ

  • サンプルソース ※サイドメニュー

  • サンプルソース ※フッター

  • サンプルソース ※モバイルページ

  • サンプルソース ※ハンバーガーメニュー

  • サンプルソース ※最終仕上げ

本講座はWEBページのトレース(模写)に特化したWEBデザイン講座です。

▼対象 (受講条件)

• シリーズ講座のLevel.2 までを修了された方。

• または同等のレベルの方。

  • AdobeXDの基本操作ができる方。

  • HTMLやCSSは中級者レベル(Flexboxの基礎までを修了された方)が望ましいです。

▼カリキュラムの内容 ※各セクションで学ぶこと

本講座は、

1. トレースをする前に必要な【トレースの準備編】と

2. 実際にAdobeXDを使ってWEBデザイントレースをする【トレース WEBデザイン編】と

3. HTMLやCSSなどを使ってコーディングする【トレース コーディング編】

の3部構成となっています。

【トレースの準備編】

1. 「トレースするWEBページを選ぶ」のレクチャーでは、WEBページを選ぶ際に便利なWEBサイトを紹介しています。

2. 「画像を保存する」のレクチャーでは、トレース練習用のサンプルWEBページに使用されている、画像を「Google Chrome の検証ツール」を使って保存する(ダウンロードする)方法について学習します。

3. 「スクリーンショットを撮る」のレクチャーでは、レスポンシブWEBデザインでも、できる限りブラウザ上で表示されている状態に近いスクリーンショットを撮るコツを学習します。

4. 「プラグインのインストール」のレクチャーでは、トレースをする際に便利なプラグインである「Mimic」を導入する方法を学習します。
   ※「Mimic」は、指定したURLから、カラー、フォント、画像を抽出し、一覧化してくれるプラグインです。

5. 「フォントのダウンロード」のレクチャーでは、トレース練習用のサンプルWEBページで使用されているWEBフォント「Googleフォント」をダウンロードし、インストールする方法を学習します

6. 「アートボード・アセット」のレクチャーでは、

   • アートボードの追加

   • トレース用のWEBページ画像(スクリーンショット)を追加する

   • アートボードサイズの変更

   • アセットカラーの登録

   • アセット文字スタイルの登録

  について学習します。

【トレース WEBデザイン編】※モバイル用

1. 「シェイプの作成とマスク」のレクチャーでは、

   • シェイプで三角形を作成する

   • オブジェクト(レイヤー)をロックする

   • ガイドを作成する

   • レイヤー名を変更する

   • シェイプを使用してマスクを作成する

   について学習します。

2. 「テキストの入力」のレクチャーでは、

   • WEBページからテキストを抽出する

   • テキストのカラー、フォントサイズ、フォント名を確認する

   • テキストを入力する

   • テキストを配置する

   について学習します。

3. 「画像の追加」のレクチャーでは、

   • 画像サイズの取得

   • ガイドの作成

   • 画像の追加

   について学習します。

4. 「アートボードの整理」のレクチャーでは、

   • アートボード名の変更

   • レイヤーの並び替え

   • ペーストボード

   について学習します。

5. 「背景とフッター」のレクチャーでは、

   • 背景色の変更

   • フッターオブジェクトの確認

   • フッターのトレース

   について学習します。

6. 「仕上げと完成」のレクチャーでは、段落テキストやハンバーガーメニューのアイコンなどをトレースする流れについて学習します。
   

【トレース コーディング編】

1. 「ヘッダーデザイン」のレクチャーでは、重なり合う2つの三角形と顔写真のデザインをコーディングする方法を学習します。

2. 「メインコンテンツのコーディング」のレクチャーでは、

   • Flexboxを使って、右側のコンテンツ部分と左側のサイドメニュー部分を、2カラムでレイアウトする方法や

   • WEBフォントである「Google Fonts」をfont-familyプロパティで指定する方法

   • 画像の上に、スタイルを適応した日付部分を表示させる方法などについて学習します。

3. 「サイドメニューのコーディング」のレクチャーでは、

   • 順序なしリストにスタイルを設定する方法や

   • アンカー要素のLink擬似クラスとVisited擬似クラスの設定方法、

   • box-sizingプロパティの指定方法などについて学習します。

4. 「フッターのコーディング」のレクチャーでは、

   • 横並びのナビゲーションメニューを追加する方法や

   • コピーライトの記述方法などについて学習します。

5. 「モバイルページのコーディング」のレクチャーでは、

   • メディアクエリの設定方法や

   • 要素を非表示にする方法

   • フォントサイズなどをモバイル用に最適化する方法などについて学習します。

6. 「ハンバーガーメニューの実装」のレクチャーでは、

   • jQueryのプラグインであるDrawerを使った、ハンバーガーメニューの実装方法や

   • Material Icons の設定方法などについて学習します。

• ナレーション・BGMほか

  • ナレーション 竹中 さやか

  • BGM YOU (storeG)

• イラストほか

  • freepik

  • pixabay

  • Canva