HOME > HTML & CSS > 30代後半で実務未経験からWEBコーダーになるまでの勉強内容
最終更新日:2022.07.25

30代後半で実務未経験からWEBコーダーになるまでの勉強内容

私はコーダーの仕事をするために2019年の6月から勉強をして2020年の3月から一般企業のWEBの部門で働いています。

もっと早く働けたのですが他の仕事がメインで時間が取れなく2020年から働いています。

バイトに落ち続けているという人を見たことがありますが応募が殺到して中々採用されないです。

私はたまたますぐ採用になったからよかったのですが。

WEBの業界は移り変わりが激しいから即戦力を求めているのは分かりますが人を採用していなくずーっと求人を出している所もあります。

また面接を受けた時に圧迫面接や「何でこんなに失礼な質問をするんだろう?」と嫌な思いをしたことが何度もあります。

ごく一部の会社だと思いますが即戦力じゃなくても面接を受けた人の能力の将来性を見て取る所もあるはずです。

私は30歳を越えていて若い人より圧倒的に不利なはずでそれでも採用されたので将来性を見て採用されたのではないかと思います。

私はいっぱい応募して面接になったのが3社あり2社に通りましたが実務未経験からコーダーとして採用されるまでに自分がした勉強について説明します。

どの位のスキルがあればいいかの目安にしてもらえたら嬉しいです。

ちなみに私は大学生の時にプログラミングが死ぬほど苦手で単位を落とすくらい抵抗がありましたがそんな私でも働くことができました。

それでは説明します。

 

 

プログラミングスクールはマイナスになるからやめた方がいい

私は大学の時にプログラミングが凄く苦手なのでプログラミングスクールで勉強して大失敗しました。

はっきり言って嘘だらけの詐欺なので絶対に受講してはダメです、お金と時間の無駄ですが独学で大丈夫です。

プログラミングスクールだと分からない部分があったらメンターという質問する人に質問すれば答えを教えてくれます。(答えることができない人も結構います)

でも分からない部分があっていきなり答えて貰うって仕事を始めてから絶対にデメリットです。

私が働いている会社で自分が分からない部分があったら自分で調べて全て解決していますがこの能力が身につかないかもしれません。

それと実務を始めてしばらく経ってから知ったのですがスクール卒って会社からすれば印象が相当悪いです。

 

 

Progateが絶対おすすめ

2019年4月から仕事をしながらプログラミングスクールで勉強を始めて6月に「これでは絶対に駄目だ」と思い辞めて「独学で勉強できないか?」と考えました。

ググってProgateという学習サイトを知りましたが料金がプログラミングスクールより圧倒的に安いし中身の質が高いです。

悪い部分もありますが金額を考えるとプログラミングスクールで勉強するより圧倒的にいです。

初級、中級、上級とあるのですが多分初級は無料でそれ以外の級を全て受けるのに毎月1000円位の有料コースに入れば受講できます。

ここで勉強を始めてHTML、CSS とjQueryとPHPをしましたが初心者でも挫折しないように構成されているからお勧めです。

そこで実務を始めるまでにした勉強内容を説明します。

 

 

HTMLとCSSコース

HTMLとCSSはFlexbox編以外の全ての学習コースと道場コースを勉強しました。

コーディングはとにかく慣れないといけない思い学習コースは5週位して分からない所は「そんなもんか」と思い丸暗記して先に進めていきました。

分からない所が出てきたらひとまずそこは置いて次に進めた方がいいです、悩み続けると挫折します。

そしてコーディングに少し慣れてから分からない所はググりました

学習コースは私は5週していますが不安な人は何周してもいいです、学習コースはコーディングの基礎だからです。

これが完璧にできないとコーディングはできないです。

HTMLとCSSの道場コースですが何度も何度もするのは意味がなくやっても2回でいいと思います。

実戦になっているので色んなWEBページの模写をした方がコーディング力が上がるからです。

 

 

jQueryコース

JQueryは初級編と中級編の学習コースのみを勉強して5週位しています。

