webデザ職業訓練④HTML・CSSの授業

HTML・CSS

2020年の福岡の職業訓練Webデザイナー養成科で習ったサイト制作授業の体験談です。使った教材・学んだこと・勉強法などを紹介します。入学する職業訓練校や年度によって授業の内容は変わりますのでご了承ください。

導入科目はオリジナルテキストを使用

最初は学校が制作したオリジナルのテキストで基本的知識を学びました。コンピュータ基礎・ネットワーク・セキュリティ・Webデザインの基礎知識など。この内容は省略します。

ごん先生
ごん先生

職業訓練校の最初の1ヶ月はパソコンは触れずに座学だけだったけど、そこで苦労したことはある?

眠気を我慢することと、長いカタカナ語・英語の頭文字を取った略語を覚えるのが大変でした。あと2進数・10進数・16進数などの計算がややこしかった!(私のように数学が苦手な人には辛いけど、ほんの一部の授業です)

私が通った職業訓練校では、パソコンの授業はWindowsのノートパソコンを使用しました。PCで文字入力ができる・基本的な操作はできること前提で授業は進みます。

以下、体験記です。入学する職業訓練校や年度によって授業の内容は変わりますのでご了承ください。

職業訓練で使った意外なソフトウェア

Microsoft Expression Web4

「Microsoft Expression Web4」というソフト、聞いたことある方いますか?

私は知らなかったです!「ホームページビルダー」「Dreamweaver」「Wix」「WordPress」などは知ってたけど。。。

無料で使えるマイクロソフト社のWeb制作ソフトですが、調べたところ2020年でサポートが終了していました。このソフトが実務で使用されることは無いそうです。

「今後もこの授業でしか使うこともないでしょう」と言われたソフトです(!)

最初の数時間はこのソフトを使用。授業で使った理由は、サイト制作がどのようなものかを短時間で知るためだそうです。画像は載せませんが、テキスト通りに花屋とカフェのサイトを制作。ホームページができ始めた頃の懐かしさを感じるデザインのサイトが完成しました。

サクラエディタ

WindowsPC使用者には有名なソフトかもしれません。私はMacPCを使用していたので、これも職業訓練で初めて使いました。

このソフトは国家資格試験Webデザイン技能検定試験」でも使用できます。(後述)

資格試験の「テキストエディタ使用」の場合は、以下のソフトは使用不可!
・HTMLタグの自動入力機能がある※注1
・(間違いがあれば下線などで教えてくれる)チェック機能
これらの機能があると「Webページ作成ソフト」による受験になります※注2

※注1 開始タグ(例<h2>)を入力すると、自動的に終了タグ(</h2>)が入力される機能。
※注2 詳細は試験の公式サイトでご確認を。

サクラエディタは試験対策のために習いましたが、卒業後は使いませんでした。今はHTMLタグの自動入力機能やチェック機能のある「Visual Studio Code」のエディタを使用して制作しています。早いしミスも防げるので便利です。

※職業訓練校によって、使用するパソコンOS(Windows・Mac)や制作ソフトは異なります。自分が受験する都道府県の訓練校のカリキュラムをご確認の上、受験してくださいね。

Webデザインの資格試験について

〝実力主義の業界なので、Webデザインの資格は持っててもあまり意味がない〟というような声もあります。

確かにそれも一理あります。就職では実績を見てもらう作品集(ポートフォリオ)が重要かと。ですが上記の資格は、これからWebを学ぶ人にとって良い目標になり、スキル習得の近道となると思います。

何も勉強しないよりは良いですし、転職活動で履歴書に書いたらやる気をアピールできるかも(3級は書きづらいかもですが)。↓受ける人の参考になれば幸いです。

Webクリエイター能力認定試験 エキスパート

Webクリエイターに必要とされる、Webサイト制作のデザイン能力およびWebページのコーディング能力を認定する試験です。

試験の特徴

