【復習】Webデザイン学習

Daily report, ふりかえり, やったこと, スキル向上・ビジネス, レッスン報告

実践基礎編

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/)