【職業訓練校】Web制作6ヶ月コースの授業内容やリアルな感想など1ヶ月毎のまとめ




2021年10月1日から職業訓練校でWeb制作を学び始めました。

コロナ渦になった頃から、リモートワークで仕事できるようになにか手に職をつけたいと思って独学でプログラミングを始めてたのですが、仕事をしながらだとなかなか長続きせずにいました。

そんなとき2021年の春先に腰を痛めてしまい、これから先も肉体労働を続けていくのが不安になりました。

これまで食品工場の製造→飲食店→冷凍倉庫でフォークリフトとずっと肉体を酷使してきたので、身体にガタがきたのだと思います。

「これを機に肉体労働を卒業してプログラミングの勉強に本腰を入れろ!という神様のお告げなんだ。」と自分に言い聞かせ、34歳という歳からプログラミングの勉強を始めようと決心しました。

職業訓練校入学までのロードマップはこちら

※この記事は職業訓練校卒業するまで随時更新していきます。

Web制作学習1ヶ月目

1ヶ月目
  • グループワーク(3日間)
  • Officeソフト(Word, Excel, PowerPoint)
  • CMS実習(Wordpress)
  • HTML
  • CSS

グループワーク

初日の入校式が終わると、2〜4日目の3日間でいきなりグループワークがありました。
グループワークはその3日間の午後だけで、初日にNASAゲーム、2、3日目に販売戦略プロジェクトとその発表がありました。

NASAゲームはグループワークで利用可能なコンセンサスゲームです。
コンセンサスゲームとは、チームメンバーと合意形成(コンセンサス)を行う必要があるゲームです。

NASAゲーム

まず始めに、個別で考えてから自分の意見を提示します。
その後、チームメンバーと話し合いながら全員でチームの1つの結論を導きます。

話し合いをする中で意見が対立することがありますが、その時に多数決や諦めではなくしっかりと話し合って合意することがコンセンサスゲームの目的となっています。

私のチームは結果的には1番優秀な成績でしたが、その結果よりも「自分の1人の意見よりコンセンサスをとって導いたチームの結論の方が遥かに優れた回答を出せる」ということを体験し、コンセンサスの重要さを学びました。

販売戦略プロジェクト

販売戦略プロジェクトは、実際ありそうなクライアントからの依頼に対してターゲットの決定、配色の提案、キャッチフレーズ、コンテンツなどをチームで話し合い、PowerPointで資料を作成して発表する流れでした。

具体的には、私のチームが担当したのは「食パン耳ラスクプロジェクト」で、サンドイッチ専門店の店主が「サンドイッチを作る過程で廃棄物として出てしまうパンの耳をラスクとしてネット販売をしたい」という依頼。

今回はホームページを作成し、下記の項目をチームで考えて資料にまとめ発表することをしました。

  • もっと多くの人にパンの耳ラスクを知ってもらいたいが、ターゲットを絞った提案をしてほしい
  • 誰に対しどのような提案をすれば売り上げが向上するか考えてほしい
  • キャッチフレーズやリード文、コンテンツについて考えてほしい
  • ページカラー(メイン1色 サブ2色)を提案してほしい
  • コンテンツ部分の内容を提案してほしい

初めましてのチームメンバーと3時間以内で話し合い+資料の準備をしないといけない状況だったので、時間はかなり限られていました。

私のチームは「チームの決定事項に対してデータなどを用いて理由づけができれば良い」という考えだったので、時間内に終わらせられるかって感じで進めていましたが、他のチームは家に持ち帰ったり朝早く来て資料作成しているチームも見られました。

発表では他のチームの提案内容や発表者の声の大きさ・スピードなど5項目くらいを評価して、総合点で優秀なチームを選ぶといった方式をとっていました。まぁ発表者が優秀であれば高得点を取れるという正直狙いがよくわからないプロジェクトでした。

Officeソフト

Webサイト制作の発表する時に最低限レベルの資料を作れるように、Office製品のWord、Excel、PowerPointの基本的な操作を4日間学びました。

しかし、それ以来ふれる機会がないので教わったことはほとんど覚えていない気がします。

CMS実習

WordPressを使って管理画面付きWebサイトの構成や使い方を学びました。

私自身このWordPressブログを2019年にネットの情報を参考に立ち上げて試行錯誤してきたので、ほとんどの新たに教わることはありませんでした。

しかし、そんな中でも自分の中にちゃんと落とし込めたし、使いこなせてなかった機能を新たに使えるようになったのは大きいと思います。

HTML

HTMLを使ってWebページを作成・修正方法を学びました。

  1. HTMLの基本
  2. 文章の定義
    1. 見出しを定義する h要素:見出し
    2. 段落を定義する p要素:段落
    3. 改行を定義する br要素:改行
    4. 強調を定義する em要素:強調
    5. 強い重要性を定義する strong要素:強い重要性
    6. 入力した通りに表示する pre要素:整形済みテキスト
    7. その他よく使うHTML要素
      blockquote要素:長い引用文
      ins要素:あとから内容を追加
      del要素:あとから内容を削除
  3. リストの定義
    1. リストを定義する
    2. 番号なしリストを定義する
      ul要素:番号なしリスト枠
      li要素:リスト項目
    3. 番号付きリストを定義する
      ol要素:番号付きリスト枠
      li要素:リスト項目
    4. 定義リストを定義する
      dl要素:定義リスト枠
      dt要素:定義リストタイトル
      dd要素:定義リスト説明
  4. テーブルの定義
    1. テーブルを定義する
      table要素:テーブル枠
      tr要素:テーブル行
      th要素:見出しセル
      td要素:通常セル
    2. テーブルの行や列を連結する セル連結用属性
  5. グループの定義
    1. ブロックレベルのグループを定義する
      header要素:ヘッダー
      nav要素:ナブ・ナビゲーション
      footer要素:フッター
      main要素:メイン(主要コンテンツ:各ページに1つのみ)
      article要素:アーティクル
      section要素:セクション(章・部分)
      aside要素:アサイド(バナー・広告・関連記事)
      div要素:ディブ(汎用グループ・レイアウト用グループ)
    2. 要素に名前をつける属性
      class属性
      id属性
      class名・id名の命令規則
      構造家タグでよく使われる構成
    3. インラインのグループを定義する
      span要素:インラインのグループ
  6. リンクの定義
    1. リンクを定義する
      a要素:リンクを定義
    2. 絶対パスと相対パス
      絶対パス
      相対パス
      絶対パスと相対パスの比較
      ディレクトリマップ
    3. ページ内リンクを定義する
      ページトップへ戻るリンク
  7. 画像の定義
    1. 画像を定義する
      img要素:画像表示
      figure要素;図表用グループ
      figcaption要素:図表用キャプション
    2. 画像をリンク化する
  8. 実体参照

独学でHTMLを勉強していたので復習という形で授業を受けていましたが、ちょっとした疑問なども気軽に授業中に質問できたので自分の中でしっかり整理できました。

例えば、idとclassの使い分けなど動画での学習ではそんな細かく説明はなかったので使い分けを知らずに漠然と使用していましたが、フリーランス講師ならではの生きた情報を交えて教えていただきました。

また、VSCodeのおすすめの設定やプラグイン、VSCodeでの略式のコードの打ち込み方なども教わり、以前よりも効率よくコードを打てるようになったと思います。

CSS

CSSを使ってWebページの装飾を学びました。

  1. スタイルシートの基本
    1. CSS適用方式
      インライン方式
      埋め込み方式
      外部リンク方式
      link要素:外部ファイル読み込み
    2. CSSファイルの新規作成
      CSSファイルの命名規則
  2. 文字・文章のスタイルを定義
    1. 文字・文章のスタイルを定義
      文字色を定義する:color
      文字サイズを定義する:font-size
      文字の太さを定義する:font-weight
      文字のスタイルを定義する:font-style
      文章の装飾を定義する:text-decoration
      行揃えを定義する:text-align
      書体を定義する:font-family
      行間を定義する:line-height
      文字に影をつける:text-shadow
    2. Webフォントの使い方:Google Fonts
    3. 検証ツールでCSSエラー個所を探す
  3. 背景色・背景画像のスタイルを定義
    1. 背景色・背景画像を定義
      背景色を定義:background-color
      背景画像を定義:background-image
      背景画像の繰り返しを定義:background-repeat
      背景画像の表示開始位置を定義:background-position
      背景画像の固定・移動を定義:background-attachment
      背景画像のサイズを定義:background-size
      背景のスタイルを一括定義:background
      1つの要素に対して背景画像を複数指定
  4. ボックススタイルを定義(幅・高さ・余白・線)
    1. ボックス構造
      ブロックボックスとインラインボックス
    2. ボックスのスタイルを定義
      コンテンツ領域の幅を定義:width
      コンテンツ領域の高さを定義:height
      パディング領域(内余白)を定義:padding
      ボーダー領域の線種を定義:border-style
      ボーダー領域の線幅を定義:border-width
      ボーダー領域の線の色を定義:border-color
      ボーダー領域のスタイルを一括定義:上下左右一括指定
      ボーダー領域のスタイルを一括定義:場所を限定して一括指定
      角丸を定義する:border-radius
      マージン領域(外余白)を定義する:margin
      マージンにautoを指定した時の挙動
      body要素の外余白を0にする
      入れ子の内側の上マージンが突き抜ける
    3. ボックスサイズの計算方法:boz-sizing
    4. 要素に影をつける:box-shadow
  5. 画像のスタイルを定義
    1. classセレクタ
    2. 画像の幅・高さを定義:width, height
    3. 画像の最小幅・最小高さを定義:min-height, min-height
    4. 画像の最大幅・最大幅を定義:max-width, max-height
    5. はみ出た画像を縮小する
    6. 表示位置を定義
      文章の回り込み:float
      回り込みの解除:clear
    7. 行ない複数画像の縦方向位置調整
    8. 画像下の隙間をなくす
    9. img要素の定番定義
    10. 画像を角丸表示
  6. リストスタイルを定義
    1. リストのスタイルを定義
      リストのデフォルトデザイン
      リストマーカーの種類を定義する:list-style-type
      リストマーカーの画像を定義する:list-style-image
      リストマーカー位置を定義する:list-style-position
      リストマーカーを一括定義する:list-style
      リストのインデントを調整する:padding-left
      リストマーカー画像を背景画像で定義する
  7. テーブルのスタイルを定義
    1. テーブルの枠線を定義:border
    2. テーブルの枠線隙間を定義する:border-collapse
    3. テーブルの文字サイズを定義する:font-size
    4. テーブルの背景色・文字色を定義:background-color, color
    5. セル余白を定義する:padding
    6. セル内の横方向業揃えを定義する:text-align
    7. セル内の縦方向揃え位置を定義する:vertical-align
    8. テーブルの幅を定義:width
    9. テキストの折り返し方法を定義する:white-space
    10. テーブルの表示方法を定義:table-layout
    11. はみ出た内容が非表示時に略文字で知らせる:text-overflow

