web制作案件を受注するフリーランスは制作会社から案件受注することが多いと思いますが、ウェブ制作の流れと当たり前を知っておかないと自爆する可能性があるので説明します。
目次
web制作会社のコーディング案件の仕事の流れとは
web制作会社のコーディング案件とは
今回説明する、制作会社案件のウェブ制作とは、フリーランスが制作会社から受注してコーディングする場合のことを指しています。
制作会社からウェブ制作を受注する場合は、もともとデザインが決まっており、そのデザイン通りに指示を受けてコーディングします。
直案件より少なく受注難易度が低め
フリーランスでウェブ制作をすると、最も苦労するのは「営業」なのですが、web制作会社での受注は受注難易度が低めという点でおすすめです。
ウェブ制作フリーランスで1番難しいのは営業だと思う。
実装は要件明確にする、人に聞く、最悪発注すればできるため。
営業の一番確実な方法は近場の制作会社への営業しまくること。ただ継続的に仕事できないと切られる可能性があるのが難点。
一方、直営業やブログSNS受注は運要素が大きいのが難点— ふる (@guutenx) 2018年11月27日
低単価になるやすく要求スキルレベルが高い
一方、web制作会社でのウェブ制作は単価になりやすく、要求スキルレベルが高くなるというデメリットもあります。
低単価になるのは、web制作会社からの下請けなこと、直案件よりコーディング手順が減る（クライアントへのヒアリングなど）ためです。
要求スキルレベルが高いというのは、修正や差し戻しが多くなるということで、その分勉強になるとも言えます。
💻ウェブ制作フリーランスの営業先
メリットデメリット【制作会社】
⭕️継続案件もらいやすい、採用されやすい
✖️単価低め、要求スキルレベル高くなりがち、コーディングのみなど単体案件が多い【直案件】
⭕️企画〜開発〜SEOまで一括受注できるため単価高め
✖️継続に繋がりにくい、あっても紹介— ふる (@guutenx) 2018年10月24日
web制作の仕事の流れとコーディング手順【web制作会社案件編】
制作会社のウェブ制作の流れは4つです。
この前の段階で、フリーランスは制作会社へ案件をくれるよう営業するというステップがあります。今回はそのあとのステップを紹介します。
- 案件の打診がくる
- デザインカンプをもらう
- コーディングする
- 納品＆修正
仕事の流れ1.制作会社から案件の打診が来る
制作会社からホームページ概要と納期、金額が送られてくる
まず、制作会社からメールやチャットワークでホームページの概要と納期、金額などが送られて来ます。
デザインが作成中であったり、決まっていない場合はホームページの具体的なイメージがわからないままですが、
それが金額に見合うか、納期的に余裕があるかなどがわからない場合は、類似サイトなどを送ってもらうなどして、どの程度のレベルのサイトなのかを確認すると良いでしょう。
制作会社に見積もりを提出する
次に金額が決まっていない場合は、見積もりを提出します。
納期もはっきりと決まっていない場合は、大体どのくらいで出来そうか送ると良いですが、実際の具体的なデザインを見たり、制作会社側の仕様変更で変わるかもしれないので、その旨も伝えましょう。見積もりが決まっていない場合は、引き受けるか否かを伝えます。
見積もりに時間をかけても勿体無いので、「フリーランスが5分でweb制作の見積をする方法」を参考にしてみてください。
仕事の流れ2.制作会社からデザインカンプをもらいデザインを書き出す
実際に案件を引き受けることが決まったらデザインカンプをもらい、デザインを書き出しましょう。
デザインカンプはほぼpsdデータなので最低限のphotohopの機能を使うことができればOKです。
デザインカンプを見たらすぐに行うべきこと
駆け出しのウェブ制作フリーランスが案件受注して陥りがちなのが、
「クライアントに質問すべきことを、一人で悩んで解決しようとすること」です。
早くクライアントに質問すべきです。
悩んでる時間がもったいないのと、質問が遅れると、納期など自分の負担が重くなるのでがメリットないです😿— ふる (@guutenx) 2018年12月27日
デザインを見た時点で、疑問点を洗い出してすぐに制作会社に質問しましょう。例えば、よく見落としがちなhoverなどの動きをチェックすると良いでしょう。
疑問点は早めに聞いて解決するに越したことはないですが、コーディングをしていて都度わからない点が出てきたら、「聞くのが遅すぎるかな」などと心配せずに質問しましょう。
photoshopデザインの書き出しを行う
photoshopデザインの書き出しや文字データの取得を行いましょう。制作会社案件でよく使うphotohopの使い方は以下5つです。まずはこれだけ覚えておきましょう。
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日
仕事の流れ3.制作会社のコーディングルールに則ってコーディングする
制作会社のコーディングルールに則る
photosnopデータ通りにコーディングをすることはもちろん、制作会社のコーディングルールがある場合は、それにも則ってコーディングを行うことが大事です。コーディングルールについて制作会社から何も言われない場合でも、何かあるか最初に聞いておきましょう。
ゴロニャン
class名ルールについては制作会社でよく注意されるclass名ルールを確認してみてください。
sassは使う前提
制作会社ではsassを使う前提で考えた方が良いと思います。
何も指定されていなくとも、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日
仕事の流れ4.制作会社に納品して修正
最後に制作会社に納品して、修正がある場合は修正を行います。
納期内に提出することは絶対で、あとはphotoshopデータに則って、コーディングルールを守って制作をしましょう。
web制作会社で最低限必要なスキル5つは以下を見てみてください。
