実践基礎編
Web作成の基本となるHTMLとCSSを学習。
HTML
文書の基本構造。
<p>～</p>
<h1>～</h1>
<h2>～</h2>
<h3>～</h3>
<ol>～</ol>
<ul>～</ul>
CSS
Webページの「見た目＝つまりスタイル」を設定
文字の形、大きさ、色、配置
枠線の色、太さ、装飾
背景、配置
実践応用編
ブログを作成
Webデザインのためには、閲覧する立場ではなく、情報を発信する立場になる。
情報発信は情報を発信して、情報発信のポイントがわかる。
手っ取り早く、情報発信するためには無料ブログを利用する。
無料ブログで記事を作成しつつ、CSSを実体験する。
文章作りのトレーニング
実際に記事を作成することで、文章を磨いていきたい。
相手に伝わるように記事を書くトレーニングを積み重ねて、文章を磨く。
Web作成
WordPressでWebサイト構築
ブログで情報発信の練習を行った後、サイト構築を目的にWordPressを利用した学習を行う。
調査
Webページ閲覧（日常生活の中で意識的に閲覧する）
作る立場で既存のWebサイトを観察する。
いいところ、わかりやすいところ、いいデザイン
わかりにくいところ、修正したい部分
サイト構造
企業・市区町村・公共Webサイト
| サイト名 | URL | 検索キーワード（Google検索） | ポイント |
| 川越市 | https://www.city.kawagoe.saitama.jp/ | 川越市 | デザインは？ 見やすさは？ |
| 埼玉県 | https://www.pref.saitama.lg.jp/ | 埼玉県 | どんな内容？ |
| 厚労省 | https://www.mhlw.go.jp/index.html | 厚生労働省 | 新型コロナ感染情報 高齢者対策 雇用 |
| キッズ外務省 | https://www.mofa.go.jp/mofaj/kids/index.html | キッズ外務省 | 言葉づかい、色使い 表を利用した表現 |
サイトの構造、問い合わせ、商品案内、見つけやすさ
商店・企業Webサイト
| サイト名 | URL | 検索キーワード（Google検索） | ポイント |
| 川越・麻彦商店 | http://www7.plala.or.jp/kawagoe-asahiko/ | 川越・麻彦商店 | 自分が作るとしたら、どのように作り直すのか？ |
| 株式会社フロロコート | https://www.fluorocoat.co.jp/ | 株式会社フロロコート | 見習う点は？ ホームページを見る人（ターゲット）は誰？ |
| 大橋自然食 | https://ohashi-shizen.com/ | 大橋自然食 | いいところと改善したい点。 |
ショッピングサイト
サイボクハム、丸広、くらづくり本舗、東京カリント
注文方法、支払い方法、配送などはわかりやすいのか？
もし、トラブルがあった場合の連絡先が明示しているのか？
ブログ
芸能人、政治家、有名人のブログには、どんなことが書かれているのだろうか？
どのような書き方をしているのだろうか？
芸能人のブログは？
アメブロで調べてみる。（https://official.ameba.jp/）
ラインブログで調べる。（https://www.lineblog.me/）
政治家、有名人のブログは？
選挙ドットコム（https://go2senkyo.com/seijika/blog）
その他いろいろなブログ（https://blog.livedoor.com/category/）
コメント