こちらも動画を見て独学で学習したことがありましたが、参考にしていた動画では細かな説明がなかったのでよく理解できていないことが多々ありました。

例えば、独学で学んでいた時はブロック要素とかインライン要素とかよくわからずにいましたが、わからなくても特に問題ないと思っていました。
しかし、要素を「中央揃え」にしたいと思ってもその要素がブロック要素なのかインライン要素なのかによって使用するプロパティが違ってきます。

ブロック要素自体を中央揃えは左右にマージン「auto」かつ、対象要素に横幅の指定必須となってきます。(※width指定なしの場合親要素いっぱい横幅でマージン「0」になるため)
しかし、要素内コンテンツ(インライン要素)の中央揃えにする場合のプロパティはtext-aligh: centerを使います。

受講して感じたこと

良かった点
  • 講師が2人体制で2人ともフリーランス
  • キャリアコンサルタントが時代遅れな考えの人ではない
悪かった点
  • 知っていることを教わると時間の無駄だと感じる

◎講師2人体制で2人ともフリーランス

講師が2人体制でフリーランスである点は非常に良かったと思いました。

職業訓練校に通おうか迷ってた理由の一つが、学校にしか勤めていない講師に教わることでした。
ずっと学校で教えているということは、時代遅れなことを教わることになります。

しかし、フリーランスの講師2人はそれぞれ過去に違う仕事をしていた経験がありますし、個々で仕事をしているので生きた情報を教わることができます。

さらに2人体制ということもあり、クラスでわからない人がいてももう一人が補助する体制なので、授業の進行に遅れをとらない点も良かったと思います。

◎キャリアコンサルタントが時代遅れな考えの人ではない

職業訓練校側の目的は失業者を育成して、最終的には就職してもらうことです。

東京都の職業訓練後の就職率は47都道府県中47位と一番低いみたいです。
その理由の一つはフリーターでも東京にはいろんな仕事があるので暮らしていけるとのこと。

職業訓練校側的には就職率を上げたいとこですが、そういうとこに勤めているキャリアコンサルタントは今の時代に合わない考え方を押し付けてくるイメージでした。(勝手な先入観ですが)

しかし、実際にキャリアコンサルティングの面談時にお話しすると、「こーしろ、あーしろ」などは一切言わずに、その人にあったキャリアプランを一緒に考えてくれる人でした。

一昔前は私が思っていた感じの古い体制だったみたいですが、その担当者のおばちゃんが「それではダメだ」との想いから今のような体制に変えたくて変えたそうです。

そんな人がキャリアコンサルティングの長であることはなによりも心強いと思いました。

×知っていることを教わると時間の無駄だと感じる

私は2019年から独学でWordpressでブログを開設したんですが、この職業訓練校でもWordpressの使い方の授業で習いました。

しかし、すでに自分が知っていることを1週間もかけて習わなくてはいけないのは、すごくストレスに感じました。

確かに自分が知らなかった機能や設定などもあり勉強になることもありましたが、結構時間の無駄だなと感じていました。




シェアしてね!

ABOUT US

りゅじ(Ryuji)
大学時代はアメリカの田舎町で5年間過ごす。日本に戻り食品メーカーや大手飲食店で働くも、日本の古い体質の会社体制に合わなかったり、パワハラを受けまくり踏んだり蹴ったり。NYでレストランの店舗立ち上げに携われたことだけが良い思い出。 その後、友人に誘われて始めたオンラインプロジェクトやアンテナ事業は立て続けに失敗に終わる。 まぁ人生いろいろありましたが、現在は海外移住を目標に職業訓練校でWeb制作を勉強中! 海外旅行・国内旅行・温泉・グルメ・バーホッピングが大好き。