・知識問題 20分で選択式
・実技問題 テキストエディタ使用/110分←私が通った訓練校はこれ。
 または  Webページ作成ソフト使用/90分(Dreamweaverなど)

パソコン上で問題文を見ながら受験。テキストエディタを使用の場合、
 →メモ帳(Windows)テキストエディット(Mac OS)を(推奨)指定される

レスポンシブデザイ※注3対応の作業あり
・トップページにスライドショーを設置するサイトを制作

※注3 Webページの内容は同じで、PC・スマホやタブレットなどそれぞれに見やすくデザインが変わるサイト

難易度 ★★☆☆☆

普通に授業を受けて試験対策をしていれば、簡単です!
公式サイトによると合格率は91.4%(2020年度平均合格率)

職業訓練の試験対策では自習の時間もたっぷり。過去問のテキストを4回繰り返すことができました。動物園・病院・結婚式場のサイトなどの制作で楽しかった(3回目以降は飽きたけど)。

私は満点で合格できました。職業訓練校(団体受験)で受験できたのも良かった。
知識試験でFlashの現状のことが出てきたのが意外でした。

ウェブデザイン技能検定試験 3級

2級は「実務経験2年」や「3級合格者」など受験条件が厳しく、職業訓練中は3級しか受験できませんでした。併願受験もできなかったので、3級を受けました。

試験の特徴(3級)

・実技試験60分
・知識問題45分
・国家資格。合格するとウェブデザイン技能士の合格証書が発行される。
・大学などの受験会場で受験。初めて使うパソコンを使用(受験施設のパソコン)。
・実技試験では、指定されたテキストエディタから選択して受験。
 →OS標準インストールのアクセサリ(※メモ帳は非推奨)、サクラエディタ、TeraPad、 Sublime Text、施設によってはmi、CotEditorなども可能。詳細は公式サイトへ。
・紙の試験問題。大問が選択式なので、全部を回答しなくてOK

難易度 ★★★☆☆

公式サイトによると合格率は
3 級 60-70%、2 級 30-40%、1 級 10-20%(年度や開催回により変動あり)です。

個人的には、こちらの方が難しく感じました。初めて使うパソコンは緊張するし。

知識試験は15分あれば十分で、多くの人が途中退席で帰っていました。点数はわかりませんが、合格しました!

資格試験の勉強方法については、こちらの記事に書きました

市販のテキストも授業で使用

職業訓練校で使用した市販テキストは「30時間でマスターWebデザイン HTML5&CSS」です。テキスト通りに「スイーツショップ」のサイト制作をしました。(書影は省略)

良かった点
・巻末のWebセーフカラー一覧は使いやすい。
・5章で「JavaScript」を使用したサイトが作れたこと→記事⑤

改善してほしい点
・初版で誤字脱字が多かった。
・Webデザインのテキストなのにサイトや素材画像のデザインがイマイチで今風ではない…。

まとめ

・職業訓練の授業では、オリジナルテキストや市販のテキストで一通り基礎を学べる。
・授業では、実務で使わないソフトも使う。

・授業で制作したサイトは
前半は①カフェサイト②花屋のサイト③スイーツショップサイト。後半は④図鑑・クイズサイト⑤宿泊施設予約サイトなど(前半はHTMLとCSSのみ、後半はJavaScriptやPHPも使用したサイト)。

資格試験の対策はバッチリで、過去問を数回解けばほぼ合格できる。
使用する教材ではセンスの良いサイトは作れない。自分でセンスを磨く必要がある

プロフィール
この記事を書いた人
いまみ&ごん

在宅Webデザイナーになった主婦です。前職は編集系の仕事をしていました。退職後にWebデザインの職業訓練校を経て、Web制作会社でアルバイトを経験。現在は在宅でバナー制作を中心にお仕事をしています。Twitterをフォローしてもらえると喜びます。

いまみ&ごんをフォローする
HTML・CSS職業訓練
いまみ&ごんをフォローする
Webデザときどきプログラミング
タイトルとURLをコピーしました