【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

フロントエンジニアのミスは致命傷になりかねない 実例と防止策を解説

Web転職する
フロンエンドエンジニアやコーダーの方は分かると思いますが、この仕事はWeb業界において他の職種と比べても特にミスと背中合わせかと思います。

 

どうしたらミスを未然に防げるんだろう?

という疑問を持つ初心者の方やミスをしてしまって悩んでる方に向けて防止策と改善案を解説します。
以下コーダーもフロントエンドエンジニアに含めます。

ミスをすると何が起こる?

企業の場合

フロントエンドエンジニアのミスは企業であれば致命傷を負いかねない事態となります。
ミスの具体例としては以下です。
例①
1.CVとしてTELリンクを設置していた。

2.表示された番号は問題なかったが、リンクの電話番号が違っていた。
例②
ECサイトで300,000円として販売しようとしていたが、0が1つ抜けて30,000円で販売し、決済されてしまった。
どちらの例も他にも責任者はいるとはいえ直接的にはフロントエンドエンジニアのミスによるもので賠償請求になりかねない例です。

そんなことある?と思われるかもしれませんがどちらの例も実際に自分が見聞きした実例です。

他にも

  • コーディング品質を担保できず、取引先が激怒
  • 公開ミスでサイトの崩れが起き不利益を被ったということで次に控えてる案件がなくなった
  • 未だ公開してはいけないファイルや記述を納品ファイルに含めてしまい公開してしまい顛末書

などが身の回りでもありました。

つまり企業の場合、フロントエンドエンジニアの一つのミスで企業の利益に多大なダメージを与えてしまうということです。倒産までは聞いたことはありませんが、ミスは身近に起こりうると考えた方が良いのです。

フリーランスの場合

フリーランスの場合は分かり易くてミスをしたら継続案件が打ち切られる、次回の案件を回してもらえないという事態に陥ります。
こちらもフリーランスとして死活問題です。

その場合は他の顧客を探せばいい、と思うかもしれませんが根本の改善策や防止施策を打ててないのでその後の新しい顧客でも同じようにミスってしまいます。

そうして仕事がどんどんなくなってしまいます。

ミスは倒産や仕事がなくなる恐ろしいものです。

ミス=信頼を失う

つまりミスは信頼を失うことと同義です。信頼を失ったため、関係を絶たれるのです。
そうして失った信頼を取り戻すのは何十倍も時間や労力がかかります。

繰り返しですが、ミスするとどうなるかというと、信頼を失うことになるのです。

他職種とフロントエンドエンジニアがミスする量の違い

プログラマー

一見フロントエンドと同じようにミスをしやすいと思うかもしれませんが、プログラマーにおけるミスフロントエンドほど頻発してないように思います。

もちろんプログラミング(バックエンド)の方がバグやエラーは多いのですが、バグやエラーが起きてれば単純に機能として成り立たたず分かりやいのでミスを潰しやすいと考えています。

また、テストがあるのでその過程でミスをなくすことができます。

デザイナー

デザイナーに関しては致命傷になることは少なく、ミスをしても1pxのズレだったりコーダーの範疇で直しが効くものであることが多いです。デザイナーの致命傷になりうるミスは著作権関係かなと思います。

著作権のある画像を承諾なしに商用利用し賠償請求になることは十分にあり得ます。

ただそれも経験則的には極稀だと思います。

フロントエンドは何故ミスが多い?

フロントエンドエンジニアは何故ミスが多いかというとミスをする要因(落とし穴)が沢山あるからです。
恐らく以下がフロントエンドの主なミスです。
・命名規則
・スペルミス
・タグのミス(バリデートエラー)
・原稿反映ミス
・想定してないテキスト量、画像サイズでの崩れ
・仕様の汲み取りミス
・納品ミス
・git操作ミス
・公開ミス

防止策・改善策

ではここからが防止策・改善策です。
まずはマインドの部分、次に行動における防止策改善策を解説します。

マインド

自分を過信しないこと

自分は大丈夫と思ってる人に限ってミスをしてしまいます。決して自信過剰にならず心配性なくらいがいいです。

慣れた時こそ細心の注意

いつもやり慣れてる作業だからこそ最新の注意をすべきです。なぜならいつもやり慣れてるという意識の元作業すると集中力が消えて他のことを考えて作業してしまうからですね。その結果ミスをしているということになります。

行動

ルーティンを作り上げること

ルーティンを作り上げるということは、確認の手順や操作方法を一定にすることです。それは作業の抜け漏れを防ぐことに繋がります。

整理整頓

身の回りの整理整頓は、生産性向上にもつながりますが、余計なことが目に入らなくなるので集中力を増します。例えばTODOを付箋に貼る人がいますが自分はお勧めしません。
作業中に余計な情報が目に入るからですね。またPC一つで済むのに付箋をPCに貼るのは非効率だと言えます。

工数をしっかりとる

スケジュールがない時もミスは頻発します。
確認する時間も十分工数をとることがプロです。

ちなみにフロントエンドエンジニアとして品質を担保するために実装ページを確認する手順は下記ツイートに書いています。

コーディングしたあとの自己チェックですが、下記のchrome adonのみで
・validator(Validate HTML)
・JS無効時(Disabled JavaScript)
・画像、alt(Display Alt attribute)
・アンカーリンク、リンク(Display Link Details)
・タイトルディスクリプション(View meta tag infomation)

の確認ができるのでおすすめです

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja …

もしミスしたら

これまでミスをしないマインドや改善策を提示してきましたがミスをした時のことを解説します。
いくら気を付けても人間である以上ミスは起こりうるのです。

反省して気持ちを切り替える

これしかないです。ポジティブにいかないとこの仕事は続けられないですし、このミスを次につなげようと考えましょう。

具体的には、ミスした結果を反省するよりも、原因について反省・改善することが大事です。
例えば、タグの閉じ忘れがあった場合は、
・確認作業をしなかったのか
・なぜしなかった→工数が足りない?やっつけでやってしまってる?
など自問自答して出てきた答えに対して改善しましょう。

evernoteに記載

自分はやるようにしてるのですが、ミスをしたら日付とミスしたことをその場で書くことにしています。そうすれば自分がミスする時のことや何でミスしたかのデータをとることができますし、自分への戒めとなります

まとめ:ミスは宝と考え気を付けよう

どこの企業かは忘れてしまいましたが、ミスは貴重な財産と考えている会社があるそうです。
つまりミスは逆に考えると絶対に同じことを起こさないための貴重な資料にもなりますよね。
そういった気持でいることがミスをしない仕事をするための一歩に繋がると信じています。
【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する フロントエンドエンジニア
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました