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

このオリエンテーションでは、ウェブページを作成するためのさまざまなスキルを学びます。以下に、各レクチャーの内容と学習するものをまとめます。

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

   • テキストの表示設定を確認する方法
   • フォントの選定とその適用方法
   • テキストの色やサイズの変更方法

2. テキストを入力する

   • HTMLでテキストを記述する方法
   • CSSでテキストのスタイルを指定する方法

3. テキストを配置する

   • Flexboxなどを使ってテキストのレイアウトを作成する方法
   • CSSのポジショニング関連プロパティの使用方法

4. 画像の追加

   • 画像ファイルをウェブページに組み込む方法
   • HTMLの<img>タグの使用方法
   • 画像のサイズや表示方法の調整

5. アートボードの整理

   • アートボードの名前変更方法
   • CSSでレイヤーの並び替え方法
   • ペースト機能の使用方法

6. 背景とフッター

   • ウェブページの背景色の設定方法
   • フッターオブジェクトの作成とトレース方法
   • フッターのデザインとトレースの実施

7. 仕上げと完成

   • 実際のウェブページで使用する要素（段落テキスト、アイコンなど）のトレース
   • ページの最終的な整理と確認

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

8. ヘッダーデザイン

   • 複数の要素を組み合わせたデザインの作成方法
   • CSSで複雑なレイアウトを構築する技術の習得

9. モバイルページのコーディング

   • メディアクエリを使った応答型デザインの実装方法
   • CSSで特定の画面サイズに対して異なるスタイルを適用する方法

10. ハンバーガーメニューの実装

    • jQueryや他のJavaScriptライブラリを使ったインタラクティブ要素の実装方法
    • Material Iconsなどのアイコンの使用方法

ナレーションとBGMは、ページのユーザ体験を豊かにするための音声和背景音楽です。Illustratorやフリーアセットサイト（freepik, pixabay, Canvaなど）を使って、必要な画像やビジュアルマテリアルを取得することも学びます。

このオリエンテーションでは、HTML、CSS、JavaScriptの基本から応用技術までを網羅し、実際にウェブページを作成してみる形で学ぶことが目指されています。また、UI/UXデザインの概念も含まれており、単にコードを書くだけでなく、ユーザエクスペリエンスに配慮した設計全般を学ぶことができるはずです。