こんにちは、TERUです。
SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。
プログラミング初学者Aさん制作案件では、コードを書く以外にどんな作業が発生するの？実際の仕事は、どんな流れなのか知りたい。。。
本記事では、こういった疑問に答えます。
最近は、WEB制作をするために必要なコーディングのスキルについて、Progateやドットインストールなど勉強できる環境は整っています。
ただ、実際に制作会社からWEB制作（コーディング案件）を依頼された際にコーディング以外のスキルも必要になり、作業の流れを把握しておかないと初めの頃は苦労することが多いと思います。
そこで、僕の制作会社案件（コーディング）の経験をもとに、コーディング以外で最低限必要になるスキルと作業の流れを説明します。初めて案件に挑戦する方のお役に立てば嬉しいです。
そもそもコーディングって何？どんな働き方や学習方法があるの？という事が気になる方は「コーディングとは？働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。
本記事の信頼性
- 制作会社でWEBディレクターとしての勤務経験あり
- 自身も現在フリーランスとして制作会社案件も対応している。
- Webディレクター＋エンジニアでだいたい月収50万
Web制作でコーディング以外に最低限必要なスキル３選
結論として、コーディングスキルがいくら優れていても、それだけでは制作会社案件は対応できません。
なぜなら、実際の案件作業ではコーディングスキル以外にも最低限、必要なスキルがいくつかあるからです。
ここでは、僕がこれまで制作会社案件を経験してきた中でコーディングスキル以外に最低限必要なスキルを紹介いたします。
具体的には以下の３つのスキルが必要です。
- ファイル操作（ダウンロード/アップロード）
- サーバ環境設定
- デザインデータからの情報取得
１つずつ詳細を解説いたします。
ファイル操作（ダウンロード/アップロード）
WEB制作では、サーバ上にある制作ファイル（html,css等）をダウンロード＆編集して、再度アップロードしてインターネット上に公開する必要がありますので、ファイルのアップロード/ダウンロードの操作が必須になってきます。よく使う方法としてはFTPソフトを利用したファイル操作です。
※FTPとは、サーバーとクライアント間でファイルを送受信するプロトコル（規格）です。
※僕がよく利用しているのはFileZillaという無料ソフトでMacとWindowsに対応しています。
下記の記事で、FileZillaの使い方をまとめています。
サーバ環境設定
制作会社案件では、レンタルサーバでの操作も含めて依頼される場合があります。
例えば、下記のような作業です。
- SSL設定（http→https）
- 独自ドメインの紐付け
- WordPressのインストール
制作案件の中では、WordPress案件が一番需要があります。
WordPress環境が利用できるレンタルサーバーを自分で契約して触ってみるのがオススメです。
※どのレンタルサーバでも月額1000円程で契約できます。
制作会社からの信頼を得る為にも、事前にサーバ周りのスキルは身に付けておきましょう。
TERU自分のポートフォリオサイトなどでホームページを公開する作業を実践することが一番身につきます。
デザインデータからの情報取得
WEB制作は、基本的にデザインデータを基にコーディング作業を行っていきます。
デザイナーが作ったデザインデータから、正確にコーディング情報を把握する必要があります。Progateでの学習やサイト模写しか経験がないと、この辺のスキルが足りてないので事前に身に付けておく必要があります。
デザインデータで多いのは下記の3パターンです。
- PSDデータ（Photoshop）からのコーディング
- XDデータ（Adobe XD）からのコーディング
- FIGデータ（Figma）からのコーディング
IllustratorやPhotoshop、XDなどWEB制作では、普段からAdobe製品を使用します。
複数のAdobeソフトを利用する場合、Adobe CCを契約することで費用を節約できます。
さらに、Adobe CCを通常価格よりもお得に購入したい場合は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。
既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC（学生教職員版）に乗り換えることで、年間4万円以上お得になります。
各デザインデータのコーディング情報の取得方法については、こちらを参考にしてください。
コーディング作業には、スキル以外に普段から利用するツールも重要になります。
コーディングを助ける便利ツールはこちら！
最低限押さえておきたいWeb制作（コーディング）案件の流れ
基本的に制作会社案件（コーディング）の作業の流れについては、どこも同じです。
ここでご紹介する作業の流れを把握しておけば十分です。
具体的に制作会社案件（コーディング）の作業の流れを下記に説明します。
- デザインデータ＋環境情報を受け取る
- 環境構築
- コーディング作業
- チェック作業（制作会社さん）
- 修正作業１回目
- チェック作業（クライアントさん）
- 修正作業２回目
STEP1：デザインデータ＋環境情報を受け取る
まずは、制作会社さんからコーディングを始める為に必要なデザイン情報と環境情報を提供してもらいます。
ここで環境へのログイン確認や、コーディングする際にデザイン的に問題がある場合は早めに共有・相談しておくことが大事です。
STEP2：環境構築
環境構築も作業範囲に含まれている場合は、このタイミングでWordPressインストールやドメイン設定などサーバ周りの環境構築作業を実施します。
STEP3：コーディング作業
ここでようやくコーディング作業になります。コーポレートサイト（１０P程度）であれば大体２〜３週間の作業期間ですので、１週間毎に定期的に制作会社さんに進捗報告を入れるようにしましょう。
進捗報告は、最低限以下の３点を記載して報告します。
- 現状の進捗
- 来週の予定
- その他（相談事項等）
僕の経験上、コーディング中に気になった点（ホバーアクションやお問合せ先など）は細かく確認しておくことで手戻りを少なくできます。
※僕もディレクションで作業を依頼する側の時は、定期的に報告くれる方とは、すごく仕事がやりやすいです。
（技術スキルよりも相手に配慮できるコミュニケーションスキルが圧倒的に重要です！）
STEP4：チェック作業（制作会社さん）
コーディング作業の完了後は制作会社側でチェックして頂きます。
STEP5：修正作業１回目
制作会社側からの修正事項に対応していきます。
STEP6：チェック作業（クライアントさん）
クライアント側でチェックして頂きます。
STEP7：修正作業２回目
クライアント側からの修正事項に対応していきます。
※この段階で写真や文言の差し替え等が発生する場合もあります。
新規サイト案件の場合は、ここで作業完了です。
リプレース案件の場合は、この後移行作業を実施して完了になります。
案件によって、細かい点の違いはありますが、
以上が最低限押さえておきたいWEB制作（コーディング）案件の作業の流れです。
まとめ
本文にも記載しましたが、結局仕事は人とのやり取りなので、コミュニケーションスキルが重要です。いくら技術スキルが高くても、この人とはコミュニケーションコストが掛かるなと思われてしまうと継続案件には繋がりません。
今回は、制作会社案件（コーディング）を対応する上で、コーディング以外に必要な最低限のスキルと作業の流れについて解説しました。
僕も数多くの制作会社案件（コーディング）を経験しましたが、概ね本記事の流れで作業しています。
これから案件作業をやってみようという方の参考になれば嬉しいです。
以上です。