この記事を書いている私（わや@wayasblog）は、未経験からWeb制作会社のコーダーになりました。
そして、入社してから１か月が経ち、少しは仕事の流れがわかってきました。
そんな私が、Webコーダーになるために必要なスキルを紹介します。
これからWebコーダーを目指そうという方の参考になれば嬉しいです。
勉強中の方も、学習の遠回りをしないように確認いただければと思います。
記事後半では、未経験からWebコーダーに転職する時のポイントを解説しました。
スポンサーリンク
Webコーダーになるために必要なスキルとは
- Webコーダーの必要最低限スキル
- 制作会社で働く時に必須のスキル
- 高品質なコーディングができるスキル
以上の３つにわけて解説していきます。
Webコーダーの必要最低限スキル
Webサイトを作る上で必要最低限のスキルが以下です。
- HTML / CSS
- JavaScript / jQuery
- デザインデータからの書き出し
- ピクセルパーフェクトのコーディング
Webコーダーは、基本的にデザインデータを元に制作することになります。
ですので、デザインデータを完璧に再現することが仕事です。
具体的には、
- HTML / CSS → デザインを作る
- JavaScript / jQuery → 動きを作る
- デザインデータからの書き出し → デザインを再現する
- ピクセルパーフェクトのコーディング → デザインを再現する
このような感じです。
「Webコーダーの必要最低限スキル」の学習方法
私は「Webコーダーの必要最低限スキル」のすべてを「デイトラ」で学習しました。
※私はデイトラで人生が変わったと思っているので、デイトラをオススメしがちです。
デイトラでなくても、今は教材が多いので自分に合うものを選べばOKです。
「HTML / CSS / JavaScript / jQuery」あたりは「Progate」や「ドットインストール」で学ぶ方が多いですよね。
「デザインデータからの書き出し」は、XDとPhotoshopをやっておけばいいと思います。
- XD：コーディング練習用のデザイン~お花屋さんのLP編~
- Photoshop：コーポレートサイトのデザインテンプレート（PSD）
上記は両方とも無料で、かつポートフォリオに掲載してもOKだそうです。
私自身、XDに関してはデイトラで学びましたが、Photoshopは上記を活用させていただきました。
Web制作会社の募集要項には、「Photoshopを使えること」を必須条件であることが多いです。
Photoshopの７日間の無料体験期間で１つのサイトを作ってしまうので十分だと思います。
そうすれば、「Photoshopを使えます」という証明になりますので。
「ピクセルパーフェクトのコーディング」に関しても、重要だと思っています。
今日は、ピクセルパーフェクトのコーディングの重要性を実感しました！
— わや@31歳/未経験からエンジニア転職 (@wayasblog) June 16, 2020
勉強中はそれなりの実装やデザインで妥協してしまうこともあるけど、仕事ではもちろん許されない🙅♀️
知識を深める上でオリジナルのサイトを作るのも大切だけど、ピクセルパーフェクトのコーディングができる力は必須！
実務において妥協は許されないので、ピクセルパーフェクトコーディングを身に付けておきましょう。
ブラウザに「PerfectPixel」を導入すれば、作成中のサイトにデザインを重ね合わせて、違いを見ることができます。
「PerfectPixel」を使えば、ほぼデザインカンプ通りにコーディングできますよ。
制作会社で働く時に必須のスキル
「Webコーダーの必要最低限スキル」を身につければ、Webサイトを作成することは可能です。
しかし、Web制作会社で働くとなると、以下のスキルも使えた方がスムーズに仕事に入れます。
- Sass
- gulp
- Git
以上の３つのスキルです。
具体的には、
- Sass → CSSが効率的に書ける言語
- gulp → Sassのコンパイル、ベンダープレフィックスの自動付与など
- Git → バージョン管理システム
このような感じです。
以上の３つは、どちらかというとより効率的にコーディングするスキルですね。
本を読んだり、ググりつつ、一通り使えるようにしておいた方がいいです。
高品質なコーディングができるスキル
お客様に納品する以上、適当なサイトを作るわけにはいきません。
学習中から、完成したコードをチェックする癖をつけましょう。
参考になるのが、以下の記事です。
上記記事をひと通り確認すれば、OKだと思います。
この記事で、GoogleChromeの拡張機能に「IETab」というものがあり、IE（Internet Explorer）の表示を確認できることを知りました。
というのも、コーディングをしていると実感しますが、IEだけ表示が崩れることが多い…
しかも、IEだとJavaScriptが動かないということもあるようです。
↓苦しんだ時のツイートがこちら…
入社をしてから携わらせてもらっている案件が、いよいよリリース間近✨
— わや@31歳/未経験からエンジニア転職 (@wayasblog) June 5, 2020
自分の勉強でやっているのとは訳が違って、お金をもらってやっていると改めて実感…！
勉強の時から、デバイスによる見え方の違いを知っておくと良さそう🙆♀️
よくコーダーの人が「IEが怖い」という意味がわかってきてしまった😇
私もこれからは「IETab」をフル活用していこうと思います。
自分自身でコードを確認することは大事であるものの、誰かにコードレビューをしてもらうのが１番効果的だと思います。
私は独学中にやってもらいませんでしたが、今思えばお金を払ってでもやってもらえばよかったと思っています。
もしプロに見てもらえる機会があれば、積極的に活用してみることをおすすめします。
未経験からWebコーダーになる方法
ここまでのスキルが身につけば、コーダーとして仕事ができます。
ですが、いくらスキルが身についたとはいえ、勉強しただけでは転職は成功しないです。
転職のための対策も必要となってきます。
先日、未経験からWeb制作会社に転職した方法という記事を書きました。
上記の記事を参考にしてもらえばと思いますが、ポイントをいくつか書いておきます。
ちなみに私の転職活動の結果は、以下の通りでした。
- 応募：13社
- 面接：５社
- 内定：２社
多少は参考になるかと思います。
それでは見ていきましょう。
転職を成功させるポイント
私が行った転職の中で、良かった点・改善すべきだと思った点を簡単にまとめます。
- 良かった点① 転職戦略について学んだ
- 良かった点② とにかく徹底的に準備をした
- 改善すべき点① 募集要項を確認すべきだった
- 改善すべき点② 多くの会社に応募すべきだった
それぞれ解説します。
良かった点① 転職戦略について学んだ
とにかく、ありとあらゆるエンジニアの転職戦略についての情報収集をしました。
その中でも、ゆーきさん（@freepc_yuki）のnoteは、本当におすすめできます。
価格は1,000円ですが、それ以上の価値があるので、購入をおすすめします。
私は、このnoteがあったおかげで転職できたと言っても過言ではないと思っています。
noteを元に、ポートフォリオサイトの修正や履歴書、職務経歴書の修正を行いました。
そうすることで、他とは差別化できたのではないかと思っています。
良かった点② とにかく徹底的に準備をした
「面接に対する準備」という意味です。
私は、面接が苦手です。初対面の人と話すのが苦手なんです。かなり致命的ですね…
それでも内定をいただけたのは、準備をしておいたからだと思っています。
聞かれるであろう質問を洗い出し、それに対する答えをまとめておきました。
そして、スムーズに自分の口から言えるように練習しました。
よく近所を散歩しながらブツブツ喋りましたね笑
面接の前日には、面接を受ける会社の分析を徹底的にします。
- 自己分析
- 企業分析
当たり前かもしれませんが、面接対策は以上の準備が１番効果的でした。
改善すべき点① 募集要項を確認すべきだった
受けるであろう会社の募集要項を早めに確認しておくべきだったと思っています。
私は応募する直前に見ましたが、多くの会社が「Photoshopを使えること」を必須条件にあげていることが多いと知って焦りました。
受ける会社の「求めている人物像」も載っていることがあるので、アピールポイントがわかりますよね。
Web制作会社であれば、求められるスキルはそこまで変わらないと思うので、さっと目を通しておいたほうが良いです。
改善すべき点② 多くの会社に応募すべきだった
私が転職を始めたのは、新型コロナウイルスの影響で緊急事態宣言が出た直後でした。
そのせいもあってか、応募をしても意外に返信率が低くて焦りました。
今後転職活動をする方も、状況は似ていると思います。
選り好みせず、どんどん応募してみましょう。
Web面接が増えていると思うので、面接を受けるハードルも下がっていますよね。
どこの会社に行くかは、実際に内定をもらってから考えるので遅くありません。
転職後も勉強は必須
転職後にさらに実感していますが、エンジニアは常に勉強です。
ベテランエンジニアでも勉強をしています。
つまり、未経験の人はそれ以上に勉強しないとついていけないということになります。
また、技術の進歩も早いので、常に知識をアップデートしていかなければいけません。
日々の業務に追われ、なかなか勉強時間を確保できないかもしれません。
ですが、本業のかたわらプログラミング学習をしてきた方なら絶対にできると思います！
転職成功すると達成感が出ますが、そこで終わりではなく、そこからがエンジニアとしてのスタートです。
※これは自分への戒めでもあります。
【まとめ】Webコーダーになるために必要なスキルとは
この記事では、Webコーダーになるために必要なスキルを紹介しました。
- Webコーダーの必要最低限スキル
- 制作会社で働く時に必須のスキル
- 高品質なコーディングができるスキル
以上を身につければ、コーダーとしては十分に仕事が可能です。
あとは、転職活動に臨むのみです。
私自身が転職後に感じたことは、「エンジニアとして働くと、独学の時に比べて数倍のスピードで成長する」ということです。
エンジニアになって1か月が経ち、成長できていると実感してます。
— わや@31歳/未経験からエンジニア転職 (@wayasblog) June 18, 2020
それは8時間プログラミングをするんだから当たり前ですよね！
プラスで、誰かに質問できる環境になり、圧倒的に成長していると実感🙌
ベテランエンジニアですら勉強しているという話を聞くと、頑張らなきゃという気持ちになります👩💻
私はなかなか転職活動をする勇気が持てず、ずるずると１年近く勉強してきました。
しかし、この記事の内容を勉強した方は、自信を持って転職活動や営業活動を始めてほしいと思います。
以上です。最後までお読みいただき、ありがとうございました。
最後に宣伝
ココナラで、コーディングの相談を受け付けています。
- CSSが上手く作れない
- JavaScriptが思ったように動かない
- ブログのデザインを修正したい
- 勉強中でわからないところがあるから教えてほしい
このようなお悩みを解決していますので、「こんなの解決できる？」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。
コメント