制作会社案件でコーディングをするときに使うスキルは限られています。
なので、まずは最低限使うスキルのみをしっかり押さえておきましょう。
今回は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つのサーバー・ドメインを持っておくと、サブドメインを利用して何個でもサイトを作れるため、本番環境へアップする練習もできるし、自分のポートフォリオサイトやブログを作ることができるので持っておいて損はしないと思います。
必要なもの
- サーバー（月額1000円、初期費用3000円）
- ドメイン（年間670円）
おすすめはエックスサーバー
最も初心者向けで使いやすくコスパが良く、性能も良いのはエックスサーバーです。エックスサーバーは利用者が多いため、何かわからないことがあってもググればだいたい誰かが解説をしてくれています。
Xサーバーがホームページ作成に最適な理由は「ホームページ作成するならエックスサーバー一択【初心者向け】」の記事をご覧ください。
エックスサーバーは10日間無料でお試しキャンペーンをしています。
おすすめはお名前.com
最もメジャーで使いやすいドメインはお名前.comです。
安くて設定方法が簡単で、さらに利用者が多いためネット上に色々な設定情報が載っているからです。
具体的な方法
具体的な方法は、以下の記事が参考になると思います。
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が出来なくても制作会社の案件は受注できるはずです。
SourcetreeでのGit管理を超簡単に説明した記事
多くのSourcetreeやGitの概念の説明を無くして、超シンプルに解説した記事です。この記事の方法では、一人でソースコードをローカルで管理したいときに使えます。
ゴロニャン
ニャンニャン
SourcetreeでのGit管理をBitbucketも使って行う方法を説明した記事
制作会社で実際にSourcetreeを使うときは、Bitbucketでオンライン連携して使うことが多いと思います。
この記事では、簡単に、Bitbucketでオンライン連携しながらSourcetreeでソースを管理する方法を解説しています。
この記事ではWordPressの管理方法を書いていますが、WordPress以外でもこの方法で管理が出来ます。
Sourcetreeのつまずきポイント
GitツールSourcetreeでpull、pushしようとすると「Invalid username or password」が出たとき
1.Sourcetree＞環境設定＞高度な設定でアカウント消す
2.Sourcetree＞環境設定＞アカウントから追加押して自分のアカウント追加もし1がなければ2だけでOK pic.twitter.com/eg0d0iFnuW
— ふる (@guutenx) 2019年1月24日
Web制作会社のスキルまとめ
Web制作会社で仕事をする必要最低限のスキルを紹介しました。
実際の仕事の流れを知りたい方は以下の記事をどうぞ。
