やりたいこと
やっていこう٩( ᐛ )و
逆襲を企む前向きなドキュメンタリーブログ。
Webクリエイター

職業訓練Webクリエイター科体験記その1

灰根です。

6月からWebクリエイター科の職業訓練に通い、毎日HTMLやらアドビのソフトやら学んでいる毎日です。

仕事を辞めて、Webクリエイターに転職しようと考えて職業訓練を志望して、かなり時間が経ちましたが、3度目の正直でようやく受かりました。

今回の記事は、「職業訓練でWebクリエイターに転職しようと考えているけど情報が少ないよ…」という人向けた職業訓練校での体験記です。
そうは言いつつも、自分の備忘録みたいなものだけど。

実際職業訓練がどんなものなのか本当に情報少ないしね!
僕も志望する前に散々調べたけどほとんど情報なしでした。

体験記あれば、これから訓練受けようと思う人に役立つかなーと!

訓練を受けて僕がどの程度できるようなっていくのかこの記事を通して、参考にしてもらえればなと!

あくまで再就職させることが訓練校の目的

入校式(1日目)

初日は入校式というのが、あってテキストが配布されたり、今後のカリキュラムや設備、校則のようなものが説明された。

職業訓練は公共職業安定所の委託による公的なものなので、結構ルールが厳しい。
出席率が一定数ないと退校扱いにもなる。欠席しても授業内容をフォローするようなこともない。
電車の遅延だろうとなんだろうと、遅刻は遅刻扱いになる。

その辺を入校式では口を酸っぱく言われた。
結構ルーズな人が多かったみたいです。

また、訓練期間中は受講生が日替わりで日直を務めなければならず、日直は日誌を書いたり号令や朝のスピーチをしなければならない。

学校みたいだ。

 

初日は入校式のみで終了。

IT技術者スキル(2日目〜4日目)

さあ授業だ!

とはいえ、いきなり実技的なことは始まらない。
キャリア担当みたいなコーチングの外部講師の人がいて、キャリア形成の仕方現在の社会における就業環境コミュニケーションとは企業が求める人材自己分析、Web業界、ジョブカードの書き方などの授業が行われた。

個人的には、あまり目新しい話もなくよく聞くような話ばかりで正直退屈だと感じる時間が多かったかな。。。

面白かったのは4つのコミュニケーションスタイルの話。
人のコミュニケーションのスタイルは4つに大別でき、話し方や仕草でその人のコミュニケーションスタイルを判断し、適切な対応を試みようという。

①ドライビング(現実派)
②エクスプレッシブ(感覚派)
③エミアブル(協調派)
④アナリティカル(思考派)

https://next.rikunabi.com/journal/20151203/

リクナビに全く同じ話があったから気になる人はぜひご参考に!
診断もできるよ!
あなたのコミニュケーションスタイルはいかがですか?

自分のことエミアブルだと思ってたんだけど、テストの結果1点差でアナリティカルだった。
クラスは約30人くらいいるんだけど、

ドラ…1人
エク…10人
エミ…15人
アナ…5人

みたいな構成だった。

特徴見ても、あんまり自分でピンと来ないところもあるし、まあ心理テストみたいなもんだな。
楽しめたけど、これをコミュニケーションに活かすのは難しそう。

 

ただWebページの作り方を教えるんじゃなくて、ジョブカードの書き方や就職環境だったりコミュニケーションのことまで授業に組み込まれていて、そこが職業訓練たる所以だなと思いました。

あくまで、就職させることが目的なので、そういうところまで総合的に指導するのは民間のWebスクールとの相違点でしょうね。

インターネット・Web概論(5日目)

Webを仕事にする上で常識となるようなものを教わっていく。

安全衛生(VDT作業)、PCの基礎知識(ドット、ピクセル、拡張子等)、インターネットの基礎知識(TCP/IP、プロバイダ、ドメイン等)、Webの基礎知識(HTML,W3C等)など。

ITに携わる人にとっては常識的な知識にあたる部分。
実用的な内容ではないが、個人的にはよくわかっていないところもあったのでよかった。

 

実践編!意外とコード書くのは楽しいぞ!

HTML(6日〜7日)

HTMLを習い、実際にページを作っていく。
ようやくWebクリエイター科って感じ!

HTMLとはHyper Text Markup Languageの略で、Webページを記述するための言語
文章や画像を入れたり、リンクを入れることができる

テキストは手打ち。
使用アプリはTeraPad

職業訓練が3ヶ月間で相当詰め込むと聞いていたのと、実際に訓練に応募して受かるまでにかなり時間がかかってしまったのもあって、実は先にProgateというWebサービスで少しHTMLとCSSは学んでいました。
おかげで、授業でつまずく事はなかった。

Progateについてはこちら。

あわせて読みたい
無職で未経験者がWebクリエイターを目指す2つの方法! 灰根です。 ええと、、、冒頭の挨拶って何すればいいのかしら。。。 さて本題! 無職で未...

Progateわかりやすいので初めて触れるにはおすすめ。
とはいっても、Progateで二日間くらいやったくらいなので、そんなにがっつりじゃないです。
戸惑っている人もいたけど、なんだかんだ初めて触れる人でもできてたので大丈夫。

WordPressもビジュアルからテキストに切り替えれば、HTMLそのまま載せられることに気づいたからここからは実際に授業で作ったHTMLを載せていきます。

HTMLってのはこんなの!

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>テキストリンクの練習</title>
</head>
<body>
<p>テキストリンクの練習</p>
<a href=”https://www.yahoo.co.jp”>Yahoo!JAPANへとぶ</a>
</body>
</html>

<>←のかっこで括られたタグってのを使って、ページを記述していく。
このタグがどうだこうだって話はここではしませんね、僕が解説してもしょうがないので。

上のように記述したHTMLがページになると↓になる。

テキストリンクの練習

Yahoo!JAPANへとぶ

タグで囲まれた文章が記述されたり、他のページにとぶリンクをつけることができた。

こんなんでも最初は結構感動した!

 

さらには、Excelみたいなテーブルの作り方も教わる。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>HTMLの基本タグの練習</title>
</head>
<body>
<h1>テーブルの作成</h1>
<table border=”1″ cellspacing=”0″ cellpadding=”10″>
<tr>
<th class=”bg1″>見出し1</th><th>見出し2</th>
</tr>
<tr>
<td class=”bg1″>左上</td><td>右上</td>
<tr>
<td>左下</td><td>右下</td>
</tr>
</table>
</body>
</html>

テーブルの作成

見出し1 見出し2
左上 右上
左下 右下

よく見るやつ!

応用すると、こんなことも。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>HTMLの基本タグの練習</title>
<head>
<body>
<h1>練習問題</h1>
<table border=”1″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td rowspan=”2″>111</td><td>222</td><td>333</td>
</tr>
<tr>
<td colspan=”2″>444</td>
</tr>
<tr>
<td colspan=”2″>555</td><td rowspan=”2″>666</td>
</tr>
<tr>
<td>777</td><td>888</td>
</tr>
</table>
</body>
</html>

練習問題

111 222 333
444
555 666
777 888

 

触れたことない人はよくわからん英語や記号が出てナンジャコリャーって感じだと思いますが、そんなに難しくないです。
テーブルの入れ子は構造を理解するのちょっとややこしかったけど…。

こんな感じで、実際に教わりながらタグを手打ちで打っていきながら覚えていきます。

コード初めて見たときはうへぇって思ったけど、やってみると案外パズルみたいで楽しい。

僕が通っている訓練校は、22歳から〜65歳の方までいてかなり幅広い年齢層なのだが、なんだかんだみんなできてたから大丈夫。

写真の加工やバナー作り!センス問われる…

Photoshop(8〜10日)