そして人が作ったハンバーガーメニューを何とか理解してコピーができるようになりました。

ハンバーガーメニューやアコーディオンなど「作り方がよく分からないな〜」と思ったら最初はコピペでいいです、その内コードが理解できるようになります。

実務を始めてProgateで勉強したjQuery編はほとんど使わないと思いました。

私が働いている所ではパララックス、スライダー、スムーススクロールです。

ハンバーガーメニューっていろんなサイトで当たり前のように見ますが商品を購入するサイトの場合クリック率がめっちゃ低いから期待しないそうです。

 

 

PHPコース

WordPressでサイトを作るために勉強しましたが実務を始める段階でサイトを作ることはできませんでした。

Progateでサイトを作れるように絶対にならないのでやる必要は全くないです。

サイトの作り方を解説しているサイトがなくて「あ〜でもないこ〜でもない」と試行錯誤している内に実務が始まりました。

PHPコースのIだけ理解すれば最低限の機能を持ったWordPressのサイトを作ることができます。

実務を始めてからWEB制作の仕事をするならWordPressを使ったサイトを作れた方が絶対に有利になると思いました。

 

 

初めてWordPressサイトを作った時は本で勉強した

WEBの会社でバイトを始めてからwordpressを使ったWEBサイトを作るために最初はTwitterでWEB制作で稼ぐのは余裕と発信している人が運営しているある有名なサイトを使っていました。

無料なのでそこで勉強していたのですが有料に変わったので使うのを止めました。

金額はプログラミングスクールに比べて圧倒的に安いですがそれでも使うのはお勧めしません

カリキュラムの内容は変わっているかもしれませんが私が使っていた時のままなら内容に誤植がたびたびあったり「ここはどこのことを言っているんだろう?」と思って考えることがありました。

無料の時はオリジナルテーマを作るためのコーディングしたデータを買わないといけなかったのですがどうしても分からない所がありました。

そこはサロンがあったのですが閉鎖していて質問できなくてどうしようもない状況になったのでTwitterから運営に連絡したのですが一週間経っても返事がありませんでした

だから過去にそこで勉強した人を見つけて質問して解決できました。

今はどうか分かりませんがどうしようもない状況になっても運営が対応してくれないような所なので私は勧めません。

私の印象は他のプログラミングスクールと同じです。

WordPressを使ったWEBサイトを作るための情報はネットに情報がいーっぱいあるので本を見ながらでも自分でやり切ることができます。

 

 

WordPressの教科書は初心者用ではないから絶対にダメ

初めて本で勉強する時ですがWordPressの教科書はお勧めしません。

理由ですがこの本がダメという意味ではないです、本にも書いてあったと思いますがある程度勉強した人向けに作られているからです。

どこかのサイトで初心者にオススメと書いてあったので使ったのですが大失敗でした。

まずパソコンのターミナルというのを使って色々やって開発環境を作るのですが初心者がそれをやるとまず失敗します

私は本の通りやってダメで危うく挫折する所でした 笑

 

 

この本は頭がいい人が作った本

本を作った人が恐らく頭がいい人のはずですがほとんどが文章の説明で理解するのが困難になります

また本の一番最後にあるINDEXが凄く少ないので初心者には使いにくいはずです。

だからサイトを作るのにある程度慣れてから「こういうのをやりたいけどこの本に載ってないかな?」みたいな使い方をすべきです。

 

 

サイト作成をこれからする人はまずWordPressレッスンブックからがいい

最初にサイトを作るのに私は↓の本が一番使いやすいと思います。

この本は実装に関する説明がほとんどないですがとにかくこうすればこれが実装できますよということが淡々と載っています。

だからこれで上手くいかないということはないはずですがこれでは完璧にサイトを作ることができません。

サイトを作る時は普通は開発環境で作るのですがいきなり本番の環境で作る解説がされていたのでMacを使うならMAMP(WindowsならXAMP)を使った方がストレスがないです。

これを2周してから↓の本を使えばいいです。

