制作会社案件でコーディングをするときに使うスキルは限られています。
なので、まずは最低限使うスキルのみをしっかり押さえておきましょう。
今回はWeb制作会社でコーディング案件のみを行う場合に必要なスキルを回答します。
目次
Web制作会社案件で最低限必要なスキル6つ
- HTML、CSS、jQueryが書ける
- 模写コーディングを含め、サイトを作った経験がある
- Sassが書ける
- Photoshopでデザインデータの書き出しができる
- SEOを意識したコーディングができる
- 作ったサイトを本番にアップできる
HTML、CSS、jQueryが書ける
最低限HTML、CSS、jQueryはできるようになっておきましょう。
Progateの中級編までの知識は必須です。上級編も数回はやって、どんな感じか押さえておきましょう。
phpが書けなかったり、WordPressが使えなくとも、
HTML、CSS、jQueryが書ければ静的サイトを作る案件を受注できる可能性が高いです。
とにかく速く受注したいという人は、HTML、CSS、jQueryをまずはProgateでしっかりやっておくと良いです。
模写コーディングを含め、サイトを作るスキルがある
Progateだけで、いきなり案件を受注するのは無理なので、
- 模写コーディングをする
- 架空サイトを作ってみる
- ポートフォリオサイトを作ってみる
などして形にできるサイトを作ってみましょう。
制作会社に営業メールを送るときに使えたり、面談してスキルレベルを掴むために提出を求められる場合があるます。
Photoshop書き出しのスキルがある
制作会社でデザインがくるときはほとんどがPhotoshopデータなので、
Photoshopからのデザイン書き出し方法を学びましょう。
具体的な方法は以下の記事をどうぞ。
Sassが書ける
SassはWeb制作案件で必須とも言っても良いもので、CSSを効率的に書く方法です。
CSSとは別のSassファイルにコードを書いて、最終的にCSSに変換させます。
Progateにたくさん講座がありますが、最低限ネスト、変数表記、コンパイルというファイル変換方法ができるようになっておけばOK。
本を買わなくても済むくらいシンプルです。
本だと実務で使わないような詳細な知識がたくさん載っているので、勉強に時間がかかります。
✔️Sassコピペシート
制作会社から受注するWeb制作案件では、Sass(CSSを簡略化して表記する方法)を使うことが多いです
このシートでは左がSass、右がCSS表記なので分かりやすいはず💡https://t.co/TJxpHCgfjD pic.twitter.com/c7vjIOggxX
— ふる (@guutenx) 2018年11月9日
詳細な方法は以下の記事をどうぞ。
SEOを意識したコーディング
単純にコーディングするのではなく、SEOを意識したコーディングができることが必要です。
例えば以下のようなコーディングが挙げられます。
- h2やh3タグを適切に使用しているか
- 画像のaltタグにテキストを入れているか
- 画像を使いすぎていないか
詳細は以下の記事をどうぞ。
作ったサイトを本番環境にアップできる
サイトを制作したら、本番環境へのアップまで任されることがあります。
各1つのサーバー・ドメインを持っておくと、サブドメインを利用して何個でもサイトを作れるため、本番環境へアップする練習もできるし、自分のポートフォリオサイトやブログを作ることができるので持っておいて損はしないと思います。
Web制作会社案件であると有利なスキル
次に、制作会社案件を行うのに、あったら良いレベルのスキルを解説します。
私はnpm scriptsやGitをここ3ヶ月ほど案件で使っていますが、全ての制作会社で使うわけではないし、最初はかなり難しいと思うので、まずは上の最低限必要なスキルを身につけましょう。
npm scripts
npm scriptsを使うとコーディングの面倒な作業を自動化してくれます。これを使えばコアラなどのアプリを使わなくともSassのコンパイルも行ってくれます。
これと似たものとしてgulpもありますが、最近は脱gulpしてnpm scriptsを使っている人も多いようです。
ゴロニャン
私は最近、多くのオープンソースのプロジェクトがnpm scriptsを使っていることに気づきました。本当にgulpが必要なんでしょうか？そう立ち返ったとき、もはや不要なのだと私は気付きました。
gulpやgruntなどのタスクランナーを使わず、npm-scriptsを主軸とした今っぽいフロントエンドの開発環境を作ってみたいと思います。脱タスクランナーです。
引用：【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る – KAYAC engineers’ blog
ゴロニャン
ニャンニャン
私がnpmでつまずいたポイントを載せておきます。
npm scriptのつまずきポイントまとめ
コーディングの面倒な作業を自動化してくれるタスクランナーnpm scriptsの設定時のつまづきポイントまとめ😥
余裕があればやってみると良いかと！1.npmコマンドを走らせるときのディレクトリは正しいか
例：WordPressテーマをローカルで編集するときはローカルツールではなくテーマ直下— ふる (@guutenx) 2019年1月24日
Git Sourcetree
Gitはソースコード管理ツールです。Sourcetreeはソースコード管理ツールの一つで、メジャーなツールです。私が前職のIT企業にいたときもSourcetreeを使っていました。
Gitを使うならまずSourcetreeを使えるようになると良いでしょう。ただ、初心者フリーランスは覚えることがたくさんあって大変なので最初はできなくてOKです。最初は、Gitが出来なくても制作会社の案件は受注できるはずです。
Web制作会社のスキルまとめ
Web制作会社で仕事をする必要最低限のスキルを紹介しました。
実際の仕事の流れを知りたい方は以下の記事をどうぞ。