HTMLの授業では<img>タグを使って画像を挿入する方法も教わった。

Webページは文章だけではなく、色々な画像が使われている。
写真だったりバナーのような広告画像などはイメージが湧きやすいが、サイトのロゴや各ページへのナビゲーション(HOMEとかお問い合わせとかアクセスとかのボタン)なんかも画像。

Webページを作るということはそういうデザインも含めてなのである。
コーディングとデザインを分業することもあるし、兼業の場合もあるとのこと。
どちらにせよ、コーディングをメインにするにしても多少デザインの心得はないといけない模様。

ということで、Adobe社の画像編集&デザインソフトであるPhotoShopの授業!

いわゆる”フォトショ”と呼ばれるやつである。
HTMLやCSSはちょっとだけ予習していたが、フォトショに関してはほとんど何のスキルや知識もない。

「ほとんど」と言ったのは、ヒトデナイト 用に名刺を作る際に、サイトのロゴを作って名刺に入れようと思って、7日間の体験版でサイトのロゴを作ったから。

吃音ニートロゴ

これ!

絵心とフォトショの使い方わからなくてもドットなら自分でもできるかなーと思ってさ。
不恰好だけどなんとかできた。

名刺作ったときの記事はこちら!

あわせて読みたい
名刺2.0
名刺2.0 灰根です! 突然ですがみなさん、自分の名刺って持ってますか? 会社名や役職や電話番号が書かれているあ...

ただ、ドットの枠にポチポチと点を入れていっただけだから、フォトショの経験はほぼ皆無!

なのにクラスの人は、元看板屋の人だとか、服飾関係の人とかで7割がフォトショの経験者で焦る。

でもフォトショは本当にすごい!
例えば!

このビー玉の画像!
このビー玉を消したいなと思ったとする!なんらかの理由で!ビー玉に恨みがあるとか!

こんな感じで消せてしまう!
僕の技術が稚拙なのと、大雑把にやっちゃったから結構違和感あるけど、上手い人ならほとんど違和感なくビー玉だけを消せる!

フォトショすげー!

前に、友達の結婚式のムービーを作ったのね。
ムービーの中にその人が友達と写ってる写真を入れようとしてたんだけど、当時は仲良かったのに仲違いしちゃった友達の写真があってその写真は使えなかったのよ。

そんなときもフォトショがあれば、その仲悪くなった人だけを消せるからとても便利!

 

……いや…みんなね……仲良くして……ホント……こっちも気ぃ使うのよ…。

 

他にも、簡単に対象のものだけ切り取ったり、色を変えたり、ないはずのものを増やしたりと色々できる。

また友達の結婚式の話なんだけど、仕事でどうしても結婚式に参加できない友達がいて。
みんなで集合写真撮った中にそいつがいなくてかわいそうだなーと思ったから、Mac標準ソフトのプレビューにある投げなわツールで来れなかった奴を切り取ってみんなの集合写真に合成してあげたら「俺出席してねえのになんでいんだよ!笑」とか言ってツッコミながらも喜んでくれたのよ。

フォトショがあれば、もっと簡単に切り取れてこういう合成も簡単にできるから、仕事以外でも使い道たくさんある!

シミとかホクロ消したりするのも自分で簡単!
まあその辺は今なら写真系のアプリでいくらでもありそうですが。

 

Webページを実際に作るまでに以下の工程を踏むという。

  1. ワイヤーフレーム(設計図)作成
  2. デザインカンプ(完成見本)作成
  3. コーディング(HTML,CSS,JavaScript等)

 

まずワイヤーフレーム!

ワイヤーフレームとはWebページのレイアウトを決める設計図のようなもので、ページのどこに何を配置するのか大まかに書いたもの

学校から、実際にワイヤーフレームを書いてデザインカンプを作ってみようという実践形式の課題が出された。

