Web制作でコーディング以外に最低限必要なスキル3選【具体的な制作案件の流れ付き】

コーディング

こんにちは、TERUです。
SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。

プログラミング初学者Aさん

プログラミング初学者Aさん「制作案件では、コードを書く以外にどんな作業が発生するの?実際の仕事は、どんな流れなのか知りたい。。。」

本記事では、こういった疑問に答えます。

最近は、WEB制作をするために必要なコーディングのスキルについて、Progateやドットインストールなど勉強できる環境は整っています。

独学での勉強方法については、下記の記事にまとめています。

ただ、実際に制作会社からWEB制作(コーディング案件)を依頼された際にコーディング以外のスキルも必要になり、作業の流れを把握しておかないと初めの頃は苦労することが多いと思います。

そこで、僕の制作会社案件(コーディング)の経験をもとに、コーディング以外で最低限必要になるスキルと作業の流れを説明します。初めて案件に挑戦する方のお役に立てば嬉しいです。

目次

本記事の信頼性

  • 制作会社でWEBディレクターとしての勤務経験あり
  • 自身も現在フリーランスとして制作会社案件も対応している。
  • Webディレクター+エンジニアでだいたい月収50万

スポンサードサーチ

Web制作でコーディング以外に最低限必要なスキル3選

パソコンの絵が描かれたブロック

結論として、コーディングスキルがいくら優れていても、それだけでは制作会社案件は対応できません。
なぜなら、実際の案件作業ではコーディングスキル以外にも最低限、必要なスキルがいくつかあるからです。ここでは、僕がこれまで制作会社案件を経験してきた中でコーディングスキル以外に最低限必要なスキルを紹介いたします。
具体的には以下の3つのスキルが必要です。

  • ファイル操作(ダウンロード/アップロード)
  • サーバ環境設定
  • デザインデータからの情報取得

1つずつ詳細を解説いたします。

ファイル操作(ダウンロード/アップロード)

WEB制作では、サーバ上にある制作ファイル(html,css等)をダウンロード&編集して、再度アップロードしてインターネット上に公開する必要がありますので、ファイルのアップロード/ダウンロードの操作が必須になってきます。よく使う方法としてはFTPソフトを利用したファイル操作です。
※FTPとは、サーバーとクライアント間でファイルを送受信するプロトコル(規格)です。
※僕がよく利用しているのはFileZillaという無料ソフトでMacとWindowsに対応しています。

下記のサイトは、レンタルサーバ毎にFioleZillaの使い方が記載されているので便利です。

 

 

サーバ環境設定

制作会社案件では、レンタルサーバでの操作も含めて依頼される場合があります。
例えば、下記のような作業です。

  • SSL設定(http→https)
  • 独自ドメインの紐付け
  • WordPressのインストール

僕がこれまで経験した中では、エックスサーバーを利用した案件が一番多かったです。
月額1000円程で契約できるので、自分でX-Server上にポートフォリオを公開することで手っ取り早くスキルを学習できます。
» 参考:ローカル環境で作成したポートフォリオサイトの公開方法【WEB初学者向け】

制作会社からの信頼を得る為にも、事前にサーバ周りのスキルは身に付けておきましょう。

デザインデータからの情報取得

WEB制作は、基本的にデザインデータを基にコーディング作業を行っていきます。
デザイナーが作ったデザインデータから、正確にコーディング情報を把握する必要があります。Progateでの学習やサイト模写しか経験がないと、この辺のスキルが足りてないので事前に身に付けておく必要があります。

僕の経験上、主にPhotoshopのデザインデータ(PSD)で作業することが多いですが、XDやIllustratorも最近増えてきている為、基本的な操作は把握しておいた方が良いです。
具体的には以下の3つです。

  • 画像の書き出し
    →デザインデータからコーディングに使用する画像を書き出す作業です。
  • 文字情報の取得
    →デザインデータからコーディングに使用する文字情報を取得
    font-family,font-size,font-weight,line-height,letter-spacing,color等
  • 要素の測定
    要素の横幅(width),縦幅(height)を測る

PhotoShopデータからのコーディング方法

Adobe XDデータからのコーディング方法

おまけ

  • 画像の修正(サイズ調整、色調補正、ぼかし)
    →必須ではないですが、案件によってはコーディング時に画像の修正を依頼される場合もあります。

スポンサードサーチ

最低限押さえておきたいWeb制作(コーディング)案件の流れ

タスク整理をする二人
基本的に制作会社案件(コーディング)の作業の流れについては、どこも同じです。
ここでご紹介する作業の流れを把握しておけば十分です。
具体的に制作会社案件(コーディング)の作業の流れを下記に説明します。

  1. デザインデータ+環境情報を受け取る
  2. 環境構築
  3. コーディング作業
  4. チェック作業(制作会社さん)
  5. 修正作業1回目
  6. チェック作業(クライアントさん)
  7. 修正作業2回目

STEP1:デザインデータ+環境情報を受け取る

まずは、制作会社さんからコーディングを始める為に必要なデザイン情報と環境情報を提供してもらいます。
ここで環境へのログイン確認や、コーディングする際にデザイン的に問題がある場合は早めに共有・相談しておくことが大事です。

STEP2:環境構築

環境構築も作業範囲に含まれている場合は、このタイミングでWordPressインストールやドメイン設定などサーバ周りの環境構築作業を実施します。

STEP3:コーディング作業

ここでようやくコーディング作業になります。コーポレートサイト(10P程度)であれば大体2〜3週間の作業期間ですので、1週間毎に定期的に制作会社さんに進捗報告を入れるようにしましょう。
進捗報告は、最低限以下の3点を記載して報告します。

  • 現状の進捗
  • 来週の予定
  • その他(相談事項等)

僕の経験上、コーディング中に気になった点(ホバーアクションやお問合せ先など)は細かく確認しておくことで手戻りを少なくできます。
※僕もディレクションで作業を依頼する側の時は、定期的に報告くれる方とは、すごく仕事がやりやすいです。
技術スキルよりも相手に配慮できるコミュニケーションスキルが圧倒的に重要です!

STEP4:チェック作業(制作会社さん)

コーディング作業の完了後は制作会社側でチェックして頂きます。

STEP5:修正作業1回目

制作会社側からの修正事項に対応していきます。

STEP6:チェック作業(クライアントさん)

クライアント側でチェックして頂きます。

STEP7:修正作業2回目

クライアント側からの修正事項に対応していきます。
※この段階で写真や文言の差し替え等が発生する場合もあります。

新規サイト案件の場合は、ここで作業完了です。
リプレース案件の場合は、この後移行作業を実施して完了になります。

案件によって、細かい点の違いはありますが、
以上が最低限押さえておきたいWEB制作(コーディング)案件の作業の流れです。

スポンサードサーチ

まとめ

本文にも記載しましたが、結局仕事は人とのやり取りなので、コミュニケーションスキルが重要です。いくら技術スキルが高くても、この人とはコミュニケーションコストが掛かるなと思われてしまうと継続案件には繋がりません。

今回は、制作会社案件(コーディング)を対応する上で、コーディング以外に必要な最低限のスキルと作業の流れについて解説しました。

僕も数多くの制作会社案件(コーディング)を経験しましたが、概ね本記事の流れで作業しています。

これから案件作業をやってみようという方の参考になれば嬉しいです。
何かご質問がありましたら、気軽にご連絡ください。

スポンサードサーチ