コース内容
ワイヤーフレームの理解
ワイヤーフレームを理解しましょう！
Webデザインとは
Webデザインについて学習しましょう。
WEBデザインの流れ
課題：Figmaでワイヤーフレームを作ろう
案件レベル教材：LP制作（初案件対応）
Visual Studio Code（VSCode）の使い方
html基礎
head と body の違い
p タグ・brタグ・hタグ
img タグ・ alt タグ
aタグ ・ linkタグ
headerタグ
footerタグ
ulタグ・ olタグ・ liタグ
navタグ
mainタグ・sectionタグ・articleタグ・asideタグ
tableタグ
divタグ
classとは
総合確認テスト
画像加工しよう（Canva）
バナーで使う文字のルールを理解する
バナーはまず読まれることが大前提です。
文字が読みにくいと、どれだけおしゃれでも意味がありません。
配置の考え方を理解する
バナーは、置く順番と位置で見やすさが決まります。
配置が悪いと、内容が頭に入りません。
余白を理解する
余白は「何もない場所」ではなく、見やすさと高級感を作る要素です。
色の基礎を理解する
色は「おしゃれ」のためだけではなく、目立たせる・雰囲気を作る・行動を促すために使います。
写真・素材の使い方を理解する
写真選びで、バナーの質はかなり変わります。
悪い写真を使うと、全体が安く見えます。
バナーの構成を理解する
バナーは「デザイン」より先に、何を書くかの順番が大切です。
反応を取るための導線を理解する
バナーは「きれい」だけではなく、見た人に動いてもらう必要があります。
量産できるようにする
1枚作れるだけでは仕事になりません。
短時間で複数作れることが必要です。
CSSを学ぶ前に
CSS
CSSとセレクタ
CSSの書き方
CSSプロパティ一覧表をHTMLで作成する課題
CSSのプロパティーを一覧表（チートシート）を作成します。
CSSプロパティ一覧表をHTML＋CSSで作成する課題
生徒の評価とレビュー
評価がありません