web制作会社案件で最低限必要なスキル5つ。初心者フリーランス向け

制作会社案件でコーディングをするときに使うスキルは限られています。なので、まずは最低限使うスキルのみをしっかり押さえておきましょう。

今回は制作会社でコーディング案件のみを行う場合に必要なスキルを回答します。

web制作会社案件で最低限必要なスキル5つ

  1. HTML、CSS、jQueryが書ける
  2. 模写コーディングを含め、サイトを作った経験がある
  3. sassが書ける
  4. photoshopでデザインデータの書き出しができる
  5. SEOを意識したコーディングができる

 

HTML、CSS、jQueryが書ける

具体的には、HTML、CSS、jQueryが書けるということです。

phpが書けなかったり、wordpressが出来なくとも、HTML、CSS、jQueryが書ければ静的サイトを作る案件を受注できる可能性が高いです。

とにかく速く受注したいという人は、HTML、CSS、jQueryをprogateでしっかりやっておくと良いです。

 

模写コーディングを含め、サイトを作るスキルがある

progateだけで、いきなり案件を受注するのは無理なので、模写コーディングをする、架空サイトを作ってみる、ポートフォリオサイトを作ってみるなどして形にできるサイトを作ってみましょう

制作会社に営業メールを送るときに使えたり、面談してスキルレベルを掴むために提出を求められる場合があるます。

模写コーディングをするときは、以下を参考にしてみてください。ここでは文字のサイズなどは練習レベルでは適当で良いと書いていますが、提出するときは見本サイト通りに合わせるのが無難です。

初心者向けLP模写のおすすめのやり方!無駄な練習はコレ

 

photoshopデザインデータの書き出しのスキルがある

制作会社でデザインがくるときはほとんどがphotoshopデータなので、photoshopからのデザイン書き出し方法を学びましょう。

photoshopで要素の長さを測る

photoshopから画像を切り出す

photoshopから文字の情報を抜き出す

photoshopで文字間の感覚を測る

photoshopで文字の行間を測る

web制作会社案件で使うsassスキルがある

sassコーディングの勉強/参考書は不要。最低限覚えることは3つだけ

 

SEOを意識したコーディングができるスキル

単純にコーディングするのではなく、SEOを意識したコーディングができることが必要です。

例えば以下のようなコーディングが挙げられます。

  • h2やh3タグを適切に使用しているか
  • 画像のaltタグにテキストを入れているか
  • 画像を使いすぎていないか

 

作ったサイトを本番環境にアップできる

サイトを制作したら、サーバーやドメイン取得&本番環境へのアップまで任されることがあります。

各1つのサーバー・ドメインを持っておくと、サブドメインを利用して何個でもサイトを作れるため、本番環境へアップする練習もできるし、自分のポートフォリオサイトやブログを作ることができるので持っておいて損はしないと思います。

必要なもの

  • サーバー(月額1000円、初期費用3000円)
  • ドメイン(年間670円)

サーバーのおすすめはエックスサーバー

最も初心者向けで使いやすくコスパが良く、性能も良いのはエックスサーバーです。エックスサーバーは利用者が多いため、何かわからないことがあってもググればだいたい誰かが解説をしてくれています

Xサーバーがホームページ作成に最適な理由は「ホームページ作成するならエックスサーバー一択【初心者向け】」の記事をご覧ください。

エックスサーバーは10日間無料でお試しキャンペーンをしています。

 

ドメインのおすすめはお名前.com

最もメジャーで使いやすいのはお名前.comです。安くて設定方法が簡単で、さらに利用者が多いためネット上に色々な設定情報が載っているからです。

 

具体的な方法

具体的な方法は、以下の記事が参考になると思います。

初心者がwordpressで企業のホームページを1番簡単に制作する方法【6時間】

 

web制作会社案件であったら良いくらいのスキル

次に、制作会社案件を行うのに、あったら良いレベルのスキルを解説します。

私はnpm scriptsやgitをここ3ヶ月ほど案件で使っていますが、全ての制作会社で使うわけではないし、最初はかなり難しいと思うので、まずは上の最低限必要なスキルを身につけましょう。

npm scripts

npm scriptsを使うとコーディングの面倒な作業を自動化してくれます。これを使えばコアラなどのアプリを使わなくともsassのコンパイルも行ってくれます。

これと似たものとしてgulpもありますが、最近は脱gulpしてnpm scriptsを使っている人も多いようです。

ゴロニャン

詳細は、下の引用元の記事を見てみてね

私は最近、多くのオープンソースのプロジェクトがnpm scriptsを使っていることに気づきました。本当にgulpが必要なんでしょうか?そう立ち返ったとき、もはや不要なのだと私は気付きました。

引用:[意訳]私がGulpとGruntを手放した理由 – QiitaQiita

gulpやgruntなどのタスクランナーを使わず、npm-scriptsを主軸とした今っぽいフロントエンドの開発環境を作ってみたいと思います。脱タスクランナーです。

引用:【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る – KAYAC engineers’ blog

 

ゴロニャン

初心者は初期設定でかなりエラーが出て嫌になるかも
無理して使わなくともOK!

ニャンニャン

 

私がnpmでつまずいたポイントを載せておきます。

npm scriptのつまずきポイントまとめ

 

git sourcetree

gitはソースコード管理ツールです。sourcetreeはソースコード管理ツールの一つで、メジャーなツールです。私が前職のIT企業にいたときもsourcetreeを使っていました。

gitを使うならまずsourcetreeを使えるようになると良いでしょう。ただ、初心者フリーランスは覚えることがたくさんあって大変なので最初はできなくてOKです。最初は、gitが出来なくても制作会社の案件は受注できるはずです。

sourcetreeでのgit管理を超簡単に説明した記事

多くのsourcetreeやgitの概念の説明を無くして、超シンプルに解説した記事です。この記事の方法では、一人でソースコードをローカルで管理したいときに使えます。

ゴロニャン

まずはgitを使ってウォーミングアップしたい方にオススメです。
便利なので今は個人で小規模サイトを作るときでもgitを使うようになったよ! 

ニャンニャン

sourcetreeの使い方が5分でわかる!最低これだけでOK

sourcetreeでのgit管理をbitbucketも使って行う方法を説明した記事

制作会社で実際にsourcetreeを使うときは、bitbucketでオンライン連携して使うことが多いと思います。

この記事では、簡単に、bitbucketでオンライン連携しながらsourcetreeでソースを管理する方法を解説しています。この記事ではwordpressの管理方法を書いていますが、wordpress以外でもこの方法で管理が出来ます。

一番わかりやすいsourcetree/bitbucketでのwordpress管理方法(ローカル環境)

sourcetreeのつまずきポイント

 

web制作の仕事の流れとコーディング手順【web制作会社案件編】