この本をお勧めする理由は↓です。

  • 説明が分かりやすい
  • 複雑すぎる実装をしてない

プラグインというのは追加機能みたいなやつです、記述でもできますがやることが多くなって挫折するかもしれないので最初はプラグインがいいです。

「この部分をもっと知りたいな〜」という時は↓の本がお勧めです、詳しく書いてあるので私はググる用に使っています。

どの参考書を使っても必ず分からない部分が出てきます、その場合は一旦「そんなもんか」として先に進めた方が挫折しないです。

本を買う時は一番新しい版を買うべきです、私は1つ前の版を買ったのですが非推奨になっている部分がありました。

 

 

Progateの次はサイトの模写をする

Progateしかしないと自分で0からできるようにならないのでコーディングにある程度慣れたらWEBサイトのページの模写を始めました。

はっきり覚えていますが最初模写をする時はコーディングのやり方(heightやwidthはどうするか等)が分からなかったり調べないといけないことが多く中々進まないです。

私はわからない所が出てくると数時間考えていました、、

「WEBページ 模写」などでググると色々と見つかりますが↓のサイトが一番やりやすいと思います。

http://demo.themegraphy.com/write-ja/

最初からレスポンシブデザインにするのではなくまずはPC用の画面だけを作った方がやりやすいです。

 

 

細かい部分は作らずPC画面の1ページを作るのに時間をかけていい

それと↑のサイトですが画面右に虫眼鏡検索窓があってクリックすると検索窓が出てきます。

こういうのを最初から作ろうとすると挫折する可能性があるのでPタグなどで検索窓みたいな物を作ればいいです。

実装力よりもただ作ることを意識すべきです。

模写にある程度慣れてから検索窓などの細かい部分が作れるようになればいいんです、私はそうしました。

全てのページの模写ではなくトップページを1週間かけてコーディングができればいいしもっとかかってもいいと思います。

最初はコードを綺麗に書けるよりも「とにかくページを作れた」という達成感を持った方が自信が付きます。

始めて作ったWEBページは今思えば簡単だったけど1週間位かけて散々ググり悩み抜いた結果完成しましたができた時は凄く嬉しかったです。

プログラミングスクールでボロボロになって「自分には向いてないんじゃないかな〜?」と思っていたので、、

結果分かったのはプログラミングスクールがダメなだけでした。

 

 

noteにあるデザインカンプは買わなくていい

NOTEで始めてコーディングする人用の模写WEBページが売ってあり私は買いましたが買わなくていいです。

コーディングがしやすいだけで添削や質問に答えてくれないので必要ないです、お金の無駄だと思います。

私はデザインカンプを無料で配布しています、見た目を綺麗にできるコーディングのやり方についても解説しているのでよかったら使ってください。

 

 

レスポンシブデザインを初めてするならこの本がおすすめ

レスポンシブデザインに関してですがWEBデザイナーのManaさんという方が書いた↓の本がおすすめです

これだけでコーディングの全て身に付けるのは無理です、Progateで勉強をしてコーディングをする時に併せて使う本って感じです。

この本は説明が丁寧に書いてありcssのdisplay:flex(フレックスボックス)について細かく説明がされありコーディングをしていて忘れた時はこの本を見ています。

この本だけで実務で使うフレックスボックスは全て網羅していると思います。

グリッドレイアウト(display:grid)のことも書いてありますが「う〜ん」と思うことがあるから見てません。

実際のWEBページをレスポンシブデザインで作る説明もありお勧めです、私はコーディングに関してこの本しか買ってませんが無理に買う必要はないです

 

 

次にやる模写

1つの WEBページの模写が終わったら「コーディング 模写」とかでググって自分にできそうなWEBページのコーディングをすればいいです。

ハンバーガーメニューなどの細かいパーツの部分が作れなかったらその部分はひとまず無視しましょう、その内できるようになります。

他に模写したのはWordpressサイトテーマのJINSANGOや旅のサイトPAS-POLですが全てトップページを模写しています。

 

 

wordpressのブログサイトを運営する