条件は以下の通り。

  • ワークショップ付きのカフェ
  • 20〜40代の女性をターゲット
  • オレンジ・茶色
  • 2カラム

それで実際に僕が書いたワイヤーフレームがこれ。
めちゃ雑な!

こんなレベルでいいのか知らんけど、先生には今回はざっくりでいいよって言われたので本当ざっくり書いた。
ざっくりしすぎなww

とりあえずページに何をどこに配置するのかがわかればいいってことだったので、ロゴはここでとか、グローバルナビゲーションはここでとか、バナーはここでとか、そういうのを決めた。

ワイヤーフレームについてはちゃんと教わってなくて、たぶんもっとちゃんとした書き方があると思うので、僕のは参考にならないかもしれないです。

「グローバルナビゲーションってなんだよ」と思う人もいると思うけど、要はメニューです。
このサイトでいう「ホーム」「プロフィール」「お問い合わせ」「プライバシーポリシー」のところ。
こういう用語みたいなのはたぶん習うからこれから学ぶ人は知ってなくても大丈夫です。僕も知らなかったです。

 

あんなざっくりしたワイヤフレームという名の設計図から次はデザインカンプという完成見本を作っていく。

ここがフォトショの出番!

デザインカンプとはクライアントと完成物のイメージをを共有するために作成する、完成見本のこと。
設計図からより具体的に色やフォントや画像やサイトのデザインを決めて、こんなWebページ作るつもりですよ〜って見せるためのものですね。

僕が作ったやつがこれ。

見た目はまんまWebページ!

フォトショで図形を作ったり文章入れたりマスクで画像入れたりして、サイトの「見た目」を作る。
さっきのワイヤーフレームに比べるとずっとそれっぽく作れた感!

自分にしてはそれなりのができたと思っていたが、クラスの人で見せ合いっこをしたら、みんなハイセンスでおしゃれで結構落ち込んだ。

…みんなすげえよ…なんでそんなかっこいいデザインを習ったばかりで…。

絵心なくてセンスなくてフォトショ未経験でも、職業訓練だけで最低僕くらいのレベルなら作れるようになります。

そんなんじゃ使えねえだろって思われても知らん!俺も辛いわ!

かなり年上の人と「頑張ってもセンスでは勝てないですねえ」って話してた。
俺26なのにどうなのよこれ。

 

まとめ

とりあえず第一回の体験記はここまで!

2週間くらいでHTMLとフォトショを習いましたが、本当に結構詰め込みだから、なかなか大変でしたね。
授業はそんなに早くはないけど、覚えることはめちゃくちゃ多いから三日前やったこととかすぐ抜けてくし。

あたりまえだよね!おとといの晩御飯なんて覚えてないからな!

やっぱり復習が超重要!

ということで、家で復習できるようにAdobeのソフトを入れました。

Adobeは月額制になって一般だと月5000円くらいするんだけど、実は職業訓練校でもアカデミック版が使えて、機能の制限なしで月2000円で使えます。

Photoshop,Illustrator,Dreamweaver以外にも、たくさんのソフトが使えるので、映像編集とかDTPとかやるならいいですね。

個人的には映像はiMovieとmotionやってるけど、Adobeのもこの際使えるようになりたいところ。

また明日からがんばります٩( ᐛ )و

 

ABOUT ME
haine
それなりに大きい会社に財務経理職で就職できたものの、自分の人生やこれからがこのままでいいのかと自問自答を続ける日々。 色々あって次の職も決まっていないのに自主退職。 半年間ニートをする中で自分のやりたいことや夢がだんだんと明確になって行く。 吃音を抱えながらも、一度きりに人生を誰よりもおかしく楽しく過ごそうと考え、自分で稼ぐ力を身につけることを決意。 好きな時間に好きな場所で好きな人と過ごす。 吃音ニートだって夢を叶えられるぜってことをリアルタイムに発信し、いろんな人を勇気付けたい。 吃音ニートの逆襲が!今!始まる!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です