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