コーディングが多分ある程度できるようになってから今後WEBサイトを作りたいので慣れるためにwordpressを使ったブログを始めました。

WEB制作をする人はwordpressを使うのでブログを絶対にすべきです。

そうしないと例えば「ウィジェット」とか言われて何を指しているか分からないしWEBサイトを作る時にブログを運営していた知識が絶対に役に立ちます

私はブログをやってからwordpressでWEBサイトを作りましたがブログをやっていた時の知識が相当役に立ちました。

「これがバイトをするのに関係するの?」と思う人がいるかもしれませんが関係する場合が多いと思います。

初めて働いた会社を辞めてから色んな会社に応募しましたがデザイン会社だと記事を作る時もあるのでブログの内容まで見る面接官もいました。

面接を受けた段階で記事は100以上ありましたが面接した人はブログを見たがったので私は「どうぞ」と言って見せたらめっちゃ見てました

 

 

画像の作り方でphotoshopとillustratorのことを聞かれた

youtubeのサムネイル画像に当たるのがブログではアイキャッチ画像というのですがこれに反応していました。

アイキャッチ画像は↓です。

面接者から「画像の編集もしてるんですね〜これはphotoshopを使ってますか?」と聞かれました?

面接を受けた時は丁度udemyでphotoshopの勉強が終わった辺りで使い方の自信がなくてskitchという編集ソフトを使っていました。

だから「photoshopではなくskitchを使いました」と答えました。

そしたら面接者は「photoshop、illustratorを使えた方が面接に有利ですよ」と言われたのでphotoshop、illustratorは使える様にした方がいいです。

面接官から言われて「なるほど!」と思いすぐさまillustratorの勉強を始めてブログのアイキャッチ画像はphotoshopで編集する様にしました。

面接者からブログの1日のPV(何ページが見られているか)を聞かれたので「ブログを始めて5ヶ月位で毎日700PV位になりました」と答えました。

面接が終わって「多分落ちたな〜」と思ったら2週間位経ってから事務の人から採用の電話がありました。

自分の何がポイントになって採用かを聞いたら面接者は私が面接の段階で作ったサイトとブログのPV数に感動していたらしいです。

「未経験でそこまでできるんだ〜」みたいに言ってたらしいです、私は「これで採用になるんだ〜」と思ったのですが。

私の行動力を見ていたのでしょう。

 

 

ブログの記事を読まれるために工夫をしたのも評価された気がする

wordpressを使ったブログをやって人から記事が読まれるための工夫を色々考えた事も面接で言ったのですがそれも評価された気がします。

Twitterでこんなツイートがありました。

ネットの世界は移り変わりが早いので対応能力を見られていた気がします。

ネットを見たら面接を受けるのにサイトを作らない人が多いみたいですが絶対に作りましょう。

いくらやる気があってもサイトがないとやる気を見せる事ができなく面接者にやる気があるとみなされません。

インディードなどの求人サイトで求人募集にある「あると望ましいスキル」の項目にphotoshopとillustratorがありますが「望ましい」ではなく「必須」と考えた方がいいです。

WEBの業界はバイトでも競争率が高いので当たり前ですがスキルがある人の方が採用されやすくなります。

ポートフォリオサイトを0から作ると面接を受けた所からの評価が上がります。

 

 

3ヶ月でWEB制作は恐らくほとんどの人が無理

ネットやTwitterを見ると「3ヶ月でWEB制作の仕事はできる」みたいなのを見ますが嘘なので騙されないようにしましょう。

本当に3ヶ月で仕事ができるなら仕事する人で溢れかえっていて新しく仕事をする人に枠はないはずです。

特にコロナウイルスの影響で実務未経験者にとっては厳しくなっています。

楽して仕事ができるなら誰でもできますが勉強を挫折する人が8割なのでコツコツ勉強しましょう。

Youtubeで情報を発信する有名な人がいますが有名な人が発信する情報で間違っている可能性があるので何でも信用してはいけません。

●いいねをつけてもらえると励みになります。