制作会社案件でコーディングをするときに使うスキルは限られています。なので、まずは最低限使うスキルのみをしっかり押さえておきましょう。
今回は制作会社でコーディング案件のみを行う場合に必要なスキルを回答します。
目次
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からのデザイン書き出し方法を学びましょう。
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日
sassが書ける
sassはweb制作案件で必須とも言っても良いもので、cssを効率的に書く方法です。
cssとは別のsassファイルにコードを書いて、最終的にcssに変換させます。
Progateにたくさん講座がありますが、最低限ネスト、変数表記、コンパイルというファイル変換方法ができるようになっておけばOK。
本を買わなくても済むくらいシンプルです。
本だと実務で使わないような詳細な知識がたくさん載っているので、勉強に時間がかかります。
✔️Sassコピペシート
制作会社から受注するウェブ制作案件では、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日
