完全未経験者がWeb制作会社に転職してわかった！Webコーダーの転職に必要なスキルセット

何よりもまず、コーディングを速く正確にできるスキルが最も重要です。

速度が上がることで、お客様と会社側の双方にとってメリットがあるからです。

検索結果に表示されるためにはGoogleやYahoo!に代表される検索エンジンのデータベースに登録されていることが必要です。

データベースに登録されるまでには、次の３つの工程が踏まれています。

①クローラーと呼ばれるロボットがWebを巡回

②クローラーがホームページの情報を発見

③見つけた情報を整理・登録

ホームページを公開して１時間や２時間でこれら３つの工程を行ってくれるものではなく、ページ数やコンテンツの数にもよりますが1日から数週間の時間がかかります。

そうすると、公開が早い方がクローラーに見つかるまでの期間を圧縮できるため、検索結果への掲載を早めることができますね。

お客様は自分たちのサービスの魅力や強みを発信するためにホームページを制作するため、公開が早いほどターゲットに対してのアプローチも早くなり、ビジネスで成果を上げることに寄与します。

納期が前倒しになった場合や緊急事態が発生した場合、コーディングが速い分それらに早急に対処することができます。

そうすると、作業が速い人が社内にいると会社としては大変心強いですよね。

弊社の先輩コーダーが頼りにされているのは、そういった点も大きいと勝手に思っております。

もし、Webコーダーに転職したい方は、正確に速くコーディングできるスキルをアピールすると良いかもしれませんね！

次にご紹介する知識が不足していたり、曖昧だった私は入社してからしばらく苦労しました。

ほぼ全ての案件で触れる知識なので、あらかじめ身に付けておくと未経験から転職する場合は大きなアドバンテージになると思います。

画像の指定や特定のファイルを読み込む場合、そのファイルまでのパスを記載する場面がしばしばありますよね。

自分で一からコーディングする場合は別として、既存サイトの修正や部分リニューアルの場合、フォルダの構成が異なることがよくあります。

このような場合、パスの書き方を正確に理解していないと、「画像が表示されない！」・「cssが読み込まれなくてスタイルが崩れている…」という事態に陥ります。

恥ずかしながら、私は何度かこの事象に遭遇しました。

実務においては当たり前すぎる前提知識ですが、正確に理解していないと余計な時間を取られることになってしまいます。

Googleアナリティクス、サーチコンソール、タグマネージャーの設定方法は必須の知識です。

制作したホームページを公開する際、必ずと言っていいほど上記3点セットの設定を行うことになります。

特にタグマネージャーとアナリティクスの連携を理解しておくと、実務を行う際に困りません。

おすすめの学習方法としては、転職活動時に用意するポートフォリオサイトを用いて設定の練習をすることです。

自分のサイトなので何を間違えても文句を言われません。あれこれ試行錯誤して体に染み込ませることが大事だと思います。

私も3～4件のサイトの設定を行うことで、ようやく慣れてきた実感があります。

WordPressプラグインのうち、①CUSTOM POST TYPE UI、②Advanced Custom Field、③ContactForm7の設定方法はしっかり定着させておくことがベターだと思います。

①はカスタム投稿タイプ・カスタムタクソノミーを実装する際に、②はカスタムフィールドを実装する際に、③はお問い合わせフォームを実装する際に使用しています。入社してまだ半年ほどですが、コーディングした案件のほぼ全てで上記のプラグインを使用しました。

私はポートフォリオサイトを作成した際に使用し理解したつもりでいましたが、曖昧な知識ほど役に立たないものはないですね…。

制作現場でよく使うライブラリーは、①Swiper（Slick）、②GSAP、③scrollHintの３つです。

企業ロゴや写真が左右に流れていくホームページをご覧になったことはないでしょうか？

弊社HPトップの制作実績の箇所でも使用していますが、SwiperもSlickもスライダーを実装するためのライブラリです。

Swiper：https://swiperjs.com/

Slick:https://kenwheeler.github.io/slick/

SwiperはバニラJSベース、Slickはjqueryベースという違いはありますが、実装できる機能にほとんど差異はないと思います。

呼吸と同じレベルで使えるようにすべきライブラリです。

GSAPは複雑なアニメーションを実現するために必要なライブラリです。

アニメーションの実装自体はCSSでもできるのですが、細かい制御や複雑なアニメーションを実装したい場合には、GSAPを使用することでコーディングにかかる時間を大幅に短縮することができます。

アニメーションの実装はただでさえ時間泥棒なので、GSAPを利用したアニメーションの実装に慣れておくことをおすすめします。

GSAP：https://gsap.com/

スマホでWebサイトを見ているときに、横にスクロールできる表をご覧になったことなはいでしょうか。

ScrollHintを設定することで、表の中央部分に指のマークが出現し、スクロール可能であることを教えてくれます。

この実装によって、ユーザーのスクロールを促すことができ、表に記載してある事項の見落としを防いでくれます。

ScrollHint:https://appleple.github.io/scroll-hint/

その他にあると良い知識としては、①自分が使用していたデザインソフト以外のソフトの操作方法、②コーディング環境構築の知識だと思います。

私が学習段階で使用していたデザインソフトはFigmaのみです。

しかし、入社して初めてコーディングしたデザインはillustratorで作成されたものでした。

画像の書き出し方や余白などのコーディングに必要な情報を取得する方法のみならず、アートボードを拡大・縮小する方法さえも違っていて本当に困りました。

illustratorは少しお高いソフトなので、学習段階で触れる機会はあまりないかもしれませんが、基本的な操作方法を覚えておくと非常に役立つと思います。

弊社ではgulpを導入することで、Sassのコンパイルや画像の圧縮を自動化しております。

このおかげで作業効率が上がっており、作業時間の短縮に繋がっています。

私は先輩が作成したファイルをそのまま使わせていただいておりますが、自身で組めるようになると業務効率の改善に活かすことができるのではないでしょうか。

また、gitの使い方も知っておくと良いと思います。

業務の進行状況によっては、コーディングの担当が変わることがままあります。

そうした場合にgitを使用することで、ファイルの受け渡しが簡易かつ迅速になります。

同じ案件を複数人でコーディングする場合、各々がコーディングしたファイルの統合も容易になるので、gitはほぼ必須の知識だと思います。