コース内容

ワイヤーフレームの理解

ワイヤーフレームを理解しましょう！

0/11

Web制作に欠かせないワイヤーフレームとは？意味や役割、作り方まで解説

2. 色やフォントはワイヤーでは決めない

3. ワイヤーフレームの主目的

4. いつ作る？

5. 誰が作る？

6. 「1人で作る」が危険な理由

7. ワイヤーフレームの役割：情報設計の確認

8. デザイナーへの指示書として

9. カンプ／モックアップとの違い

10. プロトタイプとの違い

ワイヤーフレームに対する理解度チェック

Webデザインとは

Webデザインについて学習しましょう。

0/12

1. Webデザインとは

2. ユーザー目線

3. 目的を決める

4. 情報の優先順位

5. レイアウト

7. 色の使い方

9. 視線の流れ

10. ボタン・導線

最低限覚えるポイントです。

Webデザインとは理解度チェック

WEBデザインの流れ

0/6

④ 仕事になる

レベル分け（自分の位置）

WEBデザインの流れ（確認）

演習課題

0/2

「さんくすの紹介ページ」を考える

確認問題（理解チェック）

課題：Figmaでワイヤーフレームを作ろう

0/7

Figmaでワイヤーフレームを作ろう

① 新規ファイル作成

② フレーム作る

③ 四角を置く

④ 上から並べる

⑤ 文字を少し入れる

課題：Canvaでワイヤーフレームを作ろう

0/7

課題：Canvaでワイヤーフレームを作ろう

① 新規デザイン

② 四角を作る

③ 上から並べる

④ 文字を入れる

⑤ 色は使わない

案件レベル教材：LP制作（初案件対応）

0/2

案件レベル教材：LP制作（初案件対応）

案件レベルLPデザイン（完成版）

0/6

① ファーストビュー（最上部）

② 悩み（共感）

③ 解決（提案）

④ 強み（差別化）

⑤ 信頼（安心）

⑥ CTA（行動）

Visual Studio Code（VSCode）の使い方

0/7

① インストール

（必須）プラグインをインストールしよう！日本語化

② 画面の見方

③ フォルダを開く

④ ファイル作る

⑤ HTMLを書く

⑥ ブラウザで開く

html基礎

0/16

HTMLタグとは？

1. タグ・要素・中身の違い

2. タグの2種類：閉じるもの／閉じないもの

3. 属性（attribute）＝タグのオプション

4. 入れ子（ネスト）のルール

5. ブロック要素／インライン要素（配置の性格）

6. HTMLの基本骨格

7. セマンティックタグ

8. よく使う“文字系”タグ

9. 画像タグ

11. ボタンって何？

12. フォーム（問い合わせの部品）

13. よくあるミス

課題①：HTMLタグ基礎

理解度チェック

head と body の違い

0/10

1　headとは何か

2　bodyとは何か

3　headは表示されない

4　bodyはページの本体

5　headに書く主なタグ

6　bodyに書く主なタグ

7　headはSEOに関係する

8　bodyはユーザー体験に関係する

9　headとbodyの順番

10　よくある初心者ミス

p タグ・brタグ・hタグ

0/10

1　pタグとは

2　pタグを使う理由

3　pタグの基本ルール

4　brタグとは

5　brタグの特徴

6　brを使うべき場所

7　hタグとは

8　hタグの例

9　hタグの構造

10　p / br / h の関係

img タグ・ alt タグ

0/10

1　imgタグとは何か

2　imgタグは終了タグがない

3　src属性とは

4　alt属性とは

5　imgとaltはセットで考える

6　altに何を書けばいいか

7　altを空にする場合

8　imgタグでよく使う属性

9　imgタグのよくあるミス

10　実務での書き方

aタグ・ linkタグ

0/10

1　aタグとは何か

2　linkタグとは何か

3　aタグとlinkタグの最大の違い

4　aタグで最重要の href

5　linkタグで最重要の rel

6　aタグは本文で使う

7　linkタグは主にheadで使う

8　aタグのよく使う属性

9　linkタグのよく使う属性

10　よくある初心者ミス

headerタグ

0/11

1　headerタグとは

2　実務でよくあるheader

3　headerの役割

4　headerの中によく入るタグ

5　実務レベルのheader

6　CSSで横並び

7　headerが使える場所

8　よくある初心者ミス

9　headerと他タグの関係

10　実際のサイト構造

課題　headerタグ(h・nav・ul・li・a)の理解

footerタグ

0/12

1　footerタグとは

2　footerに入れる内容

3　基本構造

4　footerはページの最後

5　footerは複数使える

6　footerとheaderの違い

7　footerの実務例

8　SEOとの関係

9　footerでよく使うタグ

10　初心者ミス

11　コピーライト

課題　footerの使い方の確認

ulタグ・ olタグ・ liタグ

0/10

1　ulタグとは

2　olタグとは

3　liタグとは

4　ulの構造

5　olの構造

6　ulとolの使い分け

7　ナビゲーションでの使い方

8　リストの入れ子

9　CSSでよく変更する部分

10　初心者ミス

navタグ

0/11

1　navタグとは

2　よくあるnavの場所

3　実務での書き方

4　なぜnavを使うのか

5　headerと組み合わせる

6　CSSで横並びにする

7　navを使うべき場所

8　navタグの構造

9　実務レベルの例

10　よくある初心者ミス

navタグ実技課題

mainタグ・sectionタグ・articleタグ・asideタグ

0/9

1　mainタグとは

2　mainタグの役割

3　mainに入れる内容

4　mainに入れない内容

5　mainは1ページに1つ

6　SEOとの関係

8　mainとsectionの違い

9　mainの実務構造

10　初心者ミス

tableタグ

0/22

1　tableタグ

5　captionタグ

6　theadタグ

7　tbodyタグ

8　tfootタグ

テーブルタグ課題

課題① 基本の表を作る

課題② 人物一覧テーブル

課題③ 表タイトルをつける

課題④ 料金表

課題⑤ colspan を使う

課題⑥ rowspan を使う

課題⑦ 売上表

課題⑧ 自己紹介テーブル

課題⑨ 時間割

課題⑩ 応用（実務レベル）

課題①〜⑩提出方法

divタグ

0/11

1. divタグとは何か

2. divは何のために使うのか

3. divは見た目を変えるタグではない

4. divはブロック要素として扱われる

5. divとspanの違い

6. divの中には何を入れられるか

7. divによく付ける属性

8. divの実務的な使い方

9. divを使うべき場面、使わないほうがいい場面

10. divのよくあるミス

divタグ課題

classとは

0/7

1　classとは何か

2　classを使う理由

3　classは何回でも使える

4　classの付け方の基本ルール

5　実務でよくあるclass構造

6　classの実務用途

7　初心者ミス

idタグとは

0/6

1　idとは何か

2　idの最大の特徴

3　idの名前ルール

4　実務でよく使うid

5　classとの違い

6　初心者ミス

総合確認テスト

0/2

HTMLまとめテスト

HTML実技テスト

画像加工しよう（Canva）

0/9

1-1　Canvaとは何か

1-2　画面の見方

1-3　新規デザインの作り方

1-4　素材の追加

1-5　編集の基本

1-7　レイヤー

1-8　保存と書き出し

バナー課題①

バナーで使う文字のルールを理解する

バナーはまず読まれることが大前提です。文字が読みにくいと、どれだけおしゃれでも意味がありません。

0/7

2-1　文字が持つ役割

2-2　文字の優先順位　文字の優先順位

2-3　フォントの印象

2-4　フォント数の制限

2-5　サイズ設計

2-6　行間と文字間

2-7　強調の仕方

配置の考え方を理解する

バナーは、置く順番と位置で見やすさが決まります。配置が悪いと、内容が頭に入りません。

0/6

3-1　人の視線の流れ

3-2　よくある配置パターン

3-3　中央配置が向いているもの

3-4　左揃えが向いているもの

3-5　写真とのバランス

3-6　揃えるという感覚

余白を理解する

余白は「何もない場所」ではなく、見やすさと高級感を作る要素です。

0/6

4-1　余白とは何か

4-2　余白が少ないとどう見えるか

4-3　余白があるとどう見えるか

4-4　外側の余白

4-5　内側の余白

4-6　余白の統一

色の基礎を理解する

色は「おしゃれ」のためだけではなく、目立たせる・雰囲気を作る・行動を促すために使います。

0/6

5-1　色の役割

5-2　色数を増やしすぎない

5-3　色の心理

5-4　背景と文字の相性

5-5　強調色の使い方

5-6　同じデザインで色だけ変える

写真・素材の使い方を理解する

写真選びで、バナーの質はかなり変わります。悪い写真を使うと、全体が安く見えます。

0/6

6-1　写真の役割

6-2　良い写真の条件

6-3　悪い写真の例

6-4　文字を載せる前提で写真を選ぶ

6-5　写真編集

6-6　切り抜きや背景処理

バナーの構成を理解する

バナーは「デザイン」より先に、何を書くかの順番が大切です。

0/6

7-1　バナーの基本構成

7-2　キャッチコピーとは

7-3　補足説明とは

7-4　CTAとは

7-5　情報量の調整

7-6　バナーの種類ごとの構成

反応を取るための導線を理解する

バナーは「きれい」だけではなく、見た人に動いてもらう必要があります。

0/5

8-1　CTAの見せ方

8-2　押したくなる文言

8-3　矢印やアイコン

8-4　限定感の作り方

8-5　信頼要素

量産できるようにする

1枚作れるだけでは仕事になりません。短時間で複数作れることが必要です。

0/4

9-1　テンプレート化

9-2　差し替え作業

9-3　シリーズ制作

9-4　時短の考え方

総合確認テスト

1-9までの問題を全て出題していますのでしっかり復習しながら終了すること

0/2

総合確認テスト

総合課題テスト

CSSを学ぶ前に

0/1

htmlとcssが使えて半人前です。

CSS

0/20

CSSとは何か

CSSの書き方（仕組みの理解）

セレクタ①（対象を選ぶ仕組み）

セレクタ②（条件指定）

色の指定（表現の理解）

文字のスタイル（可読性の設計）

テキスト装飾（読みやすさ調整）

ボックスモデル①（構造理解）

ボックスモデル②（余白の支配）

表示形式（レイアウトの入口）

displayの本質

position①（基準の理解）

position②（自由配置）

float（歴史と仕組み）

Flexbox①（革命）

Flexbox②（方向）

Flexbox③（配置）

Flexbox④（応用）

背景（視覚設計）

装飾（UI完成度）

CSSとセレクタ

0/10

CSS子孫セレクタの本質と設計思想（完全理解）

HTML階層構造と子孫セレクタの関係を完全に理解する

子孫セレクタと範囲制御というCSSの本質的な考え方

子孫セレクタの実務使用と現場での役割

子孫セレクタと子セレクタの違いを実務視点で理解する

子孫セレクタとCSSの優先順位（Specificity）の関係

カスケード（継承と重なり）と子孫セレクタの関係

子孫セレクタがもたらす可読性と設計の整理効果

子孫セレクタと保守性向上の関係

子孫セレクタと再利用性（コンポーネント設計）の関係

CSSの書き方

0/10

CSSの基本構造と正しい書き方の理解

セレクタの種類と使い分けの基本

文字に関するCSSプロパティの理解と実務活用

余白を制御するmarginとpaddingの本質理解

width・heightとサイズ設計の基本理解

backgroundプロパティと背景デザインの設計

borderと枠線デザインの基礎理解

border-radiusと角丸デザインの基本

box-shadowと影を使った立体表現の基本

overflowと要素のはみ出し制御の理解

CSSプロパティ一覧表をHTMLで作成する課題

CSSのプロパティーを一覧表（チートシート）を作成します。

0/1

CSSプロパティ一覧表をHTMLで作成する課題

CSSプロパティ一覧表をHTML＋CSSで作成する課題

0/2

重要ポイント！！CSSの取り扱い

CSSプロパティ一覧表をHTML＋CSSで作成する課題

Webクリエイター基礎講座

実務では、imgは単独で置くだけでなく、リンクやカードの中に入ることが多いです。

例1　ロゴ画像

<a href=“/”>
<img src=“logo.png” alt=“Yoshikawa Design Lab”>
</a>

例2　記事カード

<div class=“card”>
<img src=“webdesign.jpg” alt=“ノートパソコンでWebデザインをしている様子”>
<h2>Webデザイン講座</h2>
<p>初心者向けの講座です。</p>

</div>

例3　装飾画像

<img src=“bg-shape.png” alt=“” class=“decoration”>

実務の考え方

画像は何のために置いているか
見えない人にどう伝えるか
飾りか、意味があるか
この3つを考えると、altが書きやすくなります。
まとめ

imgタグの役割
- 画像を表示する
- srcで画像場所を指定する
- 終了タグは不要
alt属性の役割
- 画像の代替テキスト
- 読み上げや画像非表示時に内容を伝える
- 意味がある画像には必須級
- 飾り画像なら alt="" も使う
- 最低限の覚え方
  1. img = 画像を出す
  2. src = 画像の場所
  3. alt = 画像の説明
  4. 飾りだけなら alt=""
  基本の完成形
  
  <img src=“sample.jpg” alt=“机の上に置かれたノートパソコン”>