制作会社案件でコーディングをするときに使うスキルは限られています。なので、まずは最低限使うスキルのみをしっかり押さえておきましょう。
今回は制作会社でコーディング案件のみを行う場合に必要なスキルを回答します。
目次
web制作会社案件で最低限必要なスキル5つ
- HTML、CSS、jQueryが書ける
- 模写コーディングを含め、サイトを作った経験がある
- sassが書ける
- photoshopでデザインデータの書き出しができる
- SEOを意識したコーディングができる
HTML、CSS、jQueryが書ける
具体的には、HTML、CSS、jQueryが書けるということです。
phpが書けなかったり、wordpressが出来なくとも、HTML、CSS、jQueryが書ければ静的サイトを作る案件を受注できる可能性が高いです。
とにかく速く受注したいという人は、HTML、CSS、jQueryをprogateでしっかりやっておくと良いです。
模写コーディングを含め、サイトを作るスキルがある
progateだけで、いきなり案件を受注するのは無理なので、模写コーディングをする、架空サイトを作ってみる、ポートフォリオサイトを作ってみるなどして形にできるサイトを作ってみましょう。
制作会社に営業メールを送るときに使えたり、面談してスキルレベルを掴むために提出を求められる場合があるます。
模写コーディングをするときは、以下を参考にしてみてください。ここでは文字のサイズなどは練習レベルでは適当で良いと書いていますが、提出するときは見本サイト通りに合わせるのが無難です。
photoshopデザインデータの書き出しのスキルがある
制作会社でデザインがくるときはほとんどがphotoshopデータなので、photoshopからのデザイン書き出し方法を学びましょう。
photoshopで要素の長さを測る
【プログラマー向け最低限のデザイン技術③】
💡photoshopで要素の長さを測る
Photoshopデータとpx単位で長さを揃えてコーディングしてと言われます
1.photoshopデータを開き定規を選択
2.上部グリッド→pixelを選択
3.長方形ツール選択
4.測りたいデータの大きさに合わせて長方形作成→長さ測る pic.twitter.com/xTH7WHd6JV— ふる🇹🇭 (@guutenx) 2018年8月23日
photoshopから画像を切り出す
【web制作時の知っとくべきphotoshop活用方法】
🔶psdデータから画像を切り取ってウェブ制作する方法(画像書き出し方法)
1⃣レイヤーを選択
2⃣対象の画像を右クリック
3⃣pngとしてクイック書き出し
4⃣画像保存
顧客からphotoshopデータしか送られてこない(画像データ送られてこない)場合使えます pic.twitter.com/UayQ9WL6qZ— ふる🇹🇭 (@guutenx) 2018年7月24日
photoshopから文字の情報を抜き出す
ウェブ制作初心者向け、コーディングを行う場合の
【photoshopの文字フォント、サイズなどを2秒で得る方法】1.左の選択マークで対象の文字をクリック
2.キーボードのF8をクリックする
3.フォント、サイズ、行間、文字の間隔、文字色がわかります
特に制作会社案件では上記項目の数字反映しましょう pic.twitter.com/8NrorKHVZG— UXふる (@guutenx) 2018年12月28日
photoshopで文字間の感覚を測る
psd通りにコーディングするために見落としがち
🧐文字間の間隔（letter-spacing）1.対象の文字をクリック→F8で要素見るhttps://t.co/5wBnNfHkmmと書いてある部分の数字/1000でemを算出
例：170/1000=1.7emなのでletter-spacing:1.7em;になる pic.twitter.com/I97jLJJtsS
— ふる (@guutenx) 2019年1月25日
photoshopで文字の行間を測る
psd通りにコーディングするために見落としがち
🧐行間（line-height）1.対象の文字をクリック→F8で要素見る
2.行送り/フォントサイズで算出フォントサイズ：22px 、行送り：44pxの場合
44/22=2なのでline-height:2;になる pic.twitter.com/iWCS0aUV8N— ふる (@guutenx) 2019年1月25日
web制作会社案件で使うsassスキルがある
ウェブ制作フリーランスで、ある程度スキルついたけど案件ない人は、sass勉強しましょう。
個人的に一番案件受注確率が高いと思う制作会社案件でほぼ必須です。
最低限ネスト、変数表記とコンパイルというファイル変換方法(コアラというアプリで一瞬)覚えとけばok👍
progateに講座あります。
— ふる (@guutenx) 2018年12月6日
✔️Sassコピペシート
制作会社から受注するウェブ制作案件では、sass(cssを簡略化して表記する方法)を使うことが多いです
このシートでは左がsass、右がcss表記なので分かりやすいはず💡https://t.co/TJxpHCgfjD pic.twitter.com/c7vjIOggxX
— ふる (@guutenx) 2018年11月9日
SEOを意識したコーディングができるスキル
単純にコーディングするのではなく、SEOを意識したコーディングができることが必要です。
例えば以下のようなコーディングが挙げられます。
- h2やh3タグを適切に使用しているか
- 画像のaltタグにテキストを入れているか
- 画像を使いすぎていないか